pdf.jsをインストールして動かしてみる

77件のシェア(ちょっぴり話題の記事)

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

1.node.jsをインストールする

node.jsをwgetコマンドでダウンロードします。

$ wget http://nodejs.org/dist/node-latest.tar.gz

tar.gzを展開し、展開フォルダ内に移動します。

$ tar zxvf node-latest.tar.gz
$ cd node-v0.8.19

2.依存パッケージをインストールする

node.jsをインストールする前に、node.jsをコンパイルするために必要な以下のモジュールが必要だったのでインストールします。

  • build-essential
  • libssl-dev

build-essentialをインストールする

$ sudo apt-get install build-essential

libssl-devをインストールする

$ sudo apt-get install libssl-dev

次にコンパイル&インストールです。makeは結構時間がかかりました。

$ ./configure
$ make
$ sudo make install

インストールが完了したら、正しくインストールできているか確認するため、以下のコマンドでバージョンを参照してみます。数字が表示されたらOKです。

$ sudo node -v
v0.8.19

3.nodeのインストールが終わったので次はgitをインストールします。

$ sudo apt-get install git-core
$ git –version
git version 1.7.9.5

apacheのホームディレクトリに移動します。(この環境はデフォルトの/var/wwwがホーム)

$ cd /var/www
$ git clone git://github.com/mozilla/pdf.js.git pdfjs
$ cd pdfjs
$ sudo node make server
### Starting local server 
Starting server on port 8888. 
Running HTTP server. Press Ctrl-C to quit. 

どうやら起動したようなので、Readmeに記載のあったURLにアクセスしてみます。

http://localhost:8888/web/viewer.html

サンプルの画面が正しく表示されました。

pdfjs01

次にテストのPDFが正しく表示されるかを検証するためにReadmeに記載のある2個目のURLにアクセスしてみます。

http://localhost:8888/test/pdfs/?frame

pdfjs02

いくつか適当にピックアップして閲覧してみましたが、特に問題なくPDFが表示できたので日本語がどれくらい対応しているかを検証してみました。

PDFをAdobeのAcrobatReaderで表示したスクリーンショット PDFをpdfjsで表示したスクリーンショット(FireFox)
pdfjs04 pdfjs05

FireFoxでは日本語もレイアウトも崩れる事なく再現できているのでなかなか良さそうですね。

下記のようにChromeでも奇麗に表示されました。

pdfjs06

これが使えるとAcrobat ReaderのアップデートによるOS再起動やAcrobat Readerの脆弱性から解放されますねw

では次のステップであるmakeで最終的なpdf.jsを作成することにします。

$ cd /var/www/pdfjs
$ sudo node make generic

### Getting extension build number
Extension build number: 226

### Bundling files into build/pdf.js

### Building localization files

### Creating generic viewer

makeが完了すると /var/www/pdfjs/build/generic/build 配下にpdf.jsが作成されていました。
このpdf.jsを作成するプロジェクトで使いましょうと言うことの様です。
また、同時にcompatibility.jsと言うものも /var/www/pdfjs/build/generic/web 配下に作成されました。
これはファイル名から想像するにfirefoxブラウザ以外でも対応できるようにするものの様です。
(単に作成するプロジェクト内にincludeすればいいみたいです。)
pdf.jsのファイルが結構大きいですね。

$ ls -l
-rw-r--r-- 1 tsukuma tsukuma 1524113  2月 13 11:24 pdf.js

で、Readmeに公開するときはminifiedすべきでしょうと記載がありましたので、minifiedしてみます。
jsファイルが1つしかないので
http://jscompress.com/ でminifiedにトライしてみましたが、アップロードではうまく動作しなかったのでpdf.jsをエディタで直接開いてソースをコピーしJavascript Code Inputエリアにペーストして変換しました。
その結果、

$ ls -l
-rw-rw-r-- 1 tsukuma tsukuma 878319  2月 13 11:45 pdf.min.js

minifiedしてもまだ大きいですが、仕方ないですね。ちなみにこれをgzip圧縮したサイズは

-rw-rw-r-- 1 tsukuma tsukuma 311543  2月 13 14:11 pdf.min.js.gz

300KB程度なので、公開時にはgzip圧縮で転送サイズを少なくして高速化をする必要がありそうです。