ノーコードのバブルでサービス作ってみた【一部日本語訳記載してあります】

こういった方へ向けた記事です
①ノーコードで何かを作ってみたいが手順がわからない
②ノーコードのBubbleで何かを作ってみたいが手順がわからない
③ノーコードのBubbleで作成できるモノを知りたい

そもそもノーコードを知らない方はこちらを読むことをお勧めします。
【話題】エンジニアなら知っておくべき「ノーコード」とは?

目次
1.レッスンまでの手順
2.レッスンをやってみた
 2-1.Saving Data(データ保存)
 2-2.Building a sign-up system(サインアップシステムの構築)
 2-3.Saving and modifying data(データの保存と変更)
 2-4.Building a slideshow(スライドショーの構築)
 2-5.Sending data to pages(ページへのデータ送信)

Comming soon...

1.レッスンまでの手順

Bubbleを始めるならこちらからどうぞ(※別タブで起動します)
https://bubble.io/

①赤枠の欄に、メールアドレスを入力して「Get started for free」をクリックする。

②赤枠の欄に、パスワードを入力して「Get started」をクリックする。

③青いボタン「I agree to ~」をクリックする。

④「Start!」をクリックする。

➄チュートリアル?が始まります。×で現在のタブを閉じちゃっていいかもしれません。

⑥その後、再びhttps://bubble.io/welcomeを起動する。

すると、右のようにレッスンが沢山表示される。

2.レッスンをやってみた

2-1.Saving Data(データ保存)

(1)「Start!」をクリックする。

訳:ようこそバブルへ。バブルのデータベースはパワフルでアドレスを含むことなったタイプのフィールドを扱うことができます。それでは、地図上に場所を示すアプリを作成しようと思います。ユーザは住所を入力し、アプリはデータベースにそれを保存し、リアルタイムで地図上に表示します。

(2)「Start!」をクリックする。

訳:入力フォームを作成し、ユーザーが新規で場所を入力できるようにしましょう。

(3)左側のツールバーを下にスクロールする。

(4)Input Addressのplace holderに「address」と入力する。

(5)input Addressのchoices styleの「Geograpic places」を選択する。

Static choices…調査中です。

Dynamic choices…データベースに登録している値など、動的にデータを取得したい場合に使用する。

Geographic places…Google Places API を使用して地理的な場所を検索できる。(※日本語で検索できるように(5)-1をやっておく)

(5)-1 Settings タブの Languages から Application primary language を「Japanese(ja_jp)」を選択しておく。

(6)「Continue」をクリックする。

訳:入力フォームの構築。おめでとう、最初のエレメントを作成しました!気軽にドラッグして移動させたり、サイズの変更をしてください。次に進む準備ができたら「Continue」をクリックしてください。

(7)ツールバーを上にスクロールする。

(8)ツールバーから「Button」を選択して、先ほど配置したaddressテキストボックスの横に配置する。

(9)ボタンの名前を「save」と入力し、「Continue」をクリックする。

(10)タブ「Workflow」を起動し、「Click here to add an action…」をクリックする。「Data(Things)」⇒「Create new thing」をクリックする。

訳:「Data (things)」の「Create a new thing」を選択。これはユーザが入力した情報を保存するためのものです。

(11)Typeコンボボックスから「Create a new type」を選択し、「Location」と入力する。

訳:作成するもののタイプは「location」です。Typeで「Create a new type…」を選択し、「Location」と入力してください。

(12)「Continue」をクリックする。

訳:ユーザがボタンをクリックしたときはいつでも、新たにlocationを作成し保存する。次のステップは住所の保存です。

(13)「+Set another field」をクリックする。

(14)「Ckick」をクリックする。

(15)Field Nameに任意の名前(ここでは「test」)、Field typeは「geographic address」を選択し、「Create」をクリックする。

(16)「test = 」の後に「Input Address」「‘s value」を選択する。

(17)「Continue」をクリックする。

訳:よくできました!locationの住所を保存しています。次に進む準備ができていれば「Continue」をクリックしてください。

(18)「Click here to add action…」⇒「Element Actions」⇒「Reset inputs」をクリックする。

(19)「Continue」をクリックする。

