sibEaselJSはCANVASをactionscriptに似た感じで扱えるようにするjavascriptライブラリだ。Skinner氏である。Chambers氏も、その開発に協力しており、将来的にはフラッシュとの連携がありそうだと言われている。先ごろ0.4が公開された。ここのところバージョンアップが無かったので開発が続くのか少々不安だったのだけど、これで継続することがはっきりとしたので、いじりはじめてみることにした。worldとプロジェクトのスタートポイント作成を行った。World]EaselJSの最新版は以下のgtihubからダウンロード可能だ。EaselJSを元にサークルとテキストが表示されるだけのスクリプトを作り上げた。canvasは他から与えられるようにしてある。WorldでEaselJSの空気は確かにasにかなり似通っており、きっとasのディスプレイオブジェクトにあるプロパティなら確認せずに書いてしまっても大丈夫そうだと理解できた。Boilerplateという、HTML5を扱う上でのベストプラクティスを集めたテンプレート集がある。以下が日本語で解説してくれているサイトだ。Boilerplateを使用してきた。Boilerplateをテンプレートとして使用し、必要なところを変更していくことにした。・jQueryのコメントアウトを外す。・ライブラリにeasel.js,Stats.jsを加え、今回のjsファイルであるscriptHello.jsを読み込むようにする。・img/h,img/l,img/mにあるスタート画面やアイコンをオリジナルの物にする。これ以外にもボットやサイトマップなどあるが今のところは置いておく、あとよくわからないテクニックやツール類も後で判明したら手を加えていくつもりだ。[スクリプト構築方]次に具体的なスクリプトの構築方へと入っていく。グローバル汚染が嫌なので無名関数の中にいれることとする。{・・・})(window);スタディでの利便性を考えとりあえずはjQuery使用するが、他のフレームワークを使用する可能性もあるので切り離しやすい構造にする。main関数でeaselJsを扱い、その外側で無名関数内ではjQuery使用可としておく。easelJsを使用するmain関数や関数型コンストラクタ内ではjQuery使用を控えておく。必要なパラメータ等はmain関数の外側で用意しておき初期化時やsetter/getterなどで授受出来るようにしておく。依存が多く発生するときやしそうなときは、これにこだわらない。main関数はフラッシュのMainクラスつまりドキュメントクラスとしての扱いをする。ステージに結び付け、ディスプレイオブジェクトのTOPに当たる部分にする。これは上記のjQuery使用部分とeaselJs使用部分を分離させる為にも有効だ。関数型コンストラクタでは大丈夫だが、無名関数内でコンストラクタを使用せずにTicker.addListener(this)とするとTickerが動かない。tick;とでもしておけば解決する。[アドレスバー]iPhoneでは、どうしてもアドレスバーが取ってしまう面積が大きくもったいないので消しておきたい。これは画面内容が全て読み込まれた後、少しタイミングをずらして1pixスクロールさせることで可能だ。100);まず今のウィンドウサイズ+アドレスバー分の大きさを確保して100ms後にスタート関数を動かす。main().init(canvas,stats);この時点でアドレスバー分含めたドキュメントの大きさは確保されているので1pixスクロールする。そのドキュメントの大きさにあわせてcanvasサイズを決めて、mainコンストラクタからオブジェクト化をさせる。これでアドレスバーの表示はなくなり、その分コンテンツに使用できる。touch2のようにアドレスバーが出にくいようにはできていないので、調査をすすめる。下記のようにすればステージをいじってもアドレスバーが出ないようにできた。}また、htmlのheadにある以下の部分のコメントアウトを外し、ホーム画面に追加をするとフルスクリーンになる。href="img/l/splash.png">[Stats.js]three.jsのスタディに続きパフォーマンス確認のためにStats.jsを含める。100;$main.append(stats.domElement);tickでstageのアップデートと共にstatsのアップデートも行う。これを忘れていて私はしばらく戸惑っていた。worldとzipファイルをこちらに置いておく。EaselJSeaselJs_start.zipこれでとりあえずでは使えるスタートポイントになった気がする。次回以降で素材読み込みとインタラクションを行うつもりだ。Boilerplateで使われているプラクティスの読解も入れることにした。Comment返信をキャンセルする。