この記事は、bubbleとは？から、一通りの基本的な使い方が勉強できます。

これからbubbleを勉強したい、使ってみたいという方にはぴったりの内容です。

画像と動画で解説していますので、初心者でもわかりやすく学べます！

bubbleとは

具体的は操作に入る前にbubbleとはなにかを最初に解説します。

bubbleとは、プログラミングせずに（ノーコード）Webサイトなどをつくることができるサービスです。

・フロントエンド

・バックエンド

・データベース

とWebサイトをつくる上で必要なことがbubbleでは全てできます。

また、プラグインを使用して機能を拡張することも可能です。

bubbleのメリット

bubbleを使うメリットもふれておきます

・サーバーの構築が必要ない

　　bubble自身がアプリケーションサーバーを兼ねている

・HTMLやCSSの知識がなくてもOK

　　直感的な操作だけで、デザインがつくれます

・プラグインで機能を拡張できる

　　WordPressのようにプラグインによって機能を簡単に拡張できる

bubbleのデメリット

bubbleを使うデメリットもあります

・一般的なWebサイト作成の知識は必要

　　操作は直感的にできますが、Webサイトがどのようにできているかなどの知識は必要です

・bubbleに対する情報が日本語ではあまりなく、英語で調べる必要があり

　　私も苦労しましたが、Google翻訳など使えばなんとかいけます(^_^;)

bubbleの画面（アプリケーションエディター）の見方を解説

まずは、bubbleの画面の見方から解説していきます。

全部覚えなくても、使っていくうちに慣れますので、こうゆうことができるのかぐらいに思ってもらえれば大丈夫です。

bubbleの画面（アプリケーションエディター）はこんな感じですね。

