HapInS Developers Blog

HapInSが提供するエンジニアリングの情報サイト

BubbleとMakeを使ってNDA契約の業務効率化をしてみた

こんにちは

今回はBubbleとMakeを使ってNDAの送付とファイル管理を自動化してみたいと思います。

BubbleのDBの設定について

Mytableというtypeを作成します。

これはmakeと連携するためには必要なtypeとなります。 詳しくは公式ドキュメントをご参照ください。

Mytableには、NDAを作成するうえで必要なfieldを作成します。 今回は下記のfieldを作成しました。

address・・・住所

codenumber・・・郵便番号

company・・・会社名

date・・・作成日

mail・・・送信先メールアドレス

name・・・担当者名

url・・・google driveで保存したNDAのURLになります

次にフロント側では上記のfieldが入力できるようにinputとボタンを設定し、設定されたことがわかるようにrepeating groupを作成して表示できる様にします。

makeの準備

Makeにアクセスし、Senarioを作成します。 Senarioの全体像はこんな感じになります。

  1. 「Bubble Watch Event」:BubbleのデータをMakeへ連携
  2. Googleドライブ copy a file」:ドキュメントをコピー
  3. Google Docs Replace a Text in a Document」:テキストを置換
  4. Google Docs Download a Document」:ドキュメントをPDFに変換
  5. Googleドライブ Upload a file」:ファイルを指定した場所へ保存
  6. Gmail Send an email」:PDFを添付しメールを送信
  7. 「Bubble Create/Upload a Data Thing」:BubbleのDBへデータを格納

では一つずつ解説します。

①「Bubble Watch Event」

このモジュールは、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ドライブ copy a file」

このモジュールは、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 Docs Replace a Text in a Document」

このモジュールは、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ドライブ Upload a file」

このモジュールは、Googleドライブへ指定したファイルを保存することができます。 これを使用することによって、先ほどPDF形式へ変換したファイルを指定したフォルダへ保存することが可能になります。

次に、PDFに変換したファイルを指定した場所へ保存します。 New Folder Location:保存したいフォルダを指定します。 File:Google Docs - Download a Docment(先ほど変換したファイルのことを指します)

⑥「Gmail Send an email」

このモジュールは、Gmailでメールの送信を行います。 これを使用することによって、送信先や件名・本文・添付ファイルを指定することが可能になります。

PDFを添付しメールを送信します。 To:送信先(Bubbleで入力した先方のアドレス) Subject:【NDA送付】(件名なので任意) Content:本文になります。本文中に先方の情報や文章を入力します。 Attachments:添付したいファイルを指定します(先ほどのPDF)

⑦「Bubble Create/Upload a Data Thing」

このモジュールは、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上で確認・連携することも可能になりまして、社内業務を効率化することが可能になります。

ぜひ参考にしてみてください。