またそのときが来ました。新しい Release Preview と新しい開発者ツールにより、Windows 8 は最終リリースに 1 歩近づきました。Consumer Preview と同じように、Windows 8 での開発エクスペリエンスをできる限り良いものとするため、エンジニアリング チームは開発プラットフォームの改良を重ねてきました。この記事では、取り組んできたいくつかの新機能について強調し、皆さんが既存の Consumer Preview アプリから Release Preview に移行するお手伝いをいたします。

Windows 開発プロセスに関して踏まえておきたいいくつかの点

Release Preview の新機能についてお話しする前に、チームが Release Preview マイルストーンにおける機能変更をどのように考えているかについていくつか説明しておきたいと思います。開発プロセスのこの時点で、Windows の大部分の機能はプラットフォームに組み込まれています。Release Preview における私たちの目標は、既存のエクスペリエンスを改良することです。

では、これは開発者の皆さんにとって何を意味するでしょうか。それは、Release Preview に見られる変更の大部分は Windows 8 の以前のリリースよりかなり小さいということです。新機能は、特定のニーズを満たすことを目的としています。変更の多くは、既存の Consumer Preview シナリオの動作を改善しているにすぎません。私たちは、プラットフォームのバグを修正し、パフォーマンスを高め (コードにわずかな変更を加えるだけで、アプリをこれまでより簡単に構築できるようにもしました)、結果に満足できる程度まで開発者エクスペリエンスを強化しました。

これは、Consumer Preview でのアプリ開発で得られた知識とスキルはすべて Release Preview でも十分に活用できることを意味しますので、皆さんにとってすばらしいことです。さらに、既存のアプリに加えなければならない変更が最小限で済みます。しかし、それと同時に開発プラットフォームがこれまでより改良されています。では、変更点を見ていきましょう。私たちが行ってきたことを気に入っていただけると思います。

アプリ設定の高優先度ローミング

Windows 8 のアプリケーション データ (英語) を使うと、アプリ データのローミングにより、アプリ設定の "一度設定するだけで、どこででも使える" 動作を簡単に有効にすることができます。皆さんの側でほんの少し手を加えるだけで、ユーザーはすべての Windows 8 PC で同じアプリ設定を使えるようになります。Release Preview では、この機能を拡張してアプリ設定の HighPriority ローミングを追加しました。高優先度ローミングを使って、アプリ内の少量の状態データを高い頻度でローミングできるようにすることで、PC 間で中断のないアプリ エクスペリエンスを実現することができます。

たとえば、ニュース リーダー アプリではこの HighPriority 設定を使って、ユーザーが読んでいたニュース記事をローミングできます。ユーザーが記事を変えるとすぐ、ニュース リーダー アプリはその設定を変更してローミングを行います。ユーザーが別の Windows 8 PC に切り替えた場合、ニュース リーダー アプリにはユーザーが前回読んでいた記事が表示されるため、ユーザーは他のデバイスで読むのをやめた場所から再開することができます。

特に、この機能は実装が簡単です。ルートのローミング設定 (英語) コンテナー内に "HighPriority" という設定または複合値を作るだけです。この設定は、変更されてから 1 分もしないうちにローミングされ、アプリの主な状態データをローミングできるようになるため、ユーザーは PC を変えても中断した場所から再開することができます。高優先度ローミングは 1 つの設定でしか機能しないため、複数のデータ (記事とページ数など) をローミングする必要がある場合は複合値 (英語) を使うことができます。"HighPriority" の複合値が 8000 を超えることはできません。それより大きい場合は、通常の設定としてローミングされます。

まずは、アプリケーション データ サンプル (英語) について見てみてください。このサンプルは更新されて、アプリ設定の高優先度ローミングのサンプルが追加されました。

強化された Visual Studio テンプレート

