電子雑誌フレームワーク「Treesaver」のサンプルアプリ「Simple」の動作を iPhone/iPad で確認しました。

電子雑誌フレームワーク「Treesaver」のサンプルアプリ「Simple」の動作を　iPhone/iPad　で確認しました。

treesaver_simple
http://www.vivo-win.com/Treesaver/simple/

iPadでの確認

iPhoneでの確認

どちらでも正常に動作しました。

電子雑誌フレームワーク「Treesaver」のサンプルアプリ「Simple」には、実現したい機能のソースが一式ありました。

電子雑誌フレームワーク「Treesaver」のサンプルアプリ「Simple」には、実現したい機能のソースが一式ありました。

「Treesaver」のgithubからダウンロードしたソース一式の中にサンプルアプリが含まれていました。Treesaverを使って公開されている電子雑誌のような見え方は、どうやって作るのかを調べてみると、ちゃんと配布されているものの中にありました。ソースの中の下記のフォルダの一式です。

treesaver/test/functional/simple

このフォルダ内のファイル一式を設置してみました。

treesaver_simple
http://www.vivo-win.com/Treesaver/simple/

元ソースから変更したのは、下記の点です。

• closure-libraryのbase.jsとdeps.jsを参照できる場所に設置
• その場所をindex.html内に指定
• treesaver-0.9.1.jsを参照できる場所に設置
• その場所をindex.html内に指定

index.htmlの下記の場所を変更しました。

index.htmlの上記の箇所の変更後。

この指定が正しいのかどうかは分かりませんが、表示はされました。

このサンプルでは、画像サイズの大きなものから、サムネール用の小さなものまで、既に用意されています。ブラウザで表示エリアを大きくしたり、小さくしたりすると、表示される画像がそれぞれサイズにあったものが表示されるのを確認しました。

電子雑誌フレームワーク「Treesaver」のチュートリアルサンプル「不思議の国のアリス」の動作を iPhone/iPad で確認しました。

「Treesaver」で、チュートリアルとして用意されている「不思議の国のアリス」を　iPhone/iPad　で動作確認してみました。

不思議の国のアリスのチュートリアルサンプルを設置したのもの
http://www.vivo-win.com/Treesaver_Walkthrough/alice/

iPadでの確認

横レイアウトでの1ページ目

横レイアウトでの2ページ目

縦レイアウトでの1ページ目

縦レイアウトでの2ページ目

iPhoneでの確認

横レイアウトでの1ページ目

横レイアウトでの2ページ目

縦レイアウトでの1ページ目

縦レイアウトでの2ページ目

iPhoneで見たときには、横レイアウトでは、すべてのイラストが表示されません。縦レイアウトでは、最初のアリスのイラストのみ表示されます。

HTML5/JavaScriptによるマルチデバイスをサポートした電子雑誌フレームワーク「Treesaver」のチュートリアルサンプル「不思議の国のアリス」を試してみました。

電子書籍、電子雑誌のフレームワークとして、マルチプラットフォームの様々な画面サイズに対応するしている「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/

GoogleのJavaScriptフレームワーク「Closure Library（クロージャ ライブラリ）」を使ってみました。

JavaScriptフレームワークといえば、jQuery、Prototype、MochiKitなどをちょっと使ったことがあるだけでした。DajngoやGAEで使うのであれば、MochiKitがいいのかなと思っていましたが、Google製であるClosure Libraryはどうなんだろうと思い使ってみました。

Closure Libraryのソースは、公式サイトに従い、Subversionでチェックアウトをして用意をします。

Getting Started with the Closure Library
http://code.google.com/intl/ja/closure/library/docs/gettingstarted.html

svn checkout http://closure-library.googlecode.com/svn/trunk/ closure-library

あとは、チュートリアルに従い、hello.jsとhello.htmlを用意して、指定の階層に置けば、「Hello world!」が表示されます。

必要なファイルを配置したところ

Hello world! を表示

Closure Libraryの機能を簡単に試せるサイト作られている方がいました。ブラウザ内の操作だけで、色々な機能を確認できます。とても便利です。

Closure Library が使える Web ベースの IDE「Closure Kitchen」を作りました！
http://closure-kitchen.appspot.com/