最新のアプリ

HTML5 と JavaScript を使って Windows ストア アプリを作成する

Rachel Appel

コード サンプルをダウンロードする

すべてのデスク、すべての家庭にコンピューターを、というビル ゲイツが描いた夢が現実になっただけでなく、Surface タブレットのようなデバイスの登場によりこの夢はさらに広がります。Surface 以外にも消費者志向の新しいデバイスが急増し、あらゆるフォーム ファクターに対応できるようになっています。つまり、あらゆる場所にコンピューターがあります。

既存の Windows をインストールしたコンピューターが全世界で累計 10 億台を超え、ここ 2 年間毎年 3 億の Windows 7 ライセンスが販売されています。現時点でアップグレード可能な Windows インストール ベースと、Surface などの Windows 8 デバイスの市場の急成長を考え合わせると、そこに大きなビジネス チャンスが見えてきます。Windows を見直す機会です。Windows ストアにアプリを公開して収益を上げるまたとないチャンスです。

Windows ストア アプリを作成するためのプラットフォーム、言語、およびツールセット

Windows ストア アプリを作成するには、Windows 8、Visual Studio 2012、および作成するアプリの要件に適した SDK (Windows Live SDK、Bing マップ SDK など) が必要です。このような最低限のシステム設定と構成により、インストールから配置まで、Windows 8 でのアプリ開発が容易になります。

必要なソフトウェアをインストールしたら、言語を選択します。Microsoft .NET Framework 開発者として、C# や Visual Basic を使って Windows フォーム アプリ、Windows Presentation Foundation (WPF) アプリ、または Silverlight アプリを作成してきた経験をお持ちであれば、XAML と C# または Visual Basic を組み合わせて Windows ストア アプリを作成するのが最も簡単です。C++ 開発者の方は、GUI コンパニオンとしての XAML と共に、コンパイル済み言語として C++ を使用できます。

Web 開発者 (ASP.NET を含む) の方は、オープン標準の HTML5、JavaScript、および CSS3 の既存の知識を Windows ストア アプリ開発に直接当てはめることができます。また、jQuery や Knockout のような、サードパーティー製の人気のある JavaScript ライブラリの多くも引き続き利用できます。今回は、言語に JavaScript を選びました。

どのような開発経験をお持ちでも、Windows 8 のネイティブ アプリの開発を始めるのは簡単です。これは、Windows ランタイム (WinRT) が、Windows のコア サービスの上位に位置する複数の API を含むプラットフォームであるためです (図 1 参照)。

図 1 Windows ストア アプリのアーキテクチャ

組み込み Web カメラ、地理位置情報、光センサー、加速度計などのハードウェア向け API を始めとする WinRT API を使って、Windows 8 が提供するすべての機能にアクセスします。もちろん、メモリ管理、認証、グローバリゼーション、非同期処理などのプラットフォームの基本機能だけでなく、検索、共有、通信などの Windows ストア アプリの機能もすぐに利用できます。音声や動画を操作する API もありますが、JavaScript アプリを作成する場合は、HTML5 の <audio> 要素や <video> 要素が有効です。API の詳細については、https://msdn.microsoft.com/ja-jp/library/windows/apps/br211369 の「Windows ストア アプリの API リファレンス (Windows)」ページを参照してください。

Windows ストア アプリの原則

Windows ストア アプリは、ユーザーの邪魔になるアプリやコマンドを排除し、簡潔なコンテンツを提供する全画面エクスペリエンスを特徴とする没入型アプリとして実行されます。Windows ストア アプリでは、ユーザーの注目をコンテンツに引き付けるように、データを明確でわかりやすく表示します。

Windows ストア アプリでは、Windows ランタイムのコントラクトという要素をアプリ間の連絡窓口として使用して、従来の Windows アプリや Web アプリではできなかった共有、検索、相互通信などを簡単かつ統一された方法で実行します。

プレゼンテーションやレイアウトからナビゲーションやアプリのパフォーマンスに至るまで、優れたユーザー エクスペリエンスが Windows アプリ開発における重要な側面になります。ユーザーは、アプリどうしや、アプリと OS に一貫性があることを期待します。Windows ストア アプリではユーザー エクスペリエンスがすべてです。一貫したフォント、Windows UI のシルエット、拡張可能なグリッド システムの使用など、アプリ使用時のユーザー満足度が向上するデザインの原則を採用します。アプリと Windows 8 自体の両方にこうした一貫性を持ち込みます。