見え辛くですみません(-_-;

①bubbleアイコン：bubbleのHOMEに戻

②Page：このapp内の全ページと再利用可能なエレメントが表示される。また新しいページを作る事もできる

③Help：操作方法など動画で解説されている（英語）

④お知らせ：bubbleからのお知らせ

⑤Gurid＆borders：画面（エディター）の設定。ボーダーを無くしたり様々な設定が可能

⑥Arrange：エレメントのアレンジ

⑦戻る　進む：操作を戻すことができる

⑧検索：エレメントなど様々なツールが検索できる

⑨開発環境設定：デプロイ・セーブポイントの作成などできる

⑩プレビュー：実際のサイト表示を確認したり、動作を確認できる

⑪主要タブ：※次のパートで解説

⑫レスポンシブ設定：レスポンシブの設定ができる

⑬エレメント関係：※エレメントについてはこちらの記事を参照

ざっとbubbleの画面（アプリケーションエディター）の見方の解説でした。

bubbleの主要タブの勉強

続いて、bubbleの主要タブの解説をしていきます。

実際にbubbleを操作してみるのが一番ですので、ぜひ一緒に操作してみてください。

分からない英語は、Google翻訳などを使うと便利なので、拡張機能として入れておくことをおすすめします。

まずは、bubbleのサイトにいき、アカウント作成をしましょう

Googleアカウントなどでも作れますので簡単です。

完全にガイドしてくれるので初心者でも大丈夫です。

bubbleを操作するための準備

主要なタブの解説の前に、

bubbleのアプリケーションエディターで操作できるように準備していきましょう。

ログインするとこのような画面になります。

「New app」（新しいアプリ）をクリック

今回は、使い方の練習なので下記のような感じで大丈夫です

①アプリ名：なんでもOKです。すでに使用されている名前は使えません

②何をつくりますか？：「Other」でOK

③「Build the app myself」を選択（自分でアプリを作成する）

④つくるものの詳細：「Other」でOK

入力したら、「Create a new app」をクリック

「Start with a blank page」をクリック（まっさらな状態で始める）

「Close the assistant」をクリック

このような「アプリケーションエディター」が開いたとおもいます

これで、実際に操作していけます

bubbleの主要タグの解説

それでは、主要なタブについて解説していきます。

実際に操作してみないと理解できないと思いますので、

ここでは簡単に概要だけふれます。

主要なタブとはこちらの事です

①Design（デザイン）

②Workflow（ワークフロー）

③Date（データ）

④Styles（スタイル）

⑤Plugins（プラグイン）

⑥Setting(設定)

⑦Logs（ログ）

①Design（デザインタブ）

WebサイトやWebアプリのユーザーインターフェース（UI）をつくる時に使います。

外観のデザインです。

沢山のエレメント（タグの右側にある「Text」「Button」「Icon」など）使ってサイトを構築していきます

これがエレメントの一部です

エレメントの使い方はのちほど解説します

②Workflow（ワークフロータブ）

ユーザーがサイトを操作した時に、どんな処理を行うか定義できます。

例えば、「サインアップボタンが押されたら、ユーザーをサインアップし、メールを送信して、ページを変更する」などのフローが作成できます。

ここは理解するまで少し難しいところですが、がんばってやっていきましょう！

③Date（データタブ）

データベースになります。

ユーザーの情報やさまざまなデータがこちらで管理できます。

④Styles（スタイルタブ）

文字の色、フォント、大きさや背景色などが設定できます。

マークアップ言語でいうところの「CSS」みたいなイメージです。

⑤Plugins（プラグインタブ）

bubbleの機能を拡張させることに使用します。

例えば、Stripeなどの決済機能の追加やグラフを簡単に作れるプラグインなど沢山の種類がありますので、必要に応じてインストールしていきましょう

無料で使えるものから有料のものまであります

⑥Setting（設定タブ）

bubble全体の設定を変更するタブになります。

プランの変更、ドメイン設定、言語設定、アプリの公開状態、アプリ全体の外観などができます。

⑦Logs（ログタブ）

bubbleの活動状況が記録されています。

使用統計やプランの制限を監視してくれています。

bubbleの使い方を解説【エレメントの勉強】

この記事では、bubbleのエレメントの使い方を、画像と動画で解説していきます！

エレメントの使い方以外にも

・プレビュー

・Workflow（ワークフロー）

・ページ切り替え

・データベース

などの簡単な解説も入れていますので、bubbleの色々な操作が学べるようになっています。（初心者向けに）

それでは、はじめていきましょう！

Element（エレメント）の解説

エレメントとはこちらのことです

エレメントの使い方は、使用したいエレメントをエディターにドラッグアンドドロップするだけなので、すごく簡単です。

これは全部のエレメント同じになります。

では抜粋していくつか見ていきましょう！

Text（テキスト）

テキストエレメントは、静的、動的なテキストを表示することができます。

ドラッグ＆ドロップしてエレメントをダブルクリックすると、このようなプロパティーが表示されます

このプロパティで各エレメントの細かい設定をしていきます

テキストを入力する欄はこちらになります

テキストの文字装飾（スタイル）を変更したい場合は、「Remove style」（スタイルを削除）をクリック

スタイルは、デフォルトで設定されてますので、削除する必要があります

「Remove style」をクリックすると、色々設定できます

テキストエレメントの使い方を動画で見たい方はこちらから

https://youtu.be/d0pf7EwktIo

Button（ボタン）

ボタンはその名の通りボタンですが、クリックするとワークフロー実行の引き金になるエレメントです。

Buttonエレメントをドラッグ＆ドロップしてエレメントをダブルクリックすると、このようなプロパティーが表示されます

こちらにボタン名を入力できます

「Style」でボタンの種類が選択できます

自分で装飾（スタイル変更）をしたい場合は、「Remove style」をクリック

好きなスタイルに変更することができます

ボタンエレメントの解説を動画で見たい方はこちら

https://youtu.be/7qWT6YIe8mw

Icon（アイコン）

アイコンも簡単につくれます。

ドラッグ＆ドロップしてエレメントをダブルクリックすると、このようなプロパティーが表示されます。

選択できるアイコンが表示されていますのこちらから選択します

このように「arrow」と検索窓に入力すると「矢印」のアイコンが表示されます

自分で装飾（スタイル変更）をしたい場合は、「Remove style」をクリック

色の変更などできます

アイコンエレメントの解説を動画で見たい方はこちら

https://youtu.be/1eu0pCSy3Ns

Link（リンクエレメント）

リンクは、Webサイト内の別のページに移動したり、外部のサイト（リンク）に移動させることができます。

ドラッグ＆ドロップしてエレメントをダブルクリックすると、このようなプロパティーが表示されます

このように、「内部ページに移動」か「外部リンクに移動」か選べます

まずは、「内部ページに移動」から解説してます

内部ページの移動方法

内部ページ移動とはどうゆうことかといいますと

例えば、企業のホームページなどのメニューに「会社概要」などのボタンがありそれをクリックすると、「企業概要」のページ移動しますよね。そのやり方になります。

内部ページの確認をしてみましょう

左上にページの切り替えができる場所があります

「▼」をクリックで表示されます

今回はこの「４０４」ページに移動させましょう

「Destination page」（送り先ページ）で「４０４」を選択

「Open in a new tab」(新しいタブで開く)にはチェックをいれましょう

右上の「Preview」（プレビュー）を開きます

プレビューは、現在のサイトの状態を確認したり、動作を確認したりできます

プレビューのリンクをクリックします

そうすると、新しいタブが開き「４０４ページ」に飛びました

これが、内部ページを移動する際のやり方になります

内部ページへの移動を動画で見たい方はこちら

https://youtu.be/Lyiq_caJhN4

外部サイト（リンク）への移動方法

続いて、外部リンクへの移動方法を解説します。

現在のサイトから、例えばGoogleのサイトに飛ばしたい場合のやり方です。

内部ページと同様の操作の部分は解説を割愛しますね。

「External URL」(外部URL)を選択します

移動させたいURLを入力します。

今回はGoogleサイトのURLを入力しました。

入力が終わりましたら、プレビューで確認してみてください。

このようにGoogleのサイトに移動できたと思います。

外部サイトへの移動方法を動画でみたい方はこちら

https://youtu.be/mz0IinATWOg

Image（画像）

画像関係を定義するエレメントになります。

静的画像、動的画像を表示できます。

Imageエレメントをドラッグ＆ドロップしてエレメントをダブルクリックすると、このようなプロパティーが表示されます。

「Upload」をクリックし画像を選択していきます

今回は、サンプルでこちらの画像を選択します

このように表示されました

Alert（アラート）

アラートは、○○完了しましたとか、警告のような一時的なメッセージをページに表示します。

今回は、

ログインボタンを押したら、ログイン完了！とアラートが出るようにしてみます。

Workflow（ワークフロー）も使用してみます。

Alertエレメントをドラッグ＆ドロップしてエレメントをダブルクリックすると、このようなプロパティーが表示されます。

エレメント名を「アラートテスト」をしました（この名前は後で出てきますので覚えておいてください）

アラートに表示するテキストは、「ログイン完了！！」にしました。

次に、アラートを表示させるための「ボタン」をつくります。

ボタンのつくり方は前のパートでやりましたね。

このように、「ログインボタン」を作成しました。

続いてこの「ログインボタン」にワークフローを設定します

ワークフローについては、ここでは詳しく解説しませんが、へ～こんなふうにやるんだぐらいで操作してみてください。

こちらをクリックすると「Workflowタブ」に飛びます

こちらでワークフローを設定していきます。

この「When」の部分が、ログインボタンが押された時、どんな動作をさせますか？になります。

「Click here to add an ~~」をクリックして、ワークフローを設定していきます。

「エレメントのアクション」としてAlertの「Show message（メッセージを見る）」と設定します

どのAlertメッセージを見るかを選択します

先ほど作成したアラートの「アラートテスト」を選択します

ここで設定したワークフローは

「ログインボタンが押された時」→「アラートのメッセージを見せてね」→「どのアラートメッセージかというと"アラートテスト"のメッセージだよ」

という感じになります

それでは、どんな感じになるかプレビューで確認してみましょう！

プレビューを開いた状態では、まだアラートは表示されていません。

先ほどのワークフローで、「ログインボタンを押したら見せてね」としたので「ログインボタン」をクリックしてみましょう。

そうすると、「ログイン完了！！」と出てきましたね。

アラートエレメントの解説を動画で見たい方はこちら

https://youtu.be/KjNJLM09rmM

Group（グループ）

ここからは、エレメントの中でも「Containers（入れ物）」という括りのエレメントについて解説します。

まずは、Groupですが使用用途が多岐にわたりすぎすのでここでは簡単にふれるだけにします。

Groupの役割としては、色々なエレメントを集約してデザインやワークフローをしやすくしたりできます。

「Groupエレメント」をドラッグ＆ドロップしてエレメントをダブルクリックすると、このようなプロパティーが表示されます。

「Group A」という名前がデフォルトでついています。

この赤枠で囲った２つの四角のエレメントを、まとめて動かしたりしたいという時は、先ほど作った「Group A」にこの２つのエレメントを入れます。

このように、2つのエレメントは、「Group A」という名前でグループ化されました。

この状態でグループを動かすと一緒に全部動きます。

Groupはサイトやアプリを作成していく中で、色々な用途で使いますので、使いながら覚えていきましょう！

グループエレメントの解説を動画で見たい方はこちら

https://youtu.be/JUyKaEnwtGI

グループ化の方法ですが、下記のような方法でもできます。

グループ化したいエレメントを

「Shiftキー」を押しながら選択しますそのあと、右クリックをして「Group elements in a Group」を選択

このようにグループ化されます。

動画でいたい方はこちら

https://youtu.be/BUqfTWBZjoI

Repeating Group（繰り返しグループ）

Repeating Groupを解説する中であわせて、簡単にデータベースも使ってみます！

少し難易度が上がりますが、こんなこともできるんだなーぐらいで大丈夫です。

Repeating Groupをドラッグ＆ドロップしてエレメントをダブルクリックすると、このようなプロパティーが表示されます。

Repeating Groupがどんな性質持っているかですが、下記のように操作してみてください

①TextエレメントをRepeating Groupの一番上に入れてください

②Textエレメントのテキストを変更してください

この画像のように、一番上しか操作していないにも関わらず、下の行まで全部変わったと思います。

このような性質を持っているエレメントになります。

もう少し具体的に、どのように使うか見ていきましょう！

このあとは、少しデータベースも使って解説していきます。

データベースを使ってRepeating Groupを解説

データベースを使うといっても、本当に簡単な操作だけなのでご安心ください！

早速ちょっと、データベースを操作してみましょう。

まずは、左の方にある「Dataタブ」をクリックすると、データベースの画面になります

ここで、簡単なデータベースを作っていきます。

「New type」に好きな名前を付けます（嵐にふかい意味はありません(^^;）

入力したら、「Create」をクリック

嵐メンバーの「名前」をデーターベースに登録できるように、新しいフィールドを作成します

「Create a new field」をクリック

「名前」と入力し「text」を選択

「CREATE」をクリック

このように「名前」というフィールドができて、データベースに追加できるようになりました。

続いて、「App dataタブ」に行き、「All嵐のメンバー」をクリック

そのあと、「New entry」をクリック

名前のフィールドに、「おおのさとし」さんを入力

「CREATE」をクリック

このように、「おおのさとし」さんがデータベースに登録されます

もし追加されてない場合は、こちらをクリックしてサイトを更新してみて下さい

これを５人分やっていきます

このようにメンバー５人登録できたらデータベースの準備は完了です

データベースの使い方の解説を動画で見たい方はこちら

https://youtu.be/X1iLkyQ6KaM

それでは「Designタブ」に戻って作業しましょう！

まずは、Repeating Groupをエディターに設置しましょう

これから先ほど作ったデータベースから、嵐メンバーの名前を呼び出していきます

メンバーは５人なので、「Rows（行）」を５にして行を増やします

「Type of content」から嵐のメンバーを選択

次に「Data source」（情報源はどこか）の「Click」をクリック

「Do a search for」（データベースを検索）を選択

探しているのは、データベースの「嵐のメンバー」なので、「嵐のメンバー」を選択

次にRepeating Groupに嵐のメンバーの名前を表示させるために、「Text」を使います

このように、Repeating Groupの一番上の行にテキストを入れます

「Insert dynamic data（動的データの挿入）」をクリック

「Current cells 嵐のメンバー（現在のセルの）」を選択

嵐のメンバーの名前を選択

このように設定できたら、プレビューで確認してみましょう！

データベースに登録した、嵐のメンバーの名前が表示されました！

Repeating Groupの使い方（一例）でした

Repeating Groupエレメントの解説を動画で見たい方はこちら

https://youtu.be/EtquPK4TZLE

Input（入力）

ここからは、Input forms（入力フォーム）のグループになります。

Inputはその名のとおり、ユーザーに何かを入力してもらう時に使うエレメントです。

ここでは、「ユーザー名」「メールアドレス」「パスワード」を入力するフォームを作ってみましょう！

まず、下記のように「Input」エレメントで、3つのフォームを作成してください。

エレメントを複製する時は、複製したいエレメントで「Ctrl」を押しながら上下左右に移動すると複製されます

ここから各エレメントの入力フォームのタイプを設定していきます。

一番上のエレメントは「ユーザー名」、フォーマットは「Text」にしましょう

二番目のエレメントは、「メールアドレス」とし、フォーマットは「Email」にしましょう

三番目のエレメントは、「パスワード」とし、フォーマットは「Password」にしましょう

プレビューをクリック

実際に入力してみましょう

パスワードは、よく見るPassword形式になっているとおもいます

メールアドレスは、このように「＠」をなくして、メールアドレス形式でないものを入力すると、赤枠になり警告されます。

このように、Inputエレメントは、ユーザーに入力してもらうフォームをつくる時などに使います。

Inputエレメントの解説を動画で見たい方はこちら

https://youtu.be/zNROG4x9lPk

Dropdown（ドロップダウン）

Dropdownエレメントの解説をしていきます！

ドロップダウンとは、クリックをすると隠れていたリストを表示させる機能です。

見れば分かると思いますので、早速やっていきましょう！

ここでは、曜日が選択できるようなドロップダウンリストを作成していきます。

Dropdownエレメントをドラッグ＆ドロップしてエレメントをダブルクリックすると、このようなプロパティーが表示されます

「Placeholder」に曜日を選択と入力します

次に、「Choices（選択肢）」に曜日を入力していきます。

入力ができたらプレビューで見てみましょう

こちらをクリックしてドロップダウンリストを表示させてみましょう

このように先ほど選択肢に入力した、曜日が選択できるようになりました

選択するとこんな感じです

ドロップダウンエレメントの解説を動画で見たい方はこちら

https://youtu.be/naglvEeR2M4

Radio Buttons（ラジオボタン）

Radio Buttonsエレメントの解説をしていきます！

これは説明するまでもありませんが、ラジオボタンが設置できます。

Dropdownエレメントをドラッグ＆ドロップしてエレメントをダブルクリックすると、このようなプロパティーが表示されます。

このようにデフォルトでラジオボタンが１つ設置されています

「Choices（選択）」に、曜日を入力します（なんでもOKです）

入力したらプレビューを見てみましょう！

このようにラジオボタンができました。

ラジオボタンエレメントの解説を動画で見たい方はこちら

https://youtu.be/ftfY-2ILi00

Picture Uploader（画像のアップローダー）

続いて、画像をアップロードできるエレメントの解説です。

Picture Uploaderエレメントをドラッグ＆ドロップしてエレメントをダブルクリックすると、このようなプロパティーが表示されます。

お好きなテキストを入力（そのままでもOK）

入力したら、プレビューで見てみましょう！

クリックして、画像を選択します。

選択した画像がアップロードされました。

Picture Uploaderエレメントの解説を動画で見たい方はこちら

https://youtu.be/B_RgpzU7XFQ

Elements tree（エレメントツリー）

最後にエレメントツリーの解説をします！

エレメントツリーでは、各エレメントの親子関係などを一覧でみれます。

この部分です。

「グループテスト（親）」に「テキスト（子）」＋「ボタンテスト（子）」＋「アイコンテスト（子）」＋「アラートテスト（子）※非表示」が入っていることをあらわしています。

親である、「グループテスト」の「＋」をクリックします

そうすると、子であるエレメントが表示されます

アラートやポップアップなど、何かのアクションが起こった時に、表示される性質を持ったエレメントは、非表示になっています。

このような非表示のエレメントを表示させたい場合は、こちらをクリックして表示させます。隠す時も同様です。

エレメントの数が増えてきたときに、ページの構造が一覧で見れるので便利です。

bubbleの使い方を解説【良く使う基本操作の勉強】

ここのパートでは、bubbleで作成を進めていく中で良く使う基本操作を解説していきます。

便利なものが多いので、おさえておきましょう！

動画の方が分かりやすいので、下記の動画でご覧ください。

解説している操作はこの１０個です

①水平方向に中央配置

②垂直方向に中央配置

③複製（コピペ）

④横幅を等間隔にそろえる

⑤縦幅を等間隔いそろえる

⑥グループ化の方法

⑦Gurid＆bordersの設定

⑧エラーが起こった時の対処方法

⑨リファレンスの使い方（参考文献）

⑩エレメントタイプの変更方法

動画はこちらから（10分程）

https://youtu.be/X8otIFvihjw

bubbleの使い方を解説【Workflow（ワークフロー）の勉強】

このパートでは、bubbleのWorkflow（ワークフロー）の使い方を、画像と動画で解説していきます！

Workflow（ワークフロー）は、

ユーザーがサイトやアプリを操作した時に、どんな処理を行うか定義できます。

なんだか良くわからないと思いますので、

実際にワークフローを作りながら解説していきます！

つくってみるワークフローは以下の４つです。

①ボタンを押すと指定したアクションが起きるワークフロー

②クリックすると別のページに移動するワークフロー

③ユーザー登録をしてそれをデータベースに保存するワークフロー（サインアップ）

①ボタンを押すと指定したアクションが起きるワークフロー

まずは簡単なところからで、ボタンを押した時に指定したアクションが起きるようにしてみましょう！

まずは「Textエレメント」と「Buttonエレメント」を下記のように配置してください。

テキストに書いてある通りですが、「ボタンが押されたら、テキストエレメントは消える」ようにワークフローをつくっていきます。

ボタンを押した時にアクションが起こるようにします。

ボタンエレメントのプロパティーを開いて「workflow」を選択します。

Workflowタブに移動します

「When～～」の部分は、「いつ起こすアクションですか？」→「ボタンをクリックしたときです」になります。

「Click here to~~」をクリックしてアクションを定義していきます。

今回は、ボタンエレメントが押されたときにアクションを起こしたいので、「Element Actions」を選択

ボタンが押されたら消したいので「Animate」を選択

※Hide（隠す・非表示にする）でも同じことができます

「どのエレメントにアニメーションを付けますか？」なので「Textエレメント」を選択

「どんなアニメーションを付けますか？」なので今回は消したいということで「Fadeout（フェードアウト）」を選択

「ボタンが押された時」→「Textエレメント」を「フェードアウト」させる

とワークフローをつくりました。

「Preview（プレビュー）」で動きを確認してみましょう！

ボタンをクリックします

そうすると、、、

消えました！

Textエレメントが消えた（フェードアウト）したので成功ですね！

動画で見たい方はこちらから

https://youtu.be/8ZoS2OzfCRY

②クリックすると別のページに移動するワークフロー

次に、クリックすると別のページに移動するワークフローをつくってみましょう！

今からやることのイメージは、企業のホームページなどにあるメニューボタンで、

例えば、「企業概要」をクリックすると「企業概要ページ」に移動しますよね。

そんな事をイメージして頂けると良いかなと思います。

まずは、下記のように、Textエレメントを作成してください。

テキストの内容や色、形などは何でもOKです。

次に移動先のページを新しく作ります。

ちなみに今は「indexページ」にいます。

画面左上にある、「Page」の「▼」をクリックします

「Add a new page」で新しいページをつくります

新しいページ名は、「sample」

「Clone from（コピーするページ）」で先ほどまでいた、「index」を選択

「CREATE」をクリックすると新しいページが作成できます。

ページが「sampleページ」に変わりました。

ページが移動したことがわかりやすいように、テキストと色を変更しておきます。

「indexページ」に戻り、ワークフローを設定していきましょう！

「workflow」をクリック

Workflowタブに移動します

「When～～」の部分は、「いつ起こすアクションですか？」→「Textをクリックしたときです」になります。

「Click here to~~」をクリックしてアクションを定義していきます。

どこに移動するか指示をしたいので、「Navigation」を選択し

どこのページに移動するか選択したいので、「Go to page」をクリック

「Destination（行き先）」で移動したいページを選択します。

sampleページに移動させたいので、「sample」を選択

「Text testエレメントがクリックされたら」→「sampleページへ移動する」というワークフローをつくりました。

ここまでできたら、プレビューで動きを確認してみましょう。

「index」ページではこのように表示されています。

このテキストをクリックしてみます。

無事に、「sample」ページに移動しました！

動画で見たい方はこちらから

https://youtu.be/faBJvAz_HI4

③サインアップのワークフロー

続いて、ユーザー登録をした時に、そのユーザーの情報をデータベースに保存するワークフローの解説をしていきます！

つまり、サインアップ（Sign up）ですね。

事前準備

ワークフローをつくるための準備を先にします。

まずこのように、「Textエレメント」「Inputエレメント」「Buttonエレメント」を配置してください。

配置できたら、このあと１つずつ設定していきます。

まずは、Textエレメントです。

エレメントをダブルクリックして、「ユーザー登録」と入力

Inputエレメントに、「ユーザー名」と入力

ユーザー名の下のInputエレメントに、「メールアドレス」と入力

Content formatは「Email」を選択

ここはメールアドレスを入力するところですよとします

メールアドレスの下のInputエレメントに、「パスワード」と入力

Content formatは「Password」を選択

ここはパスワードを入力するところですよとします

ボタンの名前は、「Sign up」としておきます。

これでワークフローをつくるための事前準備は完了です。

続いてワークフローをつくっていきましょう！

ワークフロー（Workflow）の設定

ワークフローの設定をしていきます。

先ほど準備したので、現在このような状態になっていると思います。

ここから、

「Sign upボタンを押すと、ユーザー名が表示される。さらにそのユーザー情報がデータベースに保存される」

というワークフロー（Workflow）をつくっていきます！

Sign upボタンにワークフローを設定していきます！

Workflowタブに移動します

「When～～」の部分は、「いつ起こすアクションですか？」→「Buttonをクリックしたときです」になります。

「Click here to~~」をクリックしてアクションを定義していきます。

今回のワークフローはアカウント関係なので、「Account」を選択

アカウントのSign upをしたいので、「Sign the user up」を選択

アカウントを登録するには、「Email」と「Password」が必要なので設定します。

まずは、Emailです。

先ほど作成した、「Inputメールアドレス」の、メールアドレスを登録したいので、「Input メールアドレス」を選択

「value（値）」を選択

同じようにPasswordも設定していきます

これで設定は完了です。

「Sign upボタンを押したら」→「フォームに入力されているユーザーを」→「Sign upする」というワークフローをつくりました。

プレビューで動作を確認してみましょう！

このようにお好きな、「ユーザー名」「メールアドレス」「パスワード」を入力

「Sign upボタン」をクリック

何が起きたか良く分からないと思いますが、上の方に横に線が走ったと思います

これで、入力したアカウント情報が、Sign upされました

データベースで確認してみましょう！

データベースタブをクリックしてデータベース画面に入ります

「App data」タブに先ほど登録したメールアドレスが入っています

ちゃんと登録されてますね！

もしなにも出てこない時はここをクリックしてページを更新してみてください。

サインアップのワークフローの解説を動画で見たい方はこちら

https://youtu.be/kTSeErvfmPA

bubbleの使い方を解説【Data（データベース）の勉強】

この記事は、bubbleの「データベース」について、画像と動画で解説しています。

bubbleはデータベースもデフォルトで実装されているので、非常に便利ですね(^▽^)/

ここでは、初心者の方でも分かりやすく

・ユーザー情報をデータベースに登録する方法

・データベースに登録されている、ユーザー情報を呼び出してリストを作成する方法

をやっていきたいと思います！

データベースの使い方の他に、「エレメント」や「ワークフロー」も使っていきますので、bubbleの色々な機能が勉強できるようになっています。

それで早速やっていきましょう！

ユーザー情報をデータベースに登録する方法

まずは、ユーザー情報をデータベースに登録する方法をからやっていきます！

このあとは、下記のような流れで作業していきます。

①Sign upフォーマットの作成

②データベースの準備

③ワークフローの設定

④ユーザー登録

⑤データベースの確認

それではやっていきましょう！

①Sign upフォーマットの作成

サインアップフォーマットの作成からやっていきます。

まずはこのように、「Textエレメント」「Inputエレメント」「Buttonエレメント」を配置してください。

配置できたら、このあと１つずつ設定していきます。

まずは、Textエレメントです。

エレメントをダブルクリックして、「ユーザー登録」と入力

Inputエレメントに、「ユーザー名」と入力

ユーザー名の下のInputエレメントに、「メールアドレス」と入力

Content formatは「Email」を選択

「ここはメールアドレスを入力するところですよ」とします

メールアドレスの下のInputエレメントに、「パスワード」と入力

Content formatは「Password」を選択

「ここはパスワードを入力するところですよ」とします

ボタンの名前は、「Sign up」としておきます。

これで、Sign upフォーマットができました。

②データベースの準備

続いて、データベースの準備をしていきます。

まずは、データベースにユーザー情報を登録する準備をしていきます！

Excelのような表にどんどんデータを蓄積していくようなイメージです。

Dataタブでデータベースを開いて、「New type」で新しいデータタイプを作ります。

今回は「テストユーザー」としました。（なんでもOKです）

続いて、登録されるデータのフィールドを作っていきます。

Excelでいうところの、セルに項目を作っていくようなイメージです。

「Create a new field」をクリック

フィールド名とフィールドのタイプを設定していきます。

今回は、「ユーザー名」と「メールアドレス」と「パスワード」の３つを作りたいです。

まずは、「ユーザー名」です。タイプは「text」でOK。

「メールアドレス」でタイプは「text」

「パスワード」でタイプは「text」

これで、ユーザー情報を登録する受け皿ができました。

続いて、実際にSign upをしていきましょう！

③ワークフローの設定

次に、ワークフローの設定をしていきます！

Buttonエレメントのプロパティーを開いて、「workflow」をクリック

Workflowタブに移動します

「When～～」の部分は、「いつ起こすアクションですか？」→「ボタンをクリックしたときです」になります。

「Click here to~~」をクリックしてアクションを定義していきます。

Sign upボタンをクリックしたら、「データベースに情報を登録したい」ので「Data」を選択

新しい情報を登録したいので、「Create a new~~」をクリック

データベースのタイプは、前のパートで作成した、「テストユーザー」を選択。

「ここに情報を登録していきますよ」ということ。

次に、データベースのフィールド（先ほど作成した）にどの情報を紐づけるかを設定していきます。

「Set another field」をクリック

新しく設定できるようになりますので、「Click」をクリック

ますは、データベースのどのフィールドに、情報を登録するか選びます。

先ほど作成した、「ユーザー名」を選択

「Click」をクリック

今度は、データベースの「ユーザー名フィールド」にどの情報を紐づけるかを設定します。

「Inputユーザー名」（先ほど作成した）の情報を紐づけますと設定します。

最後に「value（値）」を選択

これで

データベースの「ユーザー名フィールド」に「Inputユーザー名」の「値」を登録してください

というワークフローができました！

このあとは、「メールアドレス」と「パスワード」も同じように設定していきましょう！

このように、「ユーザー名」「メールアドレス」「パスワード」ができたら、ワークフローの設定は完了です！

④ユーザー登録

それでは、プレビューから実際にユーザー登録をしてみましょう！

プレビューに移動しました。

必要な情報を入力しましょう！（名前に深い意味はありません(^^;）

入力したら、「Sign up」のボタンをクリックで、データベースに情報が登録されます。

動作したかわかり辛いですが、ボタンを押せば大丈夫です。

これを、嵐のメンバー全員やってみましょう！

⑤データベースの確認

最後にちゃんと、データベースに登録されているか確認しましょう！

Dataタブに移動します。

「App data」タブの「テストユーザー」を選択

先ほど入力した5名の情報が入っていれば成功です！

もしなにも出てこない時はここをクリックしてページを更新してみてください。

動画で見たい方はこちらから

https://youtu.be/BSwOu7E9W70

②データベースに登録されている、ユーザー情報を呼び出してリストを作成する方法

このパートでは、先ほど登録したユーザー情報を呼び出して、リストを作ってみましょう！

前のパートの確認がまだの方は先にお願いします。

Repeating Groupエディターを使って、「名前」と「メールアドレス」のデータを呼び出します。

まずは、Repeating Groupをエディターに設置しましょう。

これから先ほど作ったデータベースから、嵐メンバーの名前を呼び出していきます

メンバーは５人なので、「Rows（行）」を５にして行を増やします

「Do a search for」を選択して、どこからデータをひぱってくるか設定します

先ほどデータベースで、「テストユーザー」とデータを作ったのでこちらを選択

次にRepeating Groupに嵐のメンバーの名前を表示させるために、「Text」を使います

このように、Repeating Groupの一番上の行にテキストを入れます

「Insert dynamic data（動的データの挿入）」をクリック

「Current cells テストユーザー（現在のセルの）」を選択

「ユーザー名」を選択

データベースの「テストユーザー」から「ユーザー名」をひぱってくるように設定しました。

続いて、名前の横に「メールアドレス」を表示させる設定をしていきます

先ほど名前を表示させるTextエレメントをコピペして配置します

先ほどの動的データが残っている場合は削除して、新たに設定していきます。

「Current cells テストユーザー（現在のセルの）」を選択

今度は「メールアドレス」を選択

データベースの「テストユーザー」から「メールアドレス」をひぱってくるように設定しました。

これで設定は終わりましたので、プレビューで動作を確認してみましょう！

このようにデータベースの情報を表示させることができました！

動画で確認したい方はこちらから

https://youtu.be/3w7JpVrqnos

これでデータベースの解説をおわります！

bubbleの使い方を解説【実践編】

この記事は、bubbleが用意しているレッスン（チュートリアル）の初心者むけのものを実際にやっていきます。

何をやっているのかもその都度解説していきますので、初心者の方でも分かりやすくなっています。

こんな方におすすめです

・レッスンやってみたけど、英語だし何やってるのか分からなかった方

・bubbleでどんなことができるのか知りたい方

・bubbleの操作を勉強したい方

この記事でできることは、こんな感じです。

入力した住所をGoogleマップに表示させる方法を勉強
サインアップ・ログイン・ログアウト機能をつくる方法を勉強
投票アプリをつくる方法を勉強
スライドショーの設置方法を勉強
データベースに画像を保存し、その保存された画像を表示させる方法を勉強
色々な動作に条件を加える方法を勉強（条件分岐）
外部APIを使って「iTunes」の曲を表示させる方法を勉強
データをチャート表示するための方法を勉強

このあと、レッスン（チュートリアル）を１つずつ解説していきます！

bubbleの基礎から勉強したい方は、先にこちらの記事で一通り勉強することをおすすめします。

レッスンは、①から順にやっていくことをおすすめします。