今回は人気（グローバルでは）のローコードツールbubbleにチャレンジする２回めです。前回はログインできるようにして開発者コンソールをちょいちょい触ってから、Lessonsのページを紹介するまででしたが、今回はいよいよチュートリアルにチャレンジする事になります。

どうなるでしょうか？

まずはLessonに突入

まずはLessonsのページから入ります。

一番上の最初のレッスンに投入します。
怖いので日本語に翻訳してから入ります。

開発コンソールの画面が表示されます。真ん中に何やら説明が出てきます。

ここでChromeの翻訳機能が正常に動作しなかったりして、チョット焦ります。いろんなところで右クリックしたりして真ん中のウィンドウのところで、やっと翻訳できました。
真ん中のレッスンの説明が表示されています。

読んでみると、このレッスンでは「bubbleデータベース」を使用するのがポイントのようです。
作るものは住所の登録で、おまけに地図上に表示できるみたいです。
基本の部分と作って楽しい部分が共存した良いチュートリアルですね。
・・・・・さっそく始めてみます。

入力フォームの構築

中央部には次の説明が表示されます。最初のステップは「入力フォームの構築」です。住所の入力欄と保存実行をするボタンを配置するようです。

「next」をクリックして先に進みます。

なんと！説明のボックスが左下に移動します。しかも赤い矢印が指定されています。検索ボックスからSearch Box（検索ボックス〜たぶん住所を入力する欄）をするようです。
・・・・というか、このチュートリアルは非常に凝っています。開発コンソールに直接ガイダンスが表示される仕組みは秀逸で「一人の脱落者も出さない」という強い意志まで感じます。他社も真似してもらいたいものです。

すなおに「Search Box」をクリックします。

すると説明ボックスは大きく右に移動します。「Search Box」をドラッグして画面の矢印のところに配置します。
すると次の指示が現れます。
ガイダンスに従い、項目名に「住所を入力してください」と入力します。

入力したら次の命令・・・もといガイダンスが表示されます。住所の項目にオートコンプリート機能を指定します。

日本語に翻訳されているおかげで、選択肢がよくわからなくなっていますが日本語で「地理的な場所」、英語では「Geographic places」を選択します。

なんと間違えた選択肢を選んだら怒られます。

終わったら、褒められますｗｗ

いい気になって次に進みます。

次はボタンの配置が指示されます。矢印で指定された「button」をさきほどの要領でドラッグして配置します。

ボタンを配置したら、ガイダンスに従ってボタンの表示名を修正します。
ここまでということらしいです。

ここまでは、他のツールと同様に直感的でわかりやすい範囲ですね。

それにしてもこのチュートリアルページがわかりやすすぎて感動です。

気を良くして次に進みます。

ワークフローの構築

次にガイダンスはボタンを押したときのワークフローの作成を指示します。
矢印で指定されたボタンをフォーカスすると、次に進みます。

次はボタンのプロパティから「Start/Edit workflow」のボタンを押します。
矢印のおかげでアホでも間違えません。

Workflowの設定画面に切り替わります。日本語訳がチョット変な感じだったりしますが気にせずに進みます。

「When」のボックス（他のツールで言うトリガーみたいなとこですね）の下の「Click here to add an action」のリンクのクリックが促されるので素直に従います。・・・・ここまで親切だと反骨心が芽生えてきます。

このボタンで登録した住所をデータベースに保存するのでデータのアクションを選択します。
アクションの一覧が表示されるので「Data (Things)」を選択、さらに表示される「Create a new thing 」（新規登録）を選択します。

次はデータ項目の内容を指定します。
フローに要素が（地味に）追加され、プロパティを設定します。まずはデータのタイプの設定です。

Typeのプルダウンには「Create new type」しか表示されないので選択します。次にタイプの入力欄が出るので「Location」と入力します。

これで住所項目のワークフローの新規登録が完了したようです。ガイダンスの下のゲージが半分くらい進んでいます。ここまでで約半分のようです。

データベースそのものの設定みたいなのはまだ無いみたいなので、ちょっと気持ち悪いですが、きっと次以降でわかるかと思います。

先に進むとさらに項目の定義が求められます。
ガイダンスは「+ Set another field」のボタンをクリックするように指示してきます。

「click」と表示されるので素直にクリックして、一つしか無い選択肢（Create a new field）を選ぶとフィールド項目の設定ダイアログが表示されます。
名前に「address」を入れて、タイプは「geographic address」を選択します。

Createをクリックして次に進むと次の設定に進みます。
登録するデータに入力フォームで設定した「address」をセットするように指定します。
出てきたプロパティのclickをクリックして「Input address」を選択します。
（入力項目がこれしかないので迷わないですね・・・）そして 「's Value」（値そのまま）を選択します。

ここで項目「Location」のセットは終了です。

次に進むと、フローの次のプロセス〜ボタンを押した後に入力値をリセットするプロセスを追加します。

プルダウンメニューから「Element Action」から「Reset inputs」を選択します。

ワークフローの開発はこれで終わりです。

地図上に場所を表示させる

次は地図上に入力した住所をもとに地図上の場所を表示させます。再び画面の設定〜Designモードに切り替えます。

地図を配置するために要素「Map」を選択して画面に配置します。

画面上に地図が表示されます。最初はNewYorkの地図が表示され、テンションが上りますが、bubbleのアプリが位置情報のアクセスを求めてきて許可をすると、近所の住所になってしまいます。

次に地図のプロパティを設定していきます。
地図のマーカーは複数出せるようにNumber of Markersに「List」を選択。
Type of Markers の設定は「Location」、そしてaddress fieldに「address」を設定します。

これで地図の設定は完了です。次は地図を表示するデータソースを指定します。

Data Source に「Do a Search for」を選択します。

Do a Search forのダイアログが表示されるのでType に「Location」を選択します。

次に地図のスタイルを選択します。
Map Style には「apple Map Style」（どれを選んでもいい気がしますが）を選択します。

これで入力値の住所を地図に表示する機能の設定は完了のようです。

テストしてみる

入力してデータ保存をして地図凝視をするという、このアプリケーションの開発はひととおり終わりました。
ここでテストをしてみます。
テストは画面右上の「Preview」をクリックして開始します。

出来上がったアプリケーションが新しい別のタブに表示されます。
（ここにきてデザインの酷さがあらわになります）

下にデバッガーのスピードの指定がありますが、たいした処理をしていないので「Normal」のまま住所を入れてみます。

試しに住所を入れてボタンを押すと・・・・
ちゃんと地図表示されます。

海外の住所でも試してみました。マイクロソフトの米国本社を指定するとこんなふうになります。

右下の「Inspect」を押して処理結果を確認します。

いちおうここまででレッスンは完了のようです。
データの行方とかがちょっとわからなくてモヤモヤですがとりあえず次に進みます。

レッスンのページにも進捗が表示されます。
ちょっとうれしいです。

残念なのはレッスンで作ったものは自分のアプリとして保存はされません。
自力でもう一回やってみることが必要です。

悔しいので自分の環境で作り直してみました！！

次のレッスンは「サインアップシステムの構築」です。
次回を楽しみに待っていてください