ユーザーは、マウス、ペン、タッチ、カメラ、センサーなどさまざまな形式でコンピューター デバイスを操作するようになってきたため、タッチ入力とマウス入力の両方を、信頼性の高い一貫した方法で確実に機能させることが重要です。

コンピューティングの分野では、ARM などのプロセッサを備えバッテリから電源を供給するデバイスが主流になっているため、Windows 8 では、リソースが少ない場合でも高速かつ滑らかなエクスペリエンスが可能になるように、メモリ全体およびアプリごとのメモリを厳密な方法で管理する必要があります。Windows 8 アプリでは、最高のエクスペリエンスを確保するために、わかりやすくシンプルなプロセス ライフサイクルを利用します。

多くのアプリが Windows ストア アプリとしてうまく機能しますが、Windows ストア アプリとしては適切でないアプリもあります。たとえば、Visual Studio 自体は UI デザインの最新の原則を数多く採用していますが、このアプリの目的はユーザーがコマンドを実行できる (プログラムを作成できる) ようにすることです。これは Windows ストア アプリに適しているとは言えません。

Visual Studio 2012 の Windows ストア アプリ プロジェクト テンプレート

Visual Studio 2012 では、C#、Visual Basic、C++、および JavaScript で Windows ストア アプリを開発するために、一連の新しいテンプレートが導入されています。どの言語でも、次のテンプレート スタイルを利用できます。

• 空白: Windows ストア アプリの構築に必要最低限のファイルを備えた空白のテンプレート。
• グリッド: Windows 8 UI シルエットを使用するグリッドを表示するテンプレート。ナビゲーションやスナップ ビューのサポートなど、複数の機能用のテンプレート コードを含みます (後で詳しく説明します)。
• 分割: 項目リストと項目の詳細を 2 列のビューで表示するテンプレート。ユーザーは項目間を簡単かつ迅速に切り替えることができます。
• 固定: default.html ページで ViewBox オブジェクトを使用する空白のテンプレート。ViewBox はゲームで使用する WinRT オブジェクトです。
• ナビゲーション: 空白のプロジェクト構造とナビゲーション、および一連のアプリ基本アセット (home.html、home.js、および home.css) を /home ディレクトリ下に含むテンプレート。

グリッド テンプレートには、スナップ ビュー、画面の拡大縮小、ナビゲーションのサポートなど、Windows 8 の多くの優れた機能を利用するコードが含まれているため、Windows ストア アプリ作成の出発点として最適です。

新しい JavaScript グリッド プロジェクト テンプレートを作成後にテンプレートの構造を調べると、Web ファイルの標準の種類 (.html、.css、.js など) をすべて含む 1 つのプロジェクトが、このプロジェクトのルート下にある複数のフォルダーに整理されているのがわかります。その後、F5 キーを押すか、[デバッグ] メニューの [デバッグ開始] をクリックして、Windows ストア アプリのデバッグと実行が可能です。

Windows ストア アプリのテンプレートでは、default.html が Windows ストア アプリの開始ページになります。default.html には基本プロセス ライフサイクル管理コードを含むコンパニオン スクリプト ファイル (/js/default.js) があります。他の HTML ファイルも同様ですが、default.html にはスクリプト参照や、ページ構造を定義する HTML5 の新しいセマンティック マークアップなども含まれています。default.html の <body> タグ内には次のコードが含まれており、ナビゲーションに WinJS コントロールを使用して groupedItems.html ページを読み込んでいます。

<div id="contenthost"
  data-win-control="Application.PageControlNavigator"
  data-win-options=
  "{home: '/pages/groupedItems/groupedItems.html'}"></div>

data-* 属性は、HTML5 でカスタム コードやカスタム ビヘイビアを HTML 要素に適用する方法で、Windows ストア アプリの開発では、data-win-* は通常 Windows JavaScript コントロールを表します。Windows JavaScript コントロールは、ビヘイビアやスタイルを強化、変更するために HTML 要素に適用する組み込みの WinRT コンポーネントです。data-win-* 属性は、Windows ストアの JavaScript アプリで幅広く利用され、特にデータ バインディングの際に使用されます。

Windows ストア アプリでのデータ アクセス

グリッド テンプレートの一部として、/js フォルダーにある data.js というファイルに、配列のデータセットを構築するコードと、データのグループ化と操作の関数が含まれています。data.js ファイルには、独自のデータに置き換える必要のあるサンプル データも含まれています。ここでは、休日や休暇などのイベントまでの残り日数を示すカウントダウン アプリ用のデータを使用します。

