WebページにPDFファイルを埋め込む - GoogleDriveを利用

2017年7月9日日曜日

HOWTO サイト


以前から、著作権がとっくに消滅している江戸時代や明治時代の漢詩・漢文関連の書籍をPDF化して公開していました。公開の場として、「パブー」という電子書籍公開・販売サービスを利用していたのですが、先日からStrikinglyでサイトを運営し始めたので、そちらのほうに公開の場を移すことにしました。
(※2020年3月追記:現在はBloggerで運営しているサイト上で公開しています → 汎兮堂ライブラリ

公開のしかたとしては、GoogleDriveを利用してページ内にPDFを埋め込む形にすることにしました。時間があくとやり方を忘れてしまいそうなので手順をまとめておくことにします。Strikinglyでなくても、HTMLコードが使用できれば、他のサイト作成サービスやブログ、CMSなどでも可能です。

まず、埋め込みたいPDFを自身のGoogleDriveにアップロードしておきます。そのままでは自分以外がアクセスできないので、共有設定を変更しないといけません。GoogleDrive上で該当のファイルを右クリックして、表示されるメニューから「共有」をクリックします。


ポップアップ画面が開くので、右上の「共有可能なリンクを取得」をクリックします。


すると、リンクの共有がオンになります。共有のしかたには「リンクを知っている全員が編集可」「リンクを知っている全員がコメント可」「リンクを知っている全員が閲覧可」の3種類がありますが、「リンクを知っている全員が閲覧可」を選択します。そこに表示されているアドレスが、そのPDFのリンク先で、このアドレスにアクセスすれば誰でもこのファイルを閲覧できる状態になりました。また、このアドレスの中で、「https://drive.google.com/file/d/」と「/view?usp=sharing」の間の文字列がこのファイルのIDで、このIDがこのあと必要になるのでメモ帳にでもコピーしておくといいでしょう。


また、ファイルの閲覧のみ許可してダウンロードやコピー、印刷を許可しない場合には、右下の「詳細設定」をクリックし、開いた画面で、「コメント権を持つユーザーと閲覧権を持つユーザーのダウンロード、印刷、コピーを無効にします」にチェックを入れ、「変更を保存」をクリックします。この設定をおこなわないと、公開したPDFを誰でもコピーしたりダウンロードしたりできてしまいます。それでかまわない場合は、この設定は不要です。

これでGoogleDriveの設定は完了です。あとは、PDFを埋め込みたいページに以下のとおりのHTMLコードを挿入するだけです。

<iframe src="https://drive.google.com/file/d/ファイルのID/preview" width="400" height="600"></iframe>

ファイルのIDというのは、GoogleDriveの設定をしたときにコピーしておいたIDです。400と600はページ内に表示されるフレームの大きさですので適宜調節してください。

これですべて完了し、下のようなフレームの中にPDFが表示され、閲覧できるようになります。(実際のページ ⇒ https://www.hankeidou.jp/2018/05/library003.html


フレーム内の右上には矢印が表示され、これをクリックすると、そのPDFに直接アクセスでき、ブラウザ全体にPDFが表示されます。PDFはGoogleDriveにあるので、アクセスすると、閲覧者がGoogleアカウントにログインしている場合はGoogleDrive上での操作をおこなうこともできます(マイドライブに追加するなど)が、上でコピーやダウンロード、印刷を許可しない設定にしておけば、それらの操作はおこなうことができません。


また、ファイルの詳細情報を表示することもでき、オーナー名も表示されますので、表示されてもかまわない名前のGoogleアカウントを使用することをお勧めします。既存のGoogleアカウントを本名などで作成している場合は、別途、ファイル公開用のアカウントを新規作成してそちらを使用するほうが無難でしょう。


なお、この方法なら、GoogleDrive上に保存してあるファイルであれば、PDF以外のファイルでも同様に埋め込むことが可能です。

以上、ご参考まで。