bubble（チョット）やってみた#10〜Lesson10「グラフ要素を使用して動的データを表示する」
今回はローコードツールbubbleにチャレンジする11回め（０からカウントしているので）です。前回はiTunesの情報をAPIプラグインを使って曲を検索するアプリを作成しました。前回のGiphyの時とだいたい同じだったのですが、今回は大きく変わってグラフの表示にチャレンジするレッスンです。
残すところbubbleのレッスンもあと３回なので気を引き締めてやっていきたいと思います。
レッスン開始
まずはレッスン開始をします。
Academyのページから「Learn your way」で先に進み、「By watching」（キリンの場所）の２行目にある「Interactive lessons · a few mins each」リンクをクリックします。
レッスンのリストが出るのでここからスタートです。
今回の内容はこんな感じです。
データポイントの入力フォームを設定
最初にグラフに表示するためのデータポイントの入力フォームを設定します。
まずはグラフのラベルの入力欄を配置します。
要素メニューから「input」を選択して画面上部に配置してPlaceholder欄に「Label」と直接入力してThis input should not be empty（必須入力）にチェックします。
次にグラフの数値を配置して設定します。
要素メニューから同じように「input」を選択して「Label」の横に配置してPlaceholder欄に「Value」と直接入力をしてcontent format欄で「Decimal」を選択します。
次に登録ボタンを配置します。
要素メニューから「button」を選択して「Value」欄の右に配置し「SAVE」と名付けます。
ワークフローの設定
次に「SAVE」ボタンを押したときのワークフローのアクションを設定します。「SAVE」ボタンのプロパティウィンドウの「Start/Edit Workflow」をクリックしてワークフローモードに切り替えます。
ワークフローモードに切り替わったら「Click here to add an Actoon」をクリックしてアクションの設定をします。
表示されるメニューから「Data(Things)」「Create a new thing」を選択します。
次は右に表示されるプロパティウィンドウのType欄で「Create a new type」を選択して new type の横に「Data point」と入力します。
次に「Set another field」をクリックしてフィールドの設定をします。
clickの欄で「Create a new field」を選択してフィールド設定画面を開き、Field nameに「Label」を入力、field typeは「Text」を選び「CREATE」をクリックします。
次に「Label」フィールドに入力項目を当てはめます。
Label=の欄をクリックして「Input Label」「's Value」を選択します。
次に「Value」フィールドの作成と設定をします。
「Set another field」をクリックしてclickの欄で「Create a new field」を選択してフィールド設定画面を開きます。
フィールドの作成画面が開くのでfield name に「Value」を入力し、field typeには「Number」（数値）を選択し「CREATE」ボタンをクリックします。
「Value」フィールドにも値をセットします。
プロパティウィンドウのValue =のところをクリックして「Input Value」「’s Value」（入力項目Valueの値をデータベースのValueフィールドにセットする）を選択します。
最後にボタンを押した後の入力項目クリアの設定をします。
ワークフロー画面の「Click here to add an action」をクリックします。
表示されるメニューから「Element action」「Reset inputs」を選択します。
グラフ要素の配置
次にグラフの描画の設定をします。
まずはグラフ描画のプラグイン「Chart Element」をインストールします。
「Plugins」をクリックしプラグインのインストール画面を開き、「Add plugins」をクリックしてプラグインの選択画面を表示します。
プラグインの選択画面から「Chart Element」の「install」をクリックし「DONE」でインストールします。
インストールが終わったらグラフを画面に配置します。
Designモードに戻してから要素メニューの「Line/bar Chart」を選択し、入力欄の下に配置します。
最初は折れ線グラフが表示されます。
次にプロパティウィンドウのChart typeで「bar」を選択します。すると棒グラフの表示になります。
グラフデータの設定
次にグラフデータの設定を行います。
プロパティウィンドウのType of data欄に「Data point」を選択し、Data source欄に「Do a search for」を選択します。左側に出てくるウィンドウに「Data point」を選択します。
次にプロパティウィンドウのValue expression欄に「Current point」「's value」をLabel expression欄に「Current point」「's Label」を選択します。
最後にプロパティウィンドウの下の方にあるBackground style欄に「Flat color」を選択して色を選択します。
これで今回のレッスンで作る内容は終了です。
テストをやってみる
グラフアプリが完成したので画面右上の「Preview」のリンクをクリックしてテストをしてみます。
上にある入力欄にデータを入力していきます。
データをいくつか入れていくと棒グラフが出来上がってきます。
ちょっと見づらいけど今回も無事にレッスンは終了しました。
のこりはあと２レッスンです。
この記事が気に入ったらサポートをしてみませんか？