03P PDF をページに埋め込む:Google ドライブを使う
PDF を Jimdo サイト内のページに埋め込み、表示する方法を紹介します。
Google ドライブを利用して埋め込む方法(参照当ページ:03P PDF埋込:Googleドライブ)と、2020年になって、POWr PDF Embed プラグインを使う方法(参照:03P PDF埋込:POWrアドオン)もできるようになりました。
Googleドライブを使用する場合は、表示する PDF の幅と高さを調整できる。
これにより PDF の各ページが見やすいように表示幅を設定したり、ページの高さに合わせて表示の高さを設定すれば、PgUp/PgDn ボタンなどでページの切り替えが可能となります。
一方、POWr アドオン使用の場合は、表示の幅は固定されており、スクロールしながら閲覧することになります。
当ページでは、Google ドライブを利用して PDF を Jimdo サイト内のページに埋め込み、表示する方法を紹介します。
Google ドライブとGoogle アカウントについて
Google ドライブと、Google アカウントについては、当サイトの関連資料の中の Y10 Google ドライブを参照する。
Googleドライブのセキュリティ向上のための仕様変更
Googleドライブのセキュレイティアップデートが、2021年9月から有効になっております。場合によっては、これまで表示されていた共有ファイルから「アクセス権」を求められる場合があるかもしれないということです。
しかし、以下の記述もあります。
If you use Drive with your personal Gmail account, the security update is applied by default and no action is required.
すなわち、個人のGoogleアカウントでドライブを使う場合には、セキュリティ更新が自動的に適用されるので、特別の対応は必要ない、とあります。
実際にはリンクのURLはこのようになっています。
<iframe src="https://drive.google.com/file/d/XXXXXXXXXX/preview?resourcekey=0-XXXXXXXXXX" width="50%" height="500"></iframe>
URL に resourcekey が埋め込まれています。
事前準備
Google アカウントを獲得する
Googleドライブ は、Google Inc. が提供するオンラインストレージサービスです。ご利用には Google のアカウントが必要なため、まだお持ちでない場合は 無料登録 からはじめましょう。
当サイト内 Y11 Google アカウント に取得方法が示されています。
埋め込みコードファイルを個人フォルダーに保存する
埋め込むには、埋め込み用コードを手入力することになるが、手入力作業を間違いなく行うために基本部分をコピー&貼り付けで行えるよう、埋め込みコードを用意する。
勉強会などでは、あらかじめ埋め込み用コードが記入された「PDF埋め込みソース.txt」ファイルが共有フォルダー内の文書フォルダーにあるので、このファイルを個人用フォルダーにコピーしておく。
※ コピー用の埋め込みコード文書を用意するのは必須でなく、用意しなくとも埋め込みはできる。その方法については、埋め込み手順(埋め込みコードを用意しないで行う)方法の中で紹介する。
PDF 埋め込みコード
Jimdo ページへの埋め込みには、下記のコードを使います。
<iframe src="https://drive.google.com/file/d/
個別ID/preview" width="横幅" height="高さ"></iframe>
当コードはメモ帳「PDF 埋め込みソース.txt」ファイルに入力しておいて、後で判明する「個別ID」と、表示の「横幅」「高さ」の値を置き換えて完成させます。
完成したコード全体は、Jimdo ページの該当箇所にコピー&貼り付けして使用できるようになります。
PDF の埋め込み手順(埋め込みコードを別途用意しておく方法)
❶ Google にログインする - [ログイン]ボタンがある場合
Google にログイン
Google Chrome を起動してGoogle にログインしようとするとき、[ログイン]ボタンが表示されているときと、表示されていないときがある。
[ログイン]ボタンが表示されているときは、まだログインされていない状態なので、ステップ➊からの操作を行う。
[ログイン]ボタンが表示されていない時は、既にログインされている状態なので、ステップ➌からの操作を行う。
※[ログイン]ボタンが無い場合は、➌ からの操作を行う。
1)Google Chrome を起動し、「ログイン」をクリックする
⇩
2)一覧から登録済み Google アカウントを選択、あるいは新規作成し、
3)パスワードを入力する。
❷ Google アプリから「ドライブ」を選ぶ
① Google アプリをクリックし、
②「ドライブ」をクリックする。
Google ドライブ(マイドライブ)が開く。
⇒ 次の➌をスキップして❹へジャンプする。
➌ Google ドライブにログインする - [ログイン]が表示されてない場合
※[ログイン]ボタンが表示されている場合は、➊ から開始する
① Google アプリをクリックし、
②「ドライブ」をクリックし、選択する。
⇩
Google アカウントでログインする
アカウントIDを入力する(「アカウントの選択」が表示される場合は、該当アカウントを選択する)
パスワードを入力し[次へ]をクリックする
⇩
Google ドライブ(マイドライブ)が開く。
❹ 埋め込むファイルをアップロードをする
1)マイドライブでアップロードを開始する:
① 左側メニュー「マイドライブ」上で右クリックしメニューを表示し、
あるいは、「マイドライブ▼」をクリックして、
②「ファイルをアップロード...」をクリックする。
⇩
2)「開く」ダイアログでフォルダー/ファイルを指定:
③ PDF文書が保存されているフォルダーを表示し、
④ 埋め込む PDF ファイルを選択し、
⑤「開く」をクリックする
⇩
3)マイドライブに PDF ファイルがアップロードされる。
ファイルのアップロードの別の方法
上で述べた方法以外に、「+新規」から「ファイルのアップロード」で、PDFをGoogleドライブにアップロードする方法もある。
❺ PDF ファイルのリンクを取得する
1)アップロードされた PDF ファイルについて:
① 右クリックし、
② メニューから「共有」をクリックする
⇩
2)リンクを取得パネルが表示される
注意:
「変更」が表示される場合には、これをクリックして「リンクを知っている全員」が表示される「リンクを取得」画面を表示する
リンクを取得内に「リンクを知っている全員」と表示されているのを確認する。
「リンクをコピー」をクリックする。
”リンクはクリップボードにコピーされました”メッセージが表示される。
ここからジンドゥー側の作業になる。「完了」ボタンを押して Google ドライブ側の作業を完了する。
❻ 個別IDを入力した <iframe> ~ </iframe> コードを完成する
Jimdo ページの埋め込みには、下記のコードを使います。
<iframe src="https://drive.google.com/file/d/
個別ID/preview" width="横幅" height="高さ"></iframe>
1)取得した共有リンクをコピーする
① 表示された URL を選択し、
② キーボードの【Ctrl】キーを押しながら 【C】キーを押してコピーする
2)個人フォルダーに用意されている、埋め込みソースのメモ帳を開きます。
③ 個人フォルダー内、「文章」フォルダーにある「PDF埋め込みソース」をダブルクリックで開く。
⇩
3)ソースコードのメモ帳に、コピーしたURLを貼り付ける:
⑤ 入力されているオリジナルコードの下数行目に並ぶように、【Ctrl】キーと【V】キーを押して、コピーしたコードを貼り付ける。
4)個別IDを置き換える:
⑥ 貼り付けたURLリンクの id= 以下のコードをコピーし、
⑦ オリジナルコードの「個別ID」を選んで貼り付ける(【Ctrl】キー+【V】キー)。
⇩
5)個別IDが置き換わった:
6)「横幅」「高さ」には任意の数字を入れる:
A4 サイズ;
width="595" height="847
B5 サイズ;
width="516" height="729"
但しこれらの値はPDFを埋め込むJimdoページの横幅次第です。
例えばコンテンツエリアの横幅が900pxの場合は:
width="900" height="1160"
などとして、表示を確認しながら値を調整することもできます。
❼ Jimdo にログインし、PDFファイルを表示する
1)PDF を表示する場所で「コンテンツを追加」>「その他コンテンツ&アドオン」をクリックする。
2)「PDF埋め込み」をクリックする。
⇩
3)❻ の6)で完成させたコードを、ボックスに貼り付け、「保存」する
PDFの埋め込み手順(埋め込みコードを用意しないで行う)
ここでは埋め込みコード文書を別途用意しないでも埋め込みを行う方法を紹介する。
埋め込みコードは、埋め込みボックス内で直接変更して完成させる。
➊ Jimdo ページの埋め込み箇所で[PDF埋め込み]を設定しておく
1)PDF を表示する場所で「コンテンツを追加」>「その他コンテンツ&アドオン」をクリックする。
2)「ウィジェット/HTML」をクリックする。
3)「ウィジェット/HTML」の中に以下のコードをコピーして、貼り付けて準備しておく。
<iframe src="https://drive.google.com/file/d/個別ID/preview" width="50%" height="500"></iframe>
Jimdo ページはこのままにし、ブラウザの別タブで Google ドライブ側の操作を行う。
➋ Google ドライブで、PDFをアップロードし、コードをコピーする
「PDF埋め込み手順(埋め込みコードを別途用意する)」の ➊ から ❺ まで行う。
「リンクがクリップボードにコピーされました」メッセージが出た後、Jimdoページに戻り以下のステップを行う。
➌ 埋め込みコードを完成する
①下部ボックス内に、可視をよくするために先に埋め込んだ埋め込みコードから少し離して[Ctrl]+[V]キーを押してGoogle ドライブからのコードを貼り付ける
② 貼り付けた Google ドライブ コードから、埋め込みコードの[個別ID]部分を置き換える
③ 「width」「height」内の ""(ダブルクォーテーション)部分に数値を入れると表示サイズが変更可能。
🔰 サイズ変更後の確認はその都度「保存」ボタンを押して確認すること。
⑤ Google ドライブから取得して貼り付けた URL コードは、削除する
⑥[保存]をクリックする。
上記⑤にあるように、Google ドライブからコピーしたコードは削除する。
以上で PDF 埋め込みは完了。