【Xamarin.Forms】アプリ開発までの流れとカスタムコントロールの紹介

アプリ開発において、近年急速に存在感を増しているのがXamarinです。XamarinはiOSやAndroidなどスマホアプリをVisual Studioで開発する場合に利用します。マイクロソフトに買収され、無償化されて以降は多くの.NET Framework開発者が利用しているXamarinですが、ここではXamarin.Formsについて一緒に確認していきます。

プログラマー

Xamarin.Formsって簡潔にいうとどんなものなのでしょうか？

プロジェクト
リーダー

簡潔にまとめるとUIを共通化するライブラリのことですね。XAMLもしくはC#でUIをコーディングすることができます。Xamarinの最大の特徴はクロスプラットフォームです。これによってiOSやAndroidなどの異なる動作環境であっても、それぞれの環境にあったUIにマップすることが可能となります。

Xamarin.Formsでアプリ作成までの流れ

C#やWPFの開発経験がある方でしたら、Xamarin.Formsの開発もすんなりと入れるのではないでしょうか。標準で搭載されているData Bindingなどの機能は、MVVM（Model-View-ViewModel）を活用しているので、モデルをベースとしたスマホアプリを作成することができます。ただし、XAMLに関してはWPFと多少の違いがあります。

それでは、実際にVisual StudioでのXamarin.Formsの開発の流れについて紹介します。開発環境にはVisual Studio Community 2017を使用します。Xamarin自体はVisual Studio 2015以降でないと利用できませんので注意が必要です。

1. 「ファイル」タブ→「新規作成」→「プロジェクト」→「Cross-Platform」を選択し、表示されている「Xamarin.Forms」を選択します

   Cross-Platformがない場合は、Xamarinがお使いのVisual Studioにインストールされていないので、まずはそちらのインストールを行いましょう。
   

2. Master Detailを選択してください

   blankを選択すると、何もない状態でスタートします。これを選択することによってマスターメニューとディティールページが作成されている状態となります。
   

3. 今回はプラットフォームにAndroid、iOS、Windowsを選択したので、共通のプロジェクトを含んだ4つのプロジェクトが作成されています

   

4. プロジェクトを作成できたら、C#とXAMLを活用してスマホアプリを作成していきましょう

Xamarin.Formsのカスタムコントロール

標準のコントールで表現できない場合には、カスタムコントロールを作成して対応する必要があります。ここでは、カスタムコントロールを作成する手順を紹介します。

1. 共通コードにテンプレートを導入します

   「共通プロジェクト」の上で右クリック→「追加」→「新しい項目」→「Xamarin.Forms」→「コンテンツビュー」を選択します。
   

2. このコンテンツビュー内にカスタムコントロールを作成していきます

   

3. 通常のページと同様にコントロールを配置し、デザイナーで目視確認することもできます

   ユーザーのニーズに合うようにカスタマイズしていきましょう。

プログラマー

スマホアプリのニーズはこれからどんどん増えていきそうですね。Xamarin.Formsは使いこなせるようにします。

プロジェクト
リーダー

時代の進化についていくのはエンジニアの基本ですね。自分でもテストプログラムを作ってカスタマイズしていきましょう。

Xamarin.Formsは需要が高まるでしょう

クロスプラットフォームであるXamarinは、これから需要が高まると思われます。Xamarin.Formsを使えるようになっておくことは、これからのエンジニアにとって重要なスキルでしょう。今からでもXamarin.Formsを学習する機会を設けてみても良いのではないでしょうか。