投資戦略システム事業部の伊藤です。普段はPHPのエンジニアをしています。最近、ノーコードというのをよく聞きます。一切コードを書く必要がなく非エンジニアでも簡単にwebアプリやスマホアプリが作れてしまうというサービス。本当にエンジニアとしての技術が必要ないのか試してみたくなったのでチャレンジしてみました。いうような単純なWebアプリを作ってみたいと思います。みたいなそこそこめんどくさい処理です。Bubbleに登録します。APIの認証情報を追加します。これで準備は整ったのでWebアプリ本体を作成していきます。検索窓を作っていきます。左側のメニューからSearchBoxを選択して適当な大きさで囲います。placeholderは「住所を入力」としておきます。places」を選択して住所検索に対応した検索窓にします。次にボタンを作成していきます。適当に作りたいボタンの大きさを囲ったらボタンができるので、ボタンのラベルを検索としたらボタンの完成です。次に「Start/EditWorkflow」をクリックします。ここで各オブジェクトの振る舞いを設定していきます。action...」をクリックします。things...」を選択します。ポップアップが開くのでtypeを設定していきます。type」を選択すると新しいTypeが設定できるようになるのでtype名を入力します。「Location」とでも名付けておきます。address」を選択します。field」のボタンが増えているのでそちらをクリックします。Clickをクリックすると先程作ったAddressがプルダウンで出てくると思うのでそれを選択します。Addressの項目に何を入れるのか選択できます。Clickが現れるのでSearchBoxの何を使うのか選択できます。value」を選択します。ここまでできたら次のフローを設定します。inputs」を選択して検索したら入力値を初期化できるようにしておきます。次に左側のメニューからDesignをクリックしてDesignに戻ります。※GoogleMapの規約違反となってしまうため地図部分はぼかしています。Elements」の中からmapを選択して、いよいよ地図を入れます。画面のデザインに合わせて、好きな大きさで囲むと地図が表示されます。forを選択した後、Typeが選べるようになるのでLocationsを選択します。これで設定は終了です。Previewを表示してみていこうと思います。こんな感じで表示されました。試しに検索ボックスに弊社の住所を入れて検索してみたいと思います。こんな感じで検索もできました。ここまで1時間もかからずできてしまいました。googleAPIの接続設定も認証情報を入力するだけ。jsを弄るとかもなく、レイアウトについてもhtmlを一度も弄ることなく設定できてしまう。データベースについてもSQLとか一切触らなくてもテーブル作成やデータ更新、取得等ができてしまいます。エンジニアだけど、こんなにソース書かなかったのは初めてかも知れません・・・。レイアウトにこだわったり外部連携したかったり、複雑なカスタムが必要なものは1からプログラムを書いていく必要があります。商店レベルの小さなコーポレートサイトやECサイト、LP等の作成等は十分使えそうです。API連携等もできるみたいなので、何か趣味でプログラム書く時とかガワだけ欲しい時にBubble使って見るのも有りかなと思いました。LLCの商標または登録商標です。読者になる関連記事2022-09-16ReactのRedux(@reduxjs/toolkit)とFirebaseを使ったアプリ開発に取り...こんにちは、次世代デジタル基盤開発事業部の渡邊です。