Google ドキュメントビューアで PDF を埋め込む。特定ページを開くための URL.

1. Google ドキュメントビューアーで PDF ファイルを開く

PDF ファイルを、ブラウザに組込まれたプラグインを使わずに開くときは、

• Google ドキュメントビューア

を利用する。

Google ドキュメント - ビューア via kwout

ブラウザのデフォルトの動作として、 PDF ファイルを上記サービスで開きたいときは、Userscripts.org にある Greasemonkey スクリプトをインストールしておく。

 

2. PDF ファイルを示す URL の末尾でページを指定する

特定のページを開きたい

Google ドキュメントビューア で生成したリンクを開くと、PDF の「最初のページ」が開かれる。

特定のページを指定したい場合はどうするのだろう？

• How do I target a specific page in a PDF document with Google Docs viewer?

によると、例えば、

• http://www.scala-lang.org/docu/files/ScalaReference.pdf

を Google ドキュメントビューア を利用して開く場合のリンクは、

• http://docs.google.com/viewer?url=http%3A%2F%2Fwww.scala-lang.org%2Fdocu%2Ffiles%2FScalaReference.pdf

となる。

 

ページを指定する URL

3 ページ目を指定して開きたいときは、URL の末尾に

&embedded=true#:0.page.2

を追加する。

• http://docs.google.com/viewer?url=http%3A%2F%2Fwww.scala-lang.org%2Fdocu%2Ffiles%2FScalaReference.pdf&embedded=true#:0.page.2

ページは最後の数字で示される。1 ページ目は 0 からはじまる。

よって、開きたいページから 1 引いた数を指定する。

 

3. ウェブサイトに PDF ファイルを埋め込む場合

ウェブサイトに PDF を埋め込む場合、iframe タグを使う。

上記の例の場合、

<iframe src="http://docs.google.com/viewer?url=http%3A%2F%2Fwww.scala-lang.org%2Fdocu%2Ffiles%2FScalaReference.pdf&embedded=true&embedded=true" width="600" height="780" style="border: none;"></iframe>

 

ページを指定する URL

特定ページを開くための URL は、iframe タグの src 属性の末尾に

#:0.page.2

を追加する。

<iframe src="http://docs.google.com/viewer?url=http%3A%2F%2Fwww.scala-lang.org%2Fdocu%2Ffiles%2FScalaReference.pdf&embedded=true&embedded=true#:0.page.2" width="600" height="780" style="border: none;"></iframe>

 

4. ブラウザ内で開く PDF ファイルに対して、ページ指定をしたリンクを作成には

追記 (2011.3.16) : 普通にブラウザ内で PDF ファイルを開く場合、特定のページを指定したリンクを作成するには、PDF ファイルのリンクの末尾に、

#page=ページ数

を追加する。例えば、

• http://www.scala-lang.org/docu/files/ScalaReference.pdf

の 3 ページ目を表示させるリンクは、

• http://www.scala-lang.org/docu/files/ScalaReference.pdf#page=3

( 参考： PDFファイルに対するページ指定ハイパーリンク - 繰り言 )

アメブロで YouTube、ニコニコ動画を貼り付ける

0. 目次

アメブロで、動画サイトにある動画を、ブログの記事に埋め込みたい。

最初に Youtube の動画を埋め込むための、２つの方法を説明する。

• ワンクリックで Youtube の動画を新規記事に投稿する場合 … 1
• 手動で Youtube の埋め込みコードを貼り付ける場合 … 2

Youtube 以外の動画サイトでは、埋め込みコードの取得方法が違うだけで、その他の手順は同じ。

動画サイトによっては、ワンクリックで投稿するためのボタンが用意されている場合もある。

• ニコニコ動画を埋め込む場合 … 3

 

1. ワンクリックで Youtube の動画を新規記事に投稿する場合

新規記事として動画を投稿したい場合、最初に YouTube で動画を表示する。

1. 動画の下にある「共有ボタン」を押す。
2. 右下にボタンが表示されたら、「その他」を選択する。
3. Ameba のボタンをクリック。

これにより、アメブロのエディタがポップアップする。

 

a. 新エディタを使っている場合

タイトルを入力し、下にある「表示の確認をする」をクリックすると、動画を確認できる。

 

b. 標準エディタ、タグ編集エディタを使っている場合

タグ編集エディタが表示されるので、タイトルを入力し、左下の「プレビュー」ボタンをクリックすると、動画を確認できる。

 

2. 手動で Youtube の埋め込みコードを貼り付ける場合

既に記事を作成している場合や、複数の動画を投稿したい場合、コードを手動で埋め込む必要がある。

最初に、YouTube で、貼り付けたい動画を表示させる。

1. 動画の下にある「埋め込みコード」ボタンを押すと、
2. その下のフィールドに、動画を埋め込むためのコードが表示されるので、コピーする。

次に、アメブロで、「ブログを書く」の画面を開く。

 

a. 新エディタを使っている場合

1. 記事を書く領域の上にある「HTML表示」を選択する。
2. コピーしたコードを貼り付ける。

「通常表示」を選択すると、埋め込んだ動画がアイコンとして表示される。

 

b. 標準エディタ、タグ編集エディタを使っている場合

最初に、標準エディタを使っている場合、タグ編集エディタに変更する。そのために、エディタの上部に表示されている

YouTubeなどのコンテンツを貼り付けるには、こちらをご利用ください。

の「こちら」をクリックする。

タグ編集エディタが表示されたら、

1. 先ほどコピーしたコードを、貼り付ける。
2. 「プレビュー」ボタンを押す。

3. ニコニコ動画を埋め込む場合

ニコニコ動画の場合、埋め込みたい動画を表示したら、右下の「共有」ボタンを押す。

• ニコニコ動画では、ワンクリックで動画を投稿する方法が用意されている。 … 2-a
• 手動で埋め込みたい場合、右下のコードをコピーして、貼り付ける。 … 2-b