atelier:mitsuba

i love UI/UX, Blend, XAML, Behavior, P5, oF, Web, Tangible Bits and Physical computing. なにかあればお気軽にご連絡ください。atelier@c-mitsuba.com

その2:HTML5アプリをMetroStyleAppに移植する

Windows 8 Developer Previewなので正式版とは異なる場合があります。
また、Windows Updateが走るときもあるため、エントリ執筆現在の情報をもとにかいています。

MetroStyleAppの開発には
従来のSLのようなXAML+C#,VB
COM叩いたりDirectX叩いたりするXAML+C,C++
Webテクノロジを使ってつくるHTML+JSがあります。

今回はそのHTML+JSのお話です。

このHTMLで作るアプリ、だいたい動くレベルとしてはMetro StyleにあるIEとほぼ同じです。
なので、もちろんSLやFlashは動きません。
しかし、HTML5ならhtml5test.comで300点スコアのでるブラウザです。
なので、必然的にHTML5で組むことになると思います。


HTML5だとサンプルも多くありますし、JSなのでソースも見ることができます。
今回はjsdo.itでforkしたアプリをMetro Style Appに移植します。

http://jsdo.it/mitsuba_tan/iClA

5000個のパーティクルで時計をつくりました。クリックすると日付が表示されます。
MetroStyleAppに移植するとこんなかんじ。BootCampだとスクリーンショットが取れないのが残念。

ただ、パーティクル5000個はやっぱりきついらしく15fps程度。
BootCampでもVMでも同じぐらいだったので、ブラウザで処理能力が頭打ちなのかなーとか思いました。


方法は簡単で
1.http://jsdo.it/mitsuba_tan/iClA からzipでソースをダウンロード
2.中にあるindex.htmlの中身を、VSのWebAppで作ったdefault.htmlにコピペ

3.index.jsとstyle.cssをプロジェクトに追加して、canvasが真ん中にくるようにcssを編集

canvas{
  background: #000;
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-200px;
  margin-top:-200px;
}


ようはそのままブラウザで動くアプリがもってこれます。
ただ、IE10がWebGLに対応していないのと、Alertなどいくつか使えない命令があるのに注意する必要があります。

いやでもHTML5はサンプルがいっぱいあるので簡単にアプリを量産できますね。
ちなみに、囲む会名古屋では、前でBox2Dの移植を見せました。



//ぱじゃまうつりこんでる!


追記:BootCampに入れたWin8で起動しなおすとほぼ60fpsで動作しました。