SAMPLE IMAGE この画像は差し替えてご利用ください

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」ファイルが共有フォルダー内の文書フォルダーにあるので、このファイルを個人用フォルダーにコピーしておく。

jdg03P_14:PDF埋め込みソース.txt ファイルを個人用フォルダーにコピーする
jdg03P_14: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 を起動し、「ログイン」をクリックする

jdg03P_02:Google にログインできた
jdg03P_02:Google にログインできた

2)一覧から登録済み Google アカウントを選択、あるいは新規作成し、

 

3)パスワードを入力する。

❷ Google アプリから「ドライブ」を選ぶ

jdg03P_03:Google ドライブを選択する
jdg03P_03:Google ドライブを選択する

Google アプリをクリックし、

 

ドライブをクリックする。

 

 

Google ドライブ(マイドライブ)が開く。

 

⇒ 次の➌をスキップして❹へジャンプする。

➌ Google ドライブにログインする - [ログイン]が表示されてない場合

※[ログイン]ボタンが表示されている場合は、➊ から開始する

jdg03P_17:Google ドライブを選択する
jdg03P_17:Google ドライブを選択する

Google アプリをクリックし、

 

ドライブをクリックし、選択する。

 

 

 

Google アカウントでログインする

 

アカウントIDを入力する(「アカウントの選択」が表示される場合は、該当アカウントを選択する)

 

パスワードを入力し[次へ]をクリックする 

 

 

Google ドライブ(マイドライブ)が開く。

❹ 埋め込むファイルをアップロードをする

jdg03P_04:埋め込むファイルをアップロードする
jdg03P_04:埋め込むファイルをアップロードする

1)マイドライブでアップロードを開始する:

 

① 左側メニューマイドライブ」上で右クリックしメニューを表示し、

あるいは、「マイドライブ▼」をクリックして、

 

ファイルをアップロード...をクリックする。

jdg03P_05:埋め込むファイルを選択し開くする
jdg03P_05:埋め込むファイルを選択し開くする

2)「開く」ダイアログでフォルダー/ファイルを指定:

 

 PDF文書が保存されているフォルダーを表示し

 

 埋め込む PDF ファイルを選択し、

 

開く」をクリックする

jdg03P_18:アップロード完了メッセージ
jdg03P_18:アップロード完了メッセージ

3)マイドライブに PDF ファイルがアップロードされる。

 

 

 

 

 

ファイルのアップロードの別の方法

上で述べた方法以外に、「+新規」から「ファイルのアップロード」で、PDFをGoogleドライブにアップロードする方法もある。

❺ PDF ファイルのリンクを取得する

jdg03P_06:アップロードしたPDFファイルのリンクを取得
jdg03P_06:アップロードしたPDFファイルのリンクを取得

1)アップロードされた PDF ファイルについて:

 

 右クリックし

 

メニューから「共有」をクリックする

jdg03P_07:取得した共有リンクが表示される
jdg03P_07:取得した共有リンクが表示される

2)リンクを取得パネルが表示される

 

注意:

変更」が表示される場合には、これをクリックして「リンクを知っている全員」が表示される「リンクを取得」画面を表示する

 

リンクを取得内に「リンクを知っている全員」と表示されているのを確認する。

 

「リンクをコピー」をクリックする。

 

”リンクはクリップボードにコピーされました”メッセージが表示される。

 

ここからジンドゥー側の作業になる。「完了」ボタンを押して Google ドライブ側の作業を完了する。

❻ 個別IDを入力した <iframe> ~ </iframe> コードを完成する

Jimdo ページの埋め込みには、下記のコードを使います。

<iframe src="https://drive.google.com/file/d/

個別ID/preview" width="横幅" height="高さ"></iframe>

 

jdg03P_08:共有リンクをコピーする
jdg03P_08:共有リンクをコピーする

1)取得した共有リンクをコピーする

 

表示された URL を選択し、

 

キーボードの【Ctrlキーを押しながら 【C】キーを押してコピーする

jdg03P_09:埋め込みソースが入力されたメモ帳を開く
jdg03P_09:埋め込みソースが入力されたメモ帳を開く

