ノーコードツール【Bubble】の始め方

Bubbleで作ったサイトのスクリーンショット。

・はじめに

【経歴】
京大院卒業・航空宇宙工学を学ぶ/大企業メーカーで
10年エンジニアを経験/
自由を求め脱出/
フリーランスに
STEAM教育の大切さに気づきSTEAM+M Lab オンライン研究所を設立/作曲家で研究所所長兼任

【一言】
颯 Souです。

颯 Souのイラスト縮小版

学生の頃は、工学や科学の研究が大好きでした。テクノロジーの集合体として、車やパソコンが好きで、スポーツカーに乗っていたり、ゲーミングパソコンを持ってます。作曲家であり、音楽をこよなく愛しています。STEAM教育の大切さに気付きました。STEAM+M Labを立ち上げ理系・文系とわず、これからAI時代に活躍できるような子供たちの応援をしていきます。

ノーコードツールってしってますか?

プログラムを使わずに、Web開発ができるツールのことです。

ノーコードツールに、Bubbleというソフトがあります。

Bubbleは学習者にも優しくて、チュートリアルで学ぶことができます。

サムネは、私がBubbleで作りたいと思っているページです。

目次は次の通りです。

  • Bubbleの始め方
    ・チュートリアルが始まる
    ・利用料
    ・アプリケーションを新規で作る
  • まとめ

それでは解説します。

・Bubbleの始め方

Bubbleのホームページに入ります。

下記リンクをクリックします。

Bubbleのホームページ

すると、下記ページが表示されます。

メールアドレスを入力して、「Get started for free」をクリックします。

ノーコードツールBubbleのスタートページ。

Bubbleの条項やプライバシーポリシー、クッキーの使用に、同意できる場合は、「I agree….」をクリックします。

※プライバシーポリシーを読むことをお忘れなく

Bubbleのプライバシーポリシーなど。

・チュートリアルが始まる

ケーススタディーのチュートリアルが始まります。

日本語の機械翻訳をしていると、誤訳などで指示が分からなくなることがありました。

英語のままの方が、学習しやすいです。

1.マップ表示

検索窓に地名を入れると、地図上に表示してくれるアプリ。

2.ログイン、ログアウトシステム

メールアドレスと、パスワードを入力すると、ログインできます。

ログイン中は、現在のユーザーがメールアドレスのユーザになります。

ログアウトボタンを押すと、ログアウトできます。

3.投票アプリの作成

ユーザーが都市名を入力して投票できるアプリを作ります。

・結構難しい

Bubbleというノーコードツールをいじってみたんですが、プログラムは不要といってもBackgroundぐらいは知ってないと扱いにくい印象です。

しかし、Bubbleを使ってみて、勉強になるなと感じました。

先日次のようなツイートをしました。

使われ方を知れば、プログラムの勉強をしやすいと感じですね。

・利用料

利用料は年払いと月額払いがあります。

プランにより異なります。

プランは、

Free
Personal
Professional
Production

の4つです。

無料でするならFreeを選びます。

その場合の容量は0.5GBsです。

サポートもコミュニティー対応となっています。

ドメインを取る場合は、Personalの有料プランからになります。

Personalでは、File容量が10GBsで、サポートがE-mail対応となってますね。

4つのプランは月払いの方が年払いよりお安くなっています。

先日次のようなツイートをしました。

プログラムできない人からすると、ノーコードツールが使いこなせれば、棚から牡丹餅です。

だから、勉強の余地はあると感じました。

・アプリケーションを新規で作る

アプリケーションを新規で作るには、メニューをクリックします。

Bubbleのメニュー。

そして、My Appsをクリックします。

BubbleのメニューのMy appsのボタン。

そして、New Applicationのボタンを押します。

BubbleのNew Applicationのボタン。

アプリを作るにあたって、

・新規アプリの名前
・何の種類のアプリを作るのか
・アプリのゴールは何か
・あなたは何のアプリを作ろうとしているのか
・いつアプリをスタートするのか

を入力して、「Create a new app」をクリックします。

Bubbleの新規アプリの作成のための設定画面。

ページが作られます。

最初、テンプレートのものがありますので、それを参考に置き換えていくことができます。

私は、下記ページをデザインしてみました。

Bubbleで作ったサイトのスクリーンショット。

・まとめ

ノーコードツールのBubbleの始め方を解説しました。

まだ、フリーBGMのダウンロードページは動作はしませんが、本日のところはここまで。

以上、参考になれば幸いです。

ノーコードに戻る