今年はスマホ元年といわれるほど、iPhoneやAndroidなどスマホやiPadなどのタブレットが一気に吹き出すように浸透した一年になりましたね。

おかげで、PCでは縦スクロールが当たり前だった頃に比べて横スクロールさせるUI（ユーザーインターフェイス）が身近になってきました。

jQueryを使用して、簡単に全画面横スクロールで雑誌風にサイトをみせることができるのがこの「treesaver」。スマートフォンにも対応しているので、iPhoneなど指で左右にスクロールさせて表示させたい時に便利です。しかも画面の大きさによって、自動的にレイアウトを変更してくれます。

「treesaver.js」はPython製、HTML5/JavaScript用のオープンソース・ソフトウェアです。テキストや画像、動画と言ったメディアを織り交ぜた電子雑誌を作ることができます。

この機能を文字では説明しきれないので、紹介の動画をご覧ください。

サンプルを作ってみました。こちらをどうぞ　→　「treesaver.js」サンプル

まずは下のアドレスより最新のtreesaver.js（現在はtreesaver-0.9.2.jsが最新）を本家からダウンロードします。
http://treesaverjs.com/

「treesaver.js」はフレームワークで色々なデザインで構築できるらしいですが、最小の機能だけ実装してもサンプルのようなサイトになります。

1.resourses.html
フレームワークの骨組み部分の定義を記述するファイルです。

2.toc.html
画面左タブを開いた時に表示されるコンテンツを指定します。

3.index.html,page01.html,page02.html　…
メインコンテンツです。サイトの見せ方を自動的にレイアウトを調整して表示してくれるようになります。

4.style.css
cssで書かれたスタイルシートです。

本家のサイトをみて分かる人は分かるのでしょうが、英語サイトなのでサンプルファイルを一式配布します。長々と説明するより、ファイルを見てもらったほうが分かると思います。
どうぞご参考まで。
{filelink=2}

こちらのサイトを参考にさせていただきました。
RwJ様　[レビュー]新聞、雑誌風にデザインするJavaScriptフレームワーク「treesaver.js」

このエントリーをはてなブックマークに追加
LINEで送る

あわせてお読みください