data.js ファイルには、先頭付近に // TODO コメントだけがあります。コメントのコードを次のような独自のコードと置き換え、JSON データを取得する XMLHttpRequest 呼び出しを行い、daysToGo などの動的プロパティや message フィールドを含むデータ セットを作成します。

var list = new WinJS.Binding.List();
...
WinJS.xhr({ url: "data.json" }).then(function (xhr) {
  var items = JSON.parse(xhr.responseText);          
  items.forEach(function (item) {
    item.daysToGo = Math.floor(
      (Date.parse(item.eventDate) - new Date()) / 86400000);
    item.message = item.daysToGo + " days until " + item.title;
    if (item.daysToGo >= 0) {
      list.push(item);
    };
  })
})

data.js ファイルの冒頭には list という名前で WinJS.Binding.List オブジェクトのインスタンスを作成するコード行があり、上記のコードは個々の項目をこの list にプッシュします。

list オブジェクトを使用すると、JSON データや JavaScript の配列を HTML 要素にバインドできます。list 変数にデータをプッシュしたら、HTML マークアップでバインド式を使用して HTML 要素にこの list のメンバーをバインドします。

JSON.parse を呼び出して JSON データを読み取るときに、名前と値のペアの名前が実行時に JavaScript オブジェクトのプロパティと対応付けられます。次の JSON データは、前述のコード スニペットで JSON 構造が items 変数のメンバーに対応付けられるようすを示しています。key、title、eventDate、image、color、および group の各フィールドがすべて item オブジェクトのプロパティに対応付けられます。

[{"key":"1","group":{"key":"group1","title":"Important Dates"},
"title":"Rachel's Birthday","eventDate":"01/13/2013",
"image":"/images/birthday.png","color":"#6666FF"},
{"key":"2","group":{"key":"group1","title":"Important Dates"},
"title":"Ada Lovelace Day","eventDate":"10/16/2013",
"image":"/images/ada.jpg","color":"#fff"},
{"key":"3","group":{"key":"group2","title":"Holidays"},"title":"Christmas",
"eventDate":"12/25/2013","image":"/­images/­tree.png","color":"#ef0d0d"},
{"key":"4","group":{"key":"group3","title":"School"},"title":"School Ends","eventDate":"6/10/2013","image":"/images/schoolbus.png","color":"#fff"},
{"key":"5","group":{"key":"group2","title":"Holidays"},"title":"Thanksgiving",
"eventDate":"11/29/2012","image":"/­images/­thanksgiving.png","color":"#FFCC00"},
{"key":"6","group":{"key":"group2","title":"Holidays"},"title":"New Year's Day", "eventDate":"1/1/2013","image":"/images/celebrate.png","color":"#f8baba"}]

これでデータを読み込んだので、list オブジェクトが適切な HTML 要素にバインドされていることを確かめる必要があります。図 2 の /pages/groupedItems/groupedItems.html ページへの変更は、実行時のデータ バインドを示しています。

図 2 WinJS コントロールによる list オブジェクトと HTML 要素のデータ バインド

<!-- These templates are used to display each
  item in the ListView declared below. -->
<div class="headertemplate" data-win-control="WinJS.Binding.Template">
  <button class="group-header win-type-x-large win-type-interactive"
    data-win-bind="groupKey: key"
    onclick="Application.navigator.pageControl.navigateToGroup(
      event.srcElement.groupKey)"
      role="link" tabindex="-1" type="button">
    <span class="group-title win-type-ellipsis"
      data-win-bind="textContent: title"></span>
    <span class="group-chevron"></span>
  </button>
</div>
<div class="itemtemplate" data-win-control="WinJS.Binding.Template" >
  <div id="myitem" class="item"
    data-win-bind="style.background: color">
    <img class="item-image" src="#"
      data-win-bind="src: image; alt: title" />
    <div class="item-overlay">
    <h2 class="item-title" data-win-bind="innerText: message"></h2>
      <h6 class="item-subtitle"
        data-win-bind="textContent: eventDate"></h6>
    </div>
  </div>
</div>
<!-- The content that will be loaded and displayed. -->
<div class="fragment groupeditemspage">
  <header aria-label="Header content" role="banner">
    <button class="win-backbutton" aria-label="Back"
       disabled type="button"></button>
    <h1 class="titlearea win-type-ellipsis">
      <span class="pagetitle">How long until...</span>
    </h1>
  </header>
    <section aria-label="Main content" role="main">
      <div id="listView" class="groupeditemslist"
        aria-label="List of groups"
        data-win-control="WinJS.UI.ListView"
        data-win-options="{  selectionMode: 'multi',
        tapBehavior:'toggleSelect' }"></div>
    </section>
