PhoneアプリプロジェクトでUI要素を共有する場合に考慮すべき点について取り上げる。Insider.NET連載目次ユニバーサルプロジェクトを使ってユニバーサルWindowsアプリを開発するとき、真っ先に頭を悩ますのが「画面も共有できないだろうか?」という願望であろう。Phoneで動かすというデモも行っていた。それは一般的にはあまり得策とはいえない。本稿では、筆者なりの指針を説明する。事前準備ユニバーサルプロジェクトを使ってユニバーサルWindowsアプリを開発するには、以下の開発環境が必要である。Windowsを使っている。8.1エミュレーターの実行に必要だ。未対応でも、ソースコードのビルドは可能だ。対応PCかどうかを判定する方法」を参照。SLAT対応ハードウェアであっても、VM上ではエミュレーターが動作しないことがあるのでご注意願いたい。1」と呼ばれていたアップデート。スタート画面の右上に検索ボタンが(環境によっては電源ボタンも)表示されるようになるので、適用済みかどうかは簡単に見分けられる。2014」というようである。マイクロソフトのダウンロードページから誰でも入手できる。本稿に掲載した手順を試すだけなら、無償のExpressエディションで構わない。Windows(製品版)はマイクロソフトのページから無償で入手できる。Desktop」はデスクトップで動作するアプリ用)。本稿では、紛らわしくない限り次の略称を用いる。2014より):ユニバーサルWindowsアプリ開発の勧め」参照)。WindowsとPhoneのどちらのプロジェクトでもビルドできるソースならば、何でも共有プロジェクトに置くことが可能である。画面(=Windows.UI.Xaml.Controls名前空間のPageクラス)も共有プロジェクトに置けるのだ。実際、共有プロジェクトに新しい項目を追加するためのダイアログボックス(次の画像)を見ると、[空白のページ]が用意されている。共有プロジェクトに対して新しい項目を追加するためのダイアログボックスを出したところ(VS2013)赤枠内に[空白のページ]が見える。なると、共有プロジェクトに画面も入れてしまいたくなる。すれば、Windows用プロジェクトとPhone用プロジェクトはほとんど空にすることも可能になる(プロジェクトファイルやマニフェストファイルなどを残すだけになる)。それは、非常に限定された場合だけにとどめておくのが無難である(次項で説明する)。2014のキーノートで、Windowsストアアプリのソースコードをユニバーサルプロジェクトに変換し、Windows用のコードをごっそりと共有プロジェクトに移し、Phoneアプリとしてもビルドして実行できるというデモを行っていた(次の画像)。2014キーノートより)このキーノートのビデオはhttp://channel9.msdn.com/Events/Build/2014/KEY01で見られる。上の画像には、アプリ起動直後の画面が映っている。この画面には[戻る]ボタンのための左上の空白がない(移植前のWindowsストアアプリにもなかった)。簡単に移植できたのだ。[戻る]ボタンの扱いは、WindowsとPhoneで異なっている。Windowsでは、画面の左上に[戻る]ボタンを開発者が配置し、そのイベントハンドラーを書く。Phoneでは、物理的な[戻る]ボタンがあり、開発者はシステム側で発生する割り込みに対処するコードを書く(物理的な[戻る]ボタンがない機種でも同様)。1つの画面定義で両方に対応するには、WindowsとPhoneで[戻る]ボタン周りのレイアウトを切り替えることと、それぞれのイベント(Windowsではボタンのクリックイベント、PhoneではOSからの割り込みに対するイベント)に対処する必要がある*5。上述したキーノートのデモでは、[戻る]ボタンがなかったのでそれらの修正も行わずに済んだのである。従って、[戻る]ボタンを持たないごく簡単な1画面だけのアプリならば、画面を共有プロジェクトに置いてもよさそうである*6。この新しい「NavigationHelper」クラスを利用する場合には、画面レイアウトの切り替えだけを実施すればよい。[戻る]ボタンを持つ画面を共有プロジェクトに置くことも可能ではある。後述する「クラウディアさんタイマーVer.2」では、ヘルプ画面(「HelpPage.xaml」ファイル)を試みに共有プロジェクトに置いてみた。そのために、Windows用の画面をベースとして、[戻る]ボタンをテンプレートのButtonコントロールからAppBarButtonコントロール(ともにWindows.UI.Xaml.Controls名前空間)に置き換えた(Buttonコントロールのままでは、Phone側で「スタイル定義がない」というエラーになる)。コードビハインドには[戻る]ボタンの表示を切り替えるコードを追加した。そのような手間を掛けるくらいなら、後述するユーザーコントロールにした方がよほど楽だし、分かりやすい。共有プロジェクトに画面を全く置かない場合これが王道であろう。大規模な開発などでMVVMアーキテクチャを採用していれば、自然とそうなるはずだ(次の図)。規模に関係なく、画面を厳密にレイアウトしたい場合は、WindowsとPhoneで別々に画面を作ることになるだろう(後述)。画面の主要な部分をユーザーコントロールに作り込んで、それをWindowsとPhoneそれぞれの画面に貼り付けるのだ。画面のレイアウトに厳密さが要求されないのなら、これは有効な方法だ。例として、筆者が公開しているユニバーサルWindowsアプリの画面を紹介しよう*7。次の画像は、メイン画面だ。赤枠の部分をユーザーコントロールとして共有プロジェクトに作ってある。上がPhone、下がWindows。赤枠内の部分をユーザーコントロールとして共有している。2付属のエミュレーター/シミュレーターによる表示。ユニバーサルWindowsアプリ「クラウディアさんタイマーVer.2」(Windows用、Phone用)。Ver.2で公開している。次の画像はオプション設定パネルだ。赤枠の部分をユーザーコントロールとして共有プロジェクトに作ってあるのは同じだが、WindowsではそれをSettingsFlyoutコントロール(Windows.UI.Xaml.Controls名前空間)のコンテンツにしている。「クラウディアさんタイマーVer.2」のオプション設定パネル左はWindows、右がPhone。赤枠内の部分をユーザーコントロールとして共有している。ユーザーコントロールを、Windowsではフライアウトに、Phoneでは画面に貼り込んでいる。上の画像で、オプション設定パネル左下のロゴ画像と右下の[レビュー]ボタンの位置関係に注目してほしい(次の画像)。Windowsでは下端がだいたいそろっているのに、Phoneではズレてしまっている。このような違いが許容できるなら、ユーザーコントロールで画面コンテンツを共有できる*8。「クラウディアさんタイマーVer.2」のオプション設定パネル(拡大)左はWindows、右がPhone。赤色の点線で示したように、ボタンの位置が大きくズレている。ボタンのプロパティに「VerticalAlignment="Bottom"」(=下端にそろえる)と指定してあるのだが、Phoneではかなり隙間が開いてしまっている。同一のXAMLコードでも、WindowsとPhoneでこのようにレイアウトが異なって表示されることがあるのだ。WindowsとPhoneのスタイル定義を作り込むことで、細部までレイアウトを一致させることは可能かもしれない。そこに労力を注ぎ込むくらいなら、別々の画面として、むしろVとVMの分離に力を使うべきだと筆者は考える。まとめユニバーサルプロジェクトで開発するとき、画面を共有するかどうかは次のように考えるとよいだろう。共有プロジェクトには画面を置かない:上記以外また、画面によって置き場所を変えることも考えられる。メイン画面はレイアウトを厳密にしたいから共有しないが、ヘルプ画面はアバウトでも構わないのでユーザーコントロールを共有に置く、などである。8.1を扱う大規模カンファレンスのご紹介5月29日(木)〜5月30日(金)、マイクロソフトの最新技術情報(例えば本稿で解説したような内容)を日本語で日本人向けに提供するカンファレンス「de:code」が日本マイクロソフト主催で開催される。2014」の内容をベースに、さらに日本向けのプラスアルファを含めたものになる。詳しい内容は(セッション内容は開催日までに決定していくとのこと)、リンク先を参照されたい。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。