みなさん自炊してますかー。自炊データを、PDFやjpegにして各種リーダアプリで見るのはいいのですが、電書だったらもっといろいろ面白いことができるのにと思ったことはありませんか? ならば自分で作ってしまいましょう。
自炊データを元にインタラクティブな電書を作る方法はいくつか考えられますが、ここではw3cで標準化されているウィジェット形式でやってみます。ウィジェット形式は、iPadのリーダーアプリCloudReadersで読むことができます。
ウィジェット形式のメリットは、html+javascriptで作成できるので、従来のweb製作の知識技術がそのまま使えるということです。またHTML5やCSS3を駆使すれば、より表現力が上がります。
ということで、以下自炊本を、インタラクティブなアプリっぽく仕上げる方法を紹介します。
まずは、裁断＆スキャン
今回のターゲットはこの写真集。
ヴィレッジヴァンガードで平積みされてて、思わず買っちゃったやつです。366枚の地球上の様々な場所の空撮写真集です。分厚くて重たいです。見開きで1枚の写真と解説になっているので、ページ単位ですでに構造化されていることになるので、電書化にはうってつけです。
上製本はバラすのに躊躇しますが、お構いなくやっちゃいます。裁断機に通るように4つに分割します。
裁断するとカードのようになります。
この写真集は見開きで、左ページに解説があります。写真はカラーで、解説ページはグレイスケールで片面づつ別々にjpegファイルとしてスキャンすることにします。
スキャンしたファイルは軽くするため、1024サイズにリサイズしました。ファイル名は、写真をp_xxx.jpg、解説ページをt_xxx.jpgとして対応づけておきます。
これで366枚の写真と解説のjpegファイルができました。ScanSnapはカラーのスキャンはやはりいまいちで、フラットベッドタイプにはかないませんがこれでよしとします。
このままjpegファイルをzipすれば、各種リーダアプリで見ることはできますが、ここからが本題です。一手間加えて美味しくいただきましょう。
ウィジェット化に必要なファイルを作る
ウイジェット化の仕様としては、まずは簡単に、画面の縁をタップすると、次の写真に切り替わり、画面中央部をタップすると解説が表示されるようにします。
ウィジェットの中身はhtmlです。最低限必要なファイルは、最初に開くことになるindex.htmlとウィジェットのメタ情報を記述したxmlファイルのconfig.xmlです。
index.html
index.htmlの本文はシンプルで、javascriptで制御しています。画面の左右中央にUI用のレイヤを設け、タップイベントでページの切り替えと解説レイヤの表示をしているだけです。
起動時に前回見ていたページから表示するために、localStorageを使って情報を保存しています。CloudReadersのウィジェットで注意すべき点は、ストレージがウィジェット間で共有されているので、他とかぶらないようなユニークなキーをつかう必要があるということです。
config.xmlは必要最低限で簡単にすませます。ちゃんとしたウィジェットとしては、いろいろなメタ情報を入れるのですが、ここではCloudReadersに最低限必要なものだけにします。
config.xml
この2つのファイルと画像ファイルを、zipに圧縮して、拡張子を.zipから.wgtに変更します。これでウィジェットファイルの出来上がりです。
CloudReadersで動かす
出来上がったwgtファイルを、iTunes経由でCloudReadersに転送して開くと、このようになります。
画面の左右の端をタップするとページめくりになり、中央部をタップすると、解説がオーバレイ表示します
これでとりあえずアプリっぽくなりました。インデックスページを付けたり、写真の切り替えのエフェクトをつけたり、自動スライドショーにしたりといろいろ展開は考えられます。
分厚くて重たい写真集が、iPadでまったりと眺めることができるようになりました。