SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

現役エンジニア直伝! 「現場」で使えるコンポーネント活用術(Xuni)(AD)

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

ダウンロード Sample.zip (306.6 KB)

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

 同じロジックを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の開発環境
図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 新規プロジェクトのテンプレート
図2 新規プロジェクトのテンプレート

インストール

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

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

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

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

ライセンス

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

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

ランタイムライセンス

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

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

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

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

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

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

プロジェクトの構造

図6 プロジェクトの構造
図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します。

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

実行結果

 手元にあったAndroid(Nexus 5)とWindows Phone(MADOSMA 501)で実行した結果は次のようになります。同じ画面定義体なのにそれぞれのプラットフォームに合わせて、バージョン情報画面を表示するためのメニューの実装が変わっています。

図7 実行結果
図7 実行結果

 このようなプラットフォーム固有の実装への変換は、実行時ではなくビルド時にXamarin.FormsのXAMLから各プラットフォーム固有の画面定義体に変換することで実現しているので、実行に伴うオーバーヘッドは発生しません。

まとめ

 Xuniを使えば、Xamarin.Formsの弱点である折れ線グラフや円グラフなどのグラフ表示のコントロールがない問題をクリアできます。

 NuGetで簡単に導入できる点も含めて、XuniはまさにUniversal時代の新しい市販コンポーネントの世界を体現しているのかもしれません。ぜひ、トライアル版でそのコンセプトを体感してみてください。

 この記事で提供しているサンプルにはランタイムライセンスを組み込み済みですので、Xamarinの開発環境を準備すれば、そのまま動作させることができます。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8828 2016/03/14 11:35

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング