Friday, February 03, 2012
■ [Metro]Metro style appsはHTMLで書けるの?という話。 
Windows 8のMetro style appsがHTMLとJavaScript「で」書けるようになるということについて、先日Twitterでも少し誤解されていたのでちょっとまとめ直してみます。
実際書けるの?
ざっくり整理するとこうなります。
- JavaScriptやHTML/CSSを使うなら全体をHTMLで書くしかない
- そこにXAMLを選ぶということはできない
- HTMLやCSSがWeb標準であるかというと大半のアプリケーションはそれでは済まないけれど、Web標準だけで書くこともできる
ちなみにここにはパッケージングが必要だとかそういう話は含めていません。
これはごく一般的なMetro style appsの形です。真ん中にInternet Explorerのエンジンを置いて、上が普通のWebで使うことのできる技術、下がWindowsネイティブの技術です。
というわけですこし分解して見てみます。
0. Web
Metro style appsの前にブラウザで見る普通のWebページの場合を。多分こんな感じ。ネイティブの機能は全くありません。
1. 最小の構成
まず最初にMetro style appsに必要最低限な構成です。この場合最低HTMLが1ファイルあれば出来上がりです(ほかにも必要であればCSSとかJSとかとか)。この時利用する技術は普通のWebと同じレベル、いわゆるWeb標準としてあるものだけです。
これでもとりあえず見た目がMetro styleかどうかはともかくMetro style appsです。
2. 先行実装、ベンダー拡張
とはいえちょっと高機能にしたい、表現力を上げたいなどという時にはブラウザに先行実装されていたり、ベンダーが独自に拡張したCSSやAPIを利用します。-ms-*プロパティとかですね。まあこれも最近のWebの世界では-webkit-*とかよく使われているのでそれですね。
というわけでその辺りを盛り込んだものでもMetro style appsです。この時点ではやっぱりまだ普通のWebとあまり変わりません。
3. Windows Library for JavaScript
しかしそろそろちゃんとMetro styleにしたくなります。色合いやコントロールなどです。
そういったMetro styleらしいアプリケーションを構築するためにWindows Library for JavaScript、WinJSとよばれるライブラリが提供されています。ライブラリと言いながらスタイルシートも含まれています。
で、WinJSを使うようになるとこんな感じです。WinJSは色々な機能があり、必要なものだけを選択して(要するに.jsファイルの参照)使えるので取り敢えず見た目やベースライブラリだけを使う前提です。
図をみるとわかりますがまだこの時点では拡張されたものも含めてWeb寄りの技術で構成されています。
HTML版のMetro style appsではUIコントロールにWinJS.UIというものを使いますが、その記述も実態もHTML5と(拡張された)CSSとJavaScriptで構成されています。
書き方次第ではまだWebと共存できる可能性があります。が、WinJS.UIが他のベンダープレフィックスなどを考慮してくれることはないのでこの辺りから普通のブラウザと同じかどうかはだいぶ怪しくなります(IEでは動いてしまうけれどIEでしか動かない)。
これはもちろんMetro style appsです。
4. Windowsネイティブ
そして最後にWeb標準になりそうもWebから扱えそうにもならないような機能(ブラウザに持つ必要のないもの)はWindowsのネイティブ機能、Windows Runtime(WinRT)に頼ることになります。
たとえばコンテキストメニュー、ページナビゲーション、アプリケーションのサスペンド、ソケット通信、ファイル操作といったローカルと密接なものたちなどです。またWinJSも一部WinRTを知っているので、協調して動いたりラッパーになっていたりするものがあります。
ここまで来て最初の図になります。そしてネイティブ機能を使うことになるのでもはやWeb技術だけではなくなります。
そしてこの形がMetro style appsとしては一般的な構成になるとおもわれます。Visual Studioのテンプレートはこの形で吐き出します。
まとめ
というわけでHTMLで書けるかという話ですが最初のほうに書きましたが、大抵はWindows 8に依存したHTMLで書くことになるけれどブラウザと同じ形にしようと思えばできる、です。
大抵のアプリケーションは最後のパターンになると思いますが、重要なのは1や2のパターンもアリだと言うことです。これはMetro styleを必要としないアプリケーション、例えば全て独自のUIをもつゲームなどを作る場合には有利になるのではないかと思います。
ちなみに
Web標準的なもので書こうと思えば書けるといってはみたものの、一部操作に制限があったりするのでWebのコードをそのまま持っていくと何らかの書き換えが必要になる場合がまれにあります。そんな時はMetro style appsに依存して回避する書き方か制限を回避する推奨される別な手段での書き方に修正が必要です。