訳:これで入力ワークフローの完成です。すなわち、ユーザがSaveボタンを押したとき、新しい「location」を作成し、ユーザが何を入力したかにかかわらず、入力されてた「住所」をセットする。そして、入力をクリアする。お疲れさまでした。

(20)「Design」タブ⇒「Map」⇒mapを配置する。

(21)mapの「Number of markers」は「List」を選択する。

(22)mapの「Type of markers」は「Location」をクリックし、「Continue」をクリックする。

(23)Data Sourceの「Click」をクリックし、「Do a search for」をクリックする。

(24)Do a search forのTypeに「Location」を選択する。

(25)MapのMap styleに「Apple map style」を選択し、「Continue」をクリックすると完成です。

では、動かしてみましょう!

(1)「Preview」をクリックして、動かしてみます。

(2)別タブでアプリケーションが起動しました。

(3)検索テキストボックスに「東京」と入力し、「save」ボタンをクリックすると、mapから東京を検索し、その位置にピンを立てます。

(4)検索テキストボックスに「Sendai」と入力し、「save」ボタンをクリックすると、mapから仙台を検索し、その位置にピンを立てます。

2-2.Building a sign-up system(サインアップシステムの構築)

前提として、サインアップとは、新しくサービス・システムを利用開始するときに会員登録することです。

(1)「Start!」をクリックする。

(2)「Input」をクリックする。

訳:要素パレットの「Input」をクリックしてください。

(3)「Input」コントロールを配置する。

(4)Placeholderに「Email」と入力する。

(5)同じように「Input」を配置する。

(6)Placeholderに「Password」と入力する。

(7)「Button」をクリックし、配置する。

(8)ボタンのキャプション(表示テキスト)を「会員登録」と入力する。

(9)もう一つボタンを追加し、ボタンのキャプション(表示テキスト)を「ログイン」と入力する。

(10)「会員登録」ボタンの「Start/Edit workflow」をクリックする。

(11)「Click here to add an action…」をクリックする。「When」は、「○○の時」つまりきっかけ(イベント)を指定する箇所です。

(12)「Account」⇒「Sign the user up」をクリックする。

Sign the user up 訳:ユーザをサインアップする

(13)「Email」に「Input Email」「‘s value」を選択する。

(14)「Password」に「Input Password」「‘s value」を選択する。

(15)赤枠をクリックする。「きっかけ(イベント)」を追加しましす。

(16)「Elements」⇒「An element is clicked」をクリックする。

An element is clicked 訳:要素がクリックされた

(17)「Element」において「Button Login」(ログインボタン)を選択する。

(18)「Click here to add an action …」をクリックし、「Account」⇒「Log(18)「Click here to add an action …」をクリックし、「Account」⇒「Log the user in」をクリックする。

Log the user in 訳:ユーザをログイン

(19)赤枠の部分が自動入力される。

(20)「Design」⇒「Containers」⇒「Group」をクリックする。

(21)「Group」を配置する。

(22)「Text」をクリックし、配置する。

(23)ここで案内の矢印どこだ?ってなったんですがw

右下のところにちゃんと矢印ありましたw

displaying the user’s e-mal 訳:ユーザの電子メールを表示する

you drew the element out of the group 訳:あなたはグループから要素を引き出しました

Drag it inside – the borders will turn red when you’re in the target area 訳:内側にドラッグしてください – ターゲット領域にいるとき、境界線が赤に変わります

(24)一旦、巻戻し矢印をクリックし、「Text」をクリックし直し、配置場所を赤いボーダーラインが出る場所に配置しました。

すると右のように進みました。

(25)「Text」の「Apperance」の一番上の枠をクリックし、「Current User」「‘s value」を選択する。

(26)「Button」を配置し、キャプション(表示テキスト)を「ログアウト」と入力する。

その後、「Start/Edit workflow」をクリックする。

(27)「Click here to add an action …」⇒「Account」⇒「Log the user out」をクリックする。

Logthe user out 訳:ユーザをログアウトする

(28)「Click here to add event…」⇒「General」⇒「User is logged in」をクリックする。

(29)「Click here to add action…」⇒「Element Actions」⇒「Show」をクリックする。

