次の方法で共有

April 2014

Volume 29 Number 04

最新のアプリ - Windows 8.1 の Windows ストア開発者向け新機能

Rachel Appel | April 2014

Rachel Appel

Windows 8.1 では、Windows OS が大幅に更新され、アプリを刷新しできる限り最高のアプリを構築するうえで役立つ機能強化と新機能が追加されました。今回は、Windows ストア アプリを構築する開発者向けの Windows 8.1 の新しい機能強化を紹介します。

ウィンドウとタイルの管理方法の追加

Windows 8.1 が登場するまで、Windows ストア アプリを表示できるモードは、全画面ビュー (横向きまたは縦向き)、フィル ビュー、またはスナップ ビューの 3 つでした。Surface などのデバイスのユーザーは、さらに細かくウィンドウを管理する機能 (3 つ以上のアプリを同時に表示する機能など) も求めていました。そのため、Windows チームは顧客層の多様な利用方法を反映するために、ウィンドウや画面領域を管理して整理する方法を増やしました。この結果、ユーザーは複数のウィンドウを均等に (または任意の比率で) 並べて配置できるようになり、1 つのアプリに対して、ユーザーが個別に大きさや位置を変更可能な複数のビューを作成できるようになりました。

以前の JavaScript を使って構築した Windows 8 アプリでは、CSS メディア クエリを使用してページのビュー状態 (全画面、フィル、またはスナップ) に応じたページ レイアウトを制御していました。Windows 8.1 ではこの動作が変更され、画面のサイズと向きに関する次のような CSS メディア クエリだけで済むようになりました。

@media screen and (min-width: 500px) and (max-width: 1023px) {
  /* CSS styles to change layout based on window width */
}
@media (min-width: 1024px) {
  /* CSS styles to change layout based on window width */
}
@media screen and (orientation: portrait) {
  /* CSS styles to change layout based on orientation */
}

つまり、以前のようにアプリの特定のビュー状態に関する調整やクエリは必要ありません。メディア クエリを使用して最小の幅と向きを設定するだけで十分です。これらの設定は、メディア クエリ自体で指定できます。すべての Windows アプリが満たす必要がある最小の高さは、768 ピクセルです。

タイルは、通常はユーザーがアプリに移動する最初の手段です。スタート メニューに配置されているライブ タイルは、Windows と Windows Phone の優れた最新機能です。あらゆるデータをリアルタイム ダッシュボードに表示する、Windows とまったく同じ機能を備えたプラットフォームは、他には存在しません。それはさておき、開発者は、4 つのタイル サイズ (小、中、ワイド、および大) を使用するようにアプリを拡張できます (図 1 参照)。

Windows の新しいライブ タイル (原寸大ではありません)
図 1 Windows の新しいライブ タイル (原寸大ではありません)

Visual Studio のパッケージ マニフェストには、タイル サイズやその他のビジュアル資産 (スプラッシュ スクリーンなど) を構成できる [ビジュアル資産] タブがあります。

最新のアプリの構築に役立つ新しい Visual Studio 2013 プロジェクト テンプレート

ご期待のとおり、Visual Studio にはリリースのたびに新しいプロジェクト テンプレートが追加されます。JavaScript (JavaScript 用 Windows ライブラリ (WinJS) を使用した) プロジェクト テンプレートを使って構築する新しい Windows ストア アプリには、ハブ テンプレートがあります。一方、新しい XAML プロジェクト テンプレートには、ハブ、ポータブル クラス ライブラリ、コード化された UI テストなどがあります。

WinJS と XAML の両方の新しいハブ プロジェクト テンプレートには、私が "最新" と呼んでいる人気のデザイン手法がカプセル化されています。ハブ プロジェクト テンプレートの既定のレイアウトには、入念に作り込まれた 5 つのセクションが含まれているため、開発者はさまざまな配置でデータをユーザーに表示できます。ハブ レイアウトを採用すると、ユーザーが自分にとって重要な情報をひとめで特定しやすくなります。最新の UI のデザインとは、ユーザーとユーザビリティに重点を置いて、これまでの最新ではない従来型手法とは異なる方法で、データを表示することです。ハブ プロジェクトを使えば、この要件を達成できます。

