ComponentOne Information

ComponentOne Studio/Wijmo/Xuniの最新情報を公開中

メダル数が増えてきたのでデータを可視化してみよう

f:id:ComponentOne_JP:20160817180305p:plain 先日の記事で紹介した「Wijmoを使ってリオオリンピックを楽しもう!」はご覧いただきましたか?

hatena.c1.grapecity.com

JavaScriptコントロール「Wijmo(ウィジモ)」を利用して、現在開催中のリオデジャネイロ・オリンピックの各国メダル獲得数を表示する「Olympic Tracker」を公開しています。

この「Olympic Tracker」のデータは、Web上に保存したファイルなので、そのURLに飛べばどなたでも閲覧可能です。以下のようなJSON形式で記録されているデータは、人には決してわかりやすいものではありませんので、データは可視化したほうがわかりやすくなります。

[{"rank":1,"name":"United States","imageUrl":"http://assets.rio2016.nbcolympics.com/country-flags/52x35/USA.png","gold":28,"silver":30,"bronze":28,"total":86},
{"rank":2,"name":"China","imageUrl":"http://assets.rio2016.nbcolympics.com/country-flags/52x35/CHN.png","gold":17,"silver":15,"bronze":19,"total":51},
{"rank":3,"name":"Great Britain","imageUrl":"http://assets.rio2016.nbcolympics.com/country-flags/52x35/GBR.png","gold":19,"silver":19,"bronze":12,"total":50},
{"rank":4,"name":"Russia","imageUrl":"http://assets.rio2016.nbcolympics.com/country-flags/52x35/RUS.png","gold":12,"silver":12,"bronze":14,"total":38},
{"rank":5,"name":"France","imageUrl":"http://assets.rio2016.nbcolympics.com/country-flags/52x35/FRA.png","gold":8,"silver":11,"bronze":11,"total":30},

データ可視化アプリの作成

データ可視化といえば、モバイルアプリ開発用コンポーネントの「Xuni(ズーニー)」もWijmoと同様にグリッドやチャートをアプリに組み込むことが可能です。

そこでXuniを利用した同様のアプリを作成しました。

f:id:ComponentOne_JP:20160818093423p:plain f:id:ComponentOne_JP:20160818093418p:plain

各国のメダル獲得数を一覧やチャートで表示できる、AndroidとiOSアプリです。 ストアに公開するほどのアプリではありませんので、サンプルプロジェクトとして公開しました。

サンプルプロジェクトについて

XuniをXamarin.Formsから利用してクロスプラットフォーム開発を行っています。このサンプルを実行するには以下のアプリ開発環境が必要です。

Windowsの場合は、Visual Studio 2015で開いてください。エディションは問いません。Xamarin環境もインストール済みである必要があります。動作確認にはAndroid の実機またはエミュレータがあれば十分です。 また、iOSアプリのビルドとテストにはネットワーク接続済みのMacが必要です。

Mac OS Xの場合は、Xamarin Studioと動作確認用のエミュレータか実機があれば、Android、iOSアプリで動作可能です。

下図は、Visual Studio 2015で開発し、Windowsから接続したMacのSimulatorに接続してデバッグが可能になる「iOS Simulator for Windows」を利用しています。

f:id:ComponentOne_JP:20160818085751p:plain

≫≫ サンプルプロジェクトダウンロード(Zip形式、1.68MB)

アプリ開発で利用した技術

このサンプルアプリは以下のXamarinやXuniの技術を利用して開発しました。ソースコードにコメントは残していませんが、難しい部分はありませんので参考にしていただければ幸いです。

  • Xamarin.FormsでAndroid、iOSアプリを開発
  • Xamarin.FormsのTabbed Page(タブページ)を利用してページを切り替え
  • メダル獲得データはMicrosoft Http Clientを利用し、Webサイトにアクセスして取得
  • JSON形式のデータはNewtonSoft JSON.NETを利用してデータを復元
  • 一覧表示にFlexGridを利用し、FlexChartを利用して横棒グラフに表示
  • 一覧表示ではヘッダーをタップしてソートが可能
  • チャートでは凡例をタップして表示切り替えが可能
  • DependencyServiceを利用してメダル獲得データをローカルにキャッシュ保存
  • 画面表示文字はResourcesを利用して、英語と日本語を切り替え

まもなく終了

スポーツ選手の活躍に一喜一憂する時間はまもなく終わりますが、サンプルコードは形を変えて活躍を続けることを願っています。

なお、このサンプルにはXuniの評価用ライセンスを組み込み済みですので、改造してお試しいただくこともできます。 すべての機能をお試しいただく場合は、トライアル版をご利用ください。

www.goxuni.com

ComponentOne