(30)ここでまた進まなくなったw

「Element」のコンボボックスをクリックして開いても指示が来ない。

Hinding the Group logged in 訳:ログインしたグループを非表示にする

looks like you entered the wrong thing.click to try again 訳:入力した内容が間違っているようです。クリックしてもう一度お試しください

(31)とりあえず「Group A」を選択したらエラーは消えた。

では、動かしてみましょう!

(1)「Preview」をクリックすると、別タブでアプリケーションが起動する。

(2)「E-maill」「Password」が未入力の状態で、「会員登録」「ログイン」をクリックしても、アラート文により制御されていることが確認できる。

(3)今度は「E-mail」に「aaa@gmail.ccc」と入力し、「会員登録」をクリックした。同じくアラート文により制御されている。

(4)今度は「E-mail」に「aaa@gmail.ccc」と入力し、「Password」に「aaa」と入力して「会員登録」をクリックした。

すると、右下の赤枠の場所に、「E-mail」に入力した内容が表示された。

(5)右下の「E-mail」の内容が表示されている状態で、「ログアウト」をクリックした。すると、右下の表示が非表示になった。つまり、右下にはログイン情報が表示されていたことになる。

2-3.Saving and modifying data(データの保存と変更)

(1)「Input」を配置する。

(2)「Input」のPlaceholderに「地域名」と入力する。

(3)「Button」を配置する。

(4)「Button」の表示テキストに「送信」と入力する。

(5)「Workflow」⇒「Click here to add an action」⇒「Data(things)」⇒「Create a new thing…」をクリックする。

(6)Typeに「New type: City」を入力する。

(7)「+Set another field」をクリックする。

(8)「Click」⇒「Create a new field…」をクリックする。

(9)Create a new fieldダイアログが起動する。Field nameに「Name」と入力し、Field typeに「text」を選択する。その後、「CREATE」をクリックする。

(10)Create a new Cityダイアログにおいて、「Click」をクリックする。その後、「Input City」「‘s value」を選択する。

(11)「+Set another field」をクリックする。

(12)「Click」⇒「Create a new field…」をクリックする。

(13)Create a new fieldダイアログが起動する。Field nameに「number」と入力し、Field typeに「number」を選択する。その後、「CREATE」をクリックする。

(14)「number = 1」と入力する。その後、「Click here to add an action」をクリックする。

(15)「Element Actions」⇒「Reset inputs」をクリックする。

(16)「Design」⇒「Repeating Group」をクリックし、「Repeating Group」を配置する。

(17)Type of contentにおいて「City」を選択する。

(18)Data sourceにおいて「Do a search for」を選択する。

(19)Do a search forダイアログにおいて、Textの「city」を選択する。

(20)続いて、sort byの「Number」を選択する。

(21)Descendingの「”yes”」を選択する。

(22)「Border style-all borders」において「Solid」を選択する。

(23)「Text」を「Repeating Group」内に配置する。

(24)上記(23)で配置したTextをクリックし、一番上の「search…」において「Current cell’s City」を選択する。

(25)上記(24)で選択した「Current cell’s City」の後に「‘s Name」を選択する。

(26)「Icon」を配置する。

(27)「Icon」の「Icon」において”ハートマーク”を選択する。

(28)「Start/Edit workflow」をクリックする。

(29)「Click here to add an action…」をクリックする。

(30)「Data(Things)」⇒「Make changes to thing…」をクリックする。

(31)「Make changes to City,,,」ダイアログの「Thing to change」において「Current cell’s City」を選択する。

その後、「+Change another field」をクリックする。

(32)「Click」⇒「number」を選択する。

(33)「Click」⇒「Current cell’s City」「‘s number」「+」「1」と選択&入力する。

では、動かしてみましょう!

(1)「Preview」をクリックする。

(2)このようなページが起動する。

(3)「地域名」と案内があるテキストに「茨城県」と入力し、右の青い「送信」ボタンをクリックしてみます。

(4)茨城県という文字の上にハートマークが表示された。見た目はこれで正解なのかわからないがとりあえず「茨城県」という文字列が保存された。これが”データの保存”なのか。