ハブ プロジェクトの pages フォルダーには、hub、item、および section という名前の 3 つのフォルダーがあります。これらのフォルダーには、それぞれ対応する .html ファイル、.js ファイル、および .css ファイルが含まれています。XAML プロジェクトの場合は、相当する HubPage.xaml、SectionPage.xaml、および ItemPage.xaml というページがルート フォルダーにあります。図 2 に、Hub コントロールを使用しているハブ プロジェクトを実行したようすを示します。

実行時のハブ プロジェクト


図 2 実行時のハブ プロジェクト

ご覧のとおり、ハブ プロジェクトとコントロールには、効率良く並んだコンテンツがパノラマ表示されます。おしゃれな最新のデザインです。

最新の UI 向けの HTML や XAML の更新されたコントロールと新しいコントロール

すべてのプロジェクトの種類に新しいコントロールやコントロールの機能強化が導入されているため、コントロールが使いやすくなりました。これらの新しいコントロールや更新されたコントロールを使用すると、最新のアプリの作成と公開がこれまでになく簡単になります。HTML と XAML のどちらでも、パフォーマンスとデータ バインディング制御が強化されています。Windows ストア コントロールの入門書としては、MSDN マガジンの記事「JavaScript を使って構築した Windows ストア アプリのコントロールと設定を習得する」(msdn.microsoft.com/magazine/dn296546) を参照してください。

ハブ プロジェクト テンプレートには、WinJS と XAML の両方に新しく導入された、Hub コントロールが含まれています。既定のテンプレートの Hub コントロールは、水平にスクロールできる 5 つのセクションで UI レイアウトが構成され、どのセクションもアプリのスタート ページに表示されます。メイン セクションはこのアプリの最重要部分で、多くの場合はニュースの特集記事、レシピ、スポーツのスコア、気象データなどの表示に使用します。また、スプラッシュ スクリーンの後でユーザーに表示される最初のページでもあります。次の 4 つのセクションは、開発の出発点として用意されており、さまざまなサイズのデータ項目が含まれています。ユーザーは、セクション 3 のグループ メンバーの一覧、またはセクション 3 の個別の項目に移動できます。もちろん、Hub コントロールは柔軟なので、任意のコンテンツが含まれた任意の数のセクションを配置できます。同じソースから取得した類似データで構成された厳密に同質なコンテンツとは正反対の、さまざまなソースから取得してさまざまな種類で構成された異質なコンテンツを簡単に扱えるように設計されています。

グリッド テンプレートでは、ListView コントロールだけを使用しています。新しい Hub コントロールには組み込みの ListView コントロールが含まれるようになったため、ユーザーがタッチまたはクリックした項目に応じて、グループ一覧と個別の項目のどちらにも期待どおりに移動できます。

この ListView には、ドラッグ アンド ドロップ操作のサポートなど、最新の機能強化が多数施されています。ドラッグ アンド ドロップに加えて、ListView では項目の並べ替えも強化されています。ListView の itemsReorderable プロパティを true に設定するだけで並べ替えを有効にでき、他のコードは必要ありません。ListView については、セル スパンの強化、アクセシビリティの向上、メモリ管理の向上など、他にもいくつもの機能が強化されています。

ListView コントロールには多数の魅力的な新機能がありますが、紹介しておく価値があるコントロールがもう 1 つ存在します。それは、Repeater コントロールです。Microsoft .NET Framework のさまざまな UI コントロールには、繰り返しのコントロールが使用されています。一例を挙げれば、ASP.NET Repeater コントロールがあります。Grid コントロールやその類似コントロールは .NET プラットフォームのさまざまなコンポーネントに存在し、開発者が .NET Framework を使って UI を構築できるよう、多彩な形にカスタマイズされています。おそらくご想像のとおり、Repeater コントロールを使用すると、データ セットからスタイル付きの項目一覧を生成できます。つまり WinJS の場合は、Repeater コントロールを使用すればほとんどすべての組み込み HTML コントロールや WinJS コントロールを適切にレンダリングできます。図 3 に、Repeater コントロールの例を示します。Repeater コントロールのしくみは、グループが必要なくなることを除けば ListView とほとんど同じであることに留意してください。図 3 のサンプル データに示すように、JavaScript ではシンプルな配列を作成しています。

