ノーコードで有名なBubble。
何から始めていいのか分からない。
登録したけどどうすればいいのか分からない。
まずはレッスンチュートリアルから始めるのがいいです。
ここではレッスンの「Using APIs and sending data to groups」について書いています。
Using APIs and sending data to groups
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m09d_190454669.jpg)
Using APIs and sending data to groupsは、APIの使用とデータのグループへの送信です。
GiphyアニメーションGIFを検索します。
3 minutes(所用時間:3分)
バブルのプラグインを使用します。
アニメーションGIFを表示するアプリを作ります。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m09d_190512391.jpg)
スタートをクリックして始めます。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m09d_190721959.jpg)
左の要素からInput(入力)をクリックします。
矢印の上にフォームを作成します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m09d_191131547.jpg)
テキスト入力を描き、ユーザーが検索を出来るようにします。
画像のグリッドを作成します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m09d_191146877.jpg)
ユーザーが画像をクリックするとその下にアニメーションバージョンが表示されるように作ります。
繰り返しグループを描きます。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m09d_191434010.jpg)
Repeating Group(繰り返しグループ)
枠を描きます。高すぎず、ページと同じ幅にします。
Repeating Group形式を1行4列のグリッドに変更。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m09d_191914644.jpg)
行数を変更します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m09d_192031678.jpg)
行(Row)を1にして、列(Columns)を4にします。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m09d_192053914.jpg)
Plugins(プラグインタブ)を開いてプラグインを追加します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m09d_192437754.jpg)
Add plugins(プラグインを追加)をクリック。
プラグインの中からGilphyを選択します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m09d_192749883.jpg)
Installをクリック。
DONE(完了)をクリック。
プラグインにはキーが必要です。
キーを入力します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m09d_193010893.jpg)
コンテンツのタイプでアニメーションGIFを選択。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m09d_193030528.jpg)
Data souce(情報源)をGet data from an external API(外部APIからデーター取得)を選択。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m09d_202250953.jpg)
APIプロバイダーをGiphyにします。
Team to searchをTeam Onput(期間入力の値)にします。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m09d_202557591.jpg)
‘s value(値)にします。
次に最初のセル設計をします。
Visual elements(視覚的要素)のimage(画像)を選択。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m09d_202950455.jpg)
セル内に画像要素を描画します。
グリッドのセルの設計
Dynamic image(ダイナミック画像)を動的データの挿入
Current csll’s animated GIFを選択。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m09d_203325786.jpg)
‘s still URLを選択。
Group(グループ)をクリックして、グループを描きます。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m09d_203511676.jpg)
ページ全領域をカバーするようにしてください。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m09d_203803961.jpg)
Type of content(コンテンツのタイプ)のAnimated GIFを選択。
グループ内に画像要素を描画します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m09d_204105383.jpg)
dynamic imageの動的データをクリック。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m09d_204206783.jpg)
Parent group’s Animated GIFを選択。
‘s animated URLを選択。
最後にグループに適切なGIFを表示するワークフローを定義します。
グリッド内の画像をクリックした時にワークフローをかいし。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m09d_204450244.jpg)
start/Edit workflowをクリック。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m09d_204526538.jpg)
Click here to add an actionをクリック
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m09d_204719839.jpg)
Element ActionsのDisplay dataを選択。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m09d_204931839.jpg)
ドロップダウンからダイナミックイメージグループを選択。
Current sell’s Animated GIF
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m09d_205057539.jpg)
最後にプレビューをクリック。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m09d_205250110.jpg)
入力します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m09d_205331361.jpg)
下にGIFが表示されます。
クリックすると下で動きます。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m09d_205404185.jpg)
このような感じで、GiphyアニメーションGIFを検索できます。
動画解説
今回は、バブルのチュートリアルレッスンの「Using APIs and sending data to groups」を紹介しました。
Bubbleのその他のレッスンはこちら
コメントを残す