</div>

図 2 で data-win-bind 属性を含む各 HTML 要素には、前述のコード スニペットの item 変数のプロパティ名に対応するバインド式が含まれているため、バインド式がフィールド名に対応しているかどうかを確かめるだけです。ユーザーがページにナビゲートしたとき正しいデータが表示されるように、groupedDetail.html および itemDetails.html ページのバインド式も変更することを忘れないでください。

このプロジェクトを Windows Simulator で実行すると 図 3 に示すような結果になります (シミュレーターの使用については、bit.ly/M1nWOY (英語) を参照してください)。

図 3 基本的なアプリを作成するためにサンプル データを置き換える

もうおわかりだと思いますが、Visual Studio テンプレートのコードを置き換えるだけで、迅速なデータ アクセスが可能になります。ただし、多くの場合、プロジェクトは大規模になったり、複雑になったりするので、メンテナンスが難しくなります。このような場合は、モデル - ビュー - ビューモデル (MVVM:Model-View-ViewModel) パターンを使うとメンテナンスが容易になります。このパターンについては、Web 上にたくさんの説明があります。

アプリは機能するようになりましたが、ここで Windows 8 の多くの優れた機能を使って、他のアプリと差別化してみましょう。

Windows ストア アプリの価値を高める

Windows 8 で中心となるのはスタート画面なので、まずここでの価値を高めることを考えます。スタート画面はライブ タイルで埋められていますが、ライブ タイルは単なる四角いアイコンの集まりではありません。ライブ タイルは、アプリに注目を集めてユーザーを引き付ける最適な方法です。ライブ タイルが「ライブ」と称されるのは、アプリの魅力を高めるように、情報や画像を動的に表示できるためです。

Windows ストア アプリには、次の 3 種類のピクセル サイズのタイル画像をそれぞれ用意する必要があります。

• ロゴ: 150 x 150 (標準タイル)
• ワイド ロゴ: 150 x 310 (ワイド タイル)
• 小さいロゴ: 30 x 30 (ストアのアプリ リストのみに表示)

画像はよく使われているあらゆる形式を利用できますが、背景が透明な画像が最適です。プロジェクトのルートにある package.appxmanifest ファイルを開くと、タイルの画像と背景色を設定できる構成パレットが見つかります。図 4 に標準タイルとワイド タイルの例を示します。

図 4 カウントダウン アプリの標準タイルとワイド タイル

タイルを設定するタイミングで、画像と背景色を選択するだけで (コードを使用しないで) スプラッシュ スクリーンも構成します。アプリの価値を高めるうえでタイルやスプラッシュ スクリーンは重要な要素ですが、アプリの価値を高めるために実行できることは他にもたくさんあります。詳細については、https://msdn.microsoft.com/ja-jp/library/windows/apps/hh465418.aspx を参照してください。

アプリに必須の Windows 8 機能

この時点でアプリは機能しますが、Windows 8 アプリのエコシステムには、アプリへの関心を高めるために利用できる多くの新機能や API があります。ここからはそのような機能や API について簡単に説明します。

アプリバー: すべてのアプリに不可欠な機能がアプリバーです。アプリバーは、default.html にある WinJS コントロールです。通常、アプリバーは表示されていませんが、ユーザーが画面の上部または下部を右クリックするか、上部または下部からからスワイプすると、画面下部を横切るバーとしてアプリバーが表示されます。図 5 に、3 つのボタンと対応するイベント リスナーを含むアプリバーのマークアップを示します。

図 5 データの追加、削除、およびエクスポートのボタンを備えたアプリ バー

// AppBar markup in default.html
<div id="appbar" data-win-control="WinJS.UI.AppBar">
  <button data-win-control="WinJS.UI.AppBarCommand"
    data-win-options="{id:'addItem', label:'Add',
    icon:'add', section:'global'}" type="button"></button>
  <button data-win-control="WinJS.UI.AppBarCommand"
    data-win-options="{id:'exportData', label:'Save',
    icon:'save', section:'global'}" type="button"></button>
  <button data-win-control="WinJS.UI.AppBarCommand"
    data-win-options="{id:'deleteItem', label:'Delete',
    icon:'delete', section:'selection'}" type="button"></button>
