Technology

テクノロジー

【HTML5 Dev】「TRON」の舞台裏:HTML5 による電子書籍サイト構築 (3/4)

Giorgio Sardo
2012年6月6日 / 07:00
 
 

開発者向けツールを使ったコードのナビゲート


アプリケーションを柔軟にして、モジュール分割し、扱いやすくしておくため、(オリジナル版のように)全体を13種類の「ページ」に分割した。ページをアプリケーション起動時にあらかじめキャッシュし、横に順々に並べていった。各ページがそれぞれの表示と対話ロジックを定義し、それが X 軸方向に対応している(起動時に設定が行われる)。

【HTML5 Dev】「TRON」の舞台裏:HTML5 による電子書籍サイト構築

画面上で見えるすべてのパネル(そして最終的にはデバッグ情報)を処理する描画ループは、1つしかない(experience.js のなかの Draw())。

ヒント:コードをよく見ると、Developer Tools(F12 を押すとアクセスできる)で「Format JavaScript」を有効にすると、JavaScript はもっと読みやすくなる。

【HTML5 Dev】「TRON」の舞台裏:HTML5 による電子書籍サイト構築
*クリックして拡大

デバッグ モード


ほとんどのページには、開発中に役に立つデバッグ情報が含まれる。具体的には、キーボードで「d」を押せば、パフォーマンス フレームカウンタを表示させられる。デバッグ用の別のデータは、Console に送られる(F12 を押し、Console タブを選ぶ)。

【HTML5 Dev】「TRON」の舞台裏:HTML5 による電子書籍サイト構築

補足:アプリケーションには隠しキーがもう1つあるが、それがどのキーで、何をするものか分かるだろうか。

イメージの先読み


最初のページを読み込む際、各ページは experience.js で定義された preloader クラスで必要なリソースを非同期にリクエストする。preloader はプロジェクトのすべてのリソースのキューイングとダウンロードを処理する。

読み込み中は、回転するボールのアイコンが表示される。これは、スプライト アニメーションのテクニックを使って実現している。アニメーションは、ステップ数無限でループするデータ列として、イメージの中で定義される(loading-base-128.png が表示用に90o回転されている)。このイメージを Canvas 上で描画する際に、描画ウィンドウをステータスごとに映像のみに変更し、必要に応じてオフセットを1つずつ増やす。

【HTML5 Dev】「TRON」の舞台裏:HTML5 による電子書籍サイト構築


この画像がほかのものより先に準備できていることは、どうやって分かるのだろうか。実は、どの素材よりも先にダウンロードし、サイズも比較的小さく抑えておくので先に用意しておけるのだ。
【関連記事】
Tapnow ブックストア、「宇宙兄弟」「けいおん!」など電子書籍1万2,000冊を展開
キングジム、電子書籍出版/書店開設サービス「wook」事業を取得
【HTML5 Dev】Mobile Joomla! を使ったサイトの最適化 - パート3
【HTML5 Dev】Mobile Joomla! を使ったサイトの最適化 - パート2
きさま! 診ているなッ!― 電子書籍アプリ「ジョジョの奇妙な診断」が発売

関連キーワード:
アニメ
 
JavaScript
 
IE
 

New Topics

Special Ad

ゆりかごからロケットまで、すべての乗り物をエンジョイ
ゆりかごからロケットまで、すべての乗り物をエンジョイ えん乗り」は、ゆりかごからロケットまで、すべての乗り物をエンジョイする、ニュース、コラム、動画などをお届けします! てんこ盛りをエンジョイするのは こちらから

Hot Topics

IT Job

Interviews / Specials

Popular

Access Ranking

Partner Sites