Windows ストア アプリ(HTML + JavaScript)の構造


前回の記事 から引き続き、Windows ストア アプリケーションの開発についてです。

今回は、HTML + JavaScript で作成する Windows ストア アプリの構造について紹介します。

 

Windows ストア アプリ(HTML + JavaScript)の構造

 

Windows ストア アプリは、C、C++、C#、VB といった従来からのデスクトップ アプリケーション用の開発言語だけでなく、JavaScript でも開発を行うことができます。

JavaScritp を使用して Windows ストア アプリを作成する際に使用されるテクノロジーは以下の三つです。

  1. HTML5
  2. CSS3
  3. JavaScript

これを WWAHost.exe のプロセスがホストします。

image

WWAHost.exe は Internet Explorer 10 のスーパーセットであり、Internet Explorer 10 よりも多くの機能を持ち、より強い権限で動作します。

そのため、いくつかセキュリティ上の制限はあるものの、Internet Explorer 10 で動作するコンテンツは、 WWAHost.exe プロセスで容易にホストすることができます。

 

開発に使用されるライブラリ

JavaScript を使用した Windows ストア アプリを開発する際に使用されるライブラリは以下の 3 つです。

  1. Trident (描画エンジン)
  2. Windows Runtime (WinRT)
  3. Windows Library for JavaScript (WinJS)

各ライブラリの内訳は以下のとおりです。

 

Trident

Internet Explorer 10 と共通の描画エンジンです。

CSS や HTML のマークアップの解析を行い、画面を描画し、JavaScript に DOM (Document Object Model) を提供します。

HTML5 と CSS3 の描画と API をサポートしています。

 

Windows Runtime

通称、WinRT と呼ばれ、このライブラリの提供するクラスは Windows というネームスペースから始まります。

JavaScript から Windows OS の機能を使用するためのライブラリです。

このライブラリを使用することにより、Windows OS が管理している、ファイル、フォルダ、リムーバブルディスク、Web カムのようなハードウェア、様々なセンサーデバイスを使用することができます。

 

Windows Library for JavaScript

通称、WinJS と呼ばれ、WinRT が JavaScript に Windows OS のリソースを提供するのに対し、WinJS は、Windows ストア アプリのリソース、例えば、リッチなコントロール、データバインドの仕組み、Promise モデルの非同期の仕組みなど、 Windows ストア アプリが既定でもっている機能を利用するためのライブラリです。

このライブラリの提供するクラスは WinJS から始まります。

 

上記のように、Windows ストア アプリでは Web 標準技術 (Trident)、Windows OS の機能 (WinRT)、Windows ストア アプリケーションの基本的な機能 (WinJS) を組み合わせて開発を行っていきます。

 

サポートされる HTML5 の機能

Windows ストア アプリでサポートされる HTML5 の機能は Internet Explorer 10 と共通です。

しかしながら HTML5 の使用は今現在 (2012/10/) 策定には至っておらず、また、W3C の仕様書にある HTML5 の機能すべてをサポートする Web ブラウザーは今現在、 この地球上には存在しません。

それでは Internet Explorer 10 がどの程度の HTML5 の機能をサポートしているか、なのですが、これについては以下のページが Internet Explorer 10 からサポートされた HTML5、CSS3 の機能を列挙しています。

 

Internet Explorer 10 開発者向けガイド
http://msdn.microsoft.com/library/ie/hh673549.aspx

上記のページは単に Internet Explorer 10 でサポートされた HTML5/CSS3 の機能の列挙のみならず、各機能についての詳細な解説がされているため、HTML5 についての知識のない人でも、「なにをどう書けば、どのような機能が提供されるのか」 を理解できるようになっています。

よって、Internet Explorer 10 でサポートされた HTML5/CSS3 の機能を把握できるのみならが、HTML5/CSS3 についても学習できるようになっています。

また、Internet Explorer 10 でサポートされた HTML5/CSS3 の機能について、実際にサンプルを動作させて確認する Web ページも用意されています。

具体的には、以下の URL にアクセスし、

 

Internet Explorer 10 Test Drive
http://ie.microsoft.com/testdrive/

 

Windows 8 Web Platform」 アイコンをクリックします。

 

image (Windows 8 Web Platform アイコン)

 

遷移先のページでは、すべてではありませんが、Internet Explorer 10 でサポートされている HTML5/CSS3 の機能を試すことのできるサンプルが用意されています。

また各サンプルでは、操作するごとに表示されている HTML タグや style 属性の内容が変化し、操作して変化した表示が、どのような style の設定になるか確認できます。

つまり、このページは CSS3 の style を GUI で生成するためのツールとして使用できるようになっています。

 

image(CSS3 3D Transforms のサンプル)

 

WinJS が提供するコントロール

HTML だけでなく Windows  ストア アプリのライブラリでもある WinJS もコントロールを提供します。

WinJS が提供するのは、フリップビューや、リストビューといった Windows 8 の新しい UI 上で使用されているものの、各個人が HTML と JavaScript でゼロから作成するには手間がかかるようなものです。

image(フリップビュー)

image(リストビュー)

 

また、これら WinJS が提供するコントロールは、Windows 8 の新しい UI が備えているアニメーションや、様々なインタラクションをあらかじめ備えているため、これを使用することで Windows 8 の新しい UI と違和感のないアプリを作成することができます。

WinJS が提供するコントロールというと、なんとなく使い方が難しそうに感じるかもしれませんがそんなことはありません。

たとえば以下は WinJS が提供するトグルコントロールを表示するためのマークアップです。

<div data-win-control="WinJS.UI.Toggle"
data-win-options="{title:’Wi-fi networking’}"
id="myToggle"
</div>

(トグルコントロールを表示するマークアップ)

 

image
(表示されるトグルコントロール)

このトグルコントロールが変更されたことを通知する change イベントを取得するためのハンドラーは以下のように記述します。

WinJS.UI.getControl(myToggle).addEventListener("change", toggleWifi);

もしくは、

document.getElementById("myToggle").addEventListener("change", toggleWifi);

(トグルコントロールの Change イベントを取得するための JavaScript コード)

 

上記のように、マークアップこそいささか奇妙に感じるかも知りませんが、 JavaScript からの使用は、いままでの HTML エレメントと変わらない方法で扱うことができます。

 

<参考>
クイック スタート: WinJS コントロールとスタイルの追加 (JavaScript と HTML を使った Metro スタイル アプリ)
http://msdn.microsoft.com/ja-jp/library/windows/apps/hh465493.aspx

クイック スタート: HTML コントロールの追加とイベントの処理 (JavaScript と HTML を使った Metro スタイル アプリ)
http://msdn.microsoft.com/ja-jp/library/windows/apps/hh465402.aspx

 

次回は Web アプリと Windows ストア アプリの違いについてです。

 

 

 

Real Time Analytics

Clicky

Comments (0)

Skip to main content