前回は、Xamarinネイティブの手法で簡単な消費税計算を行うアプリを作成しました。今回は、UIを共通コードで記述するXamarin.Formsの手法を使って、前回と同じ外見の消費税計算アプリを作成します。同じアプリを作成することでアプローチの違いや開発手法の違いがより明確になると思います。

Xamarin.Formsとは

Xamarin.Formsは、Xamarinネイティブの手法よりも共通化できる部分を増やし、UIも単一コードで書けるようにしたライブラリです。ロジック部分は.NETで共通化して、更にUI部分をWPFやSlverlight開発をしている方には馴染み深いXAMLやC#で記述する事ができます。

ネイティブアプリのUIや各OSのユーザー体験(UX)を大事にするというXamarinの基本理念にのっとり、単一コードで書けるにもかかわらず、ビルド時にネイティブのコントロールにマッピングされる、ネイティブUIやUXを提供しています。

2016年4月末に行われたXamarinのイベント「Evolve 2016」では、Xamarin.FormsもMITライセンスでオープンソース化されることが発表されました。既にGitHubに公開されていますので、興味のある方はご覧ください。

Xamarin.FormsのUIコントロール(パーツ)には大きく分けて3種類あります。「Page」、Page内のレイアウトを決める「Layout」、ボタンなどの各パーツである「Control」です。最初に「Page」を用意して、例えば積み上げ式のレイアウト[StackLayout]やグリッドのレイアウト[Gird]などを配置し、その中に各「Control」を配置していきます。2016年6月時点ではUIのコードをすべて手書きで入力していく必要がありますが、利用できる「Control」の種類も少ないためすぐに覚えられると思います。

Xamarin.Formsアプリの作成

それではXamarin.Formsのプロジェクトを作成していきます。

