【ユニバーサル Windows アプリ開発】既存の Windows アプリを Phone に移植してみるテスト #uniwinapp #win8dev_jp #wpdev_jp #decode14 #bldwin

Windows Phone 8.1 の Windows Runtime アプリで使える API は、 build 2014 では 「Windows ストア アプリと 9割互換!!」 と言われました。

ほんまかいな!?
それなら、 既存の Windows ストア アプリのコードの大部分がそのまま動く (少なくともビルドは通る) はず。

ってことで、試してみましょうか。
VS 2013 Express でやります。 ただし、 Update 2 (現在 RC) 必須で!
手順は、

1. 既存の Windows ストア アプリのソリューションのコピーを作る
2. ソリューションエクスプローラーでプロジェクトを右クリックしてメニューから [Windows Phone 8.1の追加] を実行する (ユニバーサル プロジェクトになる)
3. Windows プロジェクトから、 ソースをごっそりと共有プロジェクトに移動する
4. ビルドしてみる。 ダメなところは修正する。 ⇒ どのくらいタイヘンな作業になるかしら?

手始めに、 私が初めて公開した Windows ストア アプリ 「クラウディアさんタイマー」 を。

ソースコード (Win8版) は、 code.msdn からダウンロードできます。
ダウンロードした zip ファイルの中の 「C#」 フォルダーに、  ソリューション一式が収められてます。 それを適当なところに展開し、 VS 2013 でソリューションを開いて…
このソースは Windows 8 用なので、 まず Windows 8.1 用に再ターゲット (Retarget)します。
で、 ビルドしてみると 2つエラーが出るはずなので、 次のように対応。

• エラー 「テキスト値 'マウス' を…」 ⇒ StandardStyles.xaml ファイルの該当箇所を 「マウス」 から 「Mouse」 に修正する
• 証明書ファイルが無い ⇒ パッケージマニフェストの [パッケージ化] タブでテスト証明書を作成する

Windows ストア アプリとしてビルドが通ることを確認したら、 ［Windows Phone 8.1の追加］を実行。

ユニバーサル プロジェクトになったので、 Windows プロジェクトから Phone プロジェクトへの引っ越しに掛かります。

まず、 Phone プロジェクトの App.xaml と MainPage.xaml は要らなくなる (これから Windows 用から持ってくる) ので、 Phone プロジェクトの App.xaml と MainPage.xaml ファイルを削除。

次に、 Windows プロジェクトから移動するファイルを切り取り (次の画像の左側)、 共有プロジェクトに貼り付けます。
Windows プロジェクトから移動しなかったファイルは次の通り。
・BluewaterSoft.ClaudiaTimer_TemporaryKey.pfx - Phone では使わない
・OptionPanel.xaml (設定チャームから開くオプション設定画面) - Phone では使えない
・Package.appxmanifest - Phone 専用のものがすでにある

移動後は上の画像の右のようになります。 Common フォルダーのソースコードや、 Assets フォルダーなどのリソースファイルも、 共有プロジェクトに移動しました。

さすがにこれでビルドが通ったりはしないものの、 驚くほど少ない修正でビルドできるようになります。 ビルドを通すために行った修正は、次の表の通り。

修正箇所	原因	内容
プロジェクト	参照の不足	NotificationsExtensions.dll (ライブタイルの設定で利用) への参照を追加
LayoutAwarePage.cs	API 非互換	ApplicationViewState クラス (Win8.1 でも非推奨) を利用している部分を #if !WINDOWS_PHONE_APP ～ #endif で括って除外
App.xaml.cs	API 非互換	Windows.UI.ApplicationSettings (設定チャームのAPI) の using 宣言を 「#if !WINDOWS_PHONE_APP」 で除外
		設定チャームからフライアウトを出す部分を 「#if !WINDOWS_PHONE_APP」 で除外

簡単なアプリだけど、 それでも Windows Runtime の互換性は非常に高いといってよいでしょう。

ただし、 VS2013 Update2 に付属のエミュで実行してみると、 画面レイアウトは残念ながらご覧の通り。 この画面は WXGA (1280x768) です。

スクロール可能な画面ならなんとか使えるかもしれないけど、 このアプリはスクロールできないので利用するのは無理。
やはり Phone 用に画面を作り直す必要があるということですね。

ちなみに、 最初から Win8.1 用として作られたアプリ (LayoutAwarePage クラスを使っていない) を移植した場合は、 画面もわりと使える感じになるものの、 今度は [戻る] ボタンのスタイル定義が Phone 側に存在しないというエラーが出ます。

まぁ、 やはり基本的には画面は共有しないものだと考えておくべきでしょう。
厳密なレイアウトを要求しないのなら、 共有にユーザーコントロールを作り、 Windows と Phone のそれぞれに用意した画面に貼り付けて使うといいです (画面レイアウトの基本グリッドの違い (=タイトル文字列の見せ方など) と [戻る] ボタンの違いを吸収する苦労をするより、 そういった部分は分けてしまった方が楽です)。

それと。
今回は Windows の App.xaml を持って来ちゃいましたが、 じつはそれだと Phone の [戻る] ボタンに反応しません。
そのへんは、 ゼロから作ったユニバーサルプロジェクトの App.xaml.cs を参照。

余談:
そんな感じで画面だけ作り直そうかと思ったけど、 ほかにもイロイロ手を入れたくなったので、 けっきょくゼロから書き直したのだった f(^^;
Phone で背景色とか設定を変更すると Windows にも反映されるよ♪
⇒ クラウディアさんタイマー ver.2
Windows 8.1 版

Windows Phone 8.1 版