ノーコード情報満載!

  1. ノーコード
  2. 486 view

Bubbleの使い方を日本語で解説!基本操作の流れをマスター

ネットが普及したことによって、デバイスにインストールのするのではなく、Web上で利用できるアプリも増えています。インストールの手間が必要なく、PCやスマホ、タブレットなどの端末で使用できることから、Webアプリはさまざまな形で使用されるようになりました。このようなことから現在では、Webアプリ開発への需要が高まっています。

そうしたWebアプリをノーコードで簡単に開発できるツールがBubbleです。今回はBubbleの使い方を詳しくご紹介します。

Bubbleを使用するための準備

Bubbleのトップページ
画像:bubble.io

まず、Bubbleとはどんなツールなのかを簡単にご紹介したうえで、アカウント作成などの事前準備についてご紹介します。

Bubbleとは

Bubbleはノーコードで Webアプリ を開発することができるツールです。視覚的な操作が可能なビジュアルプログラミングという手法を取り入れることによって、プログラミングに関する知識が一切ない方であってもWebアプリ開発が可能です。

主に スタートアップ ビジネス向けに設計されており、これまでよりも低コストでなおかつスピーディにWebアプリを作成できるようになっています。

・Bubble

公式URL:https://bubble.io/

Bubbleのアカウント作成手順

まず、Bubbleの公式サイトにアクセスします。そして「sign up」をクリックしてください。するとメールアドレスとパスワードを入力する画面が表示されます。ここにBubbleで使用するメールアドレスと、任意のパスワードを入力して「SIGN UP,IT’S FREE」というボタンをクリックすればアカウントの作成は完了です。

メールアドレスの他にも、Googleアカウントでの登録も可能となっています。

Bubbleの基本的な使い方を学べるレッスン

アカウントを作成すると「Bubble Lessons」というページに飛びます。ここでは各項目別に、Bubbleの基本的な操作方法を学べます。

残念ながら日本語には対応していませんが、さまざまな機能をガイド付きで解説してくれていますので、はじめて使用するのであれば、ひととおり確認することをおすすめします。

この「Bubble Lesson」はいつでも確認できますので、実際に使いながら操作方法を学んで行きたいという方は省略しても問題ありません。

Bubbleを実際に使用するまでの事前準備はここまでで終了です。

Bubbleの使い方

Bubbleを実際に使い始めるまでの事前準備はとても簡単で、前述の通りアカウントを作成するだけです。準備が整ったらすぐに Webアプリ の開発が可能となります。そこで、続いてはBubbleの使い方、開発の手順をご紹介します。

アプリの基本情報を入力

「new app」というボタンをクリックすると、すぐにWebアプリの開発を開始できます。

するとアプリの基本情報を入力する画面が表示されます。ここで必要なのはアプリの名前、種類、目的、 ローンチ 時期、使用するテンプレートです。すべての情報を入力したら「Create a new app」というボタンをクリックしてください。

テンプレートはあらかじめさまざまなものが用意されていますので、目的のアプリに近いものを見つけられれば開発にかかる時間を大幅に削減できます。そのため、はじめて開発するのであればじっくりとテンプレートを選ぶようにしましょう。

もちろん、テンプレートを使用せずに開発することもできます。理想的なテンプレートを見つけられない場合や、ある程度Bubbleの操作に慣れ、より自由にWebアプリ開発を行いたいのであれば、テンプレートを使用しない開発にも挑戦してみましょう。

アプリの編集

次に、テンプレートをベースとして編集を行っていきます。テンプレートで設定されている機能などが一覧で表示されますので、必要に応じて編集を行っていきます。テンプレートを使用しない場合も、それぞれの画面で自由に要素や機能などを追加して開発を進めるというかたちになります。

この画面も日本語には対応していますが、主に使用するのは次の3つのページです。テキストなどのアプリの要素を配置する「Design」、ボタンなどクリックに対するアクションを設定する「Workflow」、 データベース の設定を行う「Data」です。これらのページの切り替えは画面の左端に常に表示されていますので、必要に応じて画面を切り替えながら編集を行っていきます。

開発の流れとしてはDesignの画面で、アプリに必要な要素を作成していきます。ここではテキストなどのみでなく、画像などの配置も可能です。ここで、アプリを操作するためのボタンなどの配置を行います。続いてWorkflowの画面で設定した、ボタンに対するアクションなどの設定を行っていきます。アクションのパターンなどはあらかじめいくつかのパターンが用意されていますので、選択するだけで開発を進められます。データ型もこのワークフローの設定と同時に作成することができます。

Dataの画面ではDesignやWorkflowで作成したデータをまとめて確認し、編集することができます。この画面では Webサイト 開発に使用する CMS などと同じようにスタイルの編集なども可能です。

まとめ

かつては Webアプリ の開発にはかなりの時間やコストがかかっていました。しかし、ノーコードで簡単にWebアプリ開発を行うことができるBubbleといったツールが登場したことによって、開発にかかる時間やコストを大幅にカットできるようになりました。これからWebアプリ開発を行うのであればBubbleなどのノーコードツールの開発も検討してみましょう。

ノーコードの最近記事

  1. Autifyの概要からテスト自動化への導入事例までを徹底解説

  2. Platioはノーコードで作成できる便利な業務アプリ!機能や特徴を解説

  3. UNIFINITYで業務効率アップ!使い方とメリットやデメリット

  4. WebアプリとWebシステムの開発に役立つ!FastAPPの概要

  5. STORESの使い方を解説!初心者でも分かる基本や応用のまとめ

関連記事

PAGE TOP