Visual Studioを起動し、[新しいプロジェクト]から、[Visual C#＞Cross-Platform]を選択し、[Blank App (Xamarin.Forms Portable)]でプロジェクトを作成します。この例では、「FormsCalculator」という名前にします。

プロジェクト作成途中で以下のダイアログが表示される場合がありますが、そのまま[OK]をクリックしてください。

プロジェクトの作成が完了すると次の図のようにPortable Class Libraryプロジェクト(PCLプロジェクト)である「FormsCalculator(移植可能)」の他に、「FormsCalculator.Droid」、「FormsCalculator.iOS」、「FormsCalculator.UWP」、「FormsCalculator.Windows (Windows 8.1)」、「FormsCalculator.WinPhone (Windows Phone 8.1)」の5つのプロジェクトが作成されます。UWPは「Universal Windows Platform」のプロジェクトで、Windows 10 Desktopだけでなく、Windows 10 Mobile、HoloLens、Surface Hubなどさまざまなデバイスで動作するアプリケーションです。「Windows」はWindows 8.1で動作するストアアプリで、「WinPhone」はWindows Phone 8.1(WinRT版)アプリです。

各OSのプロジェクトのエントリーポイントである[MainActivity.cs]、[AppDelegate.cs]などを見ると、global::Xamarin.Forms.Forms.Init(this, bundle);やglobal::Xamarin.Forms.Forms.Init();と、Xamarin.Formsを初期化しているだけであることが分かります。

Xamarin.FormsではPCLプロジェクトに、共通ロジックだけでなく、UIのコードも追加していきます。

ロジックを作成

まずは共通ロジックを作成しましょう。前回のXamarinネイティブの章と全く同じ以下のような[Calc.cs]ファイルを作成します。

UIを作成

続いてUIを作成します。

PCLプロジェクトを右クリックして、[追加＞新しい項目]をクリックします。「新しい項目の追加」ダイアログで、[Visual C#＞Cross-Platform]の[Forms Xaml Page]を作成します。この例では「CalcPage.xaml」という名前にします。

最初に用意されている <Label Text="{Binding MainText}" VerticalOptions="Center" HorizontalOptions="Center" /> を削除して、次のコードで置き換えます。

XAMLではIntelliSenseも効きますので、コーディングで困ることは少ないかと思います。

標準のページContentPageにiOSのみ画面上部のステータスバーにコンテンツが重ならないようにOnPlatformでiOSだけPaddingを指定します。さらに積み上げ式のStackLayoutを用意し、上からLabel、文字入力欄のEntry、Buttonを配置しています。

次に[ソリューションエクスプローラー]で[CalcPage.xaml]の左側の?をクリックしてコードビハインド[CalcPage.xaml.cs]を表示し、ダブルクリックして[CalcPage.xaml.cs]ファイルを開きます。

XAMLの各コントロールに指定した[x:Name]属性で、コードビハインドからアクセスが可能です。Xamarinネイティブの章と同じように[calcButton]にクリックイベントを追加していきましょう。次のコードをInitializeComponent()の後に追加します。

TIPS: Visual Studioでコードビハインドを編集している際に、InitializeComponent();に赤波線が付くことがあります。以前から発生している軽微なバグで、XAMLを開き、スペースを追加して削除して保存する。などの操作を行うとXAMLの解析エンジンがXAMLを読み込みなおし、エラーが消えますので、慌てずに対処してください。また、XAMLのIntelliSenseが効かない場合は、PCLプロジェクトをビルドしてXAMLファイルを開き直すと解決できますので、こちらも慌てずに対処してください。

最後に[App.cs]を開き、コンストラクタを次のコードに書き換えて、アプリ起動時に最初に表示するページを指定します。

これで、消費税計算のアプリは完成です。

Androidアプリのビルド

それでは、Androidアプリをビルドしてみましょう。Androidプロジェクトを右クリックし、[スタートアッププロジェクトに設定]をクリックします。

[デプロイ対象デバイス]をクリックしてデバッグを行います。前回と同じようにクリックイベントにブレークポイントを貼り、変数の中身が参照できることを確認してみましょう。

TIPS: Androidアプリのデバッグにはできるだけ実機を使用することをお勧めします。エミュレーターを使用する場合は、Hyper-Vで動作する「Visual Studio Emulator for Android」やVirtualBox上で動作するXamarin Android Playerを利用すると良いでしょう。各エミュレーターの比較は筆者のエントリーをご参照ください。

前回の章とほぼ同じアプリが作成できることが分かるかと思います。

iOSアプリのビルド

続いてiOSプロジェクトをデバッグしてみましょう。

こちらもほぼ同じアプリが作成できることが分かると思います。

UWPアプリのビルド

Xamarin.FormsではUWPアプリも作成できます。Windows 10をご利用の方、Windows 10 Mobileのデバイスをお持ちの方はUWPアプリの作成もお試しください。

[UWPプロジェクト]を右クリックして、[スタートアッププロジェクトに設定]をクリックします。デスクトップでデバッグする場合は[ビルドターゲット]を[x86]に、Windows 10 Mobileデバイスでデバッグする場合は[ビルドターゲット]を[ARM]に指定してデバッグを開始します。

UWPアプリ

Windows 10 Mobile

まとめ

いかがでしょうか。Xamarin.Formsを使用すると、シンプルなアプリであれば、Xamarinネイティブの手法より少ない工数でiOS/Android/UWPアプリを作成できます。また、UIをXAMLやC#で記述できるため、アプリの要件によってはiOS/Androidの知識がなくてもデスクトップアプリ開発をしているかのようにスマホアプリが開発できることがお分かりかと思います。

C#が分かり、これからスマホアプリを開発していきたい読者の方は是非Xamarinを触ってみてください。特にXamarin.Formsはアップデートも活発に行われており、今後が期待できるライブラリです。是非Xamarinでのスマホ開発にトライしてみてください。

今回作成したサンプルアプリはGitHubにアップしてありますので、併せてご参照ください。

筆者が主催しているユーザグループ、Japan Xamarin User Groupのページには各種情報へのリンクを記載しています。facebookグループへの参加もお待ちしています。

次回は「Evolve 2016」で発表された新機能をいくつかご紹介したいと思います。

執筆者紹介

田淵義人(たぶち・よしと)

エクセルソフトにてXamarinをはじめ主に開発者向けのソフトウェアのセールスを担当しています。技術者と話が出来ないと楽しくない！より深く繋がりたいとの思いから、Xamarinを触りながらC#を勉強し「IT勉強会検索」のアプリをリリースしたり、Xamarinの勉強会を開催してほしいとの要望を受け、Japan Xamarin User Groupを主催し、各所で勉強会を開催していたりしています。2016年4月からMicrosoft MVP Visual Studio and Development Technologiesを受賞しました。Twitterアカウントは@ytabuchi