【初心者向け】NoCodeツールBubbleを使ってWebアプリ開発を始めよう！
皆様こんにちは、taku（@takuNoCode1）です！
平素より格別のご高配を賜り厚く御礼申し上げます。
今回は、NoCodeツールBubbleの概要と、Webアプリ開発の始め方について解説していきます！
NoCodeについて詳しく知りたい方は、こちらの書籍がオススメなので、是非ご覧ください！
1. Bubbleとは
Bubbleとは、コードを書かずにアプリを開発することができる、NoCodeツールの１つです。
Bubbleのホームページによると、「最も強力なNoCodeプラットフォーム」 であり、2020年9月12日現在で、ユーザー数は約57万人です。
Bubbleの最大の特徴は、「自由度が高い」ということです。
NoCodeツールは様々な制約があり、アプリの大枠は「容易かつ迅速に」作成することができますが、細かい機能の実装ができないというデメリットもあります。
しかし、Bubbleは数あるNoCodeツールの中でも、最も柔軟にアプリの開発を行うことができ、細部まで作り込むことができます。
Bubbleでは「Webアプリ」の開発を行うことができます。
Webアプリ
・ブラウザ上で動作するアプリ
・開発コストは安いが動作が遅い
・インターネット上に公開
開発に必要な、サーバーやデータベースなどの環境を自分で準備する必要が無いため、アカウントを作成するだけですぐに開発をスタートできます。
学習コストは少し高めですが、最も勢いがあるNoCodeツールであると感じています。
2. Webアプリ開発の流れ
Bubbleを使った開発の流れは、Microsoft Officeで提供しているPowerPointの操作方法に非常に似ています。
ボタンやテキストボックスなどをドラッグアンドドロップして、ページを作成していきます。サイズや色、アニメーションなどの設定も簡単に行うことができます。
基本的なマウス操作でWebアプリを開発していくため、プログラミングの知識が無い初心者でも直感的に理解することができます。
BubbleのWebアプリ開発において重要となるのが、以下の4つの項目です。
・Element（見た目の部分を作成する）
・Workflow（裏側の動作を作成する）
・Database（データを管理する）
・Plugin（機能を拡張する）
2-1. Element
Webアプリの「見た目の部分」を作成するために、あらかじめ準備されたパーツのことを「Element（エレメント）」と呼びます。
ボタンやフォームなどの「Element」をドラッグアンドドロップして配置することで、ページを作成していきます。
2-2. Workflow
配置した「Element」に対して「Workflow（ワークフロー）」を設定することで、様々な機能を作成することができます。
「Workflow」は「処理の流れ」を表します。
データベースに新規データを保存したり、データを削除したりする処理を作成することができます。
2-3. Database
ユーザー情報や商品情報など、様々なデータを「Database（データベース）」に保存して管理することができます。
「Type（タイプ）」という単位で、データの種類ごとに管理を行います。
例えば、「User」という「Type」には、「メールアドレス」や「名前」などのユーザーに関するデータを保存します。
Microsoft Excel で作成した表 をイメージすると非常に理解しやすいと思います。
2-4. Plugin
機能を拡張するためのプログラムのことを「Plugin（プラグイン）」と呼びます。
複雑なコードを書かなければ実装できないような機能も、このプラグインをインストールして設定を行うだけで、初心者でも簡単に実装することができます。
例えば、プラグインを使用すると、簡単にスライドショーを実装することも可能です。
外部アプリからデータを検索して表示することも可能です。
3. 料金プラン
基本的に無料で開発することができますが、公開やAPI連携を行うためには、有料プランに入る必要があります。
各プランの詳細につきましては、NoCode Ninjaさん の解説記事が非常に分かりやすかったので、是非こちらをご覧下さい。
4. チュートリアル
Bubbleでは12個のチュートリアル (LESSONS）が準備されており、基本的な操作方法や概念を学ぶことができます。
それぞれのチュートリアルでは、1つの操作ごとに、簡単な解説と赤い矢印アイコンでの指示があるため、その通りにボタンをポチポチすればどんどん進んでいきます。1つあたり5分くらいでサクッとできます。
各チュートリアルでは、簡単なサンプルを作りながら学習を行います。
最終的には簡単な「Todoアプリ」が作れるようになります。
バックエンド（データベース周り）の学習がメインとなっておりますので、プログラミング未経験の方は少し難易度が高いと思いますが、Bubbleの機能を効率良く理解することができるので、挑戦してみることをオススメします。
解説は全て英語なので、苦手な方は難しいと思いますが、翻訳を使えばざっくり理解できるくらいのレベルです。
チュートリアルの概要につきましては、こちらの記事で解説しましたので、是非ご覧ください。
5. Webアプリ開発の始め方
アカウント作成
① Bubble公式サイト https://bubble.io/ 右上の「Get Started」をクリック
② Emailアドレス と Password を入力して登録もしくは、「Google 」か 「GitHub 」でログイン
③ 利用規約を読んで同意する
④ チュートリアルがスタート
※ チュートリアルはクリアしなくても、新規のアプリを作成することは可能
新規アプリ作成
① 「My apps 」ページの 「New app 」ボタンをクリック
② アプリ名を入力して「Create a new app」をクリック
「Name of this new app」の入力フォームにアプリ名を入力します。上の例では、半角スペースでエラーとなっています。
2単語以上使いたい場合は、ハイフンで繋いでください。また、アプリ名は他の人と同じものは使えないので注意してください。
その他の入力フォームはデフォルトのままで問題ありません。
(空欄のところはそのままでOK）
入力は必須ではありませんが、それぞれの項目は以下の通りです。
・What are you building? → 何を作るかを選択 ( BLOG, GAME etc）
・Would you rather? → 自分で作るか、他人が自分のために作るか
・Details of what you're building → 作るアプリの詳細を記入
・How did you hear about Bubble? → どうやってBubbleを知ったのか
③「New Application Assistant」の「Start with a blank page」ボタンをクリック
「New Application Assistant」の「Let's get started」ボタンを押すと、タブに表示する文字の設定やファビコンの設定などができるのですが、後から設定できるので今回は省略します。
④「Close the assistant」ボタンをクリックして、開発スタート
まずは、ボタンやフォームなどをドラッグアンドドロップして、機能を試してみてください。
右上の「Preview」ボタンをクリックすると、制作中のページを確認することができます。
また、変更を加える度にオートセーブしてくれるので、いつでも開発を終了することができます。
6. まとめ
最後に、この記事の要点をまとめます。
・Bubbleは他のNoCodeツールより自由度が高い
・Webアプリの開発を行うことができる
・環境準備が不要のため、すぐに開発ができる
・チュートリアルで基本的な機能を学べる
NoCode学習では「基礎を学んでアプリを作る」より「アプリを作りながら基礎を学ぶ」方が効率が良いです。
Bubble初心者の方は、チュートリアルでサンプルを作りながら学習を進めていきましょう!