見出し画像

【初心者向け】NoCodeツールBubbleを使ってWebアプリ開発を始めよう!

皆様こんにちは、taku(@takuNoCode1)です!
平素より格別のご高配を賜り厚く御礼申し上げます。

今回は、NoCodeツールBubbleの概要と、Webアプリ開発の始め方について解説していきます!

1. Bubbleとは

画像1

Bubbleとは、コードを書かずにアプリを開発することができる、NoCodeツールの1つです。

Bubbleのホームページによると、「最も強力なNoCodeプラットフォーム」 であり、2020年9月12日現在で、ユーザー数は約57万人です。

Bubbleの最大の特徴は、「自由度が高い」ということです。

NoCodeツールは様々な制約があり、アプリの大枠は「容易かつ迅速に」作成することができますが、細かい機能の実装ができないというデメリットもあります。

しかし、Bubbleは数あるNoCodeツールの中でも、最も柔軟にアプリの開発を行うことができ、細部まで作り込むことができます。

Bubbleでは「Webアプリ」の開発を行うことができます。

    Webアプリ
・ブラウザ上で動作するアプリ
・開発コストは安いが動作が遅い
・インターネット上に公開

開発に必要な、サーバーやデータベースなどの環境を自分で準備する必要が無いため、アカウントを作成するだけですぐに開発をスタートできます。

学習コストは少し高めですが、最も勢いがあるNoCodeツールであると感じています。

2. Webアプリ開発の流れ

Bubbleを使った開発の流れは、Microsoft Officeで提供しているPowerPointの操作方法に非常に似ています。

ボタンやテキストボックスなどをドラッグアンドドロップして、ページを作成していきます。サイズや色、アニメーションなどの設定も簡単に行うことができます。

基本的なマウス操作でWebアプリを開発していくため、プログラミングの知識が無い初心者でも直感的に理解することができます。

画像2

BubbleのWebアプリ開発において重要となるのが、以下の4つの項目です。

・Element(見た目の部分を作成する)
・Workflow(裏側の動作を作成する)
・Database(データを管理する)
・Plugin(機能を拡張する)

2-1. Element

Webアプリの「見た目の部分」を作成するために、あらかじめ準備されたパーツのことを「Element(エレメント)」と呼びます。

ボタンやフォームなどの「Element」をドラッグアンドドロップして配置することで、ページを作成していきます。

画像3

2-2. Workflow

配置した「Element」に対して「Workflow(ワークフロー)」を設定することで、様々な機能を作成することができます。

「Workflow」は「処理の流れ」を表します。

データベースに新規データを保存したり、データを削除したりする処理を作成することができます。

画像4

2-3. Database

ユーザー情報や商品情報など、様々なデータを「Database(データベース)」に保存して管理することができます。

Type(タイプ)」という単位で、データの種類ごとに管理を行います。

例えば、「User」という「Type」には、「メールアドレス」や「名前」などのユーザーに関するデータを保存します。

Microsoft Excel で作成した表 をイメージすると非常に理解しやすいと思います。

画像5

2-4. Plugin

機能を拡張する
ためのプログラムのことを「Plugin(プラグイン)」と呼びます。

複雑なコードを書かなければ実装できないような機能も、このプラグインをインストールして設定を行うだけで、初心者でも簡単に実装することができます。

例えば、プラグインを使用すると、簡単にスライドショーを実装することも可能です。

画像6

外部アプリからデータを検索して表示することも可能です。

画像7

3. 料金プラン

企業向けに有料プランもありますが、基本的に無料で開発からリリースまで行うことができます。

画像8

各プランの詳細につきましては、NoCode Ninjaさん の解説記事が非常に分かりやすかったので、是非こちらをご覧下さい。

4. チュートリアル

Bubbleでは12個のチュートリアル (LESSONS)が準備されており、基本的な操作方法や概念を学ぶことができます。

画像9

それぞれのチュートリアルでは、1つの操作ごとに、簡単な解説と赤い矢印アイコンでの指示があるため、その通りにボタンをポチポチすればどんどん進んでいきます。1つあたり5分くらいでサクッとできます。

画像10

各チュートリアルでは、簡単なサンプルを作りながら学習を行います。

画像11

最終的には簡単な「Todoアプリ」が作れるようになります。

画像12

バックエンド(データベース周り)の学習がメインとなっておりますので、プログラミング未経験の方は少し難易度が高いと思いますが、Bubbleの機能を効率良く理解することができるので、挑戦してみることをオススメします。

解説は全て英語なので、苦手な方は難しいと思いますが、翻訳を使えばざっくり理解できるくらいのレベルです。

チュートリアルの概要につきましては、こちらの記事で解説しましたので、是非ご覧ください。

5. Webアプリ開発の始め方

画像23

アカウント作成

① Bubble公式サイト https://bubble.io/ 右上の「Get Started」をクリック

画像14


② Emailアドレス と Password を入力して登録もしくは、「Google 」か 「GitHub 」でログイン

画像13

③ 利用規約を読んで同意する

画像15

④ チュートリアルがスタート
※ チュートリアルはクリアしなくても、新規のアプリを作成することは可能

画像16


新規アプリ作成

① 「My apps 」ページの 「New app 」ボタンをクリック

画像17

② アプリ名を入力して「Create a new app」をクリック

画像18

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」ボタンをクリック

画像19

New Application Assistant」の「Let's get started」ボタンを押すと、タブに表示する文字の設定やファビコンの設定などができるのですが、後から設定できるので今回は省略します。

④「Close the assistant」ボタンをクリックして、開発スタート

画像20

まずは、ボタンやフォームなどをドラッグアンドドロップして、機能を試してみてください。

右上の「Preview」ボタンをクリックすると、制作中のページを確認することができます。

また、変更を加える度にオートセーブしてくれるので、いつでも開発を終了することができます。

画像21

6. まとめ

画像22

最後に、この記事の要点をまとめます。

・Bubbleは他のNoCodeツールより自由度が高い
・Webアプリの開発を行うことができる
・環境準備が不要のため、すぐに開発ができる
・チュートリアルで基本的な機能を学べる

NoCode学習では「基礎を学んでアプリを作る」より「アプリを作りながら基礎を学ぶ」方が効率が良いです。

Bubble初心者の方は、チュートリアルでサンプルを作りながら学習を進めていきましょう!


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
10
初心者向けにNoCodeの情報を発信していきます! 何卒よろしくお願い申し上げます!

こちらでもピックアップされています

Bubble for Beginners
Bubble for Beginners
  • 18本

初心者向けにNoCodeツールBubbleについて解説しました!

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。