たくさん改良を加えたもう 1 つの分野は、Visual Studio のテンプレートです。テンプレートにはたくさんの更新を加えました。さらに、新しいプロジェクトを簡単に開始してすばらしいアプリをすぐに動作させることができるように、新しいテンプレートも追加しました。

XAML テンプレートの更新点

Release Preview では、XAML テンプレートにたくさんの焦点が当てられました。ここでは、いくつかの重要な変更点について説明します。

  • 不要な空白アプリ テンプレート コンポーネントを削除しました。たとえば、データ バインド用のヘルパー、ナビゲーション サポート用のページ ヘルパー、プロセス ライフタイム管理などです。この結果、かなり柔軟にアプリを一から作成できるようになります。一般的なこれらのコンポーネントが必要な項目テンプレートを追加した場合、コンポーネントを追加するように選択することもできます。
  • XAML テンプレートでは、仮想化が既定でサポートされるようになりました。GridView と ListView は、ヘッダー領域を活用してバインドされた項目を仮想化できるようにします。加えて、GridApp のランディング ページでは、コレクション全体ではなく、項目のサブセットのみの表示がサポートされるようになったため、パフォーマンスが向上します。これらの改良は、皆さんの側で余分な作業を行わなくても、アプリのパンとスクローンをこれまでより高速に行うことができることを意味します。
  • すべてのページに開始アニメーションを追加しました (空白ページは空白のままであるため、空白ページではありません)。これらのアニメーションにより、テンプレート内のページ間での遷移がスムーズになり、ユーザーにとってアプリが高速で滑らかに感じられます。
  • D2D プロジェクト テンプレートで XAML がサポートされるようになりました。

すべてのテンプレートの更新点

すべてのテンプレートのナビゲーションを改良しました。Consumer Preview では、テンプレート内のナビゲーション構造は主にタッチ向けでした。今回、戻るボタンと進むボタン、キーボード ショートカットを使ったキーボードとマウスのナビゲーションがテンプレートで完全にサポートされるようになりました。テンプレートを使うと、アプリのナビゲーション構造が自動的に構成され、あらゆる形式の入力がサポートされます。

Windows ランタイム コンポーネントを作成するための新しいテンプレート

既存のテンプレートの更新に加えて、私たち独自の Windows ランタイム コンポーネントの作成も簡単にしたいと思っていました。このために、面倒な作業を行ってくれる新しい C#/VB テンプレートを追加しました。このテンプレートを使うと、新しい Windows ランタイム コンポーネントをすばやく作成し、それをメイン アプリで使うことができます。テンプレートがすべての設定作業を行ってくれるので、これらのコンポーネントを一から手動で作成する必要がなくなりました。カスタム ロジックを追加するだけでかまいません。

ファイル プロパティおよび縮小版プリフェッチ API

Windows 8 Consumer Preview のリリース以降、パフォーマンスを厳しく見直し、皆さんが高速で滑らかなアプリを作成できるようにしてきました。ファイル システムを使ってギャラリー ビューを表示するアプリ (フォト アルバム、音楽再生リスト、ドキュメント ハブなど) では、取り組むべき主なパフォーマンス ボトルネックは、ファイル アクセスでした。

Customer Preview ビルドでは、ファイル プロパティと画像縮小版の取得に時間がかかることがあります。特に、プロパティ取得モデルはオンデマンドであるため、同時に多数のファイルにアクセスするアプリは、プロセス間通信が繰り返されるために大きなオーバーヘッドがバックエンドで生じます。さらに、すべてのプロパティが高速アクセスできるように最適化されていないため、一般的でないプロパティを使うとアプリに悪影響を与えます。

アプリのコードに大きな変更を加えなくてもこのすきまを埋めるため、2 つの新しい機能をデータ モデル API に加えました。

Windows.Storage.Search.QueryOptions.SetPropertyPrefetch

  • この API を使うと、高速取得できるように Windows により最適化されるプロパティのリストを生成できます。
  • その後、以前と同じ非同期メソッドを使ってこれらのプロパティにアクセスするだけで、結果がすばやく返されます。

