Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

FlexChartをXamarin.Formsに導入してマルチプラットフォーム間での相違を探る

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2017/06/28 14:00

 FlexChartは、ComponentOne以外にもXuniやWijmoにも同名のコンポーネントが存在します。今回は、WPF向けに前回作成したものを、Xuniを適用して、スマホアプリ開発で最近非常に注目されているXamarin.Formsに移植してみようと思います。

目次

 Xamarin.Formsは、C#を使ってコードを作成し、画面もWPFのXAMLによく似たXamarin XAMLを使ってモバイルアプリを作成することができる開発フレームワークです。

 WPFで気温と降水量の複合チャートを前回作成しました。これをXuniで作成してみます。もととなるデータは、気象庁の過去の気象データ検索サイトから東京の平均気温と、降水量の月合計を使います。

備考

 本記事で紹介している「Xuni」(2017年7月25日販売終了)の機能は、後継製品「ComponentOne Xamarin」(2017年7月26日発売)にて変わらずご利用いただけます。

Xamarin.Formsアプリ作成手順

 Xamarin.Formsでアプリを作成するにはVisual Studio 2017を起動して[Cross Platform]-[Crass Platform app]テンプレートで新規アプリ作成を行います。

図1 テンプレート選択
図1 テンプレート選択

 途中、共有プロジェクトかPCLかを指定するダイアログが表示されたときは共有プロジェクトを選択します。そうすることで「CZ1703CompositeChart」という名前の共有プロジェクトとプラットフォームごとに「CZ1703CompositeChart.Android」「CZ1703CompositeChart,iOS」「CZ1703CompositeChart.UWP」の合計4つのプロジェクトから構成されたソリューションが作成されます。

図2 ソリューション構成
図2 ソリューション構成

 「CZ1703CompositeChart」プロジェクトは、Android、iOS、UWPで共通のコードや画面定義などを記述するプロジェクトです。一番理想的なのはこのプロジェクトにほぼすべてのコードや定義を書いてしまうことです。アイコンやアプリ自体の定義などプラットフォーム依存の部分や、実際につくっていくとどうしても共通に書けないところがでてきたときには、プラットフォームごとに「CZ1703CompositeChart.Android」「CZ1703CompositeChart.iOS」「CZ1703CompositeChart.UWP」の各プロジェクトに記述します。

Xuniの導入

 Xamarin.FormsでXuniを使いたいときは、NuGetから必要なコンポーネントを導入してライセンスファイルを設定します。そのためには、プラットフォームごとのプロジェクトを選択し[プロジェクト]-[NuGetパッケージの管理]メニューをクリックします。

 管理画面が表示されたら、FlexChartを指定してインストールを行いますが、ここで注意したのは注意したいのはNuGetのパッケージソースの指定です。日本語対応のXuniはグレープシティからの配布となるのでNuGetのパッケージソースとして「GrapeCity」を選択し、今回はXamarin.Fromsで使用するので「Xuni.Forms.FlexChart」を選択します。

図3 NuGetパッケージの管理
図3 NuGetパッケージの管理

 Xuni.Forms.FlexChartが動作するのに必要な部品は同時に自動的に導入が行われます。

図4 関連部品の表示
図4 関連部品の表示

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 初音玲(ハツネアキラ)

     国内SIerのSEでパッケージ製品開発を主に行っており、最近は、空間認識や音声認識などを応用した製品を手掛けています。  個人的には、仕事の内容をさらに拡張したHoloLensなどのMRを中心に活動しています。  Microsoft MVP for Windows Development...

バックナンバー

連載:現役エンジニア直伝! 「現場」で使えるコンポーネント活用術(ComponentOne Studio)

もっと読む

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5