HTMLとJavaScript でWindowsストアアプリを作成するには、下記のライブラリやAPIが必要になります。
Windowsストアアプリの多くは、Internet Explorer(以下、IE)などのブラウザーで認識していたHTMLタグをそのまま使用できるように構成されていますが、セキュリティの都合などで、一部サポートされていないHTMLタグがあります。
これらのタグは、DOM APIとしてWindowsストアアプリ専用のHTMLタグに置き換えることで、対応できるようになっています。
例えば、aタグでtargetを指定すると、IEなどのブラウザーでは、新しいブラウザーWindowを開いて、aタグで指定されたコンテンツなどを表示していました。
<a href="http://www.futurerays.biz/" target="_blank">フューチャーレイズ株式会社</a>
しかし、Windowsストアアプリで、このコードを実装すると、Windowsストアアプリ内での新たなストアアプリを表示するのではなく、従来のWebコンテンツ同様、新しいブラウザーWindowが開く挙動となります。
また、iframeタグの使用もWindowsストアアプリでは認められておらず、DOMの構成が通常のHTMLとは若干異なる点に留意しておく必要があります。
さらに、JavaScriptでよく使用されているalert()関数は、Windowsストアアプリ内でそのまま使用することはできず、Windows.UI.Popups.MessageDialog()関数で代用する必要があります。document.write()関数についてもセキュリティ上の理由で、そのまま使用すると例外(エラー)が発生する可能性もあり、Webコンテンツ作成時との違いを認識しておく必要があります。
alert("Hello! World");
var msg = new Windows.UI.Popups.MessageDialog("Hello World!"); msg.showAsync();
なお、Windowsストアアプリで使用できるHTMLタグについては、公式サイトの「HTML の安全性を高める:toStaticHTMLの詳細(JavaScriptとHTMLを使ったWindowsストアアプリ)(Windows)」にある「要素」の一覧をご確認ください。
また、HTMLとDOM APIの違いについては、公式サイトの「HTMLとDOM APIの変更点の一覧(Windows)」をご参照ください。
WinJSは、Windowsストアアプリを作成するための部品ライブラリ(Windowsストアアプリ開発では「コントロールセット」と呼ぶ)です。JavaScriptとCSSで構成されており、Windowsストアアプリを柔軟に作成するための部品が収録されています。
WinJSに収録されているライブラリを使用するには、divなどのHTMLタグの属性に「data-win-control」を付与する必要があります。もしくは、DOM APIに収録されているHTMLタグをそのまま記述することで使用できます。
下記例は、WinJSに収録されているDatePickerという部品(Windowsストアアプリ開発では「コントロール」と呼ぶ)を使って、Windowsストアアプリ上に表示したサンプルです。
<h1>DatePicker Sample</h1> <div data-win-control="WinJS.UI.DatePicker" style="height:20px;top:300px;left:100px;"></div>
WinJSには、DatePickerの他に、時刻を選択できるTimePickerや評価値を示せるRatingコントロールなど、Windowsストアアプリに必要な強力な部品を数多く用意しています。
WinJSやHTMLで表現できる部品(コントロール)の一覧については、公式サイトの「コントロールの一覧(JavaScriptとHTMLを使ったWindowsストアアプリ)(Windows)」をご参照ください。
さらに、Windowsストアアプリでは、WinJSやDOM APIの他に、HTML5で対応されたコントロールも使えます。
下記のコードは、動画をWindowsストアアプリで作成するコードです。
<h1>HTML5 Video</h1> <video src="sample.mp4" controls="controls" />
このようにWindowsストアアプリ開発では、DOM APIやWinJS、HTML5で提供されているそれぞれのコントロールを組み合わせることにより、Windowsストアアプリを作成/デザインしていきます。
本連載では、Windowsストアアプリを開発する際、主に下記を使用います。
いずれもマイクロソフトのWebサイトから入手可能です。
また、Visual Studio 2012/2013の上位エディションでは、「Blend for Visual Studio」が同梱されており、Blend for Visual Studioを使ってWindowsストアアプリを開発することも可能ですが、本連載では、Surface Pro 2上で動作するWindowsストアアプリの開発手順を紹介するため、Microsoft Visual Studio Express 2013 for Windowsの利用を推奨します。
WindowsストアアプリがもたらすWebデザイナーのメリットとして、下記のポイントを取り上げました。
また、Windowsストアアプリを作成するのに必要なものとして下記を取り上げました。
次回は、「HTMLとJavaScriptで作成する初めてのWindowsストアアプリ作成」として、Microsoft Visual Studio Express 2013 for Windowsを使って、実際にWindowsストアアプリをHTMLとJavaScriptを使って作成していきます。
吉田実央
フューチャーレイズ式会社アーキテクト
フリーランスのITエンジニア/テクニカルライターとして従事し、株式会社アロウズテクノロジーズなどを経て、2013年7月にフューチャーレイズに入社。Dynamics CRM、Dynamics AXをはじめ、ASP.NETなど、マイクロソフト製品を活用したソリューション構築を専門としている。
主な著書は「はじめてのVisual Studio 2008(TECHNICAL MASTER)」(秀和システム)、「はじめてのVisual Studio 2010(TECHNICAL MASTER)」(秀和システム)、「Microsoft .NETで考察するエンタープライズソリューション構築概要」(EnterpriseZine/翔泳社)、「サーバーサイドスクリプト500の技」「C/C++ 300の技」(ともに技術評論社:共著)など多数。
Copyright © ITmedia, Inc. All Rights Reserved.