Windows.Storage.Search.QueryOptions.SetThumbnailPrefetch

  • この API は、アプリがクエリ結果セットでファイルの縮小版を必要としていることを Windows に通知します。
  • その後、以前と同じ非同期メソッドを使って縮小版を取得するだけで、結果がすばやく返されます。

JavaScript の例を次に示します。

var search = Windows.Storage.Search;
var fileProperties = Windows.Storage.FileProperties;

// Create query options with common query sort order and file type filter.
var fileTypeFilter = [".jpg", ".png", ".bmp", ".gif"];
var queryOptions = new search.QueryOptions(search.CommonFileQuery.orderByName, fileTypeFilter);

// Set up property prefetch - use the PropertyPrefetchOptions for top-level properties
// and an array for additional properties.
var imageProperties = fileProperties.PropertyPrefetchOptions.imageProperties;
var copyrightProperty = "System.Copyright";
var colorSpaceProperty = "System.Image.ColorSpace";
var additionalProperties = [copyrightProperty, colorSpaceProperty];
queryOptions.setPropertyPrefetch(imageProperties, additionalProperties);

// Set up thumbnail prefetch.
var thumbnailMode = fileProperties.ThumbnailMode.picturesView;
var requestedSize = 190;
var thumbnailOptions = fileProperties.ThumbnailOptions.useCurrentScale;
queryOptions.setThumbnailPrefetch(thumbnailMode, requestedSize, thumbnailOptions);

// Query the Pictures library
var query = Windows.Storage.KnownFolders.picturesLibrary.createFileQueryWithOptions(queryOptions);
query.getFilesAsync().done(function (files) {
// Output the query results
files.forEach(function (file) {
// getImagePropertiesAsync returns synchronously when prefetching
// retrieved the properties in advance.
file.properties.getImagePropertiesAsync().done(function (properties) {
// Use image properties
});

// Similarly, extra properties are retrieved asynchronously but may
// return immediately when prefetching completed.
file.properties.retrievePropertiesAsync(additionalProperties).done(function (properties) {
// Use additional properties
});

// You can also retrieve and use thumbnails
file.getThumbnailAsync(thumbnailMode, requestedSize, thumbnailOptions).done(function (thumbnail) {
// Use the thumbnail
});
});
});

C# では、同様のコードは次のようになります。

const string CopyrightProperty = "System.Copyright";
const string ColorSpaceProperty = "System.Image.ColorSpace";

// Set up file type filter.
List<string> fileTypeFilter = new List<string>();
fileTypeFilter.Add(".jpg");
fileTypeFilter.Add(".png");
fileTypeFilter.Add(".bmp");
fileTypeFilter.Add(".gif");

// Create query options.
var queryOptions = new QueryOptions(CommonFileQuery.OrderByName, fileTypeFilter);

// Set up property prefetch - use the PropertyPrefetchOptions for top-level properties
// and a list for additional properties.
List<string> propertyNames = new List<string>();
propertyNames.Add(CopyrightProperty);
propertyNames.Add(ColorSpaceProperty);
queryOptions.SetPropertyPrefetch(PropertyPrefetchOptions.ImageProperties, propertyNames);

// Set up thumbnail prefetch.
const uint requestedSize = 190;
const ThumbnailMode thumbnailMode = ThumbnailMode.PicturesView;
const ThumbnailOptions thumbnailOptions = ThumbnailOptions.UseCurrentScale;
queryOptions.SetThumbnailPrefetch(thumbnailMode, requestedSize, thumbnailOptions);

