はじめに
Bubbleというノーコード/ローコードでアプリを作るサービスがあり、ちょっと言葉に癖があったりするので、チュートリアルをやってみる記録です。Bubble用語は、Bubbleのように網掛けします。
なるべく細かくキャプチャしていくので、見るだけでもBubbleってこうやるんだと感じていただければ。
これまでのチュートリアルをやってみた記事
-
Saving data
- 位置情報をDBへ登録して、地図にマーカーを表示
- データのInsert
- 地図
-
Building a sign-up system
- ユーザー登録とログイン、ログオフ
-
Saving and modifying data
- SNSっぽい、投稿といいね
-
Repeat Groupの利用 - データのInsert、Update
-
Building a slideshow
- スライドショー形式のアプリ
-
Pluginの利用
-
Sending data to pages
-
Data（Things、DBのデータ）の共有
-
-
Using conditions
- 条件の利用
-
Defining a field as a list of things
- リストの利用
-
Using external APIs ＜＜今回＞＞
- 外部APIの利用
チュートリアルの記録
チュートリアルを選択
ログイン後のトップページ
＞ 左メニューのAcademy
＞ Learn your way
＞ By watching
＞ Interactive lessons
＞ Using external APIs
今回のサブタイトルは、「Search for songs in the iTunes API」です。
API！使いたいです！！
待ってました！！
いやみんなそうなんじゃないですか。今回やるiTunesのAPIを使いたい人は多いか少ないかわからないけど、例えば、会社で使うニッチなCRMとか新しいサービスは、出来合いのプラグインなんてないだろうから。
ちなみに私はそういうプラグインを作りたいなーと思うので、そういう視点でも今回のチュートリアルは楽しみです！
ん？前回のGiphyってなんだろう。
飛ばしちゃったのかなと思って見返したけど、なかった。変わったんですね。
ちなみにGiphyは、アニメーションGIFを検索・共有できるサービスとのこと。ちょっと気になるから見ちゃうｗ
そういえばTeamsでこういうの出てたから、こういうところから提供されるのかもしれませんね。kitten（子猫）とかで検索し始めると時間浪費がやばい。（脱線）
Bubbleに戻って、Giphyのpluginを検索してみたら３つもあった！そんなに必要！？（脱線２）
さて、チュートリアルでもやるか。Start！
音楽を探すための入力ボックスを作成
Inputフォームを置いただけです。
写真のグリッドを作成
"Repeating Group"！以前やったチュートリアル５で、画像をWindowsのエクスプローラーでアイコン形式のようにサムネイルを並べられないかなって思ってたけど、今回それかもしれません！
今まで、"大きめに"置いてとか言われることはあったけど、最大の表現が来た。ページ全体を覆う。。
かなり大きめにしてやりました。
Shiftを押しながら四角形を描くと、正方形になった。
３行２列・・・？少なくないか？なぜスクロールしないで固定させるのかわからないけど、言われるがままやってみましょう。
次はiTunesからデータを取る・・・あれ？プラグインを使いそう？APIを使って取るんじゃないの！？
iTunesからデータを取得するPluginをインストール
うーん、installしてしまった。ちょっと期待と違うかもしれませんが進みましょう。
Repeating Groupを設定
"Type of content"を、iTunes Songにするんだそうです。"Type of content"と次の"Data source"の違いについては、前回のチュートリアル7でよくわかったところでした。まず型を決める。
なお、この型を、プラグインで独自に作れるようですね。これは使える予感。
ここで"API"っていう言葉が登場！
プラグインが"API"を隠蔽するのかと思いきや、思いっきり出ちゃうのか。
"Get iTunes songs"っていうサブダイアログが出て、その中で、"API provider"で"Get iTunes songs"。そしてそのAPIに渡す検索ワードを"Insert dyanmic data"で指定してますね。
このプラグインを使う人にとっては、iTunesから取得するプラグインをインストールした後、どのAPIを使う？＝iTunes、という流れが２度手間になっているので、「？」が浮かびます。"API provider"の選択ってなんだろう。
一方、プラグインを作ろうという視点で見ていると、これをどうやって指示ささせるのか、中身が気になりますｗ
わからない点はありますが、次に"Repeating Group"の中身のようです。
"Repeating Group"の１要素を設計
わぁ！これ！！またテキストのリンクかな。画像をタイルのように並べてほしいのに。
お！今回のタスクは"'s Track title"だけど、下の方に"'s Album image"がある。もしチュートリアルはタイトルだけだとしても、改造して画像も出そう。
リンクの行き先で、このページ内か別のページかを指定します。ページ内っていうのは、ロードせずスクロールだけするやつですね。
リンク先は、"Current cell's iTunes Song's URL"。
別窓で開くにチェック。
はいおしまいー！
やっぱ画像はなかった。確認後に改造しよう。
Previewで動作確認
朝ドラの主題歌を今 B'z が歌ってるので、検索してみた。そのタイトルの"イルミネーション"が出ていないようです。。
クリックしたら、music.apple.comのページが別窓で開くので、正しく動作しているようです。
見た目については予定通りだけど、"Repeating group"をページ全体を覆うサイズにしてって言ってこれ、画像を置く改造をしてみなさいと言っているようにしか聞こえない。
画像も表示するように改造
ということで・・・画像を置いてみた！サイズもちょっと変更して。
お・・おぅ。でかい。
あ、サイズの高さ指定は、最小サイズだった。幅に合わせるっていうチェックが入ってたので、"Min height"を気持ち小さ目にして、"Max height"をぴったり入る高さにしてみた。
できた！
５／６が同じ画像なのは、アルバムの画像だからですね。楽曲検索で、画像はアルバムしかないという、そうなんだろうけど、ちょっと微妙。せめてアルバム名を出したい。
ということで、"Album image"の下に、"Album title"を入れてみました。
センタリングしたはずだけど、、細かいところはまぁいいか。技術的な方法が見えている改造が長くなっちゃうのもナンなので。
今回はここまでとします！
おわりに
今回は、生のAPIを呼び出すというわけではなく、Pluginを使って、間接的にiTunesのAPIを呼ぶ形でした。画面左のメニューに、API Callをするアイコンがないのでまぁできないか。ちなみにPluginの開発画面にはあります。
APIを呼び出すタイミングについて思い返してみると、「APIを呼ぶ！」というイベントがあるわけでなく、"Repeating group"で"Data source"で、プロパティを指定しただけでした。
サブダイアログの"Term to search"の内容が変わったときに、内部的に「APIを呼ぶ！」なんでしょうね。
似たようなプラグイン（あるかわからないけどYoutubeMusicとか）を入れた場合、サブダイアログで"Get iTunes songs"以外に"Get Youtube Musics"がある中で、"iTunes"を選ぶことで、"iTunes"のプラグインを使うという選択になるのかな。そんな気がする。
あとプラグインの使い方の話ですが、B'zの楽曲は山ほどあるのに、見つけた順の６個より後のは、どうなってるんだろうか。本当は全部ゲットできていても、７個め以降は捨ててるとか？それらを見るためにはどうしたらいいのか。
もしこのプラグインをまじめに使うなら、調べないといけないですね。
個人的には、プラグインの開発練習も、こういうチュートリアルの隙間でちょいちょいやっています。相乗効果＆気分転換で、学びが進んでていい感じです。
では、よきBubble音楽ライフを！