図 3 シンプルな Repeater コントロールを構築する HTML と JavaScript

<!—HTML -- >
<div id="listTemplate" data-win-control="WinJS.Binding.Template">
  <li data-win-bind="textContent: title"></li>
</div>
<ul data-win-control="WinJS.UI.Repeater"
  data-win-options="{data: RepeaterExample.basicList,
  template: select('#listTemplate')}">
</ul>
// JavaScript
(function () {
  "use strict";
  var basicList2 = new WinJS.Binding.List(
    [
      { title: "Item 1" },
      { title: "Item 2" },
      { title: "Item 3" },
      { title: "Item 4" }
    ]);
  WinJS.Namespace.define("RepeaterExample",
    {
      basicList: basicList2
    });
})();

ナビゲーション バーも、UX が強化されたコントロールの 1 つであり、ユーザー操作を促す形のメニュー オプションを提供します。以前の一般的な Web サイトの JavaScript メニューとは異なり、最新のメニュー項目は大きく、さまざまな入力デバイス向けに最適化されています。マウスをあまり使い慣れてない人が Web サイトの小さい従来型カスケード メニューに悪戦苦闘している光景には、だれもが見覚えがあるでしょう。その分、最新のアプリ向け UI デザイン原則の一環として、ナビゲーション バーはタッチ入力というタブレットの必須機能と円滑に連携しています。ユーザーがナビゲーション ツール バーを呼び出す方法には、上端または下端からのスワイプ、Windows キーを押しながら Z キーを押すショートカットの使用、または右クリックがあります。アプリ バー コントロールを使用したことがある方は、ナビゲーション バー コントロールの動作もほとんど同じだと考えていただいてかまいません。

最新の Web サイトをクライアント アプリと統合しようとしている開発者は、新しい WebView コントロールを使用できます。WebView コントロールを使用すると、iframe を使用していた以前の WinJS バージョンに比べてはるかに簡単にインターネットのデータを表示できます。WebView コントロールは、次のような HTML 要素です。

<x-ms-webview id="webview" src="http://rachelappel.com"
  style="width: 400px; height: 400px;"></x-ms-webview>

これは、WinJS コントロールの標準的な作成方法とは異なっています。標準的な方法では、<div> 要素を使用し、data-win-options 属性を設定します。WebView コントロールは、外部コンテンツをホストするコンテナーとして機能します。この動作はセキュリティやサンドボックスに影響を及ぼすため、この場合は HTML 要素を使用する方が、標準的なコントロールよりも適切に機能します。WebView は、他の HTML 要素で実装できるコントロールではなく、アプリ ホストで直接サポートする必要があります。この課題は、<webview> 要素を World Wide Web コンソーシアム (W3C) の検討対象の標準として提案することで、克服されつつあります。

今回の Windows のリリースまで、コントロールに限れば XAML は HTML と同等ではありませんでした。けれども、次の新しいコントロールが加わったため、XAML は HTML に追い付いています。

  • AppBar: 画面下部を横切るメニュー バー。
  • CommandBar: 個別のメニュー バー項目。
  • DatePicker: ユーザーが指定した日付を取得する、3 つのドロップダウン リストのセット。
  • Flyout: モードレスで簡易非表示の、ダイアログ ボックスや設定コントロール。
  • Hub: さまざまなサイズの項目をグループ別にパノラマ表示できるコントロール。
  • Hyperlink: URI に移動するハイパーリンク。
  • MenuFlyout: メニュー項目の一覧を表示するように専用のスタイルが設定された、定義済みのポップアップ。
  • SettingsFlyout: ユーザーがスワイプなどの操作を行うと、画面右端から表示されるポップアップ。アプリ設定の制御に使用します。
  • TimePicker: ユーザーが時、分、秒などの単位で時刻を選択できるコントロール。DatePicker コントロールの補完によく使用します。