(5)続いて、「東京都」と入力し、「送信」ボタンをクリックした。また文字列の上にハートマークが表示された。

(6)次に「ハートマーク」をクリックしてみた。すると、クリックする度にハートマークの裏で「茨城県」と「東京都」が入れ替わっていることが確認できた。これが”データの変更”なのか。

ちなみに、このページを閉じて、再度「Preview」でページを立ち上げると、ハートマークと「茨城県」「東京都」という文字列は保持されていた。

2-4.Building a slideshow(スライドショーの構築)

(1)「Plugins」をクリックする。

(2)「+Add plugina」をクリックする。

(3)「Slack Sideshow」「Install」をクリックする。

(4)「DONE」をクリックする。

(5)「Design」をクリックする。

(6)「Sideshow」をクリックし、配置する。

(7)「Static image」の「Upload」をクリックする。

(8)上記(7)の画像には「ピザ」を指定する。

その後、「+Upload another image」をクリックする。

(9)2つ目の「Static image」の「Upload」をクリックする。

(10)上記(8)の画像には「ドリンク」を指定する。

(11)「Animation style」は「Fade」を選択する。

(12)「Border style-all borders」は「Solid」を選択する。

(13)「Width」は「10」を選択する。

(14)赤い斜線部分をダブルクリックすると、「index」というダイアログが表示される。

(15)「Background style」は「Flat color」を選択する。

(16)「Background color」は白(#FFFFFF)以外の任意の色を選択する。

では、動かしてみましょう!

(1)「Preview」をクリックする。

(2)左右の矢印をクリックすると、別の写真に変わる。

また、時間経過でも自動で別の写真に変わることが確認できる。

2-5.Sending data to pages(ページへのデータ送信)

(1)ここでは、画像を送信するアプリケーションを作成する。リンクをクリックしたとき、新しいページを開く。といったことが書かれていると思う。

(2)「Input」を配置する。

Input:テキストボックス

(3)「Input」の「Placeholder」に「Picture title…」と入力する。

(4)「Picture Uploader」を配置する。

(5)「Button」を配置する。

Button:ボタン

(6)「Button」のテキストを「Save」とする。

(7)「Start/Edit workflow」をクリックする。

(8)「Click here to add an action…」⇒「Data(Things)」⇒「Create new thing…」をクリックする。

(9)「Type」は「Create a new type…」を選択する。

(10)上記(9)に続けて「Photo」と入力する。

(11)「+Set another field」をクリックする。

(12)「Click」⇒「Create a new field…」をクリックする。

(13)「Field name」に「Title」と入力する。次に、「Field type」は「text」を選択する。その後、「CREATE」をクリックする。

(14)「Input Title」「‘s value」を選択する。

(15)「+Set another field」をクリックする。

(16)「Create a new field…」をクリックする。

(17)「Field name」に「Picture」と入力する。次に、「Field type」は「image」を選択する。その後、「CREATE」をクリックする。

(18)「Input Picture」「‘s value」を選択する。

(19)「Create here to add an action…」⇒「Element Actions」⇒「Reset inputs」をクリックする。

reset inputs:入力をリセットする

reset relevant inputs:関連する入力をリセットする

(20)「Design」をクリックする。その後、「Containers」⇒「Repeating Group」をクリックし、「Repeating Group」を配置する。

(21)「Type of content」は「Photo」を選択する。

(22)「Data source」は「Do a search for」をクリックする。

Data source:情報源

Do a search for:検索する

(23)「Type」は「Photo」を選択する。

(24)「link」を配置する。

(25)「Search…」をクリックして、「Current cell’s Photo」「‘s Title」を選択する。

(26)「Add a new page」をクリックすると、「Create a new page」ダイアログが起動する。

(27)「Page name」に「pic_detail」と入力し、「CREATE」をクリックする。

(28)「Type of content」は「Photo」を選択する。

(29)「Page title」を「My Page」⇒「Picture」へ変更する。

(30)「Image」を配置する。

(31)「Dynamic image」は「Current Page Photo」「‘s Picture」を選択する。

Comming soon…

こちらの記事もおすすめです
・【話題】エンジニアなら知っておくべき「ノーコード」とは?

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中