2016/04/16

PDF.jsは便利だが、パスに注意が必要

PDFは表現豊かだが、ログが取れなくて..

 筆者は技術文書をPDFで作るのですが、サイトで公開してもGoogleAnalitycsでは把握出来ないので、少々悩みの種になっていました。
 GoogleAalitycsに頼らず、Webサーバのログを解析すれば済むことですが、複数の解析ツールを使うには少々手間なんですよねぇ。
 とりあえず、GoogleAnalitycsでもなんとか努力して、PDFファイル掲載ページのPDFクリックでイベント採取していたのですが、これだとPDFファイルを直接指定されてしまうとGoogleAnalitycsには情報が行かないんですよね。
 （なぜかって？GoogleAnalitycsはWebページに記述されたJavaScriptで情報採取が行われるので、PDFファイルの直接参照は把握出来ないのです。）
 ということで暫く黙認していたのですが、Webページ自身にPDFをプレビューしてしまえば良いのではということで、pdf.jsを使ってみることに。

pdf.jsの使い方は

 ありがたいことに、pdf.jsの使い方を紹介されている方がいらっしゃいました。
 概ね、こちらの内容で問題無いのですが、筆者は地雷を踏んでしまいました。
 次の記載のpdfファイルの指定で悩んでしまいました。  
viewer.html?file=pdfファイル(絶対パス)
 色々試したところ、次の状況であることがわかりました。
  • パス状況1 web/viewer.htmlより上位のパスにpdfファイルがある場合
    •  次の状況では、pdfファイルが表示されませんでした。
    web/viewer.html
test.html
pdfile.pdf
    FileName:test.html 
    <html>
<iframe src="web/viewer.html?file=pdfile.pdf />
</html>
  • パス状況2 web/viewer.htmlと同じまたは下位のパスにpdfファイルがある場合
    •  この状態では、pdfファイルが表示されました。どうやら、viewer.htmlより上位のパスにあるpdfファイルを指定しても表示出来ない仕様になっています。
     チョット考えてみたのですが、これはセキュリティー上、必要な機能のように思います。 
    web/viewer.html
test.html
web/pdfile.pdf

pdf.js,pdf.worker.jsも移動させましょう

 Ubuntu14.04版のfirefoxだと、前述の対応だけで正常動作しましたが、ChromeやWindowsのFirefoxだとpdfファイルが表示されませんでした。
 Chromeでデバックしてみるとpdf.jsとpdf.worker.jsが読み込まれてない様子です。
 どうも、対象のjsファイルが、同じ階層の異なるフォルダに存在するため、相対パスにて上位フォルダを指定しているのですが、こちらがセキュリティー機能にて無効化されてしまうようです。
フォルダ構成と、記述箇所 
web/viewer.html ←　<script src="../build/pdf.js"></script>
web/viewer.js   ←　PDFJS.workerSrc = '../build/pdf.worker.js';
build/pdf.js
build/pdf.worker.js
 ファイルを移動すると共に、一部書き換えましょう。

ファイル移動 
build/pdf.js →  web/pdf.js
build/pdf.worker.js → web/pdf.worker.js
変更
FileName:web/viewer.html
変更前 <script src="../build/pdf.js"></script>
変更後 <script src="pdf.js"></script>

FileName:web/viewer.js
変更前 PDFJS.workerSrc = '../build/pdf.worker.js';
変更後 PDFJS.workerSrc = 'pdf.worker.js';
 以上の修正で、正しくpdfが表示されるようになります。
 初心者が使われる場合もあるわけですから、この辺りの解説もあっても良い気がしました。

 ということで、viewer.htmlを配置するフォルダ以下のパスにpdfファイルは配置するようにしましょう。
 絶対パスを指定してもこの条件はクリア出来ません。(セキュリティー上の正当な機能です）
 ともはや、これでWebページにそのままPDFファイルを表示できるわけですから、ありがたいものです。
 あとはpdfファイルを検索ボットの検索対象から外してしまえば、pdfファイル自身が検索結果に一覧されることはなくなると思います。
 結果は後日ご報告します。

0 コメント:

コメントを投稿