本投稿は TECOTEC Advent Calendar 2020 の22日目の記事です。
投資戦略システム事業部の伊藤です。
普段はPHPのエンジニアをしています。
最近、ノーコードというのをよく聞きます。
一切コードを書く必要がなく非エンジニアでも簡単にwebアプリやスマホアプリが作れてしまうというサービス。
さて、エンジニア的にはそんなこと言って、
結局どっかでソース書かなきゃいけないんじゃないの？
なんの動きもないページしか作れないんじゃないのと、
本当にエンジニアとしての技術が必要ないのか試してみたくなったのでチャレンジしてみました。
ひとまずGoogleMapを表示させ、テキストボックスと検索ボタンを実装して テキストボックスに入力した住所を検索してGoogleMapにその住所周辺の地図を表示させる というような単純なWebアプリを作ってみたいと思います。 普通にプログラムを書くとGoggleMapAPIの連携してテキストボックス入力値をAjaxでGoogleAPIに渡して・・・ みたいなそこそこめんどくさい処理です。
まずはBubbleに登録します。
（中略）
今回はGoogleMapAPIを利用するのでSettings > Generalから
「Google Geocode API key」、「Google Map API key」に
それぞれGoogle Geocode APIとGoogle Map APIの認証情報を追加します。
これで準備は整ったのでWebアプリ本体を作成していきます。
まずは検索窓を作っていきます。
左側のメニューからSearchBoxを選択して適当な大きさで囲います。
placeholderは「住所を入力」としておきます。
Choises Typeは「Geographics places」を選択して住所検索に対応した検索窓にします。
次にボタンを作成していきます。
適当に作りたいボタンの大きさを囲ったらボタンができるので、ボタンのラベルを検索としたらボタンの完成です。
次に「Start/EditWorkflow」をクリックします。
ここで各オブジェクトの振る舞いを設定していきます。
「Click here an action...」をクリックします。
ボタンに対して設定する振る舞いのメニュー開くので「Data(Thing)」の「Create new things...」を選択します。
ポップアップが開くのでtypeを設定していきます。
Typeのプルダウンから「Create a new type」を選択すると新しいTypeが設定できるようになるので
type名を入力します。ひとまず「Location」とでも名付けておきます。
Field name は好きな名前で良いのでこちらもひとまず 「Address」、
Field Typeはプルダウンから「geographic address」を選択します。
設定できたら「Create」をクリック
すると「Set another field」のボタンが増えているのでそちらをクリックします。
Clickをクリックすると先程作ったAddressがプルダウンで出てくると思うのでそれを選択します。
するとまた「Adderess=Click」とまたClickが出てくるのでクリックするとプルダウンで Addressの項目に何を入れるのか選択できます。
中に先程作った「SearchBox 住所を入力」が現れるのでそれを選択
更にClickが現れるのでSearchBoxの何を使うのか選択できます。
今回SearchBoxに入力された値を使用したいので「's value」を選択します。
ここまでできたら次のフローを設定します。
次は「Element Actions」から「Reset inputs」を選択して検索したら
入力値を初期化できるようにしておきます。
次に左側のメニューからDesignをクリックしてDesignに戻ります。
※GoogleMapの規約違反となってしまうため地図部分はぼかしています。
「Visiual Elements」の中からmapを選択して、いよいよ地図を入れます。
画面のデザインに合わせて、好きな大きさで囲むと地図が表示されます。
次に設定が表示されるのでNumber of markersをList
Type of markersを先程作成したLocationを選択
Address fieldも先程作成したAddressを選択
その後Data sourceから Search forを選択した後、Typeが選べるようになるのでLocationsを選択します。
これで設定は終了です。
では早速Previewを表示してみていこうと思います。
こんな感じで表示されました。
試しに検索ボックスに弊社の住所を入れて検索してみたいと思います。
こんな感じで検索もできました。
ここまで1時間もかからずできてしまいました。
しかもgoogleAPIの接続設定も認証情報を入力するだけ。
jsを弄るとかもなく、レイアウトについてもhtmlを一度も弄ることなく設定できてしまう。
データベースについてもSQLとか一切触らなくてもテーブル作成やデータ更新、取得等ができてしまいます。
エンジニアだけど、こんなにソース書かなかったのは初めてかも知れません・・・。
もちろん、レイアウトにこだわったり外部連携したかったり、複雑なカスタムが必要なものは1からプログラムを書いていく必要があります。
しかし、商店レベルの小さなコーポレートサイトやECサイト、LP等の作成等は十分使えそうです。
またAPI連携等もできるみたいなので、何か趣味でプログラム書く時とかガワだけ欲しい時に
Bubble使って見るのも有りかなと思いました。
Google、Google map、Google Apps、Google Appsロゴは、Google LLCの商標または登録商標です。 www.tecotec.co.jp
