• [アーティクル]

Connect(); 2016

Volume 31 Number 12

Xamarin - Xamarin とユニバーサル Windows プラットフォーム

Tyler Whitney; 2016

iOS と Android をターゲットに Xamarin を使用すると、1 つのプログラミング言語と共有コードを使って複数のプラットフォームを対象に開発できるメリットは知られています。また、Xamarin.Forms を使用して Android と iOS の間で UI を再利用したうえで、プラットフォーム固有の機能も自由に利用できるメリットも有名です。

しかし、同じツールを使用してユニバーサル Windows プラットフォーム (UWP) をターゲットにすると、400 万を超えるデバイスを対象にでき、iOSデバイスと Android デバイスでのダウンロード数と利用率も同時に増やせることはあまり知られていないかもしれません。

UWP をターゲットにする理由

なぜアプリのターゲットを UWP にするのでしょう。 その理由はアプリの利用率です。開発者にとっては、利用率が重要です。開発者は、開発したコンテンツに目を向けてほしいと考えます。アプリ内購入、広告、アプリのエコシステム構築へのコンテンツの貢献などを実現するため、そのアプリが手に取られ、日常的に使用されることを望みます。

UWP により、デスクトップ、タブレット、スマートフォン、Xbox、HoloLens、モノのインターネット (IoT) デバイスで動作するアプリを作成できます。つまり、UWP アプリには 400 万を超える潜在的な利用者が存在します。しかし、この数字は Windows ベースのデバイスの数を示しているだけではありません。サポートするすべてのデバイスでの利用率が上がることを意味しています。NPR One (one.npr.org、英語) の NPR エクスペリエンスについて考えてみましょう。

NPR One は、公共ラジオ ニュース、話題、ポッドキャストの公開ストリームをユーザーに配信しています。Windows をターゲットにしたことで、NPR のコンテンツの利用率は大幅に増加しました。Microsoft ブログの記事 (bit.ly/2e30plQ、英語) には、NPR のプロダクト マネージャー Ben Schein の話として次のように引用されています。「NPR 視聴者の 70 パーセントが Windows デバイスを使用しており、Windows 10 リリース以降、その視聴者の視聴時間が 50 パーセント増加しています。これは、アプリをアップグレードする前のことです。 その後 Windows アプリをリリースしたところ、iOS や Android でも予想外にダウンロード数が急上昇しました」これは、NPR が予測していなかったプラス効果でした。

このことは、マルチデバイス環境の現状を示しています。iOS デバイスや Android デバイスの利用者は、職場や家庭で PC も利用しています。作業の場所や内容に応じて、1 日の中でデバイスを切り替えながら使っているのは当然です。所持しているすべてのデバイスで使用できるアプリがあれば、そのアプリとコンテンツの利用率が上がる可能性は高くなります。

バスに乗って職場に向かう、普段の 1 日を考えてみてください。バスの車内ではスマートフォンを使用して、報告書を読むといった作業を行います。職場に着いたら、その報告書を Microsoft Excel にエクスポートしてデスクトップに作業を移し、細かく分析します。家に帰るバスの車中でビデオを視聴します。家に着いたら、PC (またはリビングの大画面で視聴するために Xbox) に切り替えて、中断した所から視聴を再開します。

いずれの場合も、アプリが動作するデバイスだけが利用率に影響しているわけではありませんが、重要であることは明らかです。また、利用者はその時点で最適なデバイスで作業しようとするため、デバイスの切り替えやすさも重要です。

UWP について

UWP は、Windows 10 を実行するすべてのデバイスで利用可能な共通のアプリ プラットフォームを提供します。

すべての Windows 10 搭載デバイスで使用できる共通 API と、デバイス固有の API を併用すれば、そのデバイスの能力を最大限に引き出すことができます。ここからは、UWP が開発者にもたらす主なメリットをいくつか説明します。

適応性が高く美しい UI UWP は、アプリがさまざまな画面サイズや入力の種類に適応できるように設計されています。スマートフォンの小さな画面でも娯楽施設の大画面でも、実行するデバイスに適した UI 制御とレイアウト制御が実現されます。

図 1 に、アダプティブ UI の例を示します。モバイル デバイスでの通話ボタンとピクチャ イン ピクチャ コントロールの位置に注目します。このアプリがスマートフォンで動作すると、通話ボタンのサイズが変化し、ボタンの位置が調整されて、片手でも使いやすい UI になります。ピクチャ イン ピクチャの位置は、小さい画面に合うようにスマートフォン上で調整されます。