多数の視覚要素がこの UI フレームワークに追加されたので、XAML 開発者が独自の視覚要素を作成する必要性が少なくなっています。

Windows 8.1 で増えた検索の選択肢

Windows 8 では、チャーム (共通タスクへのショートカット) という概念が導入されました。ユーザーにはそれぞれ自分の習慣がありますが、アプリを起動する手段や情報を見つける手段としては、検索が一般的です。検索エンジンの結果が証拠になるように、ユーザーは頻繁に情報を検索します。検索は、コンピューティングにおいて非常に重要なため、Windows OS の一部に組み込まれているほどです。さらに、今ではチャームを補完する検索コントロールも存在しています。ユーザーが検索できるデータをアプリのローカルに限定する場合は、SearchBox コントロールを使用します。ユーザーがより広範囲やインターネットを検索する必要がある場合は、SearchPane (Windows 8 で導入された検索 Windows チャーム) を使用します。package.appmanifest の [宣言] タブで検索コントラクトを構成すると、ユーザーに検索サービスを提供できるようになります。同一のアプリには SearchBox と SearchPane のいずれかを配置できますが、両方を配置することはできません。

ご想像のとおり、SearchBox コントロールを追加するには、data-win-control 属性を WinJS.UI.SearchBox に適用するだけです。

<div id="searchBoxId"
  data-win-control="WinJS.UI.SearchBox"
  data-win-options="{focusOnKeyboardInput: true}">
</div>

XAML の場合は、Windows.UI.Xaml.Controls 名前空間に SearchBox クラス定義が含まれており、その宣言型構文は次のとおりです。

<SearchBox x:Name="SearchBox"
  FocusOnKeyboardInput="True"
  QuerySubmitted="SearchBox_QuerySubmitted"
  Height="35" />

マイクロソフトでは、アプリにクイック検索を追加することを推奨しています。クイック検索は、ユーザーが入力するだけでアクティブになり、検索クエリが開始されます。Windows 8 のスタート画面に移動して入力を始めるとすぐに、SearchPane コントロールによってデバイス全体やインターネットを対象とする検索クエリが開始されることがわかります。もちろん、先ほどコード サンプルに示したように、独自のアプリでこの動作を模倣できます。そのためには、HTML の data-win-option 属性を focusOnKeyboardInput に設定するか、XAML の FocusOnKeyboardInput の値を True に設定します。

連絡先 API とカレンダー API を使用して他のユーザーとのつながりや最新情報を把握する

Windows 8.1 には、ユーザーが許可した場合にユーザーの連絡先やカレンダーを操作する、便利な API が導入されました。連絡先 API を使用すると、ソース アプリから電子メール アドレスや電話番号でデータ ストアをクエリして、関連情報をユーザーに提供できます。カレンダー API を使用すると、開発者は予定の追加、置換、削除などの操作を実行できます。また、独自のアプリを実行しながら、ユーザーの既定の予定プロバイダー アプリ (組み込みのカレンダー アプリや Outlook など) も並べて画面に表示できます。つまり、独自のアプリと組み込みのアプリをシームレスに統合できます。

連絡先 API に関して、Windows 8.1 では 1 件の連絡先を表すために Windows.ApplicationModel.Contacts.Contact クラスが使用されるようになり、Windows 8 で使用されていた従来の ContactInformation クラスは使用されなくなりました。さいわい、連絡先 API のドキュメントでは、使用されなくなった名前空間の各メンバーに「<メンバー名> は、Windows 8.1 より後のリリースでは、変更されるか使用できなくなる可能性があります」というメッセージがはっきり記載されているので、このようなメンバーの使用を簡単に回避できます。図 4 に、電子メール アドレスと電話番号を取得して、そのデータに基づいてユーザーの連絡先カードを表示する処理がどれほど簡単か示します。少しコードを追加するだけで、この連絡先を保存したりアプリの別の部分に表示したりもできます。

図 4 連絡先カードの表示

