IMUZA.com

<<WordPress(ConoHa)<<はてなブログ

ホーム / WebTips / Googleドライブの pdf をスクロールなしで html に埋め込む(レスポンシブ対応)

Googleドライブの pdf をスクロールなしで html に埋め込む(レスポンシブ対応)

2016/03/17 WebTips

pdf ファイルを html に埋め込む必要が生じ*1、以前は何かビューワを入れたように記憶しているのですが、それも面倒ですので、今回は Googleドライブの pdf ビューワを利用することにしました。ただ、問題はクロスドメインになりますので、iframe で埋め込むにしても、幅や高さが取得できなくてスクロールがでてしまいます。

それを解消するために、Javascript には postMessage というメソッドがあるようなのですが、Googleドライブの Webサーバ機能が2016年8月31日で終了してしまいますので、これも使えなくなってしまいます。

pdf ファイルだからサイズを調べて指定すれば、とも考えたのですが、レスポンシブデザインの場合はそういうわけにもいきません。

で、結局 Javascript の力を借りることになりました。

  • Googleドライブ内の pdf を閲覧可能にする
  • Google Docs ビューワの仕様
  • iframe で埋め込みタグを作る
  • javascript でレスポンシブに対応するよう縦を計算する
  • 同様のことを css でやってみる

Googleドライブ内の pdf を閲覧可能にする

Googleドライブ内の pdf ファイルを選択し、右クリックなどで共有を選びます。

右下の詳細設定をクリックします。

変更をクリックします。

オンを選択し保存します。
ひとつ前の画像に戻りますので、共有するリンクをコピーして完了をクリックします。Googleドライブ側はこれだけです。

Google Docs ビューワの仕様

ビューワの仕様がないかググってみたのですが見つかりませんでしたので、必要なところだけ手作業で調べてみました。

  • 横幅は必ず 800px で表示される(多分)
  • 上下左右に各 12px のマージン(padding)がとられる
  • 元 pdf が A4サイズの場合は、縦は 800px x 141.5% = 1132px と計算される

iframe で埋め込みタグを作る

下の例のように、コピーした共有リンクから埋め込みタグをつくります。

https://drive.google.com/file/d/ここの文字列がID/view?usp=sharing
↓
<iframe src="https://drive.google.com/file/d/ここの文字列がID/preview" style="width:100%;" frameborder="0"></iframe>

javascript でレスポンシブに対応するよう縦を計算する

(function() {
  var padding = 24; // 12 * 2
  var orgWidth = 800;
  var orgHeight = 1132;


  var element = document.getElementsByTagName('iframe')[0];
  var dispWidth = element.offsetWidth - padding;


  (dispWidth >= orgWidth) ? element.style.height = orgHeight + padding + 'px' : element.style.height = dispWidth / orgWidth * orgHeight + padding + 'px';
})();

jQuery なら、

(function($) {
  var padding = 24; // 12 * 2
  var orgWidth = 800;
  var orgHeight = 1132;


  var element = $('iframe');
  var dispHeight = element.width() - padding;


  (dispHeight >= orgWidth) ? element.css('height', orgHeight + padding) : element.css('height', dispHeight / orgWidth * orgHeight + padding);
})(jQuery);

同様のことを css でやってみる

ビューワの中を覗いていて思いついたんですが、css でも出来ますね。

2つのラッパーで括らないとうまくいきません。

html

<div class="wrapper">
  <div class="inner-wrapper">
    <iframe src="https://drive.google.com/file/d/ここの文字列がID/preview" style="width:100%;" frameborder="0"></iframe>
  </div>
</div>

css

.wrapper {
    max-width: 824px;
}
.inner-wrapper {
    position: relative;
    height: 0;
    overflow: hidden;
    padding-bottom: 141.5%;
}
.inner-wrapper iframe {
    position: absolute;
    width: 100%;
    height: 100%;
}

どの方法でも予め pdfファイルのサイズを調べる必要があります。

*1:管理者ではない者がpdf ファイルを簡単に差し替えたりすることができるようにする事例です。

Chrome リモートデスクトップのリモートサポート(共有)は10分でタイムアウトする
Joomla! マイナーバージョンアップ 3.4.x から 3.5 へ
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2022/08/13

はてなブログProを解約したらエェ〜?!

2022/08/10

WordPress にプラグインなしで fancybox4 導入

2022/07/29

WordPressでiframeが表示されない(解決)

2022/07/14

WordPressのデータベースを入れ替える

2022/07/7

WordPress:テーマをゼロから作ってみる(3)

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips108
  • javascript96
  • Joomla!88
  • Windows68
  • CSS62
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Wordpress38
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php19
  • Node.js18
  • SASS16
  • Ubuntu16
  • laravel415
  • Chrome10
  • cms-style10
  • iPhone9
  • genesis6
  • Git入門6
  • ConoHa WING5
  • Python4
  • Android4
  • SSD3
  • Docker3
  • スマートフォン3
  • Facebook3
  • Firefox3
  • 静的サイトジェネレーター3
  • Blankslate3
  • Mactype2
  • GitHub2
  • rails入門1
  • はてなブクマ1
  • Twitter1
  • 映画1
  • youtube1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Another Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2022 · IMUZA.com