《Bubble》APIについて
概要
APIについて
具体的なユースケース
1. ソーシャルメディア統合:
- 用途: ソーシャルメディアプラットフォーム（例：Twitter、Facebook）のAPIを使用して、ウェブサイトやアプリケーションから直接ソーシャルメディアに投稿する。
- 例: 企業のウェブサイトから直接、プロモーション内容をTwitterに投稿し、フォロワーとのエンゲージメントを高める。
2. 支払いゲートウェイの統合:
- 用途: オンラインショップやアプリで、StripeやPayPalなどの支払いサービスプロバイダーのAPIを通じて、安全な支払い処理を実現する。
- 例: オンラインショッピングサイトで、顧客が製品を購入する際に、Stripe APIを通じてクレジットカードやデビットカードでの支払いを処理する。
3. 天気情報の統合:
- 用途: OpenWeatherMapやWeather.comなどの天気情報サービスのAPIを使用して、ウェブサイトやアプリにリアルタイムの天気情報を提供する。
- 例: 旅行計画アプリで、ユーザーの現在地または目的地の最新の天気予報を表示し、旅行の計画をサポートする。
API connectorの各コンポーネントの解説
まず初めにBubbleでAPI Connectorを使うために、API Connectorプラグインをインストールします。
すると以下のような画面が確認できるかと思います。項目がいくつかあるのでそれぞれについて解説します。
番号 | 名前 | 解説 |
1 | API Name | 接続するAPIサービスのカスタム名を指定します。 この名前は、アプリケーション内部でサービスに接続するために使用されます。 |
2 | Authentication | 一部のAPIコールでは、認証が必要です。 API内で定義するすべての呼び出しに適用する認証方法を選択します。 |
3 | Shared headers for all calls | ヘッダーは、サーバーが使用するために送られる追加情報です。 ヘッダーの例としては、送信されるコンテンツの形式（JSONなど）を指定します。 この情報は暗号化されて送信され、APIキーなどの機密情報はここに記載する必要があります。 |
4 | Shared parameters for all calls | パラメータは、APIコールでURLの末尾に追加されるクエリストリングパラメータです。 これらの値は可変であり、要求された特定のデータやアクションを判断するためのさらなる情報をサーバーに提供します。 |
番号 | 名前 | 解説 |
1 | Name | APIコールの名前を指定します。 |
2 | Use as | Data：Designタブで、外部APIからデータを取得して、APIコールを使用できます。 Action：Workflowタブの「Actions」ドロップダウンメニューの「Plugin」セクションでAPIコールを使用できます。 |
3 | Data type | APIレスポンスのデータ形式を定義します。 |
4 | Method | 外部サーバーとの対話方法を指定します。 サポートされているメソッドは以下の5つです。 Get:リソースを取得する。 Post: 新しいリソースを作成する。Put: 既存のリソースの編集や更新をする。 Delete: リソースを削除する。 Patch: 既存のリソースを更新する。 |
5 | URL | サーバーのURLを指定します。 |
6 | Headers | 特定のコールのヘッダーをここに追加できます。 |
7 | Body type | APIコールのボディのデータ形式を定義します。 |
8 | Querystring Parameter | 呼び出しに対するパラメータを追加します。パラメータが必要でない場合は、Optionalをチェックします。 |
9 | Body | APIに送信するデータです。 |
10 | Attempt to make the call from the browser | APIコールをBubbleサーバー上ではなく、ブラウザから直接実行したい場合にチェックします。 |
11 | Include errors in response and allow workflow actions to continue | レスポンスエラーをエディターで処理する場合にチェックします。 |
12 | Capture response headers | 検出されたデータ中のリクエストヘッダに、利用する重要なデータが格納されている場合、そのヘッダをキャプチャします。 |
13 | Important call from URL | チェックすると、クライアントのURLをインポートします。 |
APIを利用するための認証
APIを利用する際に「認証（Authentication）」が必要となる場合があります。これは、APIにアクセスする際にユーザーの身元を確認し、セキュリティを確保するプロセスです。
以下に、API認証の基本的な概念を説明します。
API認証とは
- 目的: API認証の主な目的は、APIへのアクセスを許可されたユーザーのみに制限することです。これにより、不正アクセスを防ぎ、データのセキュリティを保ちます。
- プロセス: ユーザーがAPIにリクエストを送信する際、そのリクエストには通常、ユーザーを識別するための情報（例：ユーザー名、パスワード、トークンなど）が含まれています。
- 認証情報: これらの情報はAPIサーバーによって検証され、正しい場合のみAPIサーバーはリクエストされたデータやサービスへのアクセスを許可します。
API認証の一般的な方法
1. 基本認証
基本認証では、リクエストの際にAPIサーバーにユーザー名とパスワードを提供します。
Authorization:Basic <credentials>の形式でヘッダーに認証情報を送信します。
認証情報は、コロンで区切られた文字列 ‘username:password’ を連結し、base64 形式でエンコードしたものです。
Authenticationを「HTTP Basic Auth」にします。
番号 | 名前 | 解説 |
1 | Username | APIドキュメントに記載されているユーザーIDを入力します。 |
2 | Password | APIドキュメントに記載されているPasswordを入力します。 |
1. URL経由
秘密鍵は、APIコールのURLで提供できます。
Authenticationを「Private key in URL」にします。
番号 | 名前 | 解説 |
1 | Key name | キーパラメータのクエリ文字列を入力します。 |
2 | Key value | APIキーの値を指定します。 |
2. ヘッダー経由
- ユーザーがAPIにアクセスする際に用いるユニークな識別子です。
- このキーはリクエストの一部として送信され、ユーザーを識別しアクセスを許可するために使用されます。
3. OAuth:
- より高度で安全な認証方法で、特にソーシャルメディアのAPIなどで広く使用されています。
- OAuthは、ユーザーの資格情報を直接共有せずに、トークンベースの認証と承認を提供します。
4. トークンベースの認証:
- セッション状態を保持する代わりに、サーバーはリクエストごとに送信されるトークンでユーザーを認証します。
- JWT（JSON Web Token）は、この方法で一般的に使用される形式の一つです。
秘密鍵を使った認証
秘密鍵認証の場合、APIをポーリングする際に秘密鍵を提供する必要があります。
APIサーバーに秘密鍵を提供する方法には、次の2つの方法があります。
API connectorを用いた実装
今回はGoogleが提供しているAPIを使用してGoogle翻訳のアクションが使えるようにする実装を行います
Step.1 認証
APIコールをセットするために初めに認証を行う必要があります。
認証とはどことAPI接続をするか識別するステップで、この場合はGoogleになり ます。
ですのでGoogle Cloud APIキーを取得していきます。
(キーはこちらから取得できます)
まず、API Connectorの設定画面でAdd another APIボタンをクリックして、新しいAPIコールを作成していきます。nameはGoogle cloudと設定します。
次に、Google Cloud API のドキュメントを読んで、どのような認証が必要なのかを確認していきます
上の図にあるように、GoogleはAPIキーをクエリーパラメーターとして渡すように要求しています。
URLにAPIキーを渡すことは、APIキーがBubbleサーバーを経由するため、安全であると考えられています。つまり、APIキーがアプリのユーザーに見えることはありません。転送中、キーはHTTPS暗号化で暗号化されます。
実際の設定画面は以下のようになります。
Step.1 Authentication（認証）ドロップダウンを開き、認証方法を選択します。今回はPrivate key in URLを選択します。
Step.2 Key nameをkeyに設定します。これはGoogleが指定しているURLパラメータの名前です。
Step.3 最後に、Key valueフィールドにAPIキーを貼り付けます。
これでGoogleに自分たちが何者であるかを伝えること準備ができました。
このAPIキーで認証すると、Googleは私たち（クライアント）がアクセスできるリソースをチェックします。先ほどGoogle CloudでCloud Translation APIを有効化したので、Googleは私たちがその特定のリソースにアクセスできることを知っています。
Step.2 Callの設定
次のステップは、実際に呼び出し(call)を設定していきます。
今探しているのは、テキストの文字列を送信して言語を指定し、Googleが送信したテキストの翻訳バージョンを返すようなコールです。BubbleはすでにAPIコールと呼ばれる空のコールを作成しているので、そのコールのexpandリンクをクリックして、設定していきます。
ここでもドキュメントを参照する必要がある。GoogleのCloud Translation Quickstartガイドに、エンドポイントとJSON形式のパラメータを使った例があるので参考にします。
では、この情報を使用してAPI Connectorで呼び出しをセットアップしてみましょう。
Step.3 エンドポイントの設定
まず、API Connectorにアクセスしたいリソースを探すように指示していきます。
上のスクリーンショットでわかるように、GoogleはHTTPメソッドとURLというヘッダーにそれを明記しており、これはHTTPメソッドがPOSTで、URLがhttps://translation.googleapis.com/language/translate/v2 であることを示している。
API Connectorでどのように見えるか見てましょう
Step. 1 まず、レスポンス（翻訳された文字列）をデータソースとして使いたいので、Use asをDataに設定します。
Step. 2 次に、Data typeをJSONに設定します。ドキュメントによると、Googleが指定するフォーマットはJSONだからです。
Step. 3 アクション（テキストの翻訳）を開始するので、HTTPメソッドをPOSTに設定する。
Step. 4 最後に、 ドキュメントにあるURLを貼り付けます。
これで、呼び出しに必要な設定を行い、HTTPメソッドとリソースURLを組み合わせてエンドポイントを構築しました。
Step.4 パラメーターの設定
次のステップは、必要なパラメータを設定します。
テキストを翻訳するAPIコールは、翻訳するテキストとそれを翻訳する言語を正しく伝えるためにパラメータの設定は必須となります。
ドキュメント（先ほどと同じスクリーンショット）をもう一度見ると、Cloud Translateがいくつかのパラメータを要求していることがわかります：
「q" = 翻訳したい文字列
"source" = 翻訳元の言語（オプション）
「target" = 翻訳先の言語
"format" = 返したいフォーマット（テキスト）（オプション）
ソース言語を含めない場合、Cloud Translateは独自に言語を認識しようとします。文字列（q）とターゲット言語（target）の2つの必須パラメータを設定しましょう。呼び出しが機能するかテストするために使用できる値も含めます：
Step.5 コールの初期化
コールの初期化とは、応答を得るために呼び出しを一度実行することを意味する。初期化には2つの目的があります。
1つは呼び出しが成功したかどうかを知ることができます。
また返されたJSONデータがどのようなものかをBubbleに伝えることができ、これにより、Bubbleがその構造を知っているため、データソースとして呼び出しを設定できます。
すべてが正しく設定されていれば、Bubbleは次のようなレスポンスを表示するはずです。
ここから、無視するフィールドと、最終的な呼び出しに含めるフィールドを選択できます
