🫧

ノーコード開発ツール「Bubble」を触ってみる

2024/04/15に公開

JavaScript

nocode

bubble

tech

最近わけあってノーコード開発のお話をした。実際に触ってみたくなり、その中で
得た知見や感想等をBubbleに触れながらまとめる。

導入

大きい流れは以下

Bubble公式サイトで登録
登録後、英語で簡単なアンケート(使用目的とか)が出てくるので答える
アプリのプロジェクトの初期設定を行う
(SpringBootだとSpring Initializerでやるアレにイメージが近い。正直全部デフォルトで進めても良いが、DBと連携して動きをつけたり、WEBアプリらしく実装することを考慮すると公式プラグインは全インストールでもいいかも。)
アプリ作成を開始

基礎的な使い方

Preview確認(デバッグ)

かなり手軽なので、先に説明しておく。
事前にホットデプロイされていて、デバッグ用に確認出来るようだ。

画面右上の「Preview」ボタンを押すことでテストURLから
オンライン上で確認出来る。

フリープランでもDeploy状態のアプリが確認出来るのはかなり便利。
開発環境との差異でインフラ的側面から起きるエラーを事前に避ける事ができるはず。
TODO：インフラのためのオートスケーリングがされているかは後で確認する

表示

適当に登録フォームのようなモノを作ってみる。作り方はこれから説明していく

要素の配置タイプについて

最初にテキストを動かそうとしたが、思うように配置できなかったので一つ学びとして
この項目を追加。

こちらの記事がわかりやすい。「Fixed」で直感的に動かして、プロパティの編集で微調整するのが使いやすそうな。理解度があがれば認識も変わる可能性あり。

テキスト

以下を選択してキャンバスへ持ってくる。

タイトルはフォントサイズ50PX、中央配置。要素自体の幅、高さはFixed状態で
パワーポイント感覚で調整

サブタイトルはデフォルトフォントサイズ、中央配置

一旦プロパティ編集の詳細は、入門を進めていくためにおいておくが、パッと見ただけでも
様々な設定があり、コーディング開発と互角に勝負出来る拡張性の高さが垣間見えるものになっていた。

入力要素

以下を選択してキャンバスへ持ってくる。

テキストと組み合わせて使用する。これも詳細設定は一度おいておく。
コンテナ要素依存（Align to Parent)で配置し、左右調整はドラッグで行った。

要素のコンテナ管理

画面の要素はレイヤーで管理されており、お絵描きソフトや配信ソフトを彷彿とさせる。
どのツールでも言えることだが、この辺をおざなりに扱うと後々痛い目にあう（成果物の整合性が取れない)ので、要素を役割ごとに分ける意識は持って行く。

※現状、HTMLでdivで囲うイメージで取り扱っているので、問題ありましたら
コメント下さい。

各要素のコンテナの中にいれたら、中央揃えだけ行う。上下間隔は違和感ない程度に好みで
プロパティや、Fixed時のドラッグで調整する。

これで、基本的な表示アプリは完成

ワークフロー

条件に応じて処理を実行したい際にワークフローを用いる。
今回は先ほど作ったページで「ボタンを押したら、登録完了ポップアップを出す」を
実装してみる。

以下よりPopUpを選択し、キャンバス中央をクリックする

これでポップアップが編集画面に表示される。名称はデフォルトでPopUp <アルファベット>となるので名称部分をダブルクリックして任意の名前に編集する。

ポップアップ自体の詳細設定はデフォルトのまま。
登録完了時に、メールアドレスに確認コードを送信した風の表示にするため
ポップアップ内に配置したテキストで入力画面のメールアドレス部分の値を使用するようにした。

テキストデータを他要素から引っ張る際には、プロパティ設定のテキスト値部分をクリックした際に表示される「insert dynamic data」をクリックして出たドロップダウンリストから選択する

ワークフローを編集

先に作ったボタンにワークフローを登録し、編集する。
ボタンのプロパティの「Add Workflow」をクリックする。

ボタンがクリックされたときのワークフロー編集が表示されるので、
「Element Action」から「Show」を選択する。

選択したShowプロパティでは表示するElementで先程作成したポップアップを設定する。
今回設定するのは「RegistConfirmPopUp」

これで基礎的なワークフローは構築できた。

結果

これで思い通りの結果となった。メールアドレスの表現チェックとか
細かい話はまともなモノを作るときに確認するつもり。

実践的にアプリ作成

大方の使い方をなんとなく把握したところで、アプリらしいものを一つ作ることにした
以下の記事を参考にしている。

アプリの要件

ニセインスタ的に作ってみる

User管理（登録、ログイン、アウト)
写真を投稿
投稿を一覧表示

抑えて置きたい実践的使い方(抜粋)

Repeating Group

データのカスタムフィールドはデフォルト値を設定しないと
空になる。

ユーザー管理

Userテーブルと基本的なフィールドはプロジェクト作成の時点で生成されている。
NickNameは追加したフィールドだ。

ユーザー認証関連の操作はワークフローのイベント発生時に選択候補として
表示されるので、用途に応じて選択をする。Bubbleでユーザ管理を完結するなら
非常に速く開発を進める事ができるはずだ。外部管理をしたい場合は別途APIを構築して
それを呼び出す形となる。

DB連携

Bubble外のデータも扱えるほうが良さそうだと思ったら、しっかり出来るようだ。
現状、以下の記事と大きい使い手等は変わらない。

以下のDBタイプが使用可能なら、MySQL と PostgreSQL との完全な互換性を持つ
Amazon Auroraも使えそうな。要検証。

プレビュー

以下リンクで公開中

感想

ノーコードが思いの外拡張子性が高く、コーディング開発と互角かそれ以上の
レベル感でプロダクトが作れそう。勘所を覚えるまで少し時間がかかりそうではあるが
一度覚えてしまえばスピード感ある開発への可能性はあると思った。

とりあえずポートフォリオサイトをノーコードできれいに仕上げてみようか
検討してます。