HTML

サイト内のHTMLに昔は<object>~</object>というタグを使うのが一般的でしたが、スマホだと表示されなかったりしますよね。
ですが、Google先生をうまく活用すればPDFでもどんな形式のファイルでも埋め込みでき、更にiPhoneやAndroidなどのスマホ端末でも見れちゃいます。
さすがGoogle様です。

今後も継続してプレビューできる最新のPDF埋め込み方法

以前もGoogleDriveを利用してのPDFの埋め込み方法はありましたが、Driveの仕様変更で今はOKでもこれから見れなくなる可能性があるので、新しい仕様で今後もちゃんと見れる方法を紹介します。

まず、該当するPDFファイルをGoogleDriveにアップロードします。
アップロードしたファイルを右クリックすると「リンクを取得」というメニューが出てくるのでこのURLをコピー。

https://drive.google.com/open?id=0B9hHG●▲■mZ2s&authuser=0

URLのid=から始まり、&までのファイルに個別についているID(赤文字部分)を使います。
あとは、下記のソースの赤文字の個別IDに該当するファイルのIDを入れればOK!!

<iframe src="https://drive.google.com/file/d/個別ID/preview" width="横幅" height="高さ"></iframe>

ブログ本文内でも使えるオールマイティなこのソース。
PDF以外の形式のファイルでも余裕で使えます。
Googleのスプレッドシートでもドキュメントでも、IDがあれば何でもいける!


実際にやってみた

テストファイルを作ったのでとりあえず、公開!!


こんな感じで、スマホでもバッチリ!しかも他のビューアを通さず見れて見やすさもかなりGOOD!!


いろいろ、PDFファイルをHTMLに埋め込む方法は公開されていますが、私の中ではこれがベストです。
たぶん、前の方法では閲覧できなくなった人も多いはずなので是非参考にどうぞ。