// Set up the query and retrieve files.
var query = KnownFolders.PicturesLibrary.CreateFileQueryWithOptions(queryOptions);
IReadOnlyList<StorageFile> fileList = await query.GetFilesAsync();
foreach (StorageFile file in fileList)
{
// GetImagePropertiesAsync returns synchronously after prefetching
// retrieves the properties in advance.
var properties = await file.Properties.GetImagePropertiesAsync();
// Use image properties

// similarly, extra properties are retrieved asynchronously but may
// return immediately when prefetching completes.
IDictionary<string, object> extraProperties = await file.Properties.RetrievePropertiesAsync(propertyNames);
// Use additional properties

// You can also retrieve and use thumbnails.
var thumbnail = await fle.GetThumbnailAsync(thumbnailMode, requestedSize, thumbnailOptions);
// Use thumbnail
}

新しい機能を使ったアプリのテストでは、大幅な改善が見られました。StorageDataSourceAdapter を使ってユーザーの画像ライブラリから写真のビューを表示した場合、時間が 70% 短縮されました。ファイル システムから抽出したファイル プロパティをデータベースに格納するアプリでは、400% 短縮されました。

多数のファイルにアクセスする必要があるアプリを構築する場合、これらの新しい機能について調べ、アプリの高速化のために使ってください。詳細については、デベロッパー センターの Windows.Storage.Search.QueryOptions (英語) API に関するドキュメントを参照してください。

Blend および Visual Studio デザイナー

Consumer Preview 以降、私たちは設計ツールの改良を続けてきました。アプリのユーザー インターフェイスは、アプリに気付いてもらうための主な方法の 1 つだと思いますので、すべての新しい Metro スタイル デザインの概念をできるだけ簡単にアプリに統合できるようにしたいと思いました。

XAML アプリのビュー状態作成の改良

ビュー状態は、Metro スタイル アプリの主な UI 概念の 1 つです。Release Preview では、VS XAML デザイナーと Blend がどちらも更新されており、[Device] (デバイス) パネル (以前の [Platform] (プラットフォーム) パネル) で [Visual States] (表示状態) を使ってページをプレビューおよび作成し、プラットフォーム アプリのビュー状態 (FullScreenLandscape、FullScreenPortrait、Filled、Snapped) を設定できるようになっています。[Device] (デバイス) パネルでは、ビューを変更すると表示状態が自動的に変更されるようになりました。記録モードをオンにすると、デザイン サーフェイスまたはプロパティ インスペクターに変更を加えたとき、常にベースに変更を加えるのではなく、現在選択されている表示状態を変更することができます。

新しい [Device] (デバイス) パネルが表示された画像。この画像には、FullScreenLandscape モードのパネルと、他のビュー状態を選択するドロップダウンが表示されています。状態記録を有効にするオプションも表示されています。全画面表示ビュー状態設計がサポートされた新しい [Device] (デバイス) パネル

さらに、Blend の表示状態設計機能によって、アニメーション ライブラリのテーマ アニメーションを使って表示状態を設計し、プレビューできるようになりました。アニメーション ライブラリは特に、プラットフォームのアニメーション機能を利用するために構築された Metro スタイル アニメーション スイートです。これらのアニメーションは、Windows UI 全体で使用されており、Metro スタイル アプリで利用可能です。

Blend for HTML 作成ツールでの生産性向上

Consumer Preview では、たくさんのすばらしい機能を Blend for HTML 作成ツールに組み込むよう努めました。Release Preview では、Blend でその機能を簡単に使えるようにし、生産性を上げることに集中しました。Blend の一般的な HTML/CSS 設計にいくつかの改良を加え、Release Preview でのアプリの設計が簡単になるようにしました。たとえば、次のとおりです。

  • Blend では、CSS のプロパティとスタイル ルールに加え、アートボードおよび Live DOM の要素の切り取り、コピー、貼り付けがサポートされるようになりました。
  • 複数の要素の CSS プロパティと HTML 属性を一度に編集できます。
  • どの要素のコンテキスト メニューからでも [Create a style rule from element class/id] (要素クラス/ID からスタイル ルールを作成) と [Add/Remove class] (クラスの追加と削除) を選択できます。
  • すべての検索可能ウィンドウで、検索フィルターの適用の表示が改善されました。

