Xamarin.Formsの弱点、グラフ表示を補強できるコンポーネント「Xuni」を使ってみた

2015/07/13 14:00

　日本におけるスマホシェアの状況はアメリカを除く海外の状況と異なっています。それは、iOSのシェアが他国に比べて高いという点です。そのため日本のスマホアプリは、iOSとAndroidの両方をサポートして初めてスマホ対応と呼ぶことが許されるような状況にあります。さらに、4年ぶりにWindows Phoneが新発売されるなど、iOSとAndroidだけではなくWindows Phoneの対応についても検討する必要性が生じてくるでしょう。

　同じロジックを3プラットフォームのそれぞれの開発言語で開発するというスタイルもあるかも知れません。しかし、Xamarinを使って同じロジックを共通ライブラリ化して製造の工数を圧縮したり、品質を均一にしたりできることを考えると、これらの開発部分を極力少なくして共通化を進めることで開発コストや期間の圧縮が可能になります。

　また、Xamarin.Formsを使えばロジックだけではなく画面定義も3プラットフォーム共通です。しかし問題がないわけではありません。Xamarin.Formsはまだ発展中のコンポーネントであり、業務アプリやIoT関連アプリをつくるのに必要なグラフ表示などが決定的に不足しています。

　今回ご紹介する「Xuni（ズーニー）」は、このXamarin.Formsの弱点をカバーするコンポーネントになります。

Xamarinとは

　「Xamarin」とは、Xamarin社が販売・提供しているiOS、Android、Windows Phone用のマルチプラットフォーム開発環境です。その基礎となる技術は.NET Frameworkのオープンソース版のMonoです。Xamarin社とMicrosoft社はXamarin開発で協力体制を敷いています。

　また、iOSやAndroidのバージョンアップにもほぼ即日対応しており、この点でもiOSやAndroidの開発環境としては信頼できるものと判断できるでしょう。

Xamarinの開発環境

　Xamarinの開発環境は、Xamarin社がWindowsとMac OS用にXamarin Studioを提供しています。Xamarin StudioはMonoの開発環境であるMono Developmentがベースとなっています。

　さらにWindowsであれば、Visual StudioをXamarinの機能に対応させるVisual Studio拡張も提供されています。Visual Studio拡張なのでVisual Studio Expressでは利用できず、Visual Studio Community EditionもしくはVisual Studio Professional以上のエディションが必要です。

　Windows版のXamarin StudioやVisual Studio拡張を使用する場合、AndroidやWindows Phoneの開発はすぐにできますが、iOS版の開発にはビルドやシミュレータ実行にXamarin 、Xcode、iOS SDKがインストールされたMac OSが稼働しているマシンが必要です。

図1　Xamarinの開発環境

Xamarinの実行環境

　Android、Windows PhoneとiOSでは、Xamarinの実行環境の構成が異なります。

　Androidの場合、C#のコードは.NET中間言語にビルドされ.NET Framework互換のXamarinランタイムと一緒にネイティブAndroid APKとして配布されて動作します。Windows Phoneでも同様に.NET中間言語にビルドされて配布された先の環境で動作します。

　一方、iOSの場合は、XamarinのAhead-Of-Time（AOT）コンパイラが、Apple App Store向けのARMアセンブリコードとして配布されて動作します。

　若干の違いはありますが、Xamarinで作成したアプリの処理速度は、JavaでAndroidアプリ、Objective-CでiOSアプリを作成する方法と比べても遜色ない速度で動作します。

Xamarinのエディション

　Xamarinには、Enterprise、Businessなどの有償エディション、学生向けのINDIEエディション、そして無償評価版であるStarterエディションがあります。

　なお、起業して3年以内、従業員数が20名以下の企業、開発者が3名以下でスタートする場合は特別価格が適用されるのでXamarin社に直接問い合わせてみましょう。

Xamarin.Formsとは

　Xamarinは、もともとロジック層の共通化を主眼に置いており、画面デザインについては、iOSならばStory Board、AndroidならXMLでそれぞれ個別に画面デザインを行うことが前提となっていました。

　その状況が大きく変わったのがXamarin.Formsの登場です。Xamarin.Formsは、WindowsストアアプリやWindows Phoneストアアプリ、そしてWindows 10でのUniversal Windows Appsにも採用されているXAMLライクなXAML（筆者はXamarin XAMLと呼んでいる）を使って、iOS、Android、Windows Phoneで共通の画面定義が可能です。これにより、ロジックも画面デザインも共通化できます。

注

　Xamarin.Formsは、Starterエディションでは利用できません。

Xuniとは

　「Xuni（ズーニー）」は、Xamarin.Forms用の市販コントロールです。

　Xuniを使うためには、新規にプロジェクトを作成するときに「Blank App（Xamarin.Forms Portable）」または「Blank App（Xamarin.Forms Shared）」のテンプレートを選択します。

図2　新規プロジェクトのテンプレート

インストール

　Xuniには開発環境のPCにあらかじめインストールしておくという概念がありません。NuGetの仕組みにより開発プロジェクトごとにXuniを組み込みます。

　NuGet標準サイトにあるXuniは英語版なので、下図の手順に従ってXuni用のNuGetを設定してそこからインストールを行います。NuGetの設定には、Visual Studioの「NuGetパッケージ管理」ダイアログを利用します。