アダプティブ UI
図 1 アダプティブ UI

タッチ入力、ペン、キーボード、マウス、Xbox コントローラーのいずれであっても、そのデバイスで利用できる種類の入力は、組み込みコントロールが受け取ります。

新しい Composition API を使用すると、非常に美しいアプリを作成できます。キーフレーム アニメーションなどのアニメーションを作成することも、ドロップ シャドウ、サムネイル ライティング、ぼかし、不透明度、拡大縮小のアニメーション効果、色相回転、リストビュー項目の視差、Z オーダー スクロール、セピア、コントラストなどの効果を適用することもできます。GitHub の WindowsUIDevLabs プロジェクト (bit.ly/2e3PDqo、英語) を複製して実行し、これらの効果をご自身で確認してください。

UWP アプリではライブ タイルや通知を使って、アプリの情報をひと目でわかるように示すことができます (図 2 参照)。ライブ タイルと通知によってユーザーがアプリを意識するようになるため、アプリの利用率を 20 パーセント近く引き上げます。

ライブ タイルと通知
図 2 ライブ タイルと通知

デバイスの長所を生かすアダプティブ コード: UWP ではエクスペリエンスを調整して、さまざまな種類のデバイスの長所を生かすことができます。あるデバイスでアプリが動作している場合のみ、そのデバイス固有の機能を利用するアダプティブ コードを作成することができます。また、特定の種類のデバイスをアプリのターゲットにすることも可能です。Visual Studio は利用可能な API にフィルターをかけ、ターゲットにするデバイス カテゴリに関連付けられている API のみを提示します。Windows ストアは、使用しているデバイスの種類に利用可能なアプリだけを提示します。UWP アプリであれば、すべてのデバイスで提示されます。

Cortana API により、アプリに音声コマンドを追加する機能が提供されます。Cortana ポータルでアプリの動作を登録すると、Cortana が適切な場所とタイミングで、アプリに関係するアクションを提示します。

UWP 向けに利用率の高いアプリを作成できるように、Visual Studio はコーディングとデバッグ用に非常に優れたツールを用意しています。コードのサンプル (bit.ly/1RhG46l、英語)、タスクのスニペット (bit.ly/2dINSo9、英語)、サポートを受けられる気鋭の開発者コミュニティ、アニメーション、カスタム コントロール、Twitter や Facebook 向けのサービスを提供する UWP Community Toolkit (bit.ly/2b1PAJY、英語) のようなライブラリなど、アプリ開発に役立つリソースを利用できます。その結果、UWP ベースのすべてのデバイスにインストール可能な 1 つのパッケージを作成することができます。

アプリをスムーズに顧客の手元に届ける: Windows ストアは、幅広いユーザー層への配信を容易にするため、インストールあたりのコストを軽減できます。Windows ストアでは地理的境界を意識することなく取引を行います。そのため、他国との銀行取引構造や税法を理解する必要がなく、海外取引の負担が少なくなります。また、デバイス間でコンテンツを共有するライセンスも扱われるため、こうした懸念に対応するインフラストラクチャを構築する必要もありません。

ストアは、自動更新、ライセンシング、評価版など、アプリ ストアでは当たり前のエクスペリエンスを提供します。その結果、何億もの Windows 10 ユーザーがアプリを利用できるようになるため、アプリの利用率は大きく高まります。

UWP は、リッチなアプリを開発し、多様なデバイスでそのアプリを動作させ、顧客に提供する機能を提供します。Xamarin から UWP をターゲットにするのは難しいことではありません。

既存の Xamarin.Forms アプリへの UWP プロジェクトの追加

ここからは、GitHub にある James Montemagno の株式相場表示コードのサンプル (bit.ly/2dYHEvs、英語) に UWP プロジェクトを追加する方法を示します。このサンプルは、iOS、Android、および UWP をターゲットにする Xamarin.Forms ソリューションです。

ここでは、Windows 10 で実行されている Visual Studio 2015 Update 3 と、最新状態でインストールされた Xamarin があることが前提です。

ここでの手順に従って進める場合は、コード サンプルをコピーし、MyStocks.Forms.UWP プロジェクトを削除してから、以下の手順で再度プロジェクトを追加して戻します。

  1. UWP プロジェクトを既存の Xamarin.Forms ソリューションに追加します。
  2. UWP プロジェクトから Xamarin.Forms への参照を追加します。
  3. 共有フォームを含むポータブル クラス ライブラリ (PCL) への参照を追加します。
  4. Xamarin.Forms を使用するように UWP プロジェクトのコードを変更し、共有 PCL プロジェクトからアプリを読み込みます。

