【NoCode】Bubbleのチュートリアルを初心者向けに解説！ ⑩ プラグインを使用してチャートを作成する
皆様こんにちは、taku（@takuNoCode1）です！
平素より格別のご高配を賜り厚く御礼申し上げます。
今回は、NoCodeツールBubbleのチュートリアル Lesson 10 を初心者向けに解説していきます！
この記事で学ぶこと
・入力フォームに条件を追加する方法
・プラグイン（Chart Element）の導入方法
・2種のデータからチャートを作成する方法
チュートリアルの概要につきましては、次の記事で解説しましたので、まずはこちらをご覧ください。
1. 実装するサンプル
プラグイン（Chart Element）を導入することにより、データベースに保存した「Label（x軸）」「Value（y軸）」の2種のデータから、「チャート（図表）」を作成する方法を学びます。
2. データ入力フォーム及び保存ボタン作成
まずは、x軸（横軸）のデータを入力するためのフォームを作成します。
「Input」を配置し、「Placeholder」を「Label」に変更します。
「Input Label」という名前が設定されていることを確認しておきます。
「This input should not be empty」にチェックを入れます。「この入力は空白であるべきではない」という意味です。
これにより、「空データ」を保存できないようにします。
次に、y軸（縦軸）のデータを入力するためのフォームを作成します。
「Input」を配置し、「Placeholder」を「Value」に変更します。
「Input Value」という名前が設定されていることを確認しておきます。
続いて、「Content format（内容の形式）」に「Decimal（小数型）」を選択します。
y軸のデータには「数値」が必須であるため、ユーザーが誤って他のデータを入力するのを防ぐ必要があります。
そこで、「Content format」に「Decimal」を選択することで、「小数を含む数値」以外のデータを保存できないようにします。
先程と同様に、「This input should not be empty」にチェックを入れます。
これにより、「空データ」を保存できないようにします。
最後に「Button」を配置し、「Save」に変更します。
「Button Submit」という名前が設定されていることを確認しておきます。
次章で「Workflow」を作成するため、「Start/Edit workflow」をクリックします。
3. 2種のデータをデータベースに保存
新規データをデータベースに保存する方法については、第1回目のチュートリアルで学習しました。復習のために以下に実装の流れをまとめます。
・「Type」を作成する
・「Field」を作成し、データ型を設定する
・「Field」と入力フォームの値を紐づける
「Type」及び「Field」につきましては、次の記事で詳しく解説しましたので、まずはこちらをご覧ください。
今回のチュートリアルでは、「Data Point」という「Type」を作成し、「Label」「Value」という、2種の「Field」を作成していきます。
上記の流れに沿って、まず最初に「Type」を作成していきます。
「Click here to add an action」をクリックし、「Data（Things）」から「Create a new thing」を選択します。
「Type」のドロップダウンリストから「Create a new type」を選択し、「New type」に「Data Point」と入力します。
続いて「Field」を作成していきます。「Set another field」をクリックし、「Create a new field」を選択します。
「Field name」に「Label」と入力し、「Field type」に「text」を選択した後に「CREATE」ボタンをクリックします。
「Label」= 「Input Label's value」となるように順に選択します。
「Input Label」は入力フォーム作成時に確認した名前で、「's value」は「値」という意味です。
これにより、「Label」と入力フォームの値の紐づけが完了しました。
上記と同じ手順で、もう1つ「Field」を作成していきます。
「Field name」に「Value」と入力し、「Field type」に「number」を選択した後に「CREATE」ボタンをクリックします。
保存するデータは数値なので、「number」をデータ型に設定している点に注意してください。
「Value」= 「Input Value's value」となるように順に選択します。
「Input Value」は入力フォーム作成時に確認した名前で、「's value」は「値」という意味です。
これにより、「Value」と入力フォームの値の紐づけが完了しました。
これまでの実装で、「Data Point」という「Type」を作成し、「 Label」及び「Value」という、2種の「Field」を作成することで、フォームに入力された2種のデータを保存することができるようになりました。
保存終了後に、入力フォームの値をクリアするために、さらに「Workflow」を追加します。
「Click here to add an action」をクリックし、「Element Actions」から 「Reset inputs」を選択します。
4. プラグイン（Chart Element）の導入
プラグインとは、機能を拡張するためのプログラムのことです。複雑なコードを書かなければ実装できないような機能も、このプラグインをインストールして設定を行うだけで、初心者でも簡単に実装することができます。
左メニューの「Plugins」を選択し、「Add plugins」をクリックします。
検索フォームに「Chart Element」と入力し、「Install」をクリックした後、「DONE」ボタンをクリックします。
プラグイン「Chart Element」を導入することで、データベースから取得した数値データをグラフ形式で表示することができます。
今回は、プラグイン自身への設定は必要ありません。
5. チャートの作成及びデータの紐づけ
「Line/Bar Chart」をドラッグアンドドロップして入力フォームの下に配置し、プロパティを設定していきます。
「Chart type」に「Bar」を選択します。
「Type of data」に「Data Point」を選択します。
「Data source」に「Do a search for」を選択し、新しく出現したポップアップの、「Type」に「Data Point」を選択します。
これにより「Line/Bar Chart」と 先程作成した「Data Point」という「Type」を紐づけることができました。
「Value expression（値式）」に「Current point's Value」となるように順に選択します。
これにより、「y軸（縦軸）」と先程作成した「Value」という「Field」を紐づけることができました。
「Label expression（ラベル式）」に「Current point's Label」となるように順に選択します。
これにより、「x軸（横軸）」と先程作成した「Label」という「Field」を紐づけることができました。
「Background style」に「Flat color（単色）」を選択し、チャートの背景を塗りつぶすことで見やすくします。
以上で、今回の実装は完了です。「Preview」ボタンをクリックし、テストを行ってください。
6. まとめ
最後に、今回のチュートリアルの流れをまとめます。
① 入力フォーム及びボタンを配置する
②「Data Point」という「Type」を作成する
③「Label」及び「Value」2種の「Field」を作成する
④ プラグイン（Chart Element）を導入する
⑤ チャートを作成する
⑥ チャートと「Data Point」を紐づける
⑦ チャートと「Label」及び「Value」を紐づける
今回は、プラグイン「Chart Element」を使用して、データベースに登録したデータから、チャートを作成する方法を学びました。
引き続きBubbleの理解を深めていきましょう！
次のチュートリアルはこちらです！