Ext JS 5 でネイティブ Windows 8 アプリを作る

こんにちは、ゼノフィnakamuraです。

この記事は、US Sencha社ブログ Creating Native Windows 8 Apps with Ext JS 5 を翻訳したものです。

マイクロソフトは Web 開発のフィールドで長い歴史があります。Internet Explorer(IE) が、1990年代後半から2000年代前半までの「ブラウザー戦争」で圧倒的な勝利を収めて以降、IE での開発は停滞している。 IE 6 は2001年にリリースされてすぐに、当時のブラウザーマーケットのシェアの90％以上を獲得しました。しかし、そこから数年間、日々生み出されていく新しい Web 標準への対応やアップデートがなかったことから、その評判は著しく低下した。そして、続く2000年代後半の「ブラウザー戦争」では、モバイルデバイスの登場により、IE のマーケットの独占はすぐに崩れてしまいました。

近年ではマイクロソフトはテクノロジーコミュニティのリーダーとしての威厳と信頼を取り戻すべく、特に HTML5 の傘下で頑張っています。マイクロソフトは 2010年頃から HTML5 の利便性を唱えていて、彼等にとって最初の HTML5 機能を IE 9 で取り入れました。

マイクロソフトの HTML5 へのサポートはそれ以降成長し、拡大しています (詳しくは Sencha Whitepaper をご覧ください) )。そして 2012年に Windows 8 が登場してからは、マイクロソフトはネイティブな Windows アプリケーションを作るために、 Web テクノロジーを1級の開発オプションにまで昇格させました。開発者は特別なラッパーやコンパイラーなど使用することなく、JavaScript、HTML、そしてCSSを使ってネイティブな Windows アプリケーションを作って配布することが、初めてできるようになりました。

全てがHTML5 になるということで開発者としては大変興奮していたので、Windows 8 のアプリを作り始めることにしました。SenchaCon 2013　では Ext JS を使って Windows 8 アプリケーションを作る話までもしてしまいました…。しかし、私はすぐにHTML5 で作られた Windows 8 アプリはブラウザ内で実行されているものとは全く違うということにたどり着きました。

2014年まで早送りしましょう。Sencha は Ext JS 5 をリリースしました。たくさんの新しい機能の中に、あまり知られていないかもしれませんが Windows 8 アプリケーションを完全にシームレスに作る事ができるものが含まれています。ここからは Windows 8 アプリケーションが普通の Web アプリとどう違うのかを解説し、どのように Ext JS 5 が　そういった Windows 8 アプリの開発を簡単にしてくれているかも解説したいと思います。

Windows 8 Applications

Windows 8 は IE10 をブラウザとして出荷され、Windows 8.1 には IE11 が入っています。様々なソース( HTML5Test.com 、 HTML5Readiness.com そして Sencha ) によると、IE10 と IE11 は両方共に HTML5 に対してかなりいい感じにサポートが整っているようです。これがなぜ大事かというと、Web テクノロジーを駆使して作られたネイティブ Windows 8 アプリケーションは、IE10/11 と同じレンダリングと JavaScript エンジンを使っているからです。

ところが、ネイティブ Windows 8 アプリケーションは、ネイティブ Windows API にアクセスできるため、HTML5 で作られた Windows 8 アプリケーションは、Windows シェルのセキュリティモデルの対象です。このセキュリティポリシーは、開発者が JavaScript を使って行う多くの習慣を妨げてしまいます。例えば window API を使用してダイナミックに HTML を加えることなどです。しかし、多くの JavaScript フレームワーク (Ext JS も含まれています) が内部では DOM　オペレーションを操作しているため、ネイティブ Windows 8 アプリケーションを、あなたのお気に入りの JavaScript フレームワークで作成するということは歴史的にも大きな挑戦でした。

Ext JS 5.0.1 と ext-win8 パッケージ

最近リリースされた Ext JS 5.0.1により、Sencha は Ext JS を Windows 8 のセキュリティポリシーに対応できるように力を注ぎました。このプロセスには2つの大事な部分が関係しています。

Ext JS 5.0.1 は、設定すると、制限された JavaScript や DOM 操作を実行可能なコンテキストにする特別なフックが含まれる様に作られています。
私たちは簡単にインストールができる、設定済みのフック(ext-win8) が含まれた、特別な Sencha Cmd パッケージを作りました。

その結果、他の Web アプリと同じ様に Ext JS を使ってネイティブ Windows 8 アプリケーションをビルドすることができます。

ext-win8 パッケージをインストールするには、アプリケーションの app.json ファイルの “requires” 下 “ext-win8” をに加えるだけです。

//…
"requires" : [ "ext-win8" ],
//...

そして、Sencha Cmd をつかってアプリケーションを refresh しましょう。

sencha app refresh --packages
// または
sencha app build development

Sencha Cmd は CDN から ext-win8 パッケージをダウンロードし、あなたのマシンのローカルレポジトリ (e.g. /Users/arthurakay/bin/Sencha/Cmd/repo/pkgs/) にインストールします。

リフレッシュやビルド処理の一環として、Sencha Cmd は ext-win8 を貴方のアプリケーション (またはワークスペース) にコピーし、アプリケーションの依存性チェーンを更新し、必要な Windows 8 フックを含ませます。

次の短い動画を見ればその仕組みが簡単にわかります。

動画と同じアプリケーションは GitHub でも提供しています。

まとめ

HTML5 を取り入れることで、マイクロソフトは開発者に新しい扉をあけ、新しいマーケットへのアクセスも HTML5 開発者に与えました。そして同じくらい重要なことですが、マイクロソフトは HTML5 サポートにおいてはリーダー的な立ち位置をとるようになり、その結果マルチデバイス、マルチプラットホーム、ユニバーサルアプリなどへのアイディアに対しても強いサポートを示すようになりました。

まさに完成品と言ってもいい Ext JS 5 があるので、開発者は Windows 8 プラットホームを見直すタイミングかもしれません。そして、いかに HTML5 が　ビジネスやそのお客様に新しいオプションを提供できるかを評価すべきかもしれません。

Sencha Blog