HTML5 でつくる MetroStyleApps蜜葉 優

• H.N. : 蜜葉 優 [mitsuba yu]• Community:Silverlight Square

Windows Phone Arch• twitter:@mitsuba_tan• Web:http://c-mitsuba.com• blog:http://d.hatena.ne.jp/c-mitsuba

profile

• 次世代の Windows OS• Metro Design• Desktop と MetroStyleApp がある。

• この前の Max で、 Flash のNativeExtentions で Windows Phone とMetroStyleApps に対応するよ！って言ってた

Windows 8

過度な期待はしないでください

MetroStyleApps ってなに？• HomeScreen から起動する Windows 8

用アプリケーション• Metro デザインが使われている• 今のところ、サードローディングできない• 自分でビルドして実行• 将来的にはマーケットでアプリが売れる

どれぐらい対応してるの？• 実際どれぐらい HTML5 に対応できている

のか。

• 基本的に、 MetroStyleApps はMetroStyleApps にある IE と同じ

• というわけで、 IE で html5test してみましょう。

個人的に• 動画が H.264 にしか対応してない

• WebGL の 3D に対応してない

• WebCam が使えない？のが悲しい

じゃあメリットは• ブラウザで動く HTML5 のアプリを

ローカルに移植できる。

• ＋ WinRT API を叩けば、 System が持ってるサービスも HTML5 から利用することができる。

HTML5 のサンプルを移植してみる

• 開発環境は VisualStudio• Chrome Expriments = Chrome がはや

いよ！っていうアピールしてるサイト• ここにある BallPool を移植してみる• http://

www.chromeexperiments.com/detail/ball-pool/

HTML5 のサンプルを移植してみる

友人がつくってたjubeat も移植してみた

ら。。。。。。。

そのままじゃうごかなかった。。。

UnsafeLocalFunctionfunction buttonClick() { msWWA.execUnsafeLocalFunction(function () { if (msWWA) { document.getElementById("title").innerHTML

= "hello metro"; } });}

パフォーマンスは？http://jsdo.it/mitsuba_tan/iClA

WinRT を使おうPushNotification (Toast)通知を使ってみます。

テンプレートいろいろ

MetroStyle Designhttp://msdn.microsoft.com/en-us/windows/apps/

まとめと参考HTML5 が組めれば、将来的に Windows のローカルアプリも開発できるようになります。ローカルアプリなので、めんどうなブラウザ互換とか関係なし！いま HTML5 覚えて、来年にはマーケットにだそう！

まとめと参考なかなか期待できそうです。

iso 、 sample 、 pdf もろもろあります。http://msdn.microsoft.com/en-us/windows/apps/