電子雑誌フレームワーク「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の上記の箇所の変更後。

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

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