ノーコードで有名なBubble。
何から始めていいのか分からない。
登録したけどどうすればいいのか分からない。
まずはレッスンチュートリアルから始めるのがいいです。
ここではレッスンの「Using external APIs」について書いています。
Using external APIs
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m10d_202555536.jpg)
Using external APIsは、外部APIの使用を行います。
Search for songs in the iTunes APIは、iTunes APIで曲を検索します。
所要時間:3 minutes(3分)
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m10d_202732504.jpg)
まず、エディター内にテキスト入力を描画します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m10d_203033340.jpg)
Input(入力)をクリックします。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m10d_203048769.jpg)
矢印の部分に、入力フォームを描きます。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m10d_203122754.jpg)
次に、Ropiting Group(繰り返しグループ)をクリック。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m10d_203144245.jpg)
矢印の上にグループを正方形で描きます。ページ全体をカバーするようにします。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m10d_203750089.jpg)
Rows(行)を3にして、Columns(カラム)を2にします。
次に、iTunesプラグインを使用します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m10d_204159976.jpg)
プラグインを選択します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m10d_204206330.jpg)
Add pluginsをクリック。
プラグインが表示されます。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m10d_204440139.jpg)
iTunesプラグインをインストールし、DONEをクリックします。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m10d_204817799.jpg)
iTunes Songを選択。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m10d_205024511.jpg)
Get data from an external external API(外部からAPIデータを取得する)を選択。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m10d_205220398.jpg)
プロバイダーをGet iTunes songsにします。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m10d_205558878.jpg)
Term to search(検索する用語)をTerm Inputの’s value(期間入力の値)にします。
次に最初のセルを設計します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m10d_205820271.jpg)
Visual elementsのLinkをクリックします。
最初のセルにリンクを挿入します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m10d_210001549.jpg)
リンクの枠を描きます。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m10d_210326246.jpg)
Insert dynamic data(動的データ挿入)をクリックして、曲のタイトルを表示します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m10d_210605491.jpg)
Current cell’s iTunes Song(現在のセルのiTrnesソング)を選択し、’s Track title(トラックタイトル)を選択。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m10d_210712158.jpg)
Link destinationをExternal URLにします。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m10d_211145379.jpg)
Destination URLをInsert dynamic data(動的データ挿入)をクリックして、Current cell’s iTunes Songを選択し、’s IRLを選択。
最後にOpen is a new tab(新しいタブで開く)にチェックを入れます。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m10d_211150877.jpg)
プレビューをクリックしてアプリをテストします。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m10d_211447129.jpg)
表示されたアプリがこちらです。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m10d_211544551.jpg)
検索窓に曲名を入力します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m10d_211725006.jpg)
下に曲が表示されました。クリックするとiTunesに飛びます。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m10d_211805236.jpg)
曲を表示して、聴くこともできました。
Using external APIsでは、外部API(iTunes)の使用を行いました。
動画解説
Bubbleのその他のレッスンはこちら
コメントを残す