ノーコーダーのつかさです。
前回に引き続き便利なRepeating Groupの使い方について学んでいきます！
今回学ぶのは画像のアップロード及びデータベースへの保存、そして保存された画像をRepeating Group内で表示する方法です。
bubbleって何？という方やノーコードってなんだという方はまずはこちらの記事を参考にしてみてください！
と、その前にアカウントをまだ持ってないという方はこちらからアカウントを作成しましょう。
画像をアップロードするための要素を配置
まずはいつもどおり見た目から作っていきましょう。
- Input：「画像名」を入力する欄
- Picture Uploader：画像をアップロードする欄
- Button：画像を保存するボタン
左のElement Paletteから上記の要素を選び配置していきましょう！同時にInputのAppearanceには「画像名」、ButtonのAppearanceには「保存」と入力しておきます。
次に「保存」Buttonの設定からStart/Edit workflowをクリックしてください。
すると「保存」Buttonを押した時の処理を記述できるワークフロー画面に遷移します。今回はButtonを押した時にInput欄に入力された画像名とPicture Uploaderでアップロードされた画像を保存するという処理を記述します。
データベースを作成する
まずはデータの受け皿となるデータベースを作っていきましょう。以下の順番でデータベースを作ってください。
- Click here to add an action
- Data(Things)
- Create a new thing
するとデータベースの設定画面を現れるので以下の通り設定していきます。
- Type：Photo
- Set another fieldをクリック
- Create a new fieldをクリック
- Field name：title
- Field type：text
- CREATEをクリック
※名前はわかりやすいものであればなんでも構いません
これでtext型のデータを保存するためのtitleという項目を持つPhotoデータベースを作成することができました。同様にimage型(画像)のデータを保存するためのphotoという項目を追加しましょう。
- Set another fieldからCreate a new thing をクリック
- Field name：photo
- Field type：image
- CREATEをクリック
データベースが作れたので、後はデータベースに登録するデータをどこから取得するのかを設定します。Photoデータベースの設定から以下のように入力しましょう。
- title(画像名) = input 画像名’s value
- photo(画像) = PictureUploader A’s value
それぞれ右側の①と②に入力された値をデータベースのtitle及びphotoという項目に保存するという記述になります。
画像データを呼び出して表示する
最後にデータベースから画像名と画像データを呼び出してRepeating Group内で表示するという処理を記述していきましょう！
左のContainersからRepeating Groupを選び下のように設定してみましょう。
- Repeating Groupを配置
- Type of content：image型を選択
- Data source：Search for Photo’s photoと入力
- Rows：3
- Columns：2
ここではRepeating Group内で表示されるデータをどこから取ってくるのかについて記述しています。Data sourceのSearch for Photo’s photoという部分がそれですね。
PhotoデータベースのphotoフィールドのデータをこのRepeating Group内で使うという意思表示です。
またRowsとColumnsをそれぞれ変更してRepeating Groupの形を3列2行としています。
Repeating Groupの設定が完了したら、最後にimageをRepeating Group内に配置しDynamic imageをCurrent cell’s imageに設定します。
- imageをRepeating Group内に配置
- Dynamic imageをCurrent cell’s imageに設定
これで完成です。Previewを押して使い方を確認してみましょう！
うまく表示されましたか？
まとめ
今回はRepeating Groupで画像を表示するという作業を行いました。画像があるとWebサイトが華やかに見えるようになるので、ぜひ使い方をマスターしておきましょう！
それではEnjoy NoCode!
コメント