ここからは、この手順を 1 つずつ確認していきます。

既存の Xamarin.Forms ソリューションへの空白の UWP プロジェクトの追加: Visual Studio に MyStocks.Forms を読み込んだら、ソリューション ノードを右クリックして、[追加]、[新しいプロジェクト] の順にクリックします。[新しいプロジェクトの追加] ダイアログで、[Visual C#]、[Windows]、[ユニバーサル] の順に移動して、[空白のアプリ (ユニバーサル Windows)] を選択します。プロジェクトの名前を「MyStocks.Forms.UWP」に設定し、[OK] をクリックします。

すると、[新しいユニバーサル Windows プロジェクト] ダイアログが表示され、UWP アプリがサポートするプラットフォームの最低限のバーションを選択するよう求められます。既定の設定を受け入れ、[OK] をクリックします。

これで、UWP プロジェクトが Xamarin ソリューションに追加されます。次に、新しい UWP プロジェクトの [参照] ノードを右クリックして、[NuGet パッケージの管理] を選択します。

NuGet パッケージ ウィンドウが表示されたら、[参照] を選択し、検索ボックスに「forms」と入力してリストを絞り込んだ後、リストから Xamarin.Forms を選択します。右側のドロップダウンから最も新しく安定しているバージョンを選択し、そのバージョンをメモしてから [インストール] をクリックします (図 3 参照)。

NuGet パッケージ マネージャー
図 3 NuGet パッケージ マネージャー

プロジェクトのターゲットを同じバージョンに: ソリューションに他の Xamarin.Forms プロジェクトがある場合、同じバーションの Xamarin.Forms をUWP プロジェクトに追加するようにします。他のプロジェクトが使用している Xamarin.Forms (MyStocks.Forms.Android など) のバージョンを確かめるには、[参照] ノードを右クリックして、[NuGet パッケージの管理] を選択します。[インストール済み] を選択していることを確認し、検索ボックスに「forms」と入力してリストを絞り込んだ後、インストール済みの NuGet パッケージのリストから Xamarin.Forms を見つけます。そのバージョンが MyStocks.UWP プロジェクトで使用している Xamarin.Forms のバージョンと一致することを確かめます。バージョンが古い場合は更新します (図 4 参照)。

Xamarin.Forms のバージョンが一致していることを確認
図 4 Xamarin.Forms のバージョンが一致していることを確認

共有フォームを含む PCL への参照の追加: UWP プロジェクトに、Xamarin.Forms プロジェクトで共有 UI を使用する UI を用意します。そのためには、共有フォームを含む PCL を新しい UWP プロジェクトから参照する必要があります。My.Stocks.Forms.UWP プロジェクトで、[参照] ノードを右クリックして、[参照の追加] を選択します。表示される参照マネージャーで、[プロジェクト]、[ソリューション] が選択されていることを確認した後、MyStocks.Forms を選択して参照を追加します (図 5 参照)。

ポータブル クラス ライブラリへの参照の追加
図 5 ポータブル クラス ライブラリへの参照の追加

Xamarin.Forms を使用するための UWP プロジェクト コードの変更と、共有 PCL プロジェクトからのアプリの読み込み: ここで、アプリ テンプレートのコードをオーバーライドする必要があります。このテンプレートは新しい UWP プロジェクトの一環として追加されたものです。コードは、Xamarin.Forms を使用して共有 PCL プロジェクトからアプリを読み込むように変更します。以下のコードを、MyStocks.Forms.UWP の App.xaml の App.xaml.cs にある App::OnLaunched の先頭に挿入します。

protected override void OnLaunched(LaunchActivatedEventArgs e)
{
  // Initialize Xamarin.Forms here
  Xamarin.Forms.Forms.Init(e);
  #if DEBUG
  ...
}

MyStocks.Forms.UWP の MainPage.xaml の MainPage.xaml.cs にある MainPage コンストラクターに以下のコードを追加して、Xamarin.Forms プロジェクトを読み込みます。

public MainPage()
{
  this.InitializeComponent();
  this.LoadApplication(new MyStocks.Forms.App());
}

同じファイルで、Page から MainPage の継承を削除します。

public sealed partial class MainPage : Page

その後、MainPage.xaml (MyStocks.Forms.UWP の MainPage.xaml) に以下の変更を行います。

  • <Page> タグ内で、以下のように xmlns:forms=“using:Xamarin.Forms.Platform.UWP” を追加します。
<Page
    x:Class="MyStocks.Forms.UWP.MainPage"
    xmlns:forms="using:Xamarin.Forms.Platform.UWP"
    ...
  • <Page> 開始タグを <forms:WindowsPage に変更し、</Page> 終了タグが </forms:WindowsPage> に変わることを確認します。

これで、ページが Xamarin.Forms.Platform.UWP.WindowsPage から継承されるようになります。

MyStocks.Forms.UWP プロジェクトのビルド構成への追加: UWP プロジェクトを Xamarin.Forms プロジェクトに追加したら、その UWP プロジェクトがビルドに向けて構成されていることを確認します。最初に、MyStocks.Forms.UWP プロジェクトのノードを右クリックして、[スタートアップ プロジェクトに設定] を選択します。

その後、ソリューションのノードを右クリックし、[構成マネージャー] を選択します。[構成マネージャー] ダイアログで、MyStocks.Forms.UWP の [ビルド] と [配置] のチェックボックスがオンになっていることを確認します。

上記の手順に従っている場合は、はじめに MyStocks.Forms.UWP プロジェクトを削除しました。新しい MyStocks.Forms.UWP プロジェクトには、背景画像や銘柄記号の値を取得したり、Twitter API にアクセスするために元のプロジェクトに追加されていた NuGet パッケージは含まれていません。James Montemagno のアプリのサンプルに UWP プロジェクトを追加するために行った手順の結果を確認するには、上述のリンク先の GitHub プロジェクトから最新のファイルをコピーするか、linqtotwitter、Microsoft.Bcl、Microsoft.BCL.Build、Microsoft.Bcl.Compression、Microsoft.Net.Http、Newtonsoft.Json、および Xam.Plugins.TextToSpeech という NuGet パッケージを MyStocks.Forms.UWP プロジェクトに追加します。

これで、Xamarin ソリューションには UWP プロジェクトが追加されます。UWP プロジェクトは、UWP Blank App テンプレートから Xamarin.Forms アプリを読み込んで実行します。図 6 には、Androdid、iOS、Windows 10 で実行しているアプリをそれぞれ示します。

さまざまな OS で実行されるアプリ
図 6 さまざまな OS で実行されるアプリ

Xamarin.Forms は、共有フォーム プロジェクトから UWP プロジェクトにコントロールをマッピングする役割を担います。また、Xamarin.Forms は、必要に応じてプラットフォーム固有の要素を導入しながら、UI の他の部分は共有したままの状態にする手段を提供します。詳しくは、本特集号の Charles Petzold のコラム「Xamarin.Forms アプリでのネイティブ ビューの埋め込み」と 2016 年 9 月号の Kevin Ashley のコラム「Xamarin - Xamarin によるクロスプラットフォームの生産性」(bit.ly/2dYKr8a) をご覧ください。

ライブ タイル、カスタム アイコン、通知などの UWP アプリ固有の機能は、UWP プロジェクトで正しく機能します。

まとめ

UI に Xamarin.Forms を使用していなくても、UWP プロジェクトをソリューションに追加できます。共有アセット プロジェクト、PCL、または .NET Standard ライブラリを使用して、コードを共有できます。ベスト プラクティスについては、Xamarin デベロッパー サイトの「クロスプラットフォーム アプリケーションのビルド」(bit.ly/2e3bV0C、英語) を参照してください。

Microsoft は Xamarin を買収し、オープン ソース プロジェクトに投資を続けています (bit.ly/1MZsCFE、英語)。フィードバックやご協力をいただければさいわいです。

Tyler Whitney は、マイクロソフトのシニア コンテンツ開発者であり、Windows Embedded Compact についての記事を執筆していましたが、現在は Windows 10 の開発に関する記事を執筆しています。

この記事のレビューに協力してくれたマイクロソフト技術スタッフの Jim Cox、Norm Estabrook、James Montemagno、Jason Short に心より感謝します。Jim Cox は、マイクロソフトの主任プログラム マネージャーです。

Jason Short は、マイクロソフトのシニア プログラム マネージャーです。

James Montemagno は、マイクロソフトの Xamarin 主任プログラム マネージャーです。

Norm Estabrook は、マイクロソフトのシニア コンテンツ開発者です。