ノーコードで有名なBubble。
何から始めていいのか分からない。
登録したけどどうすればいいのか分からない。
まずはレッスンチュートリアルから始めるのがいいです。
ここではレッスンの「Graduation lesson: a to-do app」について書いています。
Graduation lesson: a to-do app
Bubbleのチュートリアル卒業レッスンの「やることアプリ」の作製です。
ここでは、To-Doのアプリを作ります。
所要時間:7 minutes(7分)
a to-do appでは、タイトル入力からスタートして、基本的なデザインを実装していきます。
まず、a to-do appをクリックしてスタートします。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m14d_185937782.jpg)
要素パレットからテキストを選択します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m14d_190233539.jpg)
ページ上部の中央にテキストを描きます。かなり大きく描きます。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m14d_190420060.jpg)
名前をMy to-Doなどに変更します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m14d_190640687.jpg)
テキストフォントを大きくします。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m14d_190653896.jpg)
中央に配置します。
入力フィールドを作ります。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m14d_190812857.jpg)
要素パレットから入力をクリックします。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m14d_190854344.jpg)
タイトルの少し左に幅の広い入力フィールドを作成します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m14d_191648538.jpg)
Placeholder(入力プレースホルダー)をTo-Doに変更します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m14d_191759827.jpg)
Data/Time Picker(日付/時刻ピッカー)をクリックします。
入力フィールドの右側に作成します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m14d_201617938.jpg)
ボタンをクリックして、フォームを送信するボタンを作成します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m14d_201628162.jpg)
ボタンの文字をCreate(作成)にします。
ワークフローを作成します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m14d_201749705.jpg)
start/Edit workflow(ワークフローの開始/編集)をクリック。
ボタンがクリックされた時のアクションを追加します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m14d_202203890.jpg)
Click here to add an actionのDataのCreate a new thingを選択。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m14d_202330035.jpg)
TypeをCreate a new typeにします。Todoと入力。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m16d_212330572.jpg)
Set anther fieldをクリック。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m16d_212343429.jpg)
Create a new fieldを選択。
新しいフィールドを作成。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m16d_212348238.jpg)
フィールド名をTitleと入力。
フィールドタイプをtextを選択。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m16d_212423972.jpg)
CREATEをクリックします。
次に、新しいToDoを作成します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m16d_213009223.jpg)
Input Todo(入力Todo)、’s Valueをクリック。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m16d_213037098.jpg)
Set another field(別フィールドを設定)します。
もう一度新しいフィールドを作成します。
Create a new field(新しいフィールドを作成)します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m16d_213350898.jpg)
新しいフィールドを作成します。
フィールドネームを、Due date(期日)と入力します。
dateを選択します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m16d_213614580.jpg)
CREATEをクリックします。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m16d_213858920.jpg)
DatePicker Due Date(DatePicker期日)をクリックし’s Valueを選択します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m16d_213924548.jpg)
Set another field(別のフィールドを設定)をクリックします。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m16d_214032532.jpg)
Create a new fieldを選択します。
また、新しいフィールドを作成します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m16d_214111040.jpg)
フィールド名はFinishedにします。
フィールドタイプはyes/noを選択します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m16d_214306040.jpg)
CREATEをクリックします。
新しいTo Do を作成します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m16d_214650993.jpg)
Finishedをnoにします。
アクションを追加します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m16d_214852912.jpg)
Element Actionsを選択し、Reset inputをクリックします。
次にデザインをクリックします。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m16d_215106577.jpg)
Contaonersを選択して、Repeating Groupを選択し大きな枠を描きます。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m16d_215328130.jpg)
行を10にします。
Type pf contentをToDoにします。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m16d_215417656.jpg)
Data sourceをDo a search for(検索します)を選択します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m16d_215634858.jpg)
TypeをToDoにしてAdd a new constraintを選択します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m16d_220034143.jpg)
Finishedを選択し=を選択しnoをクリックします。
Sort byをDue dataを選択します。
次にテキストをクリックします。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m16d_220328797.jpg)
最初のセルにテキスト要素を追加します。
動的データの挿入をします。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m16d_220457858.jpg)
Current cell’s ToDo(現在のセルのToDo)を選択し’s Titleを選択します。
次にテキストを選択します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m16d_220645262.jpg)
同じように要素を追加します。右側に少しスペースを残します。
動的データの挿入をします。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m16d_221024491.jpg)
Current cell’s ToDo(現在のセルのToDo)を選択し’s dataを選択し、:formatted as 9/16/20 月/日/年の形式にします。
タスクを完了するボタンを作ります。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m16d_221313098.jpg)
テキスト要素の右側に追加します。
ボタンのキャプションをDone(完了)にします。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m16d_221527281.jpg)
Start/Edit workflow(ワークフローの編集)をクリックします。
アクションを追加します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m16d_221636627.jpg)
Whenをクリックします。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m16d_221712918.jpg)
Clic here to add an actionをクリックします。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m16d_221822872.jpg)
dataのMake changes to thingを選択します。
セルの仕事をCurrent cell’s ToDoに変更します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m16d_221925959.jpg)
Change another field(別のフィールドに変更する)をクリックします。
Finishedをクリックしyesを選択します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m16d_222102763.jpg)
デザインをクリックします。
パレットからリンクを選択します。
下に追加します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m16d_222255873.jpg)
最後にプレビューをクリックします。
完成したMy To Doです。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m16d_223125144.jpg)
To-Doに入力して、日付を入力しCreateをクリックします。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m16d_223144427.jpg)
カレンダーが出てきますので、日付を選択できます。
英語と入力して日付を選択しました。
その後、いくつかのワードを追加してみました。
※ Doneボタンの配置と文字が被ってしまっています。入力時にミスがありました。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m16d_223216831.jpg)
Done(完了)ボタンをクリックするとリストが消えます。
このような感じで、To-Doリストが作れます。
その他のBubbleレッスンはこちら
⇒ グラフ要素の使用
コメントを残す