【NoCode】Bubbleのチュートリアルを初心者向けに解説！ ① 住所を保存して地図上に表示する

皆様こんにちは、taku（@takuNoCode1）です！
平素より格別のご高配を賜り厚く御礼申し上げます。

今回は、NoCodeツールBubbleのチュートリアル Lesson 1 を初心者向けに解説していきます！

    この記事で学ぶこと
・入力フォームの値をデータベースに保存する方法
・Type 及び Fieldの作成方法
・保存した住所を地図上に表示する方法

チュートリアルの概要につきましては、次の記事で解説しましたので、まずはこちらをご覧ください。

1. 実装するサンプル

フォームに入力された住所をデータベースに保存し、住所の地理的位置を地図上に表示する機能を作成していきます。

上記サンプルを作成することによって、データベース周りの知識を深めることができます。

2. 入力フォーム及び保存ボタン作成

左のメニューから「Search Box」をドラッグアンドドロップします。

「Search Box」を配置すると、「Placeholder」を変更するように指示が出ます。プログラミング未経験の方には馴染みの無い単語だと思いますが、これは、入力フォームの中に配置されている、薄い文字のことです。

今回は、「Type an address （住所を入力してください）」に設定します。

次に、「Choices style」を変更します。Webサービスを普段使うとき、検索フォームに文字を入力すると、候補を予測していくつか選択肢が出てきますよね？ それが「Choices style」です。

今回はユーザーに住所を入力させたいので、「Geographic places （地理的な場所）」を選択します。

次に、「Button」をドラッグアンドドロップし、ボタンを配置します。「edit me」を「Save」に変更します。

3. 入力された住所をデータベースに保存

先程作成した「Save」ボタンに「Workflow」を作成するために「Start/Edit workflow」をクリックします。

「Workflow」は簡単に説明すると、「処理の流れ」です。今回の場合は、「Save」ボタンをクリックした時の、処理の流れを時系列順に作成していきます。

まずは、入力フォームの値をデータベースに保存する処理を追加するために、「Type」及び「Field」を作成していきます。

「Click here to add an action」をクリックし、「Data （Things）」から 「Create a new thing」を選択します。

次に、「Type」のドロップダウンリストから「Create a new type」を選択し、「New type」に「Location」と入力します。

「Type」は、データベースに保存するデータの種類ごとのまとまりです。様々なデータを保存するときに、種類ごとに場所を分けると管理しやすいですよね？

Microsoft Excel で作成した表 をイメージすると非常に分かりやすいと思います。複数作成することができ、種類ごとに管理を行います。

例えば、「ユーザー情報」を保存したい場合は、「User」という「Type」にユーザーのメールアドレスや名前などを保存します。

今回は、「Location」という「Type」を作成し、その中に、住所を保存していきます。

「Set another field」をクリックし、「Create a new field」を選択します。

「Field name」に「Address」と入力し、「Field type」に「geographic address」を選択した後に「CREATE」ボタンをクリックします。

「Field」は、データの項目です。Microsoft Excel で作成した表の列（縦方向）をイメージすると非常に分かりやすいと思います。

「Field name」は、「Field」の名前です。「Field」は、1つの「Type」につき複数作成することが可能です。

例えば、「商品」の「名前」と「値段」を保存したい場合は、「Item」という「Type」に、「Name」と「Price」という2つの「Field」を作成し、データを保存します。

「Field type」は、データ型を表します。

例えば、「Item（商品）」の「Name（名前）」と「Price（値段）」を保存する場合は、「Name（名前）」には「text（文字）」が、「Price（値段）」には「number（数字）」が入ります。

このように、それぞれの「Field」に対し、データ型を設定します。

データ型を決めることで、異なる種類のデータを保存してしまうことを防ぐことができます。

今回は、「Location」という「Type」に、「Address」という名前の「Field」を作成し、データ型を「geographic address （地理的な住所）」に設定します。

これにより、存在しない住所や関係の無い情報がデータとして保存されないようにします。

以上で、データを保存するための「Type」及び「Field」の作成はできましたが、どの値をデータとして保存するかを設定しなければなりません。

「Address」= 「Input Address's value」となるように順に選択します。

これにより、先程作成した「Address」という「Field」に、入力フォームの値が保存されるようになりました。

「Input Address」は、最初に「Search Box」を配置した際の、プロパティ上部に表示されている名前を指しています。

この「Input Address」はチュートリアル用に、あらかじめ設定された名前なので、本来であれば自分で名前を設定する必要があります。

以上で、フォームに入力された住所を、データベースに保存する処理を作成することができました。

しかし、このままでは保存処理が終わった後も、フォームに入力された住所はクリアされずに残ったままになってしまいます。この問題を解決するために、さらに「Workflow」を追加します。

「Click here to add an action」をクリックし、「Element Actions」から「Reset inputs」を選択します。

以上で、「Workflow」の一連の設定は完了しました。以下にここまでの処理の流れをまとめます。

 ①  フォームに実在する住所を入力し、「Save」ボタンをクリックする
 ②「Location 」の「Address」に入力された住所が保存される
 ③  保存終了後、入力フォームの値がクリアされる

4. 保存した住所を地図上に表示

左のメニューから「Map」をドラッグアンドドロップで配置します。

「Number of markers」を「List」に変更して、マーカーの数を複数に設定します。

「 Type of markers」を住所が保存されている、「Location」に設定します。

「Data source」の「Do a search for」をクリックし、Type「Location」を選択します。

これにより、「Location」に保存した「Address」を検索して、地図上にマーカーを表示することができます。

「Map」の種類はいろいろ選択できるようなので、試してみてください。

以上で、今回の実装は完了です。「Preview」ボタンをクリックし、テストを行ってください。

5. まとめ

最後に、今回のチュートリアルの流れをまとめます。

①  入力フォームを作成し、各種設定を行う
②  保存ボタンを作成し、「Workflow」を作成する
③「Location」という「Type」を作成する
④「Address」という「Field」を作成する
⑤「Address」に 入力フォームの値を紐づける
⑥  住所を保存後、フォームに入力した値をクリアする
⑦  保存した住所を地図上に表示する

今回は、新規データの保存がメインのチュートリアルでした。

データベースの概念は少し難しいかもしれませんが、Webアプリ開発には必須の項目なので、しっかり理解する必要があります。

引き続きBubbleの理解を深めていきましょう！
次のチュートリアルはこちらです！