ユニバーサルプロジェクトで開発するには？［ユニバーサルWindowsアプリ開発］：WinRT／Metro TIPS

WindowsとWindows Phoneに共通のアプリを提供する仕組み「ユニバーサルWindowsアプリ」とVisual Studio 2013 Update 2でサポートされる「ユニバーサルプロジェクト」テンプレートの概要と、ユニバーサルWindowsアプリ作成の基本知識を取り上げる。

[山本康彦（http://www.bluewatersoft.jp/），BluewaterSoft]

powered by Insider.NET

連載目次

　米国時間で4月2〜4日に開催された「Build 2014」で発表され（ちなみに日本版の「de:code」は5月29〜30日）、すでにストアへの登録も可能になった「ユニバーサルWindowsアプリ」。それはエンドユーザーに対してWindows 8.1用とWindows Phone 8.1用に共通のアプリを提供する仕組みだ。難しそうに思えるかもしれないが、Visual Studio 2013 Update 2で提供される「ユニバーサルプロジェクト」を使えば簡単に開発できる。本稿では、ユニバーサルプロジェクトを作成する方法とストアへ申請するときの注意点を解説する。

事前準備

　ユニバーサルプロジェクトを使ってユニバーサルWindowsアプリを開発するには、以下の開発環境が必要である。本稿では、無償のVisual Studio Express 2013 for Windowsを使っている。

• SLAT対応のPC*1
• 2014年4月のアップデート*2適用済みの64bit版Windows 8.1 Pro版以上
• Visual Studio 2013 Update 2*3適用済みのVisual Studio 2013（以降、VS 2013）*4

*1　SLAT対応ハードウェアは、Windows Phone 8.1エミュレーターの実行に必要だ。ただし未対応でも、ソースコードのビルドは可能だ。SLAT対応のチェック方法はMSDNブログの「Windows Phone SDK 8.0 ダウンロードポイント と Second Level Address Translation (SLAT) 対応PCかどうかを判定する方法」を参照。なお、SLAT対応ハードウェアであっても、VM上ではエミュレーターが動作しないことがあるのでご注意願いたい。

*2　事前には「Windows 8.1 Update 1」と呼ばれていたアップデート。スタート画面の右上に検索ボタンが（環境によっては電源ボタンも）表示されるようになるので、適用済みかどうかは簡単に見分けられる。ちなみに公式呼称は「the Windows RT 8.1, Windows 8.1, and Windows Server 2012 R2 update that is dated April, 2014」というようである。

*3　本稿執筆時点ではRCが公開されている。Visual Studio 2013 Update 2 RCは、マイクロソフトのダウンロードページから誰でも入手できる。

*4　本稿に掲載した手順を試すだけなら、無償のExpressエディションで構わない。Visual Studio Express 2013 for Windows（製品版）はマイクロソフトのページから無償で入手できる。Expressエディションはターゲットプラットフォームごとに製品が分かれていて紛らわしいが、Windowsストアアプリの開発には「for Windows」を使う（「for Windows Desktop」はデスクトップで動作するアプリ用）。

「ユニバーサルWindowsアプリ」と「ユニバーサルプロジェクト」

　「ユニバーサルWindowsアプリ」とは、主にストア側の仕組みである。Windows 8／8.1用のWindowsストアアプリとWindows Phone 7／7.1／8／8.1用のアプリに対して、ストア側で同一のID（「AppID」と呼ばれる）を与えて管理することで、エンドユーザーからは同じアプリに見えるようにするものだ。

　「ユニバーサルプロジェクト」とは、VS 2013のソリューションの形式だ。Windows 8.1用のWindowsストアアプリとWindows Phone 8.1用のWindows Runtimeアプリの組み合わせでユニバーサルWindowsアプリを開発するものだ。

　ユニバーサルWindowsアプリを作る手段の1つとしてユニバーサルプロジェクトを利用するのである。詳しくは特集記事「Windowsストアアプリ開発最新情報（Build 2014より）：ユニバーサルWindowsアプリ開発の勧め」に譲るが、両者の関係は次の図のようになっている。

ユニバーサルWindowsアプリとユニバーサルプロジェクトの関係
ユニバーサルWindowsアプリのうちで特定の組み合わせ（Windows 8.1用ストアアプリとWindows Phone用Windows Runtimeアプリ）のアプリを開発するためのテンプレートが、ユニバーサルプロジェクトである。
ユニバーサルプロジェクトでWindows用とPhone用の2つのアプリを作っただけでは、ユニバーサルWindowsアプリにならない。それぞれをストアに提出するときに同じAppIDを与えることで、初めてユニバーサルWindowsアプリになるのだ（後述）。提出時に異なるAppIDを与える（＝異なるアプリ名で登録する）と、ユニバーサルWindowsアプリにはならない。
余談だが、Windows PhoneのWindows Runtimeアプリでは、画像の標準解像度が240％（ファイル名に「.scale-240」が入る）になっている。Windowsストアアプリと同じつもりで100％指定の画像（ファイル名に「.scale-100」が入る）だけを用意した場合、標準でダウンロードされるパッケージに画像が含まれないことになるので注意しよう。マニフェストで指定するタイルなどでは240％指定の画像が必須であり、それ以外の画像のファイル名やパスには「.scale-100」などの指定を付けなければよい（スケールの指定がなければ標準でダウンロードされるパッケージに入る）。

　ちなみに、Windows Phone 8（またはそれ以前）用として公開済みのアプリに、公開済みのWindowsストアプリと同じAppIDを与えて「ユニバーサル化」できる（方法は後述）。アプリ自体は従来のままでも、エンドユーザーにはユニバーサルWindowsアプリとして提示されるようになるのだ（次の画像）。

既存のアプリをユニバーサルWindowsアプリにした様子（ストアのWebページ）
筆者が公開していた既存のアプリを、アプリ自体は変更せずに、Windows Phoneデベロッパーセンターでの操作だけでユニバーサルWindowsアプリにしたときの様子。ユニバーサルWindowsアプリであることが赤枠内に表示されている。上の画像は、Windowsストア（本稿執筆時点では日本語ページにはユニバーサルWindowsアプリの表示が出ないため、英語ページ）。下は、Windows Phoneアプリ＋ゲームストア。
このように、従来のアプリのままでも「ユニバーサル化」できるのである。ユニバーサルWindowsアプリがWindowsとWindows Phoneの間で設定やアプリ内購入を共有するかどうかは、開発者に任されているのだ（画像のアプリはこの時点のバージョンでは何も共有しない）。
なお、この画像のアプリは、現在ではユニバーサルプロジェクトを使ったものにバージョンアップ済みである（最新版では設定を共有する）。

用語

　これ以降の本稿では、紛らわしくない限り次の略称を用いる。

• Windows：Windows 8.1とWindows RT 8.1（2014年4月のアップデートを適用済みのもの）
• Phone：Windows Phone 8.1

Windows／Phoneともに新しく開発を始めるには？

　ソリューションを作成するときにユニバーサルプロジェクトを選べばよい。

　VS 2013（Update 2適用済み）の［新しいプロジェクト］ダイアログ（メニューバーから［ファイル］−［新しいプロジェクト］で表示）に［ユニバーサル アプリ］テンプレートがあるので、適切なプロジェクトテンプレートを選んでプロジェクトを作成する（次の画像）。

［新しいプロジェクト］ダイアログの［ユニバーサルアプリ］テンプレート（VS 2013）
これはRCであり、製品版では異なったものになるだろう。RCのためだと思われるが、Visual Basic用の［ユニバーサル アプリ］テンプレートが存在しない。

　ここで例として［ハブ アプリケーション (ユニバーサル アプリ)］を選んでソリューションを作ってみると、次の画像のようになる。

自動生成されたユニバーサルプロジェクト（VS 2013）
ダイアログで指定したソリューション名のフォルダーとその直下にプロジェクト名のフォルダーが作られるのは、従来通り。ユニバーサルプロジェクトでは、プロジェクト名のフォルダーの下にさらに3つのフォルダー（＜プロジェクト名＞＋「.Shared」／「.Windows」／「.WindowsPhone」）が作られ、そこに自動生成されたコードが配置される。なお、このソリューションにさらに新しいプロジェクト（クラスライブラリなど）を追加した場合は、従来通りにソリューション名のフォルダーの直下に新しいプロジェクトのフォルダーが作られて、そこに自動生成されたコードが配置される。
共有プロジェクト（＜プロジェクト名＞＋「.Shared」フォルダー）には、WindowsとPhoneで共通に使えるコードやユーザーコントロールやリソース（＝画像ファイルや文字列リソースファイルなど）を置く。
Windows用プロジェクト（＜プロジェクト名＞＋「.Windows」フォルダー）にはWindowsに固有の画面定義やコードなどを置き、Windows Phone用プロジェクト（＜プロジェクト名＞＋「.WindowsPhone」フォルダー）にはPhoneに固有の画面定義やコードなどを置く。共有プロジェクトに画面定義を置くことも不可能ではないが、かえって手間が掛かることになるのでお勧めしない。
なお、エディター画面の編集コンテキスト（Windows用とPhone用のどちらのコードと解釈するか）は、エディターの上部に追加されたドロップダウンで切り替える。

　自動生成されたユニバーサルプロジェクトをそのままビルドし、それをシミュレーターで実行してみたのが次の画像である。確かにWindowsとPhoneのアプリができている。

自動生成されたユニバーサルプロジェクトを実行しているところ（VS 2013）
それぞれ、VS 2013（Update 2）付属のシミュレーター／エミュレーターで動かしている。左がWindows用、右がPhone用のアプリ。

既存のWindowsアプリをベースに開発を始めるには？

　既存のWindowsアプリのプロジェクトに対して、Phoneのプロジェクトを追加すればよい。

　適当なWindows 8.1用のWindowsストアアプリのプロジェクトを用意し*5、ソリューションエクスプローラーでプロジェクトを右クリックしてメニューから［Windows Phone 8.1の追加］を選ぶ（次の画像）。

ベースにするWindowsのプロジェクトで［Windows Phone 8.1の追加］を選ぶ（VS 2013）
ソリューションに対する新しいプロジェクトの追加などではユニバーサルプロジェクトにならないので注意。

*5　ここでは、冒頭で紹介した筆者が公開している「クラウディアさんタイマー」を使ってみた。このソースコード（Windows 8版）は、http://code.msdn.microsoft.com/windowsapps/Claudia-Madobe-Timer-XAMLC-5e580b2aからダウンロードできる。ダウンロードしたzipファイルの中の「C#」フォルダーに、ソリューション一式が収められている。それを適当な場所に展開し、VS 2013でソリューションを開く。このソースはWindows 8用なので、まずWindows 8.1用に再ターゲット（Retarget）する。それでビルドしてみると2つエラーが出るはずなので、次のように対応する。

　・エラー「テキスト値 'マウス' を（以下略）」 ⇒ 「StandardStyles.xaml」ファイルの該当箇所を「マウス」から「Mouse」に修正する
　・証明書ファイルが無い ⇒ パッケージマニフェストの［パッケージ化］タブで［証明書の編集］ボタンをクリックし、［証明書の選択］ダイアログにある［証明書の構成］リストボックスから［テスト証明書の作成］を選んでテスト証明書を作成する

ちなみに、ユニバーサルプロジェクトにした後、Windowsプロジェクトのコードなどを共有プロジェクトに移してみたらどうなるだろうか？ WindowsとPhoneのWindows Runtimeの互換性が高いのならば最小限の修正でビルドできるようになるだろう。実際にやってみた結果を筆者のブログに書いたので、興味のある方はご覧いただきたい。

　［Windows Phone 8.1の追加］を選ぶと、「これから2つのプロジェクトを追加する」といった内容（RCでは英語）のダイアログが出てくるので、［OK］ボタンをクリック。すると、Phone用のプロジェクトと共有プロジェクトが追加されて、ユニバーサルプロジェクトになる（次の画像）。

［Windows Phone 8.1の追加］を実行してユニバーサルプロジェクトになったところ（VS 2013）
もとからあったWindows用プロジェクトのコードには変化がない。ただし、共有プロジェクトへの参照が追加されている。
自動生成されたPhone用のプロジェクトは、「MainPage.xaml」ファイルの1画面があるだけのシンプルなテンプレートだ。
自動生成された共有プロジェクトには、ソースコードは何も入っていない。
なお、このようにして作った場合は、「App.xaml」ファイルがWindowsとPhoneの両方にそれぞれ存在する。先ほどのゼロから作ったユニバーサルプロジェクトでは、共有プロジェクトに「App.xaml」ファイルがあるだけだ。Appクラスの記述は、WindowsとPhoneで多少異なる（主に［戻る］ボタンの扱い）のだが、ゼロから作ったユニバーサルプロジェクトの「App.xaml」ファイルではどちらでもうまく動くように作られている。

　あとは、Windows用プロジェクトから共通に使えるコードをくくり出して共有プロジェクトに移動させ、また、Phone用プロジェクトにPhone向けの画面定義を作り込んでいくことになる。

　なお、Phone用プロジェクト（Windows Runtimeアプリに限る）をベースにしても同様にユニバーサルプロジェクトは作れる。しかし、そのような既存のプロジェクトは存在しないであろうから、それならば最初からユニバーサルプロジェクトとして作ればよい。

ユニバーサルWindowsアプリとしてストアに登録するには？

　同じアプリ名にすればよい。ただし、既存のPhoneアプリのバージョンアップでは、事前にもう一手間必要だ（次項）。

　ユニバーサルWindowsアプリだからといっても、ストアへの申請が1回で済むわけではなく、これまで通りWindowsとPhoneのアプリを別々にストアへ申請する。新しく申請するアプリの場合は、同じアプリ名で登録すればユニバーサルWindowsアプリになる。具体的には、VS 2013でストアとの関連付けを行う（ソリューションエクスプローラーでプロジェクトを右クリックして［ストア］−［アプリケーションをストアと関連付ける］）ときに、例えば先にWindowsで作業をしてアプリ名を登録したならば、Phoneでは一覧からその名前を選ぶ。

既存のPhoneアプリをユニバーサルWindowsアプリにするには？

　既存の（Windows Phone 8.1用ではない）Windows Phoneアプリには、AppIDが結び付けられていない。そこで、次の手順のようにして事前にAppIDを結び付けておく。

• Windows Phoneデベロッパーセンターで、AppIDを結び付けたい既存のアプリの更新手続きを開始し、［アプリの情報］画面を開く
• ［名前］欄にアプリ名を設定する。このとき、
  　2a）すでにWindowsストアアプリで名前を予約してある場合は、［名前］欄のドロップダウンを開いてそのアプリ名を選ぶ（次の画像）
  　2b）まだWindowsストアアプリで名前を予約していない場合は、［名前］欄にアプリ名を入力する
• ［名前］欄の右側のボタンをクリックし、ページ下端の［保存］ボタンをクリックする

既存のWindows Phone 8アプリに既存のWindowsストアアプリのAppIDを結び付ける（Internet Explorer）
［名前］欄のドロップダウンを開いて、その一覧の中から既存のWindowsストアアプリを選ぼうとしているところ。選択後、その右側のボタン（状況によってボタンに表示される文字列が変化する）をクリックし、ページ下端の［保存］ボタンをクリックすると、AppIDの結び付けが完了する。

　あとは、そのアプリ名を使ってWindowsとPhoneのアプリをストアに申請すればよい。

　ちなみに、WindowsとPhoneの両方で同じようなアプリを公開している場合は、上記の作業を行った後に（アプリ自体は変更していなくても）ストアへの申請を行うだけで、ストア上の表示が前掲の画像のようにユニバーサルWindowsアプリになる。

まとめ

　ユニバーサルプロジェクトは、ゼロから作ることもできるし、WindowsまたはPhone用の既存のプロジェクトに追加する形で作ることもできる。

　ユニバーサルプロジェクトで作成したWindowsアプリとPhoneアプリは、それぞれのストアに同じアプリ名で登録するとユニバーサルWindowsアプリになる。ただし、既存のWindows Phoneアプリのアップデートにする場合は、事前にAppIDを結び付ける作業が必要である。

Windows 8.1を扱う大規模カンファレンスのご紹介

　5月29日（木）〜5月30日（金）、マイクロソフトの最新技術情報（例えば本稿で解説したような内容）を日本語で日本人向けに提供するカンファレンス「de:code」が日本マイクロソフト主催で開催される。このカンファレンスは、米国時間で4月2〜4日に開催された「Build 2014」の内容をベースに、さらに日本向けのプラスアルファを含めたものになる。詳しい内容は（セッション内容は開催日までに決定していくとのこと）、リンク先を参照されたい。

「WinRT／Metro TIPS」