2)個人フォルダーに用意されている、埋め込みソースのメモ帳を開きます。

 

 個人フォルダー内、「文章」フォルダーにある「PDF埋め込みソース」をダブルクリックで開く。

jdg03P_10:メモ帳にURLを貼り付ける
jdg03P_10:メモ帳にURLを貼り付ける

3)ソースコードのメモ帳に、コピーしたURLを貼り付ける: 

 入力されているオリジナルコードの下数行目に並ぶように、【Ctrl】キーと【V】キーを押して、コピーしたコードを貼り付ける。

jdg03P_11:個別IDを置き換える
jdg03P_11:個別IDを置き換える

4)個別IDを置き換える: 

貼り付けたURLリンクの id= 以下のコードをコピーし、

 

オリジナルコードの「個別ID」を選んで貼り付ける(【Ctrl】キー+【V】キー)。

jdg03P_12:個別IDが書き換わった
jdg03P_12:個別IDが書き換わった

5)個別IDが置き換わった: 

 

jdg03P_13:横幅と高さを指定する
jdg03P_13:横幅と高さを指定する

6)「横幅」「高さ」には任意の数字を入れる:

 

 

 

A4 サイズ;

width="595" height="847

 

B5 サイズ;

width="516" height="729"

 

但しこれらの値はPDFを埋め込むJimdoページの横幅次第です。

例えばコンテンツエリアの横幅が900pxの場合は:

width="900" height="1160"

などとして、表示を確認しながら値を調整することもできます。

 

❼ Jimdo にログインし、PDFファイルを表示する

jdg03P_15:PDF埋め込み
jdg03P_15:PDF埋め込み

1)PDF を表示する場所で「コンテンツを追加」>「その他コンテンツ&アドオン」をクリックする。

 

2)「PDF埋め込み」をクリックする。

jdg03P_16:コードを貼り付ける
jdg03P_16:コードを貼り付ける

3)❻ の6)で完成させたコードを、ボックスに貼り付け、「保存」する

PDFの埋め込み手順(埋め込みコードを用意しないで行う)

ここでは埋め込みコード文書を別途用意しないでも埋め込みを行う方法を紹介する。

埋め込みコードは、埋め込みボックス内で直接変更して完成させる。

➊ Jimdo ページの埋め込み箇所で[PDF埋め込み]を設定しておく

jdg03P_15:PDF埋め込みで「ウィジェット/HTML」を使う
jdg03P_15:PDF埋め込みで「ウィジェット/HTML」を使う

1)PDF を表示する場所で「コンテンツを追加」>「その他コンテンツ&アドオン」をクリックする。

 

2)「ウィジェット/HTML」をクリックする。

3)「ウィジェット/HTML」の中に以下のコードをコピーして、貼り付けて準備しておく。

<iframe src="https://drive.google.com/file/d/個別ID/preview" width="50%" height="500"></iframe>
jdg03P_19:表示コードを事前に貼り付けて置く
jdg03P_19:表示コードを事前に貼り付けて置く

Jimdo ページはこのままにし、ブラウザの別タブで Google ドライブ側の操作を行う。

➋ Google ドライブで、PDFをアップロードし、コードをコピーする

リンクがクリップボードにコピーされました」メッセージが出た後、Jimdoページに戻り以下のステップを行う。

➌ 埋め込みコードを完成する

jdg03P_20:埋め込みコードを完成する
jdg03P_20:埋め込みコードを完成する

下部ボックス内に、可視をよくするために先に埋め込んだ埋め込みコードから少し離して[Ctrl]+[V]キーを押してGoogle ドライブからのコードを貼り付ける

 

 

貼り付けた Google ドライブ コードから、埋め込みコードの[個別ID]部分を置き換える

 

width」「height」内の ""(ダブルクォーテーション)部分に数値を入れると表示サイズが変更可能。

 

🔰 サイズ変更後の確認はその都度「保存」ボタンを押して確認すること。

 

 Google ドライブから取得して貼り付けた URL コードは、削除する

 

保存]をクリックする。

上記にあるように、Google ドライブからコピーしたコードは削除する。

以上で PDF 埋め込みは完了。