Hatena::Groupsubtech

ういはるかぜの化学

Friday, February 03, 2012

[]Metro style appsはHTMLで書けるの?という話。 14:46 Metro style appsはHTMLで書けるの?という話。 - ういはるかぜの化学 を含むブックマーク はてなブックマーク - Metro style appsはHTMLで書けるの?という話。 - ういはるかぜの化学

Windows 8Metro style appsがHTMLJavaScript「で」書けるようになるということについて、先日Twitterでも少し誤解されていたのでちょっとまとめ直してみます

実際書けるの?

ざっくり整理するとこうなります

ちなみにここにはパッケージングが必要だとかそういう話は含めていません。

というわけで関連する技術適当に図にしたのがこれです。

f:id:mayuki:20120203143644p:image:w640

これはごく一般的なMetro style appsの形です。真ん中にInternet Explorerエンジンを置いて、上が普通のWebで使うことのできる技術、下がWindowsネイティブ技術です。

というわけですこし分解して見てみます

0. Web

Metro style appsの前にブラウザで見る普通のWebページの場合を。多分こんな感じ。ネイティブ機能は全くありません。

f:id:mayuki:20120203143645p:image:w640

1. 最小の構成

まず最初Metro style appsに必要最低限な構成です。この場合最低HTMLが1ファイルあれば出来上がりです(ほかにも必要であればCSSとかJSとかとか)。この時利用する技術普通のWebと同じレベル、いわゆるWeb標準としてあるものだけです。

f:id:mayuki:20120203143646p:image:w640

これでもとりあえず見た目がMetro styleかどうかはともかくMetro style appsです。

2. 先行実装、ベンダー拡張

はいちょっと機能にしたい、表現力を上げたいなどという時にはブラウザに先行実装されていたり、ベンダーが独自に拡張したCSSAPIを利用します。-ms-*プロパティとかですね。まあこれも最近Web世界では-webkit-*とかよく使われているのでそれですね。

f:id:mayuki:20120203143647p:image:w640

というわけでその辺りを盛り込んだものでもMetro style appsです。この時点ではやっぱりまだ普通のWebとあまり変わりません。

3. Windows Library for JavaScript

しかしそろそろちゃんとMetro styleにしたくなります。色合いやコントロールなどです。

そういったMetro styleらしいアプリケーションを構築するためにWindows Library for JavaScript、WinJSとよばれるライブラリ提供されていますライブラリと言いながらスタイルシートも含まれています

で、WinJSを使うようになるとこんな感じです。WinJSは色々な機能があり、必要なものだけを選択して(要するに.jsファイルの参照)使えるので取り敢えず見た目やベースライブラリだけを使う前提です。

f:id:mayuki:20120203143648p:image:w640

図をみるとわかりますがまだこの時点では拡張されたものも含めてWeb寄りの技術で構成されています

HTML版のMetro style appsではUIコントロールにWinJS.UIというものを使いますが、その記述も実態もHTML5と(拡張された)CSSJavaScriptで構成されています

書き方次第ではまだWeb共存できる可能性があります。が、WinJS.UIが他のベンダープレフィックスなどを考慮してくれることはないのでこの辺りから普通のブラウザと同じかどうかはだいぶ怪しくなります(IEでは動いてしまうけれどIEしか動かない)。

これはもちろんMetro style appsです。

4. Windowsネイティブ

そして最後Web標準になりそうもWebから扱えそうにもならないような機能(ブラウザに持つ必要のないもの)はWindowsネイティブ機能Windows Runtime(WinRT)に頼ることになります

たとえばコンテキストメニュー、ページナビゲーション、アプリケーションサスペンド、ソケット通信、ファイル操作といったローカルと密接なものたちなどです。またWinJSも一部WinRTを知っているので、協調して動いたりラッパーになっていたりするものがあります

f:id:mayuki:20120203143644p:image:w640

ここまで来て最初の図になります。そしてネイティブ機能を使うことになるのでもはやWeb技術だけではなくなります

そしてこの形がMetro style appsとしては一般的な構成になるとおもわれますVisual Studioテンプレートはこの形で吐き出します。

まとめ

というわけでHTMLで書けるかという話ですが最初のほうに書きましたが、大抵はWindows 8依存したHTMLで書くことになるけれどブラウザと同じ形にしようと思えばできる、です。

大抵のアプリケーション最後パターンになると思いますが、重要なのは1や2のパターンもアリだと言うことです。これはMetro styleを必要としないアプリケーション、例えば全て独自のUIをもつゲームなどを作る場合には有利になるのではないかと思います

ちなみに

Web標準的なもので書こうと思えば書けるといってはみたものの、一部操作に制限があったりするのでWebコードをそのまま持っていくと何らかの書き換えが必要になる場合がまれにあります。そんな時はMetro style appsに依存して回避する書き方か制限を回避する推奨される別な手段での書き方に修正が必要です。

トラックバック - http://subtech.g.hatena.ne.jp/mayuki/20120203