見出し画像

ノーコードツールBubbleでかんたんWebサービス構築 ~Lesson攻略2~

合同会社temp

こんにちは。合同会社tempです。
今回はプラグインについて紹介したいと思います。プラグインを利用することで、Bubbleにさらなるカスタマイズ性を持たせることができます！

Bubbleとは何ぞやという方は最初の記事を、
ノーコードツールBubbleでかんたんWebサービス構築 ~はじめの一歩~｜合同会社temp｜note

基本的な知識を知りたい方は前回の記事を読んでください！
ノーコードツールBubbleでかんたんWebサービス構築 ~Lesson攻略1 前編~｜合同会社temp｜note

Lesson(Building a slideshow)攻略

今回もBubbleが提供しているLesson(Building a slideshow)に取り組みながら解説していきたいと思います！
以下のリンクからBuilding a slideshowのStart buttonを押してください。Bubbleのアカウントがなくても、Googleアカウントからログイン可能です。
https://bubble.io/lessons

Lesson選択

完成イメージ

完成イメージ

これが完成イメージです。どうでしょう？見覚えがありませんか？
そう、企業のホームページでよく見かけますね。商品やサービスの紹介イメージをスライドで切り替わるようにして興味がある写真をクリックするとリンクで飛べるようになっていたりします(今回のLessonでは写真がスライドするだけです)。
　
さて、さっそく解説を・・・と言いたいところなのですが、実は解説することがありません・・・。それぐらい簡単に実現できるのです。

手順

手順だけを書くと次の3つだけで終わります。

  1. プラグインをインストール

  2. インストールしたプラグイン(Slick Slideshow)を画面上に配置

  3. 写真をアップロード

1.Pluginインストール
2.メニューにSlideshow追加される。これを画面に配置する
3.写真をアップロードする
完成!

プラグインまとめ

実際にLessonをやればわかりますが、悩むところが一切ありません！ほんの数分でスライドショーが実現できてしまいます！
もちろんこれだけでなく、Bubbleではプラグインが3500以上用意されています。これだけあればお目当ての機能もきっと見つかることでしょう！

このようにしてBubbleは拡張性を簡単・便利に実現してくれます。

Lesson(Using external APIs)攻略

APIの利用

プラグインの解説ついでに外部APIについても解説します。Bubbleでは外部APIはプラグインに内包されています。つまり、API用のプラグインが用意されているので、これをインストールすることで外部サービスを利用することができます。

Using external APIsというAPIを試すのに最適なLessonがあるのでさっそくやってみましょう！

https://bubble.io/lessons

Lesson選択

完成イメージ

完成イメージ

これが完成イメージになります。入力フォームに文字を記入すると、iTunesで提供している歌の中から一致した歌のタイトルとイメージ画像を表示してくれます。
外部APIを利用することで、iTunesのような外部サービスから情報を取得することができるのです。

すでにLessonを終えた方は「おや？」と思うかもしれません。実はLessonにおいては歌のタイトルは表示しますが、イメージ画像は表示されません。今回はおまけでつけてみました。

完成イメージ

手順

手順は次の通りです。Lessonの指示通りやるだけですが、Imageエレメントに関してはLesson上の指示には出てこないので注意してください。

  1. inputエレメントとRepeagGroupエレメントを画面上に配置

  2. プラグインをインストール

  3. RepeagGroupとAPI(iTunes)を紐づける

  4. RepeagGroup上にlinkとimageエレメントを配置

  5. linkとimageエレメントに対してAPIから取得したデータを紐づける

1.エレメントの配置
2. iTunesプラグインのインストール
3.RepeatingGroupとAPI(iTunes)を紐づける

RepeatingGroupについては別の記事であらためて解説しようと思っていますが、現状はRepeatingGroupのセルひとつひとつに対してAPIから取得したデータを個別に持っていると思ってください。

上図の左側のGet iTunes songsダイアログは、iTunes API独自の設定です。API毎にこの設定は異なり、今回は『Term to Search』しか設定項目はありませんが、複数の設定項目があるAPIもあります。

今回は検索ワードを指定するだけで一致した歌の情報を返してくれるので、検索したいワードが入力される入力フォームを指定します。

4.LinkとImageを選択
4.linkとImageを配置

RepeatingGroupにエレメントを配置する際は、一番左上のセルにだけ置いてください。そうすれば、ほかのセルは自動的に反映されます。それ以外のセルに置いても、RepeatingGroup上には配置できていないので注意しましょう。

5.Linkの設定
5.Imageの設定

ImageエレメントはDynamic image項目に『Current cell’s iTunes Song's Album image』を選択することで、APIから取得した画像を取得し、これを表示することができます。

完成!

APIまとめ

外部APIは外部サービスを利用したいときに利用する仕組みですが、Bubbleではこのようにプラグインを介してAPIを利用します。プラグインは簡単に利用できるので、APIも簡単に利用できるというわけです。

ここまで説明すると、「プラグインが用意されていないAPIはどうすればいいの？」と考える方もいるでしょう。実際、すべてのWebサービスのAPIをプラグイン化するのは不可能です。

しかし、問題ありません。Bubbleには『API Connector』というプラグインが用意されています。直接APIをたたくことになるので難易度は上がりますが、これを利用すればあらゆる外部APIに対応させることができます！

まとめ

今回はプラグインについて解説しました。あまりにも簡単に使えるので解説泣かせの機能ではありますが、これを利用することで拡張性だけでなく開発スピードもどんどん上がっていくので積極的に活用していきたいですね！

欠点としてはあまりにも多くのプラグインがあるのでお目当てのプラグインを探すのがちょっと大変かもしれません・・・。これがBubbleはノーコードでありながら学習コストが高いと言われる要因のひとつかもしれません。

最後に

最後になりましたが、弊社は今回ご紹介したBubbleを利用してWebサービスの受託開発を行っています。Bubbleはカスタマイズ性が高く開発期間を短縮することができますが、本格的なWebサービスを構築するには一定以上のノウハウが必要になります。

今後もBubbleの記事を掲載しノウハウの一端を公開していく予定ですが、弊社に任せていただければこのBubbleを利用して最適なサービスを短期間で開発することができると自負しておりますので、興味のある方はぜひお気軽にお声がけください！
（合同会社tempのお問い合わせ先）
https://llctemp.me/contact

参考例として、Bubbleで開発した弊社のサービスTeeeを紹介します。このようなマッチングアプリもBubbleを利用して開発することができます。

本ページの画像はすべてhttps://bubble.ioから画面キャプチャし、それを加工したものとなります。


この記事が気に入ったらサポートをしてみませんか？