【Adaloでできること】リアルタイムなチャートを作る方法

Adaloでリアルタイムなチャートの作り方NoCode

こんにちは!
てつごろう(@Te256g)です。

NoCode(ノーコード)ツールの中でも人気の高いAdalo

当ブログ「てつごろぐ」では、「Adaloでできること」と題して以下のようにシンプルなアプリの作り方を解説しています。

今回は、リアルタイムなチャートの作り方を解説します。

基本的な操作方法、拡張機能の追加方法、コレクションとコンポーネントのデータの受け渡しなど、基礎部分を理解していただけると思います。

たくさんの画像で詳しく解説していきますね!

てつごろう
てつごろう

この記事を見ながらご自分でも試してみて欲しいんだよ。


 筆者について

大学時代に情報システム系学科でC、Java、VC++を学ぶ。IT企業ではハードウェアエンジニアとしてWindows/UNIX系システムの保守・運用を担当。現在は個人でWebサイト制作を請け負っています。NoCodeの可能性に惹かれ、Webサービス開発に向けて勉強中。

てつごろう|@Te256g


スポンサーリンク

【Adaloでできること】リアルタイムなチャートの作り方

完成イメージ

今回はAdaloでリアルタイムなチャートの作り方を解説していきます。

実際に僕が作ったアプリはこちらで確認することもできます。

ここからの作業の流れは以下の通り。

作業の流れ

(1) チャートを作るコンポーネントChart Kitを追加する
(2) コンポーネントを追加する
(3) コレクション(データベース)を作る
(4) コンポーネントとコレクションをリンクさせる
(5) チャートを設定する
(6) プレビューで動作確認

(1) チャートを作るコンポーネントChart Kitを追加する

※Adaloでアプリ開発の始め方や操作方法がわからない方は「NoCodeツールAdaloでアプリを作る方法【基本操作を習得できます】」の2章を参考にしてください。

※Native Mobile Appでの開発を前提にしています。

まずはチャートを作るための外部コンポーネントを追加しましょう。

Left ToolbarのADD COMPONENTから、下の方にある「EXPLORE MARKETPLACE」ボタンをクリックします。

Market Place
Market Place

Marketplaceが開くので「Chart Kit」の右下にあるINSTALLボタンをクリックしてください。

コンポーネントをインストール

INSTALLがINSTALLEDになったらDONEボタンで画面を閉じてください。

(2) コンポーネントを追加する

ADD COMPONENTから、Home画面に以下2つのコンポーネントを追加しましょう。

  • Form(Forms and Fieldsの中にあります)
  • Bar Chart(Installedの中にあります)
コンポーネントを追加
コンポーネントを追加
てつごろう
てつごろう

必要なコンポーネントはこれだけなんだよ。

(3) コレクション(データベース)を作る

続いてチャートのデータを保管するコレクションを作ります。

Left ToolbarからDatabaseボタン→ADD COLLECTIONの順にクリックします。

コレクションを追加
コレクションを追加

Collection Nameの入力欄に「Chart」と入力したら、ADDボタンでコレクションを作成します。

コレクションに名前を付けて追加
コレクションに名前を付けて追加

続いて、チャートの数値を格納するためのプロパティを作りましょう。

ADD PROPERTYからNumberを選び、Valueという名前を付けてください。

プロパティを追加
プロパティを追加

最後にSAVEで保存すればコレクションは完成です!

プロパティ
プロパティ
スポンサーリンク

(4) コンポーネントとコレクションをリンクさせる

フォームに入力したデータをコレクションに保存し、さらにチャートに表示させるための設定をしていきます。

フォームに入力されたデータは、このようにコレクションに保存されてからチャートに反映されます。

データの流れ
データの流れ

この流れを実現するために、以下の2つの手順で行っていきます。

作業の流れ

① フォームとコレクションをリンクさせる
② チャートとコレクションをリンクさせる

① フォームとコレクションをリンクさせる

入力フォームに入力された項目名と値を、コレクションに保存するための設定をします。

Home画面に追加したフォームをクリックして選択し、Left Toolbarの「Select collection…」からChartを選択してください。

フォームとチャートをリンク

これでフォームとチャートがリンクされました。

フォームの内容がチャートと連動した
フォームの内容がチャートと連動した

② チャートとコレクションをリンクさせる

次はチャート側の設定。

フォームに入力されたら、コレクションのデータを使ってチャートを作る設定をしていきます。

上記と同じように、今度はチャートをクリックしてLeft Toolbarの「Select…」からChartを選択。

チャートにChartコレクションのデータを表示させる設定
チャートにChartコレクションのデータを表示させる設定

(5) チャートを設定する

最後に、チャートのY軸を設定します。

チャートとコレクションをリンクさせた直後はこのように、Y軸に何も設定されていません。

Y軸は未設定
Y軸は未設定

Y軸に数値を設定しましょう。

Y Axis Valueの右にある「x」のボタンをクリックして、Valueを選択してください。

Y軸にValueを設定
Y軸にValueを設定

このようにChart valueが入ればOK。

Y軸の設定完了
Y軸の設定完了

これで作業はすべて完了です!

(6) プレビューで動作を確認する

最後に、作成したアプリの動作をプレビューで確認しましょう。

Top BarにあるPREVIEWボタンをクリックしてプレビューしてみてください。

NameとValueそれぞれ入力して、最後にCREATE CHARTボタンをクリックすると、このようにグラフが表示されるはずです。

プレビューで動作確認
プレビューで動作確認
初めてプレビューする時はサインアップが必要です

プレビューをすると最初はサインアップ画面が表示されます。メールアドレス、パスワード、名前を入力してサインアップしてください。
※メールアドレス、パスワード、名前は適当で構いませんが、メールアドレスは形式が正しくないとサインアップできませんのでご注意ください。

まとめ

今回は「Adaloでできること」と題して、リアルタイムなチャートの作り方を解説しました。

コレクションの作り方と、データの受け渡しの設定について理解していただけたと思います。

今後も引き続きAdaloでできること、関連する記事を作っていきますので、お楽しみに!

アプリ開発に必須のUI/UXデザインを学ぶ
アプリ開発には、ユーザビリティへの理解が重要です。iPhone・Androidアプリのデザインを学ぶなら、自宅で学べるオンラインスクール【TechAcademy】 UI/UXデザインコースがおすすめ。実務に近い環境で、学びながら手を動かして制作。社会に通用するスキルを習得できます。
NoCode
てつごろうをフォローする
てつごろぐ

コメント

タイトルとURLをコピーしました