.NETエンジニアのための定期勉強会（Sansan主催）レポート
Xamarinで今日から始めるクロスプラットフォーム開発
― 第6回 勉強会： Wエバンジェリストによる特濃「Xamarin」勉強会［2］―
クロスプラットフォームアプリ開発の戦略についてまとめ、Xamarinによるアプリ開発の特徴を説明する。また、Xamarinに関する情報収集や、Xamarin.Forms×MVVMによる開発のポイントを紹介する。
「Xamarin」をテーマにした勉強会（Sansan主催の「第6回 .NET勉強会」）が9月30日に開催されました。本稿では、そのセッション内容を詳しく紹介します。この勉強会では、下記の2つのセッションがありました。
- 11時間で分かった気になれるXamarin概要
- 2［本稿］Xamarinで今日から始めるクロスプラットフォーム開発
本稿では、このうち2のセッションの内容をそのまま書き起こしました。
Sansan主催の「.NET勉強会」について
Sansan株式会社は、スキルアップを目指す.NETエンジニアのための勉強会を定期的に開催しています。本稿で紹介する「第6回 「Xamarin」って何？ Wエバンジェリストによる特濃「Xamarin」勉強会 ～C#によるマルチデバイス・クロスプラットフォーム開発の最前線～」では、エクセルソフト株式会社より田淵義人氏、日本マイクロソフト株式会社より渡辺友太氏という2人のエバンジェリストを迎え、Xamarinの概要や使い方に関するセッションを行いました（開催：2014年9月30日、モデレーター：Sansan株式会社 渋木宏明）。最新の開催情報は、こちらの「主催イベント一覧 - connpass」ページでご確認ください。
Xamarinで今日から始めるクロスプラットフォーム開発 ― 日本マイクロソフト株式会社 テクニカルエバンジェリスト 渡辺 友太
セッションスライド
2013年秋、Xamarin社とMicrosoftが事業提携を発表し、そのタイミングでVisual StudioがXamarinで正式にサポートされました。その際、Microsoft Conferenceでクロスプラットフォーム開発のセッションを行い、日本で最初にXamarinを紹介しました。
それ以降、Xamarin関連の話をする機会が増えています。本セッションでは、Xamarinを使ったクロスプラットフォーム開発について、デモを交えながら説明します。
クロスプラットフォームアプリ開発の戦略
プラットフォームごとにアプリを開発する場合は、基本的にはプラットフォームごとに言語とツールがあり、スキルとコードを再利用できません。
クロスプラットフォーム開発では、言語やツールを共通化し、スキルやコードを再利用して開発を効率化します。クロスプラットフォーム開発のパターンは、次の図に示す通り、主に3つです。
Webサイト＋ブラウザー
これは厳密に言うと、アプリではなく、いわゆるシングルページアプリケーション（SPA）です。1枚のページの中でJavaScriptを使ってアプリライクにいろいろ動くものを作成します。
簡単なUI（ユーザーインターフェース）ライブラリとしてjQuery Mobileなどが有名です。
Webサイトがアプリのように動き、各OSのブラウザーからアクセスできるため、クロスプラットフォーム対応という文脈になります。
ハイブリッド（Hybrid）
最近増えている手法です。Webの技術を使ってUIやロジックを共通化しているが、スマートフォンのカメラやGPSなど、一部のネイティブ機能も使うアプリをハイブリッドアプリと呼びます。
例えば、AdobeのPhoneGap（Cordova）を使うと、JavaScriptコードからネイティブのカメラ機能の呼び出しやGPS情報の取得といったネイティブ寄りのAPIを呼び出すことができます。
最近はゲームやコンシューマー向けで、エフェクトを多用し、UIやUX（ユーザー体験）にこだわるアプリの開発で利用されている手法です。例えば、ListViewコントロールのスクロールなど、端末に固有のエフェクトを使うために基本的にはネイティブで書くが、コンテンツのロード処理ではHTML5のCanvasへデータを取得したり、表示処理ではHTMLとCSSで書いたコンテンツをそのままWebViewコントロールに流し込んだりして共通化するといった事例も増えています。
ネイティブ（Native）
ネイティブの定義には正解はありません。
例えば、Titaniumは基本的にインタープリターで、JavaScriptで書いたものが逐次ネイティブに変換されます。UI／UXについても、Titanium Mobileが提供する共通のUI／UXを使います。
Xamarin.Formsは、「基本的にはネイティブのUIを使ってそれぞれコードを書く」という思想に基づいています。
コード／UIの共通化
どのパターンを選択するにしろ、共通化したいのは言語やツールです。
「共通化」により、エンジニアの夢である「Write once, run anywhere」（1回書いたらどこでも動く）が実現するのが最高の形ですが、個人的にはそのような天国はないと思っています。
Xamarinに関しては、「1回書いたらどこでも動く」というイメージが先走ってしまっています。しかし、最初のステップとして、クロスプラットフォーム対応をするかどうかはともかく、「XamarinではC#／.NETのスキルでiOSやAndroidのアプリが書ける」というメリットから評価するとよいと思います。
「どれくらいコードやUIを共通化できるか」は、C#／.NETの基盤を再利用できることの先にあります。Xamarinなら「コードやUIを共通化できる」というところから入ると、のちのちはまることが多くなってしまうのではないかと思います
――Xamarinでのアプリ開発
Xamarinには、
- C#／.NETのコードとスキルを再利用できる
- Visual Studioを使用できる
- フルネイティブなUIやAPIを利用し、パフォーマンスを出せる
といった特徴があります。
では、Xamarinでのアプリ開発はどのように行うのでしょうか。その基本的な方法をまとめたのが次の図です。
一番下のロジック層は、C#／.NETで書きます。ツールとしてはXamarin StudioまたはVisual Studioを使います。
UIは基本的に、Storyboard（iOS）、AXML（Android）、XAML（Windows）など、プラットフォームに固有のUIの定義方法に沿って作ります。UIの中でもボタン、リスト、ラベルなど、共通化可能なものは、Xamarin.Formsを使うこともできます。
Xamarin.Formsは、ネイティブのUIのうち、特に共通するパーツをラップしたライブラリです。Xamarin.Forms独自の新しいUIがあるわけではありません。Xamarin.FormsのボタンをAndroidで実行するとAndroidのボタンになり、iOSで実行するとiOSのボタン、Windowsで実行するとWindowsのボタンになります。
つまり、UIに関してはiOSやAndroidも知らないと開発できないことが分かります。実際、その通りです。Xamarinが定義した共通UIデザインガイドラインがあるわけではなく、結局はネイティブのUIで表現することになるため、Androidの新しいバージョンのデザインガイドライン、iOS 8の新しいAPIや推奨UIなどに対応する必要があります。
――Xamarinでのクロスプラットフォーム開発
C#／.NETで書くところから一歩進んでクロスプラットフォーム対応を考えたとき、どのようにXamarinを使えるでしょうか。基本的には、Web、ハイブリッド、ネイティブのどのパターンでも対応可能です。
例えば、Web技術で共通化する場合、Xamarin.FormsのWebViewコントロールを使い、そこにHTMLのURLを指定したり静的なHTMLコンテンツを流し込んだりすれば、WebサイトやJavaScriptで作ったコンテンツをWebViewを置いたコード上で共通化できます。
ハイブリッドでももちろん可能です。コンテンツの表示部分だけをJavaScriptやHTMLで書き、XamarinでC#のコードからネイティブのAPIを呼び出してGPS情報やコンタクトリストのデータを取得し、WebView内のJavaScriptコードを呼び出してそのデータを渡すという形になります。
Xamarinでは、ネイティブのコントロールを使ったクロスプラットフォーム開発も可能です。クロスプラットフォーム開発に限らず、単純に各OSに対応したアプリをC#で作成できることがメリットの1つです。恐らく、そこから始める方がよいでしょう。
さっそく始めてみましょう！
――Androidアプリ開発のデモ
Visual StudioにXamarinをインストールすると、プロジェクトテンプレートでiOSとAndroidのテンプレートを選択できるようになります。例えば、Androidのテンプレートで空のアプリケーションを選択すると、プロジェクトにAndroidアプリと似たフォルダー構成で初期ファイルが生成されます。
Androidアプリのレイアウトを定義するlayout.xmlファイルを開くと、Visual StudioのGUIエディターが立ち上がり、UIを構築できます。
デバッグ時には Android SDK に含まれる Android 端末のエミュレータも使えますが、より高速なサードパーティー製エミュレータも利用できます。例えば Genymotion や、 Xamarin による Xamarin Android Player、そして Microsoft が提供する Visual Studio Emulator for Android 等が挙げられます。これらのエミュレータを利用することでより快適なデバッグ環境を実現できます。
――iOSアプリ開発のデモ
iOSアプリ開発も、Androidアプリと基本的に流れは同じです。テンプレートにはiOS 8対応の拡張機能も用意されています。
Visual StudioでiOSプロジェクトを開いてもなかなか動かない場合には、構成マネージャーでデバッグの対象を実機からシミュレーターに変更しましょう。
Visual StudioでiOSアプリを開発する場合、Visual StudioからMac上のXamarin.iOS Build Hostに接続し、iOS Simulatorを立ち上げてデバッグを行います。iOSの場合、これが基本的な開発スタイルです。そのため、Macが必要になります。
iOSアプリのUIの設計はStoryboardで行います。Xamarinは、世界初となるStoryboard互換のUIエディターを提供しており、Visual Studioでも利用できるため、Xcodeを使う必要はありません。
――コンポーネントの活用
Xamarinにはコンポーネントという便利な仕組みがあり、これを使えばいろいろな拡張機能を作成できます。コンポーネントはNuGetに近いイメージです。
Xamarinはいろいろなコンポーネントを提供しています。例えばXamarin.Mobileは、GPS、カメラ、コンタクトリストなど、本来プラットフォームごとに作らなければならないロジック部分を共通化して呼び出せるコンポーネントを含みます。コンポーネントをロードすると自動的に参照に追加され、コンポーネントを開くとコンポーネントフォルダーに追加されます。
これまでC#／.NETで開発してきた人にとって、Visual Studioでエディターなどの使い慣れた機能や開発生産性を向上する機能を利用してiOSやAndroidのアプリを開発できることは大きなメリットになります。また、RestSharpなどREST形式のコードをうまく呼び出せるコンポーネントやロジック部分を簡略化できるライブラリを活用することもできます。
Xamarinでは、UIコンポーネントの他、ロジック、テーマ、プラットフォームのサービスなどさまざまなコンポーネントを利用できます。Xamarin自体にコンポーネントのエコシステムがあり、NuGetでライブラリを取り込んだり、自作のライブラリを利用したりすることも可能です。
――Xamarinの情報収集（※いずれも英語サイトです）
- Xamarin Blog http://blog.xamarin.com/：
Xamarinは進化が速く、さまざまな機能が次々と出てきています。Xamarin Blogでは、新しいトピックを追うことができます。 - Xamarin Forums http://forums.xamarin.com/：
投稿が多く、Xamarinの社員も参加しているため、参考になる情報が得られます。 - Evolve https://evolve.xamarin.com/：
毎年10月の第1週に開催されるXamarinの公式カンファレンスです。すでに動画が公開されているので、ウォッチしていくとより深い情報を得られます。 - MotzCod.es http://motzcod.es/：
Xamarinのエバンジェリストのブログです。その他にも、Xamarinの社員がTwitterで発言したり、サンプルコードを公開していたりするので、それらを見ると参考になります。 - Xamarin Community Blogs http://planet.xamarin.com/：
Xamarinコミュニティに貢献している人の有志によるブログです。
Xamarin.Forms×MVVMでクロスプラットフォームアプリ開発
――Shared Project vs. PCL（Portable Class Libraries）
Xamarinでクロスプラットフォーム開発を行う場合、C#／.NETのプロジェクトでコードを共通化する方法には、Shared ProjectとPCLという2つの方法があります。
Shared Projectでは、共通コードの中に#if文を使ってiOS、Android、Windowsの各プラットフォームに固有のコードを書きます。
PCLでは、1つのソースコードから1つのバイナリファイルが作成されます。そのため、コード内で#if文を使ってプラットフォーム固有のコードを書くことはできません。また、プロファイルで指定したプラットフォーム以外のAPIは呼び出せません。
Shared ProjectとPCLの使い分け
複数の開発プロジェクト間で使い回したいものについてはPCLがお勧めです。PCLではプロファイルで指定したAPIしか呼び出せないことから、必然的に他のプロジェクトでも使い回せるコードしか書けないはずです。そのため、他でも使う予定のある共通機能をPCLにまとめます。
共通化するが特定の製品でしか使わない機能は、Shared Projectに入れることをお勧めします。Shared Projectでは#if文が使えるので、90％は共通するが最後の10％だけ異なるコード、例えば、メソッドの中でAPIを呼び出す最後の1行だけが異なるといったクラス群をShared Projectに入れて参照すれば、共通コードとしてまとめられます。
Shared Projectに関しては、エディターでiOSやAndroidなどのコンテキストを選ぶことができます。例えば、iOSアプリを書いているときにiOSのコンテキストを選べば、Androidの部分がグレーアウトされ、AndroidのAPIを使ってエラーになるといった煩わしさがありません。
――MVVMアプリケーション
ある程度の規模でクロスプラットフォーム開発を実現するには、一定のパターンや規則に従って書かなければ、コードがごちゃごちゃになる可能性があります。
この問題の1つの解として、XamarinではMVVM（Model View ViewModel）パターンの利用が話題になります。
MVVMパターンでは、Model、View、ViewModelという3階層に分けます。ModelとViewModelのコードをPCLまたはShared Projectで共通化し、Viewだけを切り離して各プラットフォーム固有のコードで作成することで、共通化するコードとプラットフォーム固有のコードにきれいに分離することが可能です。また、Viewは基本的にロジックを含めずに、データバインドで実現するという思想があります。
まとめると、次の図のようなイメージになります
Xamarin.Forms
Xamarin.Formsは、UIの共通化に加え、Dependency Service、Custom Renderer、Messaging Centerといった、MVVMパターンを実装するための仕組みを提供しています。そのため、Xamarin.Formsを使うと、慣れていなくても自然にMVVMパターンで書けるようになります。
Xamarin.Formsを利用してMVVMアプリケーションを作るには、まずModelとしてデータを表すクラスを作成し、プロパティを定義します。ViewModelは、Modelのプロパティが変化したときに通知を受け取り、Viewに通知します。ViewはXAMLで書いて、ロジックを持たせずに、ViewModelで公開されているプロパティをバインドして表示します。
プラットフォーム固有の部分については、PCLなどの共通化部分でインターフェースを定義しておき、各プラットフォームのプロジェクトでそのインターフェースを実装するクラスを作成して固有の機能を書くという方法をとります。
MVVM部分、プラットフォーム固有の部分については、Xamarin.Formsで書き方が決まっているので、比較的書きやすいと思います。
Dependency Service
依存性の注入（DI： Dependency Injection）を実現する機能です。
前述の通り、共通部分でインターフェースを定義しておき、そのインターフェースの実装クラスにプラットフォーム固有の機能を書きます。各プラットフォームのプロジェクトでアセンブリ属性にXamarin.Formsの依存性を指定しておくと、共通化されたPCLからインターフェース型で機能を呼び出すことができます。プロジェクトがビルドされ、実行されたときには、プラットフォーム固有の実装クラスが呼び出されます。
Custom Renderer
共通化部分で空のクラスを宣言しておき、プラットフォーム固有の部分でカスタムな実装を書く方法です。
Messaging Center
MVVMパターンでViewとViewModelをバインドすると、ViewModelからViewをどのように操作するかが問題になります。例えば、View側で通知を受け取ったときにアラートを出したい場合、何らかの形でViewModelに通知しなければなりません。Messaging Centerは、このような問題を解決するために、抽象化されたメッセージを送受信する仕組みを提供しています。
――MVVMパターンをより深く理解する
MVVMはルールではなくただのパターンです。MVVMパターンだからこう書かなければならないと決められているわけではありません。データバインドを基本として実装するパターンを「MVVM」と呼んでいるだけであり、いろいろな実装方法があることを念頭にMVVMをより深く理解していくと、Xamarinでの開発に入りやすいのではないかと思います。
――Xamarin Test Cloud
クラウド上でスマートフォンをテストできるソリューションサービスが新たに発表されました。
Xamarin Test Cloudでは、UIの自動テストをクラウドの先に接続した実機デバイスで実行できます。テストの結果はTFS（Team Foundation Server）と連携して収集でき、アジャイルなどに活用可能です。
まとめ
Xamarinは多くのクロスプラットフォーム開発に対応できます。C#／.NETでiOSやAndroidのアプリを書いてみたいと思う人にとっては損のない技術だと思います。
クロスプラットフォーム開発のメリットとデメリットを理解した上で、ぜひXamarinを活用してください。
最後に繰り返しになりますが、Sansanでは定期的に.NET勉強会を開催しております。ぜひご参加ください。
※以下では、本稿の前後を合わせて5回分（第2回～第6回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
2. 10分間で人に説明できるまで分かるCompiler as a Service“Roslyn”
Visual Studio “14”の新機能として搭載予定の次期コンパイラープラットフォーム“Roslyn”について、簡単に話せるレベルになるまで、ほんの少しだけ踏み込んで解説。
3. C#＆.NETの進化と、次期版でできること（2014年版）
さまざまなプラットフォーム向けのプログラムを開発できるまでに進化してきたC#。その内容と特徴を、プラットフォームごとにまとめる。また今後のC#／.NETがどのように進化するかも紹介する。
4. 破壊的に進化する.NET技術のトレンド変化に立ち向かう
数年で根本から大きく変更される.NET技術。そんなトレンド変化に追随するにはどうすればよいのか？ gloopsで実践されている手法を具体的に説明する。
5. 【現在、表示中】≫ Xamarinで今日から始めるクロスプラットフォーム開発
クロスプラットフォームアプリ開発の戦略についてまとめ、Xamarinによるアプリ開発の特徴を説明する。また、Xamarinに関する情報収集や、Xamarin.Forms×MVVMによる開発のポイントを紹介する。
6. きっとAzureを使いたくなる、超絶便利な新機能群一挙紹介
最新のMicrosoft Azureの全体像と、特に便利な個別の機能をコンパクトに紹介する。Machine Learning、Search、Batchなどの機能概要も説明する。
