WebページにPDFファイルを埋め込む - GoogleDriveを利用
以前から、著作権がとっくに消滅している江戸時代や明治時代の漢詩・漢文関連の書籍をPDF化して公開していました。公開の場として、「パブー」という電子書籍公開・販売サービスを利用していたのですが、先日からStrikinglyでサイトを運営し始めたので、そちらのほうに公開の場を移すことにしました。
(※2020年3月追記:現在はBloggerで運営しているサイト上で公開しています → 汎兮堂ライブラリ)
公開のしかたとしては、GoogleDriveを利用してページ内にPDFを埋め込む形にすることにしました。時間があくとやり方を忘れてしまいそうなので手順をまとめておくことにします。Strikinglyでなくても、HTMLコードが使用できれば、他のサイト作成サービスやブログ、CMSなどでも可能です。
まず、埋め込みたいPDFを自身のGoogleDriveにアップロードしておきます。そのままでは自分以外がアクセスできないので、共有設定を変更しないといけません。GoogleDrive上で該当のファイルを右クリックして、表示されるメニューから「共有」をクリックします。
現在、「制限付き」にチェックが入っていますので、「リンクを知っている全員」のほうにチェックを入れます。
これで、このリンクURLにアクセスすれば、だれでも閲覧することができるようになりました。注意点として、権限が「閲覧者」になっていることを確認しておくことが大事です。もしここが「編集者」になっていると、誰もがこのファイルを勝手に編集できることになってしまいます。
「ユーザーやグループと共有」のブロックをクリックしてアクティブにすると、右上に設定ボタン(歯車)が表示されるので、それをクリックします。
すると、「他のユーザーとの共有設定」というポップアップが開きます。「閲覧者と閲覧者(コメント可)に、ダウンロード、印刷、コピーの項目を表示する」についているチェックをはずすと、閲覧者がダウンロード・印刷・コピーをすることができなくなります。この設定をおこなわないと、公開したPDFを誰でもコピーしたりダウンロードしたりできてしまいます。それでかまわない場合は、この設定は不要です。
これでGoogleDrive側の設定は完了です。あとは、PDFを埋め込みたいページに以下のとおりのHTMLコードを挿入するだけです。
ファイルのIDというのは、GoogleDriveの設定をしたときにコピーしておいたIDです。400と600はページ内に表示されるフレームの大きさですので適宜調節してください。
これですべて完了し、下のようなフレームの中にPDFが表示され、閲覧できるようになります。(実際のページ ⇒ https://www.hankeidou.jp/2018/05/library003.html)
フレーム内の右上には矢印が表示され、これをクリックすると、そのPDFに直接アクセスでき、ブラウザ全体にPDFが表示されます。PDFはGoogleDriveにあるので、アクセスすると、閲覧者がGoogleアカウントにログインしている場合はGoogleDrive上での操作をおこなうこともできます(マイドライブに追加するなど)が、上でコピーやダウンロード、印刷を許可しない設定にしておけば、それらの操作はおこなうことができません。
また、ファイルの詳細情報を表示することもでき、オーナー名も表示されますので、表示されてもかまわない名前のGoogleアカウントを使用することをお勧めします。既存のGoogleアカウントを本名などで作成している場合は、別途、ファイル公開用のアカウントを新規作成してそちらを使用するほうが無難でしょう。
なお、この方法なら、GoogleDrive上に保存してあるファイルであれば、PDF以外のファイルでも同様に埋め込むことが可能です。
以上、ご参考まで。
<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以外のファイルでも同様に埋め込むことが可能です。
以上、ご参考まで。
2021年4月追記
GoogleDriveのファイル共有設定に関するUIが、執筆当初からだいぶ変更されていたので、説明を更新しました。
2022年3月
Googleドライブのセキュリティアップデートにより、リンクURLにリソースキーを含まなければファイルにアクセスできなくなったため、上記のままでは埋め込みPDFも表示されなくなりました。詳細はこちら→ 続・WEBページへのPDFファイル埋め込み ― Googleドライブセキュリティアップデートへの対応 & レスポンシブ対応
コメント
0 件のコメント :
コメントを投稿