検索
特集

HTML＋JavaScriptでWindowsストアアプリを作るための基礎知識：HTML5で業務向けWindowsストアアプリ開発入門（2/2 ページ）

本連載では、Webデザイナー／開発者に向けて、Windowsストアアプリの特徴と簡単な開発ノウハウを説明していきます。初回は、WebデザイナーがWindowsストアアプリを作れるとよい理由と、Windowsストアアプリの特長、HTML5＋JavaScriptで開発する際の注意点、開発環境などについて。

[吉田実央，フューチャーレイズ株式会社] PC用表示 関連情報
Share
Tweet
LINE
Hatena
前のページへ | 　　　　　　

HTML5＋JavaScriptでWindowsストアアプリを作る際の注意点

　HTMLとJavaScript でWindowsストアアプリを作成するには、下記のライブラリやAPIが必要になります。

  • DOM API（HTML構文でWindowsストアアプリを作成するための専用API）
  • WinJS（JavaScript用Windowsストアアプリ用ライブラリ）

DOM 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");
Windowsストアアプリで使用できないalert()関数
var msg = new Windows.UI.Popups.MessageDialog("Hello World!");
msg.showAsync();
Windowsストアアプリで使用できる

　なお、Windowsストアアプリで使用できるHTMLタグについては、公式サイトの「HTML の安全性を高める：toStaticHTMLの詳細（JavaScriptとHTMLを使ったWindowsストアアプリ）（Windows）」にある「要素」の一覧をご確認ください。

　また、HTMLとDOM APIの違いについては、公式サイトの「HTMLとDOM APIの変更点の一覧（Windows）」をご参照ください。

WinJS

　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）」をご参照ください。

HTML5で対応されたコントロールも使える

　さらに、Windowsストアアプリでは、WinJSやDOM APIの他に、HTML5で対応されたコントロールも使えます。

　下記のコードは、動画をWindowsストアアプリで作成するコードです。

<h1>HTML5 Video</h1>
<video src="sample.mp4" controls="controls" />

　このようにWindowsストアアプリ開発では、DOM APIやWinJS、HTML5で提供されているそれぞれのコントロールを組み合わせることにより、Windowsストアアプリを作成／デザインしていきます。

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デザイナーのメリットとして、下記のポイントを取り上げました。

  • Webデザイナーの方でも、経験を生かしたアプリケーションやデザインを作成できる
  • HTMLやCSS、JavaScriptの流用が可能
  • 新たなビジネスチャンス、市場・チャネル開拓の可能性

　また、Windowsストアアプリを作成するのに必要なものとして下記を取り上げました。

  • DOM API
  • HTML／HTML5
  • JavaScript
  • WinJS
  • CSS／CSS3

　次回は、「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.

前のページへ | 　　　　　　
ページトップに戻る