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

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

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

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

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

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

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

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

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

これが使えると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圧縮で転送サイズを少なくして高速化をする必要がありそうです。