図3　日本語版Xuniのインストール

　また、NuGetを利用してパッケージを組み込んだプロジェクトを、他の開発環境で利用するためには、NuGetを利用してインストール済みのパッケージを取得する必要があります。インストール済みパッケージの再取得も前述の「NuGetパッケージ管理」ダイアログから行います。

ライセンス

　Xuniのライセンスはサブスクリプション制になっています。サブスクリプション制とは製品を一度購入するごとに費用が発生するのではなく、サブスクリプション有効期限内であればバージョンが上がったとしても一度のサブスクリプション購入で利用ができるというものです。

　サブスクリプション期間が完了した後も、その期間で入手したバージョンのライセンス使用権は消滅しません。例えば、受託開発などでバージョン固定で利用するような場合は、サブスクリプション期間完了後も開発プロジェクトで従来通り利用可能です。

ランタイムライセンス

　Xuniには通常のライセンスに加えてランタイムライセンスという考え方があります。ランタイムライセンスはアプリケーションごとに登録が必要です。ランタイムライセンスを設定しておかないと実行時にエラーが発生します。

図4　ランタイムライセンスエラー

　ランタイムライセンスの登録は登録用Webサイトからアプリケーション単位で行います。ランタイムライセンスの登録には費用は掛かりません。また登録数に上限はありません。

図5　ランタイムライセンスの登録

　有効期間もXuni自体のサブスクリプションの有効期限とリンクしていません。つまり、サブスクリプションの有効期間が終わっても、ランタイムライセンスはそのまま有効なままです。また有効期間が終わった後でも、新たにランタイムライセンスを登録することもできます。

可能な限りコードを共有化してみたサンプル

プロジェクトの構造

図6　プロジェクトの構造

　今回のサンプルコードは、Portable Class Library（PCL）、Android、iOS、Windows Phoneの4つのプロジェクトから構成されています。

　PCLプロジェクト部分にプラットフォーム共通部分を記述します。今回のサンプルでは、ほぼすべてのコードと画面定義をPCLに記述して共通化を最大限行っています。Xuniに必要な定義もその大部分がPCLプロジェクトに記述されています。

　ただし、Xamarin.Formsの初期化が各プラットフォームで必要なようにXuniの初期化も各プラットフォームで必要です。そのため、NuGetを使ったXuniのインストールもPCLプロジェクトだけではなく各プロジェクトで必要になります。

Androidプロジェクトの設定

　AndroidプロジェクトでのXamarin.Formsの初期化は、MainActivity.csに記述されています。Xuniの初期化も同じところに記述するのかと思ったのですが、Androidプロジェクトでは例外的にXuniの初期化を明記しないでよいようです。

iOSプロジェクトの設定

　iOSプロジェクトでのXamarin.Formsの初期化は、AppDelegate.csに記述されています。当たり前のようですが、iOSアプリにもかかわらずコードはC#で記述します。Xamarin.Formsの初期化直後にXuniの初期化を行います。

リスト1　AppDelegate.csから抜粋

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
    global::Xamarin.Forms.Forms.Init();
    //
    Xuni.Xamarin.FlexChart.Platform.iOS.Forms.Init();  //……【追加】
    //
    LoadApplication(new App());

    return base.FinishedLaunching(app, options);
}

Windows Phoneプロジェクトの設定

　Windows PhoneプロジェクトでのXamarin.Formsの初期化は、MainPage.xaml.csに記述されています。

リスト2　MainPage.xaml.cs（WindowsPhoneプロジェクト）から抜粋

public MainPage()
{
    InitializeComponent();
    SupportedOrientations = SupportedPageOrientation.PortraitOrLandscape;

    global::Xamarin.Forms.Forms.Init();
    //
    Xuni.Xamarin.FlexChart.Platform.WinPhone.FlexChartRenderer.Init();  //……【追加】
    //
    LoadApplication(new CZ1506Graph.App());
}

PCLプロジェクトでの画面定義

　Xamarin.Formsの画面定義は、XAMLと呼ばれるWPFアプリやWindowsストアアプリと同じ構造の画面定義体を使います。ただし両者には100%の互換性はありませんので、Xamarin.Formsの画面定義をXAMLデザイナでビジュアル表示することはできません。

リスト3　MainPage.xaml（PCLプロジェクト）から抜粋

<ContentPage.Content>
  <StackLayout>
    <local:AdaptiveFlexChart ChartType = "Line"  BindingX="Count" 
                          ItemsSource="{Binding Accele}">
      <local:AdaptiveFlexChart.Series>
        <xuni:ChartSeries Binding="ValueX" SymbolBorderWidth="2" BorderColor="Red"/>
        <xuni:ChartSeries Binding="ValueY" SymbolBorderWidth="2" BorderColor="Green"/>
        <xuni:ChartSeries Binding="ValueZ" SymbolBorderWidth="2" BorderColor="Yellow"/>
      </local:AdaptiveFlexChart.Series>
    </local:AdaptiveFlexChart>
  </StackLayout>
</ContentPage.Content>

　Xuniで折れ線グラフを表示するのは非常に簡単で、ItemsSourceにデータの入ったコレクションをBindingします。コレクションの中の各要素値はChartSeriesにBindingします。

　これで自動的にグラフ表示が可能になります。