HTML_blend_designer新しい切り取り、コピー、および貼り付け機能が装備された HTML Blend デザイナー

アプリ設計時の生産性を上げるため、より具体的な改良も加えました。たとえば、Blend で WinJS コントロールを扱うのが簡単になりました。

  • Blend では、コントロール プロパティの有効期限値がサポートされます。
  • WinJS コントロールにより例外がスローされると、Blend の結果パネルに豊富なエラー情報が表示されるようになりました。
  • SemanticZoom ビューを切り替える UI を改良し、ポップアップおよびメニュー コントロールを有効化しました。
  • AppBarCommand アイコン プロパティ、AppBarCommand および MenuCommand ポップアップの新しい値エディターを追加しました。

ですから、HTML/CSS と XAML のどちらで設計しているかにかかわらず、Metro スタイル アプリ用の設計ツールには多くの改良が加えられています。もちろん、ここで説明した新機能は改良点のごく一部にすぎません。ツールを使っていただき、ご自分の目ですべての改良点を確かめてみてください。

JavaScript ジェスチャ イベント モデル

大きな改良を加えたもう 1 つの分野は、JavaScript アプリに対するジェスチャ イベント モデルの動作です。目標は、アプリがジェスチャをより柔軟かつ強力に処理できるようにすることでした。具体的には次のとおりです。

  • 新しいイベント モデルでは、複数の同時ジェスチャがサポートされます。この新機能は、マルチジェスチャ UX を作成できることを意味します (たとえば、マルチスライダー ベースのジェスチャなど)。
  • ジェスチャのターゲットとなる要素や、各ジェスチャに組み込むアクティブなタッチ コンタクトを明示的に制御できるようになりました。Consumer Preview では、イベント モデルがターゲット コンタクトと関連コンタクトの両方を決定する際のルールが非常にシンプルかつ限定的になっています。新しいモデルでは、コンタクトがどのコンタクトといつグループ化されるかや、生成されるジェスチャ イベントを提供する要素を決定します。コンタクトは、一度に複数のジェスチャ レコグナイザーに登録することができます。また、同じ要素をターゲットとする複数のジェスチャ レコグナイザーを作成することができます。どちらの場合も、イベント リスナーは受け取るジェスチャをプログラムにより選択できます。
  • タッチ イベントとジェスチャ イベントは、別個にターゲットとして処理することができます (これまでは、タッチとジェスチャの両方が同じ要素をターゲットとする必要がありました)。これにより、複雑な入力シナリオを簡単に実装できるようになります。たとえば、ユーザーがマルチタッチ ジェスチャを実行してコンテナーをズームできるのと同時に、指がタッチしたそのコンテナー内の個々の要素を強調表示することができます。
  • イベントは、ジェスチャに反応してコンテンツを操作するために簡単に利用できるような形で変換データを返します。これまでは、大量のマトリックス計算を実行して関連データを抽出する必要がありました。新しいモデルでは、親の座標空間で変換差分 (増分) が返されます。これは、まさに、要素の位置、サイズ、方向を更新するためにコンテナー内に要素を配置する現在の CSS 変換に連結する必要があるデータです。

これらの変更により、アプリでジェスチャ入力を扱うのがかなり簡単になりました。詳細については、デベロッパー センターの「ユーザー操作に対する応答」(英語) とインスタント化可能なジェスチャ (英語) のサンプルをご覧ください。

デベロッパー センターの更新

開発プラットフォームで行った作業に加えて、私たちはデベロッパー センターのドキュメントの改良にも多くの時間を費やしました。デベロッパー センターは、Metro スタイル アプリ開発に関して知っておくべきことをすべて学習できるゲートウェイであり、Release Preview に向けてできる限り内容を充実させました。