</div>
// Script in groupedItems.js
document.getElementById("exportData").addEventListener("click", Data.exportData);
document.getElementById("addItem").addEventListener("click", this.addItem);
document.getElementById("deleteItem").addEventListener("click", this.deleteItem);

グローバルなコマンドはアプリバーの右側に置き、状況に応じて表示するコマンドは左側に置きます。アプリバーは単なる <div> 要素なので、CSS を使用してスタイルを設定します。

スナップ ビュー: Windows ストア アプリは、全画面またはスナップ ビューというモードで実行できます。スナップ ビューとは、ユーザーがアプリを画面の左または右に "固定" した状態を表します。スナップ ビューでは表示範囲が狭くなるため、アプリでは必要なデータだけを表示します。

スナップ ビューのサポートはグリッド テンプレートに組み込まれているため、スナップ ビューに必要な情報が適切かつ読みやすく表示されることを検証する必要があります。アプリがスナップされてもアプリバーは機能するため、スタイルの調整が必要になる可能性もあります。

セマンティック ズーム: Windows 8 のタッチ操作に対応するこの新機能により、膨大なデータを 1 つのビューに集約して、概要を簡単に把握できるようになります。ユーザーは次の方法でセマンティック ズームを呼び出すことができます。

• タッチ: ピンチ ジェスチャ
• マウス: Ctrl キーを押しながらスクロール ホイールを操作
• キーボード: Ctrl キーを押しながらマイナス記号 (-) キーを押すか、Ctrl キーを押しながらプラス記号 (+) キーを押す

セマンティック ズームは、単純に画面を拡大、縮小表示するのではなく、ナビゲーションを支援するために意味のある方法でデータを詳細に表示するものです。大量のデータがある場合、ユーザーにとっては、あふれかえる情報をスクロールするよりも、データ全体を俯瞰するビューの方が便利です。最も意味のある方法でデータを表現する方法を考えます。

検索と共有: 複数のアプリにまたがるデータの検索や共有は、最新のアプリにとって重要な側面です。ユーザーは複数のアプリにまたがって一度にデータを検索し、見つけたデータを共有できるようになりました。または、アプリ自体を共有対象として登録し、ユーザーが他の Windows ストア アプリと共有するデータを受け取ることもできます。アプリどうしの通信は、かつてないほど簡単かつ一貫性のあるものになっています。

ピッカー コントロール: ピッカー コントロールは従来の Windows コントロールを近代的な UI 向けに更新したものです。ファイル オープン ピッカーやファイル保存ピッカー、または多くのバージョンの Windows アプリに必須だった印刷設定ダイアログなどがあります。

メディア: JavaScript を使って構築した Windows ストア アプリは HTML5 を完全にサポートするため、<audio> 要素と <video> 要素は従来の Web ページとまったく同じように動作します。

トースト通知: トースト通知は、アプリが使用中かどうかに関わらず一時的なメッセージをユーザーに提供する機能です。最も一般的なトースト通知の形式は、携帯電話の電子メール警告ポップアップやテキスト メッセージです。トースト通知にはテキストと画像を含めることができるので、ユーザーの注意をアプリに引き付ける方法としてトースト通知を使用することもできます。未読メッセージがあることをすばやく知らせるために、同じ通知を Windows 8 のロック画面にポストすることができます。

Generation App プログラム

Windows 8 とは、Windows 95 から続く OS に大きな変更が加えられ、イメージが一新された Windows で、かつてない市場が広がっています。アプリの開発者は、Visual Studio 組み込みのプロジェクト テンプレートを使って、これまでにない広大な市場にアプリを簡単かつ迅速に公開して、収益をあげることができます。

Windows ストア アプリで使用すべき優れた機能をすべてここで紹介することはできないので、Generation App プログラム (bit.ly/W8GenAppDev、英語) を確認することを強くお勧めします。このプログラムでは、役立つヒントやリソースと共に、無料のテクニカル コンサルティング、デザイン コンサルティング、およびサポートが提供されており、30 日間で Windows ストア アプリや Windows Phone アプリを構築するプロセスについてのガイダンスを受けることができます。

Rachel Appel は、ニューヨーク市のマイクロソフトで開発者エバンジェリストを務めています。彼女に連絡を取るには、Web サイト (rachelappel.com、英語) にアクセスするか、rachel.appel@microsoft.com (英語のみ) 宛てにメールを送ってください。また、近況については Twitter (twitter.com/rachelappel) をフォローしてください。

この記事のレビューに協力してくれた技術スタッフの Ian LeGrow に心より感謝いたします。