【超カンタン!】pdfファイルをスマホ・レスポンシブ対応でプレビュー表示させられるようにiframeをHTMLに埋め込む方法

web制作

ウェブサイトにpdfをiframeで埋め込もうとすると、パソコンでは表示されても、スマホではうまく表示されません。ただ、Googleドキュメントのpdf埋め込みビューを使えば、ちょこっとソースコードのURLを貼り替えるだけで、スマホでも表示可能なレスポンシブ対応がお手軽に実装できてしまいます。

Google先生、どこまでも凄いっす・・・。作業は1分もいりません。さっそく使い方を見てみましょう!

pdfファイルをスマホ・レスポンシブ対応でHTMLにiframeで埋め込む方法は「Google Document Viewer」!

Google Document Viewerを使うことで、Googleドライブにファイルをアップロードしなくても、iframeにURLを書くだけで、簡単にレスポンシブ表示できます。

試しに自分がサンプル用に作成した本ブログサイトのワイヤーフレームをpdfで埋め込んでみました。

▼Google Document Viewerによるpdf表示(レスポンシブ)

▼上記プレビュー画面のソースコードはこちら。

<iframe src="https://docs.google.com/gview?url=https://kiyotatsu.com/***(省略)***/wf_sample.pdf&embedded=true" style="width:100%; height:500px;" frameborder="0"></iframe>

「https://kiyotatsu.com/***(省略)***/wf_sample.pdf」の部分を、自分の表示したいpdfが保存されているURLに張り替えるだけでOKです!あとはウェブサイトのレイアウトに合わせて、styleを調整するだけです!

注意点

たとえば上記の場合、Googleが「https://kiyotatsu.com/***(省略)***/wf_sample.pdf」のURLを読み込めないと、当たり前ですが表示されません。つまり、basic認証や特定のアクセス拒否設定をしていると表示されませんので注意しましょう。

まとめ

いかがでしたでしょうか。pdfをレスポンシブで埋め込みしたい方は、ぜひ参考にしてみてください!

2018/02/15追記 「URLはhttpsにしてください!!」

久しぶりにGoogle Document Viewerを使おうと思ったら反映されず、なんでだろうと思って調べてみたら、なんと、Google Document ViewerがhttpsのSSL対応になっていました。なので、iframeの中で、下記のようにする必要があります。

誤り
src="https://docs.google.com/~

修正後
src="https://docs.google.com/~

というわけで、Google Document Viewerでpdfが開かないんですけどぉぉぉぉぉッッッッッ!!って時は、URLを見直してみてください!

この記事をSNSでシェアする?

【超カンタン!】pdfファイルをスマホ・レスポンシブ対応でプレビュー表示させられるようにiframeをHTMLに埋め込む方法


  • 4
    このエントリーをはてなブックマークに追加
  • Pocket

PROFILE

yoshi

KIYOTATSU(キヨタツ)を運営しているウェブ制作者のYoshiです。得意な分野はディレクションとコーディングです。デザインはシンプルなものだけ可能です。他、色々と随時習得中です。