デベロッパー センターの改良でまず行ったのは、コンテンツの追加でした。Consumer Preview では、作業を始めるのに必要な情報がデベロッパー センターにありました。今回の Release Preview では、すばらしい Metro スタイル アプリを作成するための高度なトピックに関するガイダンスを簡単に見つけることができるようになりました。ここでは、いくつかの主な改良点について説明します。

  • XAML WebView コントロール、IndexedDB、スレッド プール、JS Web ワーカーのサンプルなど、新しいサンプルをたくさん追加しました。
  • Metro スタイル アプリの構築に役立つ概念的なトピック、クイック スタート、操作方法トピックが新たに 200 以上追加されました。
  • API リファレンス ドキュメントの内容がこれまでより充実しています。

新しいコンテンツに加えて、アプリ構築を始めるための情報が見つけやすくなっています。たとえば、サンプルとそれに関連するドキュメントの相互リンクを大幅に改良しました。サンプルを検索してコードを見てから、そのコードについて詳しく説明するドキュメントに簡単に移動することができるようになりました。あるいは、ドキュメントから読み始める場合のために、既存の作業開始トピックを改良し、アプリ構築作業を順調に始めることができるように基本的なチュートリアルを追加しました。

ですから、Release Preview をインストールする際は、まずデベロッパー センターにアクセスし、新しいコンテンツをすべてご自分の目で確かめてみてください。Metro スタイル アプリの開発を簡単にするためのこれらの改良点や他の改良点をご覧いただけます。

Release Preview で既存のアプリを動作させる

私たちは、Release Preview を開発しているとき、アプリに対する新たな変更の量が最小限になるように努めました。皆さんの多くがアプリに多くの労力を費やしてきたと思いますので、Release Preview に切り替えるために必要な変更の量を最小限に抑えたいと思いました。もちろん、新しい開発プラットフォームの品質を高めようとすると、一部の機能の調整がどうしても必要になります。

私たちが加えた大きな変更のいくつかは Visual Studio プロジェクト自体に対するものでした (いくつかの変更についてはこの記事で既に説明しました)。これは、アプリを動作させるには、Visual Studio で新しいプロジェクトを開始して、アプリのテンプレートを選択し、以前のプロジェクトから新しいプロジェクトへの移植を開始するのが最良の方法であることを意味します。テンプレートのレイアウトはそれほど変更されていないため、既存のコードの大部分はそのまま使えます。この際、以前のマニフェストも移植することを忘れないでください。

プロジェクトを移植したら、アプリを実行して、API の変更により生じるエラーがないか調べます。このために、移行ガイド (英語) を作成しました。この移行ガイドでは、Consumer Preview から Release Preview に移るにあたって加えられた API の変更の大部分が説明されています。

新しい VS プロジェクトを作成して、API の変更に関する移行ガイド (英語) を読むことで、Release Preview でアプリをすぐに動作させることができるようになります。

まとめ

私たちと同じように、Release Preview でのアプリの開発を喜んで始めていただけるとさいわいです。この記事で説明した変更点は、新しいリリースで私たちが行ってきた作業のごく一部にすぎません。それらの変更がすべて一緒になった結果、開発者は Windows 8 で強力なアプリをこれまでより簡単に開発することができます。移行ガイド (英語) を参考にしていただくと、新しいアプリと既存のアプリの両方でこれらの変更を活用することができます。

ですから、ぜひ Release Preview開発者ツールをダウンロードし、アプリの構築を始めてください。さらに、Windows ストア開発者向けブログもご確認ください。また、ご質問がある場合は、デベロッパー センターフォーラムこのブログで答えを探していただけます。アプリ構築を楽しんでいただけると嬉しく思います。

--Windows プログラム マネージャー 
   Jake Sabulsky

今回の記事作成にあたっては、Dave Bennett 氏、Marc Wautier 氏、Paul Chapman 氏、Heather Brown 氏、Keith Boyd 氏、Steve Wright 氏にご協力いただきました。ありがとうございました。