こんにちは 今回はBubbleとMakeを使ってNDAの送付とファイル管理を自動化してみたいと思います。 Mytableというtypeを作成します。 これはmakeと連携するためには必要なtypeとなります。
詳しくは公式ドキュメントをご参照ください。
Mytableには、NDAを作成するうえで必要なfieldを作成します。
今回は下記のfieldを作成しました。 address・・・住所 codenumber・・・郵便番号 company・・・会社名 date・・・作成日 mail・・・送信先メールアドレス name・・・担当者名 url・・・google driveで保存したNDAのURLになります 次にフロント側では上記のfieldが入力できるようにinputとボタンを設定し、設定されたことがわかるようにrepeating groupを作成して表示できる様にします。 Makeにアクセスし、Senarioを作成します。
Senarioの全体像はこんな感じになります。 では一つずつ解説します。 このモジュールは、Webhookを使ってイベント発生時にMakeにデータを送信します。
これを使用することによって、Bubbleで入力したデータをMakeで再利用することが可能です。 まずModuleにてBubbleを選択します。
今回は、「Watch Event」を選択します。 「Copy address to clipboard」をクリックし、WebhookのURLをコピーします。 Bubbleへ戻り、API Connectorで下記の設定を行います。
Use as：Action
Data type：Text
POST
先ほどコピーしたWebhookのURLをペースト
Body type：Form-data
Parametersは下記の通りに設定し、Privateのチェックを外します。Valueはなんでもよいので1文字以上入れておく必要があります。
name
company
mail
address
code
date 設定ができましたらMakeに戻ります。
「Run Once」をクリックし、モジュールがクルクルと更新状態になっている間にBubbleに戻ります。 「Reinitialize Call」をクリックすると、Acceptedが表示されればこの設定は完了になります。 このモジュールは、Googleドライブ内のファイルを指定し、コピーを作成します。
これを使用することによって、事前に用意したNDAのテンプレを個別に作成することが可能になります。
おそらくこれは皆さんが通常業務でよく行うことかと思います。 Googleドライブの「Copy a File」を選択します。 自分のGoogle Driveアカウントを連携するために、「Add」→「Save」をクリックし自分のアカウントを連携します。 次に、モジュール内は下記の設定を行います。 Select the Method：Select from the list
Original File’s Drive：My Drive
Original File ID：フォルダ名/ファイル名（My Drive内でテンプレのドキュメントを指定）
New Drive Location：My Drive
New Folder Location：フォルダ名（コピーしたドキュメントを格納するフォルダを指定） Copied File Name：Bubbleで入力されたパラメーターを選択＆【様 NDA】（コピーしたファイル名を指定・例 ：12月21日HapInS株式会社様 NDA） このモジュールは、Googleドキュメント内のテキストを指定し、別の文字へ置換します。
これを使用することによって、ドキュメント内で個別に変更をする必要のあるデータ（情報）を入力することが可能になります。 Google Docsの「Replace a Text in a Document」を選択します。 Choose a Drive：My Drive
Document ID：File ID（Google Driveでコピーしたドキュメントを指定するという意味になります）
Replace a Textではドキュメント内に設定した任意の文字を置換する設定を行います。
old text to be replaced：COMPANYNAME
new text to be inserted：company(Bubbleで入力したパラメーター) テンプレでは下記のように設定しており、これらを置換するようになっています。 ④「Google Docs Download a Docment」
このモジュールは、Googleドキュメントを別形式へ変換することができます。
これを使用することによって、作成したドキュメントをPDF形式に変換することが可能になります。 ここの設定はシンプルで、コピーしたドキュメントをPDF形式に変換します。 このモジュールは、Googleドライブへ指定したファイルを保存することができます。
これを使用することによって、先ほどPDF形式へ変換したファイルを指定したフォルダへ保存することが可能になります。 次に、PDFに変換したファイルを指定した場所へ保存します。
New Folder Location：保存したいフォルダを指定します。
File：Google Docs - Download a Docment（先ほど変換したファイルのことを指します） このモジュールは、Gmailでメールの送信を行います。
これを使用することによって、送信先や件名・本文・添付ファイルを指定することが可能になります。 PDFを添付しメールを送信します。
To：送信先（Bubbleで入力した先方のアドレス）
Subject：【NDA送付】（件名なので任意）
Content：本文になります。本文中に先方の情報や文章を入力します。
Attachments：添付したいファイルを指定します（先ほどのPDF） このモジュールは、BubbleのDBへデータを保存します。
これを使用することによって、最初に入力したデータと保存したファイルのURLをBubbleへ保存し、WEB上で確認することが可能になります。 入力したデータとPDFの保存したURLをBubbleのDBへ格納します。
このモジュールとBubbleを連携するためにはAPIの設定をします。
こちらは有料プランに設定する必要があります。
Bubble画面に戻り、左のタブからSettingsをクリックし、APIを選択します。
画像のように「Enable Workflow API and backend workflows」と「Enable Data API」・今回使用するMytableにもチェックします。
Private keyをコピーし、MakeのBubbleモジュールとます。 Makeへ戻り、Bubbleと連携を行います。
連携の際に特に重要になるのがApplication NameとAPI Tokenの設定です。
Application Name：https://＜Application Name＞.bubbleapps.io
API Token：先ほどコピーしたPrivate Keyをペースト 連携ができたらBubbleに格納する情報を設定します。
Type Name：Mytable
Unique ID：Data
Entery Fields
Field Name：各Filed名を入力
Type：Text
Value：各Bubbleの値を入力します（URLの場合のみWeb View Linkを指定）
これで開発の部分は完了となります。 下記の画像のように情報を入力「NDAを送付」をクリックします。 Makeを見ると、無事にデータが受け渡せているのが確認できます。 Bubbleに戻ると、DBに格納できていることが確認できます。
右端のダウンロードマークをクリックするとGoogle DriveのURLへ遷移することができます。 送付先にもメールが来ていることが確認できました。 NDAの内容も入力した値に置換されています。 以上となります。 いかがでしたでしょうか。 Bubbleはノーコード開発ツールの中で最も汎用性が高く、他のソフトウェアとの連携も行えます。
今回はNDAの送付でしたが、これを応用することによってこれまで使用していたクラウドツールと別のツールをBubble上で確認・連携することも可能になりまして、社内業務を効率化することが可能になります。 ぜひ参考にしてみてください。
BubbleのDBの設定について
makeの準備
①「Bubble Watch Event」
②「Googleドライブ copy a file」
③「Google Docs Replace a Text in a Document」
⑤「Googleドライブ Upload a file」
⑥「Gmail Send an email」
⑦「Bubble Create/Upload a Data Thing」
実際に起動してみましょう
