読者です 読者をやめる 読者になる 読者になる

enchantMOONをブックリーダーにする

enchantMOONでPDFを読みたかったのだがPDFファイルを直で扱うのは敷居が高そうなので、PDFをjpegに変換してindexページを付与するrubyツールと、簡単な画面遷移処理を行うjavascriptを作ってみた。

自炊した技術書等をenchantMOONに入れて読んでると、気になった所を切り取ってメモしておけるのでかなり便利!

とりあえず公式ページで配布してるenchantMOONCrewDevConf1.zipの資料を変換して、WEB経由で参照できるシールを作ってみたので、興味のある方は試してみてください。

http://ahinore-em.org/enchantmoon/bookreader/sample/bookreader_sample.moon.zip

ツールは下記で公開してますが、かなり手抜き実装なので自己責任でご利用ください。

https://github.com/ahinore/bookreader-em

■bookreader-emの中身

├── bookreader.moon.zip ←ローカルファイルを開くシール

├── books ←こいつをenchantMOONのDataにそのままコピー

│   ├── data ←ツール実行するとここに変換されたjpegが格納される

│   ├── index.html←ツールを実行すると生成される。これをeMから開くだけ。

│   └── js

│       ├── bookreader.js←画面遷移の制御とか。超手抜き

│       ├── jquery-1.10.2.min.js

│       └── jquery.cookie.js

├── pdf ←ここに変換したいファイルを置く

│   ├── XXX.pdf

│   └── YYY.pdf

└── pdf_converter.rb ←変換ツール。index.htmlのテンプレートも入ってる

■変換ツールを使うためにセットアップが必要な物

  1. ruby1.9 or ruby2.0
  2. ImageMagic
  3. RMagic(gem)
  4. systemu(gem)

windows+cygwinとCentOS6で動作する事を確認してますが、CentOS6の方がセットアップが楽です。

■ツールの使い方

  1. git clone https://github.com/ahinore/bookreader-em
  2. cd bookreader-em
  3. mkdir pdf
  4. pdfディレクトリ 配下に変換したいPDFを配置(複数可)
  5. ruby pdf_converter.rb
    ※結構時間がかかる。ImageMagicの中間ファイルとして1ページ当たり300MB位のファイルが作られるので注意
  6. booksディレクトリをenchantMOONのDataディレクトリにコピー
  7. bookreader.moon.zipをenchantMOONにインストールして実行
    https://github.com/ahinore/bookreader-em/raw/master/bookreader.moon.zip
    ※単に「MOON.openUrl("file:///mnt/extsd/Data/books/index.html");」してるだけ

■ブックリーダーの使い方

  • ブックリスト ⇔ ページリスト ⇔ jpeg画像 のように遷移できる
  • jpeg画像の右側をタップすると次頁、左側をタップすると前頁、上部をタップするとページリストに遷移 

■独り言

  • ブックリーダーはenchant.jsでシールとして実装しようとも思ったが、そうするとページの切り抜きとか一筋縄でいかなそうなので普通のWebページ+jQueryで実装した。
  • ブックリストとかページリストとか超ショボイ。そのうちcssで綺麗にしたい。
  • ブラウザを閉じても再度開いた時に最後に見てたページを表示したいのだが、ローカルファイルだとクッキーが使えなかった。HTML5のローカルファイルも使えない模様。どうにかしたいが、まぁしおり的に切り抜いて置けばOKな気もしている。
  • HTMLの遷移はしたくなかったので画像のみを入れ替えるようにしているが、そうするとURLが変わらなくて切抜きから元ページに戻れなくなってしまうので、URLのハッシュ値を変更するようにしている。ホントはpushStateとか使うべきなのかもしれない。
  • index.htmlにブックリストのjsonデータを埋め込んでるが、これはajaxでローカルファイルにアクセスできないので仕方なく。。。
  • ピンチイン、アウトで拡大縮小とかも実装したい。
  • jpegリーダー的なjavascriptは色々公開されてるようなので、良いのあったら入れ替えたい。