Adaloでアプリ上のデータを使ってQuickChartを動的に表示する
やること
@yutakikuchi_です。 AdaloとQuickChartを利用して、スマートフォンのアプリ開発として画面にQuickChartを埋め込み、アプリ上のデータを基にチャートを動的に表示することを行います。下記ではAdaloとQuickChartについて簡単に紹介、その後作業の流れを記載しています。
Adalo
- Freeで開始できるノーコードでWeb・スマートフォンネイティブアプリが作れるツールです
- ただし、apple store, google playへの公開は有償版に入らないとできません
- UI Componentがテンプレート化されていて、Adalo上でDrag & DropにてUIが作れます
- Adalo上ではWeb・ネイティブアプリの1ページずつがScreenという単位で管理されています
- Screenに対してComponent(Button, List, Form, Image...)などのパーツを紐付け、更にComponentに対してClickしたときにどういったActionを必要とするかを定義します
- Databaseというメニュー機能を利用して、Adalo上のデータ構造を定義し、各画面などから呼び出しを可能とします
QuickChart
- WebAPIとしてSimpleなChartを画像やpdf等の出力フォーマットで表示をしてくれます
- GitHub - typpo/quickchart: Chart image and QR code web API
- QuickChartはopensourceであり、自身の環境にホスティングすることも可能です
https://quickchart.io/chart?c={type:'bar',data:{labels:['Q1','Q2','Q3','Q4'], datasets:[{label:'Users',data:[50,60,70,180]},{label:'Revenue',data:[100,200,300,400]}]}}
Adaloで作るアプリにQuickChartを表示し、動的にコントロールする
以下の手順で行います。QuickChartの例として、Raderチャートを用いています。Raderには自身の健康状態を記載するイメージのものになります。Raderチャート上に出力するPlotデータはLogin中のUserのデータをdatabaseから引いてくる状態としています。ここでは詳細を記載しませんが、下記と同じことをやろうとした場合、databaseにdefaultで入っているUser collectionに対してpropertyを事前に追加しておく必要があります。
- QuickChart上でパラメータの確認と修正
- Adalo上で修正したQuickChartのURLを貼り付け
- Adalo上でアプリのパラメータとQuickChartを連携
QuickChart上でパラメータの確認と修正
こちらの作業はQuickChart上でのものになります。
QuickChart上でRaderのsampleを表示すると、上の画像のように画面左にjson形式の項目を修正できるeditorが出てきます。ここで確認すべきなのはRaderチャートとして表示すべきlabelsとそのlabelに対して表示するdataになります。dataは配列形式になっているので表示しているlabelとdataの順番が一致している必要があります。Adaloと連携をする際はこのdataの配列に対して、Adalo上のデータを連携するための記載をする必要があります。
画面右上に表示されるQuickChartのURLをコピーして次の作業に移ります。
Adalo上で修正したQuickChartのURLを貼り付け
こちらの作業はAdalo上でのものになります。
上のキャプチャではHOMEのスクリーンに対して、imageのcomponentを用意し、componentのimage sourceをURLに設定。 更に、URLの入力欄にQuickChartで出力したchartの画像を出力するurlを貼り付けます。そうすると、画像一番右のようにQuickChart上で見たRaderチャートが表示されます。urlの貼り付けについて、通常だとjson形式の箇所に対してURLEncodeが掛かった状態でコピーされていますが、そのまま貼り付けてしまうとURLEncodeが掛かったままでAdalo上のデータ連携の修正を行う必要があり、作業が困難になります。そこで、Adalo上で後から編集しやすいように、URLDecode、更にはスペースや改行を削除した1行になっているもので貼り付けをし、Adalo上のデータとの連携修正をしやすくします。
Adalo上でアプリのパラメータとQuickChartを連携
こちらの作業はAdalo上でのものになります。
Adaloに貼り付けたURLの中でChartをPlotするためのdataという配列が有りましたが、そこを修正します。dataの配列に記載するものはDatabaseに入っているUser collectionの中のpropertyから参照する形にします。(事前に下記図のようにpropertyを追加しておく必要があります。)
AdaloのURLの右に表示される編集ボタンで、data配列の先頭から一つずつUser collectionのpropertyを指定していきます。指定すると、User eating のようにAdaloが持つDatabaseの項目で書き換える設定が完了していることを示します。
以上で、一通りの作業は完了になります。Adaloのツールの画面右上に出ている Preview というボタンを押すとLoginしているUser collectionからデータを引っ張ってきた状態でRaderチャートが表示されます。これで各UserごとのデータをRaderチャートとして動的に出力することが可能になりました。Adalo非常に便利ですね。ここでは記載をしていませんが、外部APIとの連携やWebViewも簡単にできそうなので、そこも試してみたいと思います。
