やってみた!ノーコードBubbleの魅力とハマり所

この記事は[Goodpatch Advent Calendar 2020](https://qiita.com/advent-calendar/2020/goodpatch)の9日目となります。
街の店先から流れるWhamやマライアキャリーもすっかり耳に馴染んできました。

## ノーコードとは

ノーコードとは、コードを書かずにGUIで操作するだけでwebサービスやアプリ、ECサービス等を制作するツールです。
Googleもノーコードアプリ開発を手掛ける [AppSheet](https://www.appsheet.com) を買収したりと近年話題が高まっています。

###  プロトタイプを爆速で開発したい

プロトタイプを数日で作ったり、複数パターン用意したい。
そんな爆速で仕上げる開発手段がほしい。
そこでヒントになりそうなノーコードに触れてみようと思いました。
ちなみにノーコード自体は何もやったことないです。

## どんなノーコードツールがあるの？

とりあえず比較サイトを見てみましょう。
`ノーコード　比較` で検索してまとめサイトを表示。
  [今話題の ” NoCode(ノーコード)ツール ” を比較してみました!! ](https://www.web-knowledge-info.com/wp/other3/)
  [NoCodeツールおすすめ１０選！～２０２０年３月編～](https://note.com/nocodeninja/n/n297813da96af)
結構いろいろなツールがありました。

- [Bubble](https://bubble.io/)
- [webflow](https://webflow.com)
- [AppSheet](https://www.appsheet.com/)
- [Airtable](https://airtable.com/)
- [Boundless](https://www.boundlesslabs.com/)
- [glide](https://www.glideapps.com/)
- [Adalo](https://www.adalo.com/)
- [STUDIO](https://studio.design/ja)
- [Memberstack](https://www.memberstack.com/)
- [zapier](https://zapier.com)
- [integromat](https://www.integromat.com/)
- [Shopify](https://www.shopify.jp)
- [BASE](https://thebase.in)
- [Sharetribe](https://www.sharetribe.com/)
- [Voiceflow](https://www.voiceflow.com/)

### 注目度の高いBubble

どのサイトもまず真っ先に取り上げているのが  [Bubble](https://bubble.io/) というサービス。 
特徴は以下のようです。

- 自由度が高い
- インフラ基盤がしっかりとしている
- google analyticsなどのツールを導入できる
- 共同で編集することができる

## チュートリアルをやってみる

さっそくBubbleのチュートリアルをやってみました。
BubbleにはAcademyの「[Interactive Learning](https://bubble.io/academy)」コーナーに12個のチュートリアルが用意されています。
どれも吹き出しと矢印でどこを操作したらいいのかを分かりやすくナビゲーションしてくれます。

さっそく1番目の`Saving data`レッスンをやってみます。
入力した文字で住所検索しGoogle Mapに表示する内容です。

### 大ハマり！4分で終わるはずが2時間に

`Saving data`レッスンは想定所要時間4分です。
恥ずかしい話、この4分を理解するのに2時間以上かかる事態になりました。
元々物覚えに時間がかかる方ですがこれはショック！
初見でひどくつまづいた部分を振り返ってみます。

#### ハマり理由1　メニューに不慣れ

Bubbleのメニューは 「Design」「Workflow」「Data」等のタブと、そこに紐づく小項目があります。
一番よく使う 「Design」タブに以下メニューが入っています。

- `Elements tree` 現在ページのレイヤー構造
- `Visual elements`表示する要素
- `Containers` 要素をラッパーするコンテナ
- `input forms` 入力フォーム要素
- `Reusable elements` 共通コンポーネント要素
- `Element templates` ログインやタブ等テンプレート

これが初見だとどこに何があるのか手探り状態です。
TextやButtonは分かりますが「Map」って何だろう？サイトマップのことかと勘違いしていましたが、これGoogle Mapなんですね。

またBubbleの肝となる「Group」も、何かをまとめておくだけでしょくらいにしか思っていませんでした。あんなに大事なものだったなんて。

チュートリアルをやっている最中に「Design」 → 「Workflow」→「Data」等、別タブへ画面遷移したりします。
不慣れな状態だとそこで迷子状態になり、元の「Design」画面に戻す方法ってどうするんだっけ？となります。

- Bubbleメニュー  
<img width="300px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/866624/afcb1ef5-9dfe-8a9b-5983-3dfc84d3bbf4.png">

#### ハマり理由2　Workflowって何？

「Workflow」タブが何をする所か最初イメージが掴めませんでした。
ここはクリック時のイベントハンドラ等、データ処理や連携を行う部分になります。

#### ハマり理由3　Dataって何？

「Data」タブは恐らくほとんどの方が一度はハマると思います。
「Data」はデータベースを扱います。
Bubbleの思想には以下があります。

>`Pages can be set to dispaly particular data from the database.`
（データベースからの特定のデータを表示するようにページを設定可能）

Bubble設計思想の根幹をなす部分ですが、初見では何のデータを指しているんだろう？くらいにしか思っていませんでした。

#### ハマり理由4　全部英語

Bubble内は全て英語です。
それでもセンテンスは短めですし、難しい単語も少なめ。
説明も簡潔なので、英語が苦手な私でもGoogle翻訳等で十分理解できる内容です。
さらに矢印や吹き出し表示でナビゲーションまでしてくれます。

それでも初見で理解ができていない内はつまづきがちです。
これただのジョークなの？そういう名称のUIがあるの？と手が止まります。
『ああこのことか』と気づくまでに時間がかかってしまいました。


## 解説動画を見て全体感を掴もう

思った以上に習得には時間がかかりそう。
勝手な印象ではAdobe XDやFigmaにデータベースがついた感じでしょうか。

これはまずい。
まずは全体を俯瞰して雰囲気をつかみたい所です。

ということでYoutubeでBubble解説している動画を見ることに路線変更。
以前仲間から[ノーコードスクール](https://www.youtube.com/channel/UCa3cFggd3BrJ6qq5lw8P_9w/featured)を運営している 「しんじ」氏の動画が良いと聞いたことを思い出しました。

### Youtube操作の便利なショートカット

学習中はYoutubeでかなり頻繁に一時停止や巻き戻しをします。
でも手動でスライダバー操作だと、巻き戻しの秒ずれとか手をマウスに置く手間とか不便ですよね。
そんな時はこんなショートカットがおすすめです。

- 動画の再生 / 停止：`k`  ※ケー。CmdとかCtrlの同時押し不要です
- 10秒早送り： `l` ※エル
- 10秒巻き戻し： `j` ※ジェイ
- 5秒早送り： `→` ※右矢印
- 5秒巻き戻し： `←` ※左矢印

参考： [【まとめ】使いこなせば超快適！ YouTube の「隠しショートカットキー10選」](https://rocketnews24.com/2015/10/19/650986/)

### Youtube「Uber風のサイト構築を通して学ぶ、Bubbleの使い方」をやってみる

「[Uber風のサイト構築を通して学ぶ、Bubbleの使い方](https://www.youtube.com/playlist?list=PLiDMHhMXhuXRfwx-sRoBCrClO5V6sEclj) 」
というYoutube動画Bubbleの使い方シリーズ（全12本）があります。
280分 = 4時間40分のとてもボリュームたっぷりの内容です。
作者である「しんじ」氏のノーコードへの造詣の深さと熱意、何よりこれを無料公開されていることに本当に感謝の気持ちがいっぱいです！
これを見ながらやってみよう！！

##  夜な夜な

[あれからどれくらいたったのだろう](https://youtu.be/7emBUSm1i54?t=44)。（by乾杯）
ノーコードスクールBubble編をほぼ毎日やって1ヶ月経ちました。

仕事が終わってから寝る前の2時間ほどを、動画を見てはBubbleで制作を夜な夜なやります。
ですが、中々進まないし終わらない。
先に動画全体を見てから着手すべきだったなとか、細かい所を気にしたらとことん調べてしまう癖とかのせいでしょうか。
まずはざっと流してやって、後から復習する方がよかったのかもしれません。
動画10分の所を大体1時間かけるという効率の悪さです。。。

### 絶対終わらせたい

始めてしまったからには動画を全部終わらせたい。
やると決めたからには粘ってみよう。
何より、`Bubbl編Part10-配車リクエスト`で「[タクシードライバーの現在位置から5km以内の依頼のみ表示する](https://youtu.be/jTFRnLmmX88?t=1188)」という部分がメチャクチャ面白そう。
こんな設定がBubbleでできるならぜひやってみたいという一心でした。

## 失敗の繰り返しで見えてきたもの

何十回もハマったり失敗しているとおよその傾向を体で覚えてきます。
あ、これだめなパターンだと感覚で分かってきます。
さらにやっていると、
『**データベース連携こそ大事。UIの使い勝手やレスポンシブは後回しでいい**』
というBubble製作者の心の声までうっすら見えてきます（多分）。



## チュートリアル完了！

1ヶ月以上かかりましたが無事Youtube講座とチュートリアルが完了しました。
何とか粘った達成感と時間かけすぎという残念な気分。
Adobe Illustratorを初めて習得した時の大変さを思い出しました。

- ノーコードスクール： [Bubble編](https://www.youtube.com/playlist?list=PLiDMHhMXhuXRfwx-sRoBCrClO5V6sEclj)
- Bubble Academy： [INTERACTIVE LESSONS](https://bubble.io/academy)


#### 制作したサンプル

- [iTuneプラグインで曲検索](https://mypractice123.bubbleapps.io/)  
    使い方： 例えばフォームに`x`と入力するとX JAPANのアルバム一覧が表示されます
- [外部APIテスト 郵便番号検索](https://mypractice123.bubbleapps.io/zipcode)  
    使い方： 例えばフォームに`7000000`と入力すると岡山県の該当郵便番号の住所一覧が表示されます

ノーコードスクールBubble編で制作したものですがGoogle Geocode Plugin周りの問題で、残念ながら本番アップできていません。
Bubbleではエラーが1つでもあると本番化不可になってしまいます。
一応スクリーンショットのみですが張っておきます。

- ノーコードスクールBubble編サンプル スクリーンショット
    <img width="500px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/866624/d1d5e4ea-5574-dca6-dc92-fe48127792a2.png">
    <img width="300px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/866624/d43ef922-e7ad-2bd7-698c-43774e79e5f4.png">


## Bubbleのハマり所

### 重なり合った要素が選択しづらい

Bubbleでは `Group` 等のcontainer要素でラッピングして入れ子を作れます。
このContainer要素に特定データベースを参照させ、入れ子要素に該当レコードデータを表示するというやり方をよくします。
しかし、この入れ子要素を選択する操作感が悪いです。

例えば以下の画像の場合、こんなイライラがあります。

1. 任意のGroupエレメントを作る。そこに入れ子で`ログアウト`テキストを置く
2. クリックハンドラを設定するためGroupエレメントを選択したい
3. `ログアウト`テキストを誤選択してしまう。親要素のGroupエレメントを選択できない！！  
  <img width="550px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/866624/ef3c22d8-0ca2-872a-6e21-cad537ecb4f8.png">

一応Bubbleには、`Cmd + クリック`で入れ子選択するという機能もあります。ですが大抵は意図した動作をしてくれません。レイヤー側から選ぼうとしても、レイヤー階層の展開ON/OFFがやりずらいです。

例えるなら、パワーポイントでほぼ同じ大きさのテキストフィールドが2つ重なっていて、そこから片方だけクリック選択しようとしても狙いづらい感じです。

現状コツとしてはGroup要素を作る時は、掴みやすいよう大きめにはみ出させておくことくらいです。取手をつける感じです。

### レイアウトの配置がしづらい

`Visual elements`と呼ばれるものが11種類あります。テキストやボタン、リンク、画像等です。
これらをマウスを使って配置していくので、結構大雑把な精度になってしまいます。

一応Elementインスペクタで、width、height、x、yを数値入力で指定は可能です。
ですが他の要素とのmargin間隔は分かりづらいし、レイヤー（`Elements tree`）は子階層を一括展開してくれなくて面倒です。位置関係分かりづらい。

Bubbleのレイアウトはマウス配置前提の設計なの（？）という感じです。
そのためピクセル単位の精度でレイアウトするのはかなりやりにくいです。

**ローコードツール「framer」の操作感を見習って欲しい**
個人的にはレイアウト操作はローコードツール [framer](https://framer.com/) が優秀と思います。
こんな風に隣接要素とのmargin距離を設定したい。

- 参考： [framer](https://framer.com/) の操作画面  
  <img width="650px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/866624/e4203e05-59d7-3f89-7a32-cf10f3580487.png">

### レスポンシブデザインがしづらい

レスポンシブデザインの設定モード画面が用意されていて、デザイン調整は可能です。
ただ、min widthをスライダでいじることでレスポンス時の折り返しをコントロールする設計はかなりやりづらい。
また要素の上下関係ずれ、親Group要素からの入れ子要素はみ出し等、1pxずれただけで意図しない折り返しや行揃えを起こします。

elementの寄せ・並べについてもcssの`flex`や`grid`的な設定はないです。
css float的な行寄せをマウス配置と指先感覚と運で行うだけです。
疲れたり集中力が落ちていると失敗が増えます。

特に気になるのは`margin up`や`margin bottom`等、縦方向のレイアウト制御ができなそうな所です。
いや頑張って画面ごとに作り分ければできるのでしょう。
ですが、通常は横方向にしかmarginの条件分岐設定がありません。

<img width="350px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/866624/3ea7bb59-dd29-f058-c790-b4847ec88624.png">

またスタイル設定はありますが、cssのメディアクエリ等はできません。

```
@media screen and (min-width:480px) { 
    /*　こういうレスポンシブ設定はできないよ　*/
}
```

### データベースの名称が独特

Bubbleではデータベース周りの用語が独特です。
MySQLと比較すると以下のようになっています。

|MySQL|Bubble|
|---|---|
|データベース| Types |
| カラム| fields |
|型| Data Types |
| レコード| things |


参考： [Bubbleの使い方-Part6-データベースの基礎知識](https://youtu.be/5Nxb0aQ27Vs?t=285)

## Bubbleの魅力とコツ

### Groupを制する者はBubbleを制す

複数の要素をまとめたり、入れ子にするのに`Group`というContainerを非常によく使います。
ほぼ80%のものは`Group`に入れると言ってもいいと思います。
この`Group`を含めContainer要素はデータベースを参照させることができます。
※ Containerしか参照できない訳ではないが使用頻度がとても高いです

例えば、タスク一覧データベースから任意タスクを参照して表示したいとします。
この場合、まず任意の数のTextを`Group`に入れ子にしておきます。
そして`Group`にタスク一覧を参照させるだけで、入れ子Textは`Parent group's タスク`経由でカレントのタスク情報を参照したり表示ができます。

この`データベース` → `Group` → `表示要素` というやり方がBubbleのメインの使い方になると思います。
この感覚がなかったため数多くの失敗を繰り返したので、ぜひ覚えておくことをおすすめします。

### データベースがデフォルトで用意されている

別のノーコードツール[Airtable](https://airtable.com/)ではスプレッドシートを使ってデータベース機能を作成します。
ですがBubbleは自前でデータベース機能を持っています。

Bubbleのコンセプトの1つに以下があります。

> Pages can be set to dispaly particular data from the database.
（データベースからの特定のデータを表示するようにページを設定可能）
<img width="500px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/866624/40d6b790-0892-6892-0ca1-ffb6a31f885a.png">

この`データベースのデータをとにかく表示したいんだ`という感覚が、Bubbleにはとても重要になってきます。
ノーコードツールは数多くあります。
その中でもしデータベースやPluginを高度に使いたい、データ連携でデザインを大幅に単純化したいといったケースではBubbleは有力候補になると思います。

### ログイン設定がデフォルトで用意されている

Bubbuleではログイン用の`User`データベース、ログイン用ポップアップElement、状態管理用ハンドラ等がデフォルトで用意されています。
そのため10分もかからずに簡単なログインページが作成可能です。

### 閲覧制限をかけられる

デフォルトでログイン管理用機能を使い、ログイン必須設定にする。その判別設定をWorkflowで設定し全ページに適用する。
これを組み合わせれば、簡単にログイン必須の閲覧制限が行えます。

以前案件で[STUDIO](https://studio.design/)で作ったページにインタビュー用ユーザのみ訪問させたいケースがありました。しかしSTUDIOは[Basic認証](https://help.studio.design/ja/articles/2688729-basic%E8%AA%8D%E8%A8%BC%E3%81%AF%E3%81%8B%E3%81%91%E3%82%89%E3%82%8C%E3%81%BE%E3%81%99%E3%81%8B)には対応しておらず断念したことがあります。

Bubbleの場合はかなり柔軟に設定ができます。Plugin等を使えばAuth周りをより高度に設定することも可能です。
※ Basic認証までできるかは不明。無料のHobbyプランには見当たらなかった

### イベントハンドラがマウス操作だけで作れる

クリック時の処理や各イベントハンドラ、ログイン状態処理は`Workflow`と呼ばれる専用画面で設定できます。この設定がノーコードらしくマウス選択だけで行えます。
Bubbleではハンドラ周りが想像以上に細かい所まで設定できます。

<img width="650px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/866624/99afb1d6-d37f-847b-c77f-866f010aa318.png">


### 豊富なプラグイン

Bubbleではプラグインを簡単にインストールできる画面があります。
`7タイプ`、`25カテゴリ`、`有料/無料`、`Bubbleオリジナル/ThirdParty`の中から多数のプラグインを選択できます。
私もサンプルで作ったページには、外部API呼び出し`API Connector`や`ReCAPTCHA`、`iTunes`等を入れましたが簡単に導入できました。
「豊富なPlugin」 + 「データベース」 + 「イベントハンドラ連携」 はBubbleの強力なコンボ技ですね。

<img width="650px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/866624/2ed17d1a-62c3-8cbf-314c-702005056f9d.png">

## まとめ

いかがでしたでしょうか。
実質チュートリアルしかやっていない私が話すのもおこがましいですが、失敗の経験だけはたくさんしたなあとしみじみしています。

最後に、熱意を持ってノーコードの理解と普及を進めるエバンジェリスト「しんじ」氏と[ノーコードスクール](https://www.youtube.com/channel/UCa3cFggd3BrJ6qq5lw8P_9w)には大変お世話になりました。心から感謝いたします！！

それでは皆様良いお年をお迎えくださいませ。