ComponentOne Information

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

技術記事「XuniのXamarin.Forms向けコントロールセットを使ってデータを可視化してみた」

開発者のための実装系Webマガジン「CodeZine」

CodeZine(コードジン) では、グレープシティの製品に関する記事を掲載しています。
現役エンジニアの方に、実際に製品を利用してサンプルアプリを作成する内容です。

弊社の製品担当は、機能には詳しいものの、製品を利用してアプリケーション開発をする立場ではないので、実用例を説明することが不得意です。
ユーザーだった経験を持って入社した社員も数多くいますが、利用する立場からは離れて久しくなります。

そのためCodeZineを通じて、プロフェッショナルの皆さんに製品を利用した評価記事を書いていただくようになりました。

f:id:ComponentOne_JP:20170606151557p:plain

Xuni(ズーニー)の技術記事を掲載

今回、掲載を開始した記事は、Xamarin.Formsで利用するXuniを対象としています。


Xuniはモバイルアプリ開発用のUIコンポーネントセットです。
CodeZine記事では、その中に含まれるデータグリッド「FlexGrid」で、気象庁がオープンデータとして公開している日本各地の気象データ気温を可視化するアプリの開発を解説しています。

「「Xuni」のXamarin.Forms向けコントロールセットを使ってデータを可視化してみた:CodeZine」

Xamarinの開発環境があれば、記事に記載されている内容や提供されたサンプルでAndroidとiOSのサンプルアプリの作成を体験できます。

f:id:ComponentOne_JP:20170606154940p:plain

Xuniの次期バージョン「ComponentOne Xamarin」

今回の記事で紹介されたXuniは、完全リニューアルを予定しています。
現在よりもXamarin Platformに特化した製品設計に置き換え、 .NET Framework用コンポーネントセットのブランドである「ComponentOne」ファミリー製品に生まれ変わります。

これまでのXuniは、Android、iOSのネイティブコンポーネントのラッパーとしたXamarinコンポーネントでした。次期バージョンではXamarin ネイティブの環境で、C#で全面書き換えを行ったコンポーネントになります。機能は同じですが、よりXamarin Platformとの親和性が高まり、加えてXamarin.Formsを利用したUWPアプリ開発も可能になります。

この投稿記事では、公開中のComponentOne Xamarin ベータ版(※)を利用して、CodeZineの記事と同じことを実行してみました。
※正確には社内テスト用のビルドなので公開中のベータ版より新しいバージョンです。

パッケージにComponentOne XamarinのFlexGridとGaugeを追加して参照を変更し、コード記述を調整するだけで完了しました。
Androidアプリとして実行した結果はこちらです。

f:id:ComponentOne_JP:20170606154247p:plain

Xamarin.FormsのTabbedPageレイアウトを利用して、Xuniを利用した場合とComponentOne Xamarinを利用した場合の2つを同じアプリに表示しました。機能は同じなので結果は変わりません。既定値が異なるので見た目が若干異なる程度です。

標準機能のソートを実行すれば、瞬時に「地点」の名称で並び替えを行えます。

f:id:ComponentOne_JP:20170606154458p:plain

このサンプルを改造する際に、Xuniのコンポーネント参照をComponentOne Xamarinに置き換えたコードは以下です。
なお、CodeZineのサンプルコードから違いを出すためにGaugeRangeColorプロパティを変更しました。

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage 
    xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    xmlns:c1gauge="clr-namespace:C1.Xamarin.Forms.Gauge;assembly=C1.Xamarin.Forms.Gauge"
    xmlns:c1="clr-namespace:C1.Xamarin.Forms.Grid;assembly=C1.Xamarin.Forms.Grid"
    x:Class="CodeZine_10169_XuniSample.C1XamarinView">
    <Grid RowSpacing="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition  />
        </Grid.RowDefinitions>

        <c1:FlexGrid x:Name="c1grid" Grid.Row="1" AutoGenerateColumns="false">
          <c1:FlexGrid.Columns>
            <c1:GridColumn Binding="Pref" Header="都道府県" Width="*" />
            <c1:GridColumn Binding="Point" Header="地点" Width="*" />
            <c1:GridColumn Binding="TodayHighestTemperature" Header="最高気温" Width="*">

                <c1:GridColumn.CellTemplate>
                    <DataTemplate>
                    <c1gauge:C1LinearGauge IsAnimated="false" 
                        Value="{Binding TodayHighestTemperature}" 
                        Min="0" Max="30" ShowText="Value" ShowRanges="False" 
                        WidthRequest="50" HeightRequest="50">
                        <c1gauge:C1LinearGauge.Ranges>
                        <c1gauge:GaugeRange Min="0" Max="10" Color="#0096ff" />
                        <c1gauge:GaugeRange Min="10" Max="20" Color="#ffff96" />
                        <c1gauge:GaugeRange Min="20" Max="30" Color="#ff2800" />
                        </c1gauge:C1LinearGauge.Ranges>
                    </c1gauge:C1LinearGauge>
                    </DataTemplate>
                </c1:GridColumn.CellTemplate>

            </c1:GridColumn>
          </c1:FlexGrid.Columns>
        </c1:FlexGrid>
        
    </Grid>
</ContentPage>

名前空間やクラス名が変わりますが基本は同じですので、機能の多くは置き換えるだけで移植できます。
たとえば名前空間の定義は以下のように変わります。

<!-- Xuni の場合 -->
xmlns:xuni="clr-namespace:Xuni.Forms.FlexGrid;assembly=Xuni.Forms.FlexGrid" 
<!-- ComponentOne Xamarin の場合 -->
xmlns:c1="clr-namespace:C1.Xamarin.Forms.Grid;assembly=C1.Xamarin.Forms.Grid"
iOSでは共存できません

iOSでは同じ名前FlexGridのコンポーネントを複数登録することができませんので、XuniとComponentOne Xamarinの共存はできません。
iOSプロジェクトのFinishedLaunchingイベントでコンポーネントを初期化する所に記述できるのは、いずれかひとつです。
共通UIなのでページ上の定義はそのままですが、iOSアプリでは初期化したFlexGridだけが表示されます。
実際には両方のコンポーネントが必要になることは無いので問題ありません。

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
    global::Xamarin.Forms.Forms.Init();
    // Xuni  のFlexGridのみを表示する場合
    // Xuni.Forms.FlexGrid.Platform.iOS.Forms.Init();
    // Xuni.Forms.Gauge.Platform.iOS.Forms.Init();

    // ComponentOne Xamarin のFlexGridのみを表示する
    C1.Xamarin.Forms.Grid.Platform.iOS.FlexGridRenderer.Init();
    C1.Xamarin.Forms.Gauge.Platform.iOS.C1GaugeRenderer.Init();

    LoadApplication(new App());

    return base.FinishedLaunching(app, options);
}

ComponentOne Xamarinの登場時期は?

ComponentOne Xamarinはリリースに向けて開発中です。
Xuniの次期バージョンとして、これまで以上に高速に動作することを目指しています。
開発状況に進捗がありましたら、改めて発表します。

それまでは、CodeZineで紹介した記事でXuni(次期バージョンからComponentOne Xamarin)をお試しください。

その他Xuniに関する技術情報を公開しています。Xamarinに関するリンクもありますのでご利用ください。
技術情報 | Xuni (ズーニー) | グレープシティ株式会社


ComponentOne Xamarin(ベータ版)の情報はこちらです。

ComponentOne