【はじめの一歩】BubbleでAPI Connectorを使用して外部APIに接続してみよう

Bubbleに限らずですが、Webアプリ開発を行う際に外部のAPIを利用できるようになると開発の幅が一気に広がります。

世の中で多くの方に利用されているサービスのほとんどはAPIを利用しているはずです。本記事では、Bubbleを利用してWebアプリ開発に勤しむ方向けに「API Connector」プラグインを使用した外部APIへの接続方法について解説していきたいと思います。

今すぐノーコード案件を探す！

＼最短60秒で登録可能！／
無料会員登録
案件を探す

そもそもAPIとは？

APIとは、Application Programming Interfaceの略で、プログラムの機能を外部のアプリなどに共有する仕組みを指します。

もっと簡単にいうと、APIは”プログラム用のプログラム”といったところでしょうか(^^)

APIはプログラム用のプログラム。

本記事ではそんなAPIをBubbleから利用するための方法について解説する形です。

なお、Bubbleの公式からAPIとは何か、およびその使用方法について解説された動画が公開されているので、英語に抵抗がない方は視聴してみることをおすすめいたします。

APIとは、プログラムの機能を外部に提供する仕組み。

本章では実際にBubbleで「API Connector」を用いて外部APIに接続する手順についてお伝えしていきたいと思います。

外部APIはシンプルで理解しやすい郵便番号データ配信サービス「zipcloud」を使います。

zipcloudでは、郵便番号を与えることでその住所を調べられる。

Bubbleの「Plugins」→「＋Add plugins」をクリックし、「API Connector」と検索すると、以下のプラグインが表示されるかと思うので、Installをクリックしましょう。

API Connectorのインストールが完了したら「Add another API」をクリックします。

インプットにはAPIの呼び出しに必要な情報を入力していきます。今回のzipcloudの例では以下の通り情報を入力すればOKです。

上記の項目を入力したら「Initialize call」ボタンをクリックしましょう。

レスポンスの内容が期待通りの結果であることを確認して「SAVE」を押下します。

初期化が完了したら一旦Parameterに記載したValueは空にしておいてOKです。

今回は郵便番号を入力したら自動で以下の情報を表示させる機能を実装してきます。

完成イメージは以下の通りです。

以下４つのInputを一つのグループにまとめた形になります。文字だけだと分かりづらい場合は下に貼り付けた画像も併せて参考にして値を入力してみてください。

郵便番号：Inputを作成するのみ
住所1：「Initial content」→「Insert dynamic data」→「Get Data from an external API」→「API provider」を今回作成した「Zipcode -getAddress」とし「{param.}zipcode」を「Insert dynamic data」から「Input 郵便番号’s value」とする。最終的な値はZipcode -getAddress’s results:first item’s address1に設定する
住所2：上記address1をaddress2にする
住所3：上記address1をaddress3にする