続・WEBページへのPDFファイル埋め込み ― Googleドライブセキュリティアップデートへの対応 ＆ レスポンシブ対応

1. Googleドライブで当該ファイルのリンクを取得する
2. そのリンクの「view」を「preview」に変更する
3. 変更したリンクURLをiframeタグのsrcに設定する

しかし、今や僕のサイトへのアクセスも、スマホがPCの倍ほどとなっており、スマホを無視してはサイトが成り立ちません。PCでもスマホでも見やすく表示させるためには、ディスプレイサイズに応じてアイテムの表示サイズが自動調節されるレスポンシブ対応が必要なのです。

単なる画像であれば、横幅をページの横幅に対する割合で設定し、高さをauto（自動調節）に設定すれば、ディスプレイサイズに応じて画像のサイズが調節して表示されるので、それほど難しくはありません。たとえば　<img src="sample.jpg" width="80%" hight="auto">　とすれば、横幅サイズがページ幅の80％になるサイズで画像sample.jpgが表示されます。

ところが、iframeタグでは”auto"は指定できないので、この方法が使えません。そこで、iframeを中に含む「親要素」を作成し、その親要素のサイズ設定をレスポンシブにした上で、iframeのサイズを横幅・高さとも親要素に対して100％に設定するという方法を使います。

具体的には、まず、style要素の中で、親要素とiframeのサイズを設定するCSSを記載しておいてから、親要素とその中に入るiframeを設置するということになります。

<style>
  div.iframe_parent {
      position: relative;
      width: 75%;
  }
  div.iframe_parent::before {
      content:'';
      display: block;
      padding-top: 150%;
  }
  div.iframe_parent iframe {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
  }
</style>
<div class="iframe_parent">
  <iframe src="https://drive.google.com/file/d/0BzetfMhnwbvcTDdTNGcxQzdueUE/preview?usp=sharing&resourcekey=0-Es62lVa4xIz4IBIuj46U6g"></iframe>
</div>

このコードでは、親要素の横幅はページ幅の75％、高さは横幅の1.5倍に設定され、iframeがその親要素と同じサイズで表示されるようになっています。

本当は、CSSは別ファイルにするのが正しいやり方です。Bloggerであれば、個別投稿のHTMLの中ではなく、テーマの中に上記CSSを書き込むべきなのでしょうが、個人的にテーマをいじるのは最小限にしたいという事情もあり、上のやり方を選択しました。

ともかく、これで埋め込みPDFのサイズがレスポンシブとなり、ディスプレイサイズに応じたサイズで表示されるようになりました。PCで閲覧してみると、

という感じになり、ディスプレイサイズにかかわらず、埋め込みPDFの横幅はページ幅の75％で表示されるようになりました。

これで、汎兮堂ライブラリも晴れてレスポンシブ対応となりました。あまり需要がないかもしれませんが、WEBページへのPDF埋め込み表示をしたいと考えている方の参考になれば幸いです。