見出し画像

(Bubble)Google DocsにAPI経由でアクセスする(実践編)領収書を作成してPDFでダウンロードする

jansnap

概要

前々回、前回と、BubbleでGoogle DocsにAPI経由でアクセスする準備を行いました。
今回はいよいよ実際にGoogleのAPIにアクセスします。
例として、BubbleのDBを元に領収書を作成してPDFでダウンロードする処理を実装します。

雛形のドキュメントファイルを作成

書き換え元になる領収書をGoogle Docsに以下のように作成しました。

画像27

どのAPIを使うか調べる

まずは、処理の流れと、使用するAPIを整理します。
今回は領収書を作成するので、以下の流れになります。
(1)雛形になるドキュメントファイルを作成・・・手動(URLからファイルIDをメモしておく)
(2)雛形ファイルを編集用にコピー・・・Google DriveのAPIのfile/copy
(3)コピーしたファイルの指定文字列（宛名など）を、BubbleのDBの値に従って置換・・・Google DocsのAPIのdocuments/batchUpdate
(4)置換済みのファイルをPDF化・・・Google DriveのAPIのFiles/export
(5)PDFファイルをダウンロード・・・File Downloaderプラグインに渡す

APIドキュメントを探す

上記の(2),(3),(4)のAPIドキュメントを調べます。
(2)雛形ファイルを編集用にコピー・・・Google Driveのfile/copy・・・https://developers.google.com/drive/api/v3/reference/files/copy
(3)コピーしたファイルの指定文字列（宛名など）を、BubbleのDBの値に従って置換・・・documents/batchUpdate・・・https://developers.google.com/docs/api/reference/rest/v1/documents/batchUpdate
(4)置換済みのファイルをPDF化・・・Files/export・・・https://developers.google.com/drive/api/v3/reference/files/export

APIドキュメントを見てパラメタを把握する

APIドキュメントを見ながら、必要なパラメタを把握します。
ここでは、(2)のファイルコピーを説明します。

まずここからAPIドキュメントを見ます。

画像2

画像3

画像4

Requestの項目を見ると、APIの呼び出しに必要なURLやメソッドやパラメタやbodyの中身が分かります。

画像5

Responseの項目を見ると、戻り値が分かります。Files resourceという形式で返ってくるので、見ておきます。

画像6

idやnameなどを含んだJSON形式で返ってくることが分かります。

画像7

下のほうにある「Try this API」の拡大ボタンを押すと、パラメタを入れて、どういったリクエストが送信されるかを見ることができます。

画像8

画像9

ファイルIDが「abcd1234」、新しい名前を「recept-new-01」にした時のリクエストは上記の画像のようになります。
URLにファイルIDやアクセストークンを含める必要があること、ヘッダに3種類指定する必要があること、変更する内容はbodyに入れることも分かります。

BubbleのAPI Connectorを設定する

APIの呼び出しに必要な情報が分かったので、Bubbleで画面を作り、API Connectorに設定します。
今回はデモ用に、ファイルIDとコピー後の名前を入力して実行ボタンを押すとファイルがコピーされるようにします。

画像10

デザインタブで、inputやButtonを配置します。

プラグインタブで、API Connectorの設定をします。
「Add another call」をクリックして、定義を追加します。

画像14

以下の4箇所を編集します。
(1)URLやメソッドと、Use as
(2)ヘッダ
(3)body
(4)レスポンスの形式

API Connectorの設定(1)URLやメソッド

画像16

メソッドをPOST、URLをコピペで指定します。[ ]を使うと、後から値が設定できるようになります(後述)。
「Use as」をActionに変更します。これを忘れると、後述のWorkflowで一覧に表示されません。

API Connectorの設定(2)ヘッダ

画像13

ヘッダを3つ指定します。[ ]を使うと、後から値が設定できるようになります(後述)。 AcceptとContent-Typeは後から変更しないので「Private」にチェックをいれておきます。

API Connectorの設定(3)body

画像14

APIドキュメントの「Try this API」で作ったJSONをコピペし、値の部分を< >でくくって、後から変更出来るようにします。

API Connectorの設定(4)レスポンスの形式

「Manually enter API response」をクリックし、APIドキュメントの「Resource representations」から、必要な項目をコピペし、値を""でくくります。

画像15

画像16

Workflowの設定

ボタンを押したらパラメタを渡してAPIを呼び出すように、Workflowを設定します。

Workflowの設定(1,2)トークンのリフレッシュ(必要に応じて)

画像22

画像22

アクセストークンの期限が切れている場合は、リフレッシュしてDBを更新します。

Workflowの設定(3)ファイルコピーAPIの呼び出し

画像22

それぞれ値を設定します。
FILEIDとnew_file_nameは入力欄から、YOUR_API_KEYはDBに格納しておいたclient_id、AuthorizationはDBに格納しておいたaccess_tokenから代入します。

Workflowの設定(4)戻り値をDBに保存

画像22

step4で、戻り値のファイルIDをDBに保存しておきます。
「Result of step3」を使って、step3でAPIを呼び出した際の戻り値を指定できます。

動作確認

画像19

画像28

ファイルIDと新しいファイル名を入れてボタンを押すと、ファイルがコピーされます。
Google Docsの画面で、ファイルがコピーされているのが確認できます。

文字列の置換

あとはAPIドキュメントを見ながら、各APIにパラメタを指定して戻り値を確認すればOKです。
置換に使うJSONは、APIドキュメントの「Try this API」を使って生成すると楽です。<と>でくくると、Workflowから値が指定できます。
なお、URLに「?key=」を含める必要はありません。(APIドキュメントは含める書き方になっていますが)

画像24

画像25

PDF化とダウンロード

PDF出力は、 https://www.googleapis.com/drive/v3/files/[FILEID]/export?mimeType=application%2fpdf&key=[YOUR_API_KEY] でできます。
mimeTypeはURL部分に直書きする必要があり、パラメタで渡そうとすると「/」付近が妙なURLエンコードをされてエラーになります。
また、APIの出力をJSONではなくFILEにする必要がありますが、Initializeの時に実際のデータを渡さないと初期化してくれないため、最初だけは妥当なパラメタを入れておく必要があります。

画像26

ダウンロードには「File Downloader」プラグインを使い、Dynamic Linkの項目に前段で作成したPDFファイルのURLを指定します。

画像27

Docsファイル削除

生成したDocsファイルはダウンロードしたら使用しないので、削除しておきます。
https://www.googleapis.com/drive/v3/files/[fileId] にDELETEメソッドで送信します。戻り値はありません。APIドキュメントはこちらです。

画像23

参考リンク

API Connectorの使い方は、ノーコードラボさんの以下のページが分かりやすいです。
・BubbleでAPIを使ってみよう!
https://blog.nocodelab.jp/entry/2019/12/03/Bubble%E3%81%A7API%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86%21

終わりに

いかがでしたでしょうか？長い記事になりましたが、一度やってしまえば後はコピペ作業が大半なので難しくないと思います。
Google APIを使うと可能性が大きく広がりますので、皆さんチャレンジしてみてください。


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