<label for="emailAddressInput">Email Address</label>
<input id="emailAddressInput" type="text"/>
<label for="phoneNumberInput">Phone Number</label>
<input id="phoneNumberInput" type="text" />
<button id="addToContactsButton" onclick=
  "addContactWithDetails()">Add to Contacts</button>
function showContactWithDetails() {
  var ContactsAPI = Windows.ApplicationModel.Contacts;
  var contact = new ContactsAPI.Contact();
  var email = new ContactsAPI.ContactEmail();
  email.address = document.querySelector("#emailAddressInput");
  contact.emails.append(email);
  var phone = new ContactsAPI.ContactPhone();
  phone.number = document.querySelector("#phoneNumberInput");
  contact.phones.append(phone);
  ContactsAPI.ContactManager.showContactCard(
    contact, {x:120, y:120, width:250, height:250},
    Windows.UI.Popups.Placement.default);
}

ご覧のとおり、連絡先 API は使いやすく、しかも Windows との密接に統合できます。カレンダー API も同様です。コードでは、予定オブジェクトのインスタンスを作成し、会議の詳細 (会議の日時など) を表すプロパティに値を割り当てて、保存します。これで、アプリに連絡先機能とカレンダー機能を追加できます。

新しいネットワーク API とセキュリティ API

ネットワークとセキュリティを強化しない限り、システムの更新は完了しません。今回のネットワークに関する機能強化を利用すると、コードで実行できる処理をこれまで以上に拡大しながらも、セキュリティを維持できます。Windows ランタイム (WinRT) の Windows.Web.Http 名前空間における新機能は、HTTP サービスや REST サービスに接続するオブジェクトやメソッドです。これらのオブジェクトとメソッドは、WinJS.xhr や System.Net.HttpClient などの以前の API よりも処理能力と柔軟性が強化されています。次のコードは、RESTful サービスへの接続方法を示しています。

var uri = new Uri("http://example.com/data.svc");
var httpClient = new HttpClient();
httpClient.GetStringAsync(uri).done(function () {
  // Process JSON
}, error);
function error(reason) {
  WinJS.log && WinJS.log("Oops!");
}

他のライブラリと同様に、Windows.Web.Http 名前空間には非同期で処理を実行するメンバーがあります。JavaScript の場合、これはプロミスが返されたときに実行する "done" 関数です。ただし、最新のリアルタイム アプリを開発する場合は、バックグラウンドで実行するスタンバイ アプリ用に Windows.Web.Http を使用できます。また、他の任意の機能も Windows.Web.Http と併用できます。たとえば、キャッシュの制御、Cookie の制御、その他の種類の要求、パイプラインへのフィルターの追加などの機能を併用すると、この記事では説明しきれないほど多様な興味深い処理を実行できます。

すばらしいことに、ユーザーの資格情報を必要とする REST サービスを利用する場合は、ユーザーが設定チャームで資格情報を複数のアカウントとして管理できるようになりました。このようなセキュリティ機能やアカウント管理機能に加えて、最新のアプリでは、Windows の指紋 (生体) 認証 API を利用した指紋認証も使用できるようになっています。

最新のアプリではデバイスの多様性が肝心

3D 印刷は最新鋭の機能です。Windows 8.1 には 3D 印刷機能があり、開発者はこの機能を開発に利用できます。以下に示すような、一連の新しいハードウェア対応やセンサー対応の API については、言うまでもないでしょう。

  • ヒューマン インターフェイス デバイス (HID): ハードウェアとソフトウェアの間の通信とプログラマビリティを促進するプロトコル。
  • 店舗販売時点管理 (PoS): バーコード スキャナーや磁気ストライプ リーダーなどのデバイスにアクセスできる、Windows ストア アプリ用のベンダー中立型 API。
  • USB: 標準的な USB デバイスとの通信を可能にする API。
  • Bluetooth: 標準的な Bluetooth デバイスとの通信を可能にする API。
  • 3D 印刷: 3D プリンター サポートの基盤として機能する、2D 印刷サポート用の C++ 拡張機能。Windows の印刷機能にアクセスして、3D に適した形式のコンテンツをアプリからプリンターに送信できます。
  • スキャン: スキャナーのサポートを可能にする API。

