電子書籍、電子雑誌のフレームワークとして、マルチプラットフォームの様々な画面サイズに対応するしている「Treesaver」を試してみました。
treesaver
http://treesaver.net/
treesaver
http://treesaverjs.com/
Treesaver/treesaver - GitHub
https://github.com/Treesaver/treesaver
書籍、雑誌に含まれている内容（テキスト、画像、動画）は同じものですが、プラットフォーム（PCブラウザ、iPhone/iPad、Android）ごとに、画面サイズに従って、自動で調整をした綺麗なレイアウトで表示してくれます。文字組みも2段組レイアウト、3段組レイアウトを自動で判断して表示します。
チュートリアルとして説明されている「不思議の国のアリス」のコンテンツを作ってみました。
不思議の国のアリスのチュートリアルサンプルを設置したのもの
http://www.vivo-win.com/Treesaver_Walkthrough/alice/
サンプルファイルをダウンロードして、ローカルで確認しましたが、表示はされません。ウェブサーバ上にないと正常に動作しません。
Chromeのこの表示エリアでは、3段組レイアウトで表示されます。
横幅を狭めると、自動で2段組レイアウトに変更されて、全ページ数も5ページから8ページに変わります。画面下部に「全ページ中の何ページが表示されているか」の数字があります。
さらに狭めると、1段組レイアウト。
高さを小さくすると、表示量が減り、全ページ数が20になりました。
ChromeとFirefoxで、トップページを同じ表示エリアで確認すると、違うイラストが表示されます。これはなぜでしょう？
上記の内容を、HT-03A（Android1.6）では表示できませんでした。Android2.2以上が対応環境のようです。会社にある iPhone/iPad で確認してみます。
チュートリアルでは、コンパイル済みのJSファイル「treesaver-0.9.1.js」を使っていますが、独自にカスタマイズをしたコンパイルも出来るようです。
必要な環境は、以下のものです。
- Paver: For running build script. Requires Python.
- Closure Compiler: Aggregates and minifies JavaScript.
- Closure Library: Required for best use of Closure Compiler. (Technically, only the base.js file is required)
- Closure Linter: Check and fix coding style. (optional)
主なところは、Closure Libraryを使っているようです。これから、Closure Libraryに依存したものが沢山作られていくような気がします。コンパイルのオプションにて、IEの対応の可否を設定できるようです。
対応するプラットフォームについては、下記のように記載されていました。
- Internet Explorer: Version 7 and above (latest version: 8)
- Mozilla Firefox: Version 2 and above (latest: 3.6)
- Apple Safari: Version 3 and above (latest: 5)
- Google Chrome: Version 3 and above (latest: 5)
- Opera: Version 10 and above (latest 10.6)
- Additionally, the following devices are fully compatible with Treesaver:
- iPhone: All versions
- iPad: All versions
- Android Phones and Tablets: Version 2.2 and above
ビデオでのインタビュー動画がありました。
Recent coverage of Treesaver
http://treesaver.net/news/
0 件のコメント:
コメントを投稿