ノーコードで有名なBubble。
何から始めていいのか分からない。
登録したけどどうすればいいのか分からない。
まずはレッスンチュートリアルから始めるのがいいです。
ここではレッスンの「Saving and modifying data」について書いています。
Saving and modifying data
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_094511532.jpg)
Saving and modifying dataは、データの保存と変更のことです。
都市名に投票するアプリを作成します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_094248458.jpg)
Saving and modifying dataは、データベースの理解度を深めるレッスンです。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_094804627.jpg)
まず、Element palette(要素パレット)のinpt(入力)をクリック。
ページをクリック、ドラッグで入力要素を書きます。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_095110961.jpg)
次にPlaceholder(フォルダー名)をType a city name(都市入力)にします。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_095910790.jpg)
次にボタンを書きます。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_100116086.jpg)
Element palette(要素パレット)のButton(ボタン)をクリック。
横にボタンを描きます。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_100257818.jpg)
ボタンの表示部分をSubmit(送信)に編集します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_100526364.jpg)
コンテニューをクリックし、ワークフローを作成していきます。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_100702880.jpg)
start/Edit workfokw(ワークフローの開始/編集)をクリック。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_100903160.jpg)
次にイベントアクションを作成。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_101043869.jpg)
Data(データ)のCreate a new thing(新しいものを作成)を選択。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_101233939.jpg)
Typeのドロップダウンを開き、都市にします。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_101429072.jpg)
New Typeを作成しCityと入力。
ユーザーがボタンをクリックするたびに新しい都市を作成し保存するように、次は、都市名を保存するようにします。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_101704187.jpg)
Set another field(別のフィールドを設定)をクリック。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_102035983.jpg)
a new fieldを選択。
新しいフィールドを作ります。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_102309122.jpg)
Field name(フィールド名)にname(名前)と入力。
Field type(フィールドタイプ)をtext(テキスト)を選択。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_102702223.jpg)
選択したら、CREAT(作成する)をクリック。
次に新しい都市を作ります。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_103001093.jpg)
入力都市の値を入力します。Input City(入力都市)をクリック。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_103255817.jpg)
S’value(値)を選択。
次に、市の投票数を追跡するために2番目のフィールドを作成。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_103454536.jpg)
Set another field(別フィールド)を設定をクリックします。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_103915545.jpg)
新しい都市を作るために、クリック、Create a new field(新しいフィールド)を作成。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_103954278.jpg)
Field name(フィールド名)にVotesと入力。
Field type(フィールドタイプ)をnumberを選択。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_104254404.jpg)
選択したら、CREAT(作成する)をクリック。
次に新しい都市を作ります。
入力ボックスに「1」と入力してエンターを押して、最初の投票数を1に設定します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_104602981.jpg)
次にアクションを追加します。
Click here to add an action(アクションを追加)をクリック。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_104832526.jpg)
Element Actionsを選びRest inputs
次に都市のリストを表示します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_105235013.jpg)
Design(デザイン)をクリックしてデザインタブにいきます。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_105447013.jpg)
Containers コンテナセクションのRepeatingGroupをクリック。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_105503743.jpg)
矢印の部分に大きな枠を作ります。
次に、都市リストを作成。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_112955966.jpg)
都市のリストを作るので、Type of content(コンテンツタイプ)にCity(都市)を選択。
これで都市リストの表示が可能です。
次に、アプリで送信されたすべての都市を検索してみます。
都市の検索は、表示する都市とその順序を指定する必要があります。
Data source(データソースフィールド)で検索を実行します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_113631471.jpg)
Do a search for (検索する)を選択。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_113823845.jpg)
TypeをCity(都市)にします。
結果を投票数で並び変えます。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_114124043.jpg)
Votens(投票者)を選択。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_114407612.jpg)
Descending(降順)でYesを選択。
次に都市の検索をします。
スクロールさせます。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_114544719.jpg)
ボーダースタイルのドロップダウンでSoled(無地)を選択します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_114841141.jpg)
ここでは枠のサイズや色も変更可能です。
次にRepeatingGroupにコンテンツを追加します。
Textをクリックして、セル内のテキスト要素を書きます。
セルの境界線は、テキストがその中にあるときは赤に変わります。
insert dynamic data(動的データ)を挿入をクリックします。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_115816425.jpg)
Current cell’s City(現在のセルの市)をクリック。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_120039802.jpg)
s’name(名前)を選択。
次は投票するのアイコンを追加します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_124641716.jpg)
Iconをクリックして、アイコンを追加します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_124956054.jpg)
ハートのアイコンを選択します。
アイコンの色をつけたり、影をつけたりすることも可能です。
次に、アイコンをクリックしたときのワークフローを追加します。
start/Edit workfokw(ワークフローの開始/編集)をクリック。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_125312247.jpg)
Click here to add an actionをクリックし、アクションメニューを開き、Data データセクションを展開
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_125727518.jpg)
Make changes to thing’ action(アクションに変更を加える)を選択。
Thing to changeのセルの都市を変更します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_130022612.jpg)
Current cell’s Cityを選択。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_130125085.jpg)
Change another field(別のフィールドを変更する)をクリック。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_130425865.jpg)
投票フィールドを選択します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_130801851.jpg)
Votens(投票者)を選択し、値をCurrent sell’s City’s Votens +1(現在のセルの市の投票数+1)
‘s Votens(投票者)を選択。次に+、最後に1を入力。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_131043217.jpg)
以上で終了です。
最後にプレビューでチェックします。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_131159898.jpg)
表示されたのはこのような画面です。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_131424549.jpg)
都市を入力してSubmitをクリックすると下に表示されます。
東京と入力して表示させました。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_131556384.jpg)
ハートをクリックすると、カウントされます。
ハートの多いものが上に表示されます。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m07d_131837220.jpg)
都市名に投票するアプリができます。データの保存がされて、並び変えがされます。
動画解説
このレッスンは、「データーの保存と変更」でした。
Bubbleのその他のレッスンはこちら
コメントを残す