ここに挙げた API は、どれもハードウェア周辺機器の統合を実現する API です。ただし、Windows 8 の時点から HTML と XAML のどちらのアプリでも、Web カメラ、加速度計、ペン、タッチ、およびその他の周辺機器と連携するハードウェア統合は利用可能でした。

Windows 8.1 には、一連の音声合成 (読み上げ) API が含まれています。音声合成 API を使用するとテキスト データを音声ストリームに変換でき、しかも必要なコードは想像するほど多くありません。たとえば、次のコード サンプルは、SpeechSynthesizer の新しいインスタンスを作成すれば、その synthesizeTextToStreamAsync メソッドを呼び出せることを示しています。synthesizeTextToStreamAsync メソッドはテキスト データを受け取って、音声ストリームに変換してから、プレーヤーに送信します。

var audio = new Audio();
var synth = new Windows.Media.SpeechSynthesis.SpeechSynthesizer();
var input = document.querySelector("#input");
synth.synthesizeTextToStreamAsync(input).then(function (markersStream) {
  var blob = MSApp.createBlobFromRandomAccessStream(
    markersStream.ContentType, markersStream);
  audio.src = URL.createObjectURL(blob, { oneTimeOnly: true });
  audio.play();
});

単純なテキスト データを使った処理だけでなく、W3C 標準の Speech Synthesis Markup Language (SSML) を使用した文の作成や語彙の解明も可能です。この XML ベースの言語を使用すると、より明確に定義された方法で入出力を合成できるので、ユーザーに対して差別化できます。

まとめ: アプリ ストアの新しいパッケージ機能について

タイル イメージやローカライズされた文字列などのリソースを、パッケージ マニフェストで構成できます。パッケージ マニフェストは、新しいイメージ サイズなどの構成オプションを反映するように若干変更されています。そのようなオプションの 1 つがバンドルの作成です。バンドルの主な役割は、アプリをさまざまな地域に展開できるように、ロケール固有の情報を追加して管理することです。

アプリをストアに配置する際は、開発者ポータルに UI の強化などの変更がいくつか行われていることに注目してください。Bing が OS に効果的に統合されたので、ユーザーはアプリをかつてないほど簡単に見つけられるようになっています。Bing との統合により、ユーザーはアプリ (または任意のファイル) を、Windows ストアを通じて、または Web サイトや検索を使用して発見できます。さらに、ユーザーがインストールするアプリは、ユーザーが自動更新機能を無効にしない限り、自動的に更新されます。ユーザーの代わりに頻繁にアプリを更新することについて、考える必要はありません。

スペースの制約のため、今回の記事では、Windows ランタイムと Visual Studio のすべての新機能や機能強化を紹介することができませんでした。他の新機能についても確認することを強くお勧めします。たとえば、DirectX の多数の更新された機能については、msdn.microsoft.com/ja-jp/library/windows/apps/bg182880.aspx をご覧ください。また、Charles Petzold が DirectX に焦点を当てた MSDN マガジンのコラムを執筆しているので、新しい機能の詳細については、こちらのページ (msdn.microsoft.com/magazine/ee532098.aspx?sdmr=charlespetzold&sdmi=authors) から確認できます。最後に、Windows 8.1 の今後の動向に関して開発者に必要なすべての情報については、「Windows 8.1: 新しい API と機能 (開発者向け)」(bit.ly/1cBHgxu) で公開されています。

Rachel Appel は 20 年を超える IT 業界での経験を持つマイクロソフトの元社員で、コンサルティング、執筆活動、および指導を行っています。彼女は Visual Studio Live!、DevConnections、MIX など、業界トップ クラスのカンファレンスで講演しています。専門分野は、マイクロソフトの各種開発ツールやオープン Web を重視したテクノロジとビジネスを連携させるソリューションの開発です。彼女のことをもっと知りたい方は、彼女の Web サイト rachelappel.com (英語) をご覧ください。

この記事のレビューに協力してくれた技術スタッフの Kraig Brockschmidt (マイクロソフト) に心より感謝いたします。