Ionic製のアプリにD3 Liquid Fill Gaugeを組み込んでみました！

概要

IoT機器の情報を表示する場合などで、「液体の量」を表現したい場合があるかと思います。
ちょうどこんな感じに。

というわけで、先日入門したばかりのIonic Frameworkを使ってこんな感じのアプリを実装してみたのでご紹介します！٩( 'ω' )و

つくったサンプルのリポジトリは以下です。
kemokemo/d3LiquidGaugeApp

使用環境

この記事で使用した環境は以下の通りです。

cli packages: (C:\Users\KemoKemo\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

System:

    Node : v8.10.0
    npm  : 5.6.0
    OS   : Windows 10

Misc:

    backend : pro

使用ライブラリ

• ngx-d3-liquid-fill-gauge
• D3

どちらも BSD 3-Clause ライセンスです。

実装の手順

実装の解説には以下のような内容が含まれます。

• IonicアプリにComponentを追加して使う場合の記述方法
• 作成したComponentに、外部から値をInputする方法

これらの内容が全く初めてだったり、「む、イマイチ分からんにょ(ΦωΦ)」という方は是非先にJosh Morony さんの操作動画をご覧になってください。とてもわかり易くてオススメです。

• Custom Components in Ionic 2
  • YouTube - Custom Components in Ionic

ライブラリのインストール

では実際の手順に入っていきましょう。
まずは、D3をインストールします。

npm install d3

ngx-d3-liquid-fill-gaugeは、READMEの手順を実施しても下図のようにngx-d3-liquid-fill-gauge が見つかりません。というエラーが出てビルドできなかったので、componentとしてコピーして使うことにしました。

※実際には ここ の Rev. c23ff7f のモジュール群を、Ionicプロジェクトのsrc/components/ngx-d3-liquid-fill-gaugeにコピーしました。

さらに今回のサンプルでは、liquid-gaugeという名称のコンポーネントでngx-d3-liquid-fill-gaugeをラップしました。アニメーションなどの設定は予めliquid-gauge内に定義したものを使って、親画面からは数値など頻繁に変更があるような値だけ入力して使う仕組みにしたかったためです。

src/app/app.module.tsも以下のように書き換えます。

 import { SplashScreen } from '@ionic-native/splash-screen';
 import { StatusBar } from '@ionic-native/status-bar';

 import { MyApp } from './app.component';
-import { LiquidGaugeComponent } from '../components/liquid-gauge/liquid-gauge';
 import { HomePage } from '../pages/home/home';
+import { NgxD3LiquidFillGaugeComponent } from '../components/ngx-d3-liquid-fill-gauge/ngx-d3-liquid-fill-gauge.component';
+import { LiquidGaugeComponent } from '../components/liquid-gauge/liquid-gauge';

 @NgModule({
   declarations: [
     MyApp,
-    LiquidGaugeComponent,
-    HomePage
+    HomePage,
+    NgxD3LiquidFillGaugeComponent,
+    LiquidGaugeComponent
   ],
   imports: [
     BrowserModule,

あとはtemplateに app-ngx-d3-liquid-fill-gauge を追記すれば表示できます。

liquid-gauge.html

<b>Default Parameters</b>
<app-ngx-d3-liquid-fill-gauge></app-ngx-d3-liquid-fill-gauge>

値を親画面から渡す

src/components/liquid-gauge/liquid-gauge.ts で Input を使えるようにします。

-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';

同じくliquid-gauge.tsに以下を追記します。name と value という名前で外部から入力できるようになりました。

 export class LiquidGaugeComponent {

-  text: string;
+  @Input('name') name;
+  @Input('value') value;

   constructor() {
     console.log('Hello LiquidGaugeComponent Component');
-    this.text = 'Hello World';
+  }

親画面である src/pages/home/home.html には以下のような変更をしました。
[name]でLiquidGaugeComponentのnameを指定し、"name01"などでsrc/pages/home/home.tsのプロパティを参照しています。これにより 親画面のhomeからliquid-gaugeにnameやvalueを渡して います。

 <ion-content padding>
-  <liquid-gauge></liquid-gauge>
+  <liquid-gauge [name]="name01" [value]="value01" ></liquid-gauge>
+  <liquid-gauge [name]="name02" [value]="value02" ></liquid-gauge>
+  <liquid-gauge [name]="name03" [value]="value03" ></liquid-gauge>
 </ion-content>

src/pages/home/home.ts には、liquid-gaugeに渡すパラメータを以下のように定義しました。

export class HomePage {

+  name01: string = "Something 01";
+  value01: number = 0.0;
+
+  name02: string = "Something 02";
+  value02: number = 28.7;
+
+  name03: string = "Something 03";
+  value03: number = 65.1;
+
   constructor(public navCtrl: NavController) {

   }

ionic-lab 画面で確認

以下のコマンドを実行すれば、デフォルトブラウザが起動して画面が確認できます。
デフォルトURLはhttp://localhost:8100です。

ionic serve

せっかくなのでクロスプラットフォーム感を味わいたい！٩( 'ω' )و
ということで、ブラウザでhttp://localhost:8100/ionic-labを開くと冒頭のような画面が確認できます。

謝辞

素晴らしいライブラリ D3 Liquid Fill Gauge を公開してくださった Curtis Bratton さん、そんな素敵な D3 Liquid Fill Gauge をAngular ComponentとしてTypeScriptで実装してngx-d3-liquid-fill-gauge として公開してくださったadedayo さんに、この場をお借りしてお礼申し上げます！m(_ _)m

そして、私に素敵なIonic Frameworkとの出会いをくださった良書 Ionicで作る モバイルアプリ制作入門 の著者である 榊原さん にもお礼申し上げます！m(_ _)m

Ionicでサクサクっとアプリつくるの、楽しいですね