ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明します。質問やご指摘大歓迎です。わからないことがあったら、コメントや Twitter などで聞いてください!

BubbleからIntegromatを使ってOneDriveにファイルをアップロード

f:id:earthmash:20220118111141p:plain

こんにちは。今回は、Integromatと連携してOneDriveにファイルをアップロードするWebアプリをBubbleで作っていきます。

OneDriveと言えばOneDrive APIを使う方法がまず思い浮かびますが、今回はOneDrive APIを使わずIntegromatとBubbleを連携する方法をとります。

その理由についても解説しているので、「OneDrive APIでBubbleからファイルをアップロードしたいのにうまくできない」とお悩みの方もぜひご覧下さい。

セキュリティやファイル容量に関する注意事項も参考にして実装してくださいね!

事前確認

目標

  • BubbleからIntegromat経由でOneDriveにファイルをアップロードする

  • ファイルの機密性を保つ

方法

今回は、OneDrive APIではなくIntegromatを使ってファイルをアップロードします。

【具体的なファイルアップロードの手順】

  1. Bubbleでアップロードするファイルを選択

  2. BubbleからIntegromatに1のファイルをPOSTし、OneDriveにアップロード

  3. OneDriveのアップロード先URLをIntegromatから受け取り、ブラウザで開く

ファイルをアップロードするOneDrive APIもMicrosoftにより公開されていますが、こちらのAPIではリクエスト本文がバイナリ形式である必要があります。

しかし、BubbleのAPI Connectorはリクエスト本文をバイナリ形式にすることができないため上記のAPIは使えません

f:id:earthmash:20211231123444p:plain

API Connectorで本文をバイナリ形式にできない問題はAPI Connectorの公開当初からあるようで、残念ながらいくつかのAPIの利用が制限されています。

上記のOneDrive APIに限らず、要求本文をバイナリ形式にする必要があるAPIは使えないのがAPI Connectorの現状です。

そんな理由で、今回はOneDrive APIではなくIntegromatを使う方法でファイルをアップロードします

Integromatに関する注意事項

Integromatを経由する方法をとるにあたって、Integromatに関する注意事項を整理します。ご自身のケースに今回の方法が適切かどうか下記事項からチェックしてみましょう!

セキュリティ

今回の方法では、アップロードするファイルが一時的にIntegromatのサーバーに保存されることになります。個人情報が含まれているなど機密性の高いファイルを扱う場合、データがしっかり保護されるのか気になるところですね。

Integromatではシナリオ単位でデータの機密保持に関する設定ができるので、ファイル等データのやり取りが発生する場合はこちらを設定するのがおすすめです。

【設定方法】

シナリオ編集画面で「Controls > Scenario settings」を開き、「Data is confidential」を有効にする。

f:id:earthmash:20220111105746p:plain

なお、「Data is confidential」を有効にする場合と無効にする場合では以下の違いがあります。

f:id:earthmash:20220111190129p:plain

「Data is confidential」が有効・無効のどちらの場合でも、シナリオの実行中、Integromatはファイルを見ることができる状態にありますが、GDPRに則って基本的にファイルの中身を見ることはありません。ファイルを見るとしてもシナリオの実行にファイルの内容が必要である場合に限ります。

セキュリティにはしっかり配慮されていますが、「一時的にでもファイルを保存されたくない!」というケースには今回の方法は向いていないかもしれません。

※個人情報保護やデータの機密保持についてはこちら

www.integromat.com

ファイル容量

Integromatの「1つのファイルの最大サイズ」から、アップロードできるファイルサイズは5MB未満となります。

なお、5MB以上のファイルをアップロードしたい場合は、Integromatの有料プランに加入することで容量上限を拡大することができます。

f:id:earthmash:20220111184700p:plain

※Integromatの課金体系についてはこちらから

www.integromat.com

※BubbleのFile Uploaderエレメントの最大容量…5GB未満(デフォルト設定:50MB未満)

Integromatの設定①

それでは、早速Integromatで以下のようなシナリオを作成します。

f:id:earthmash:20220107163526p:plain

Integromatにログインし、新規でシナリオを作成します。

モジュール1: Webhooks > Custom webhook の設定

トリガーとなるWebhookを作成します。

新規でシナリオの編集画面を開いたら、真ん中の「+」をクリックして「Webhooks」の「Custom webhook」を追加します。

f:id:earthmash:20220111111007p:plain

f:id:earthmash:20220104181016p:plain

Webhookの設定ポップアップで「Add」をクリックして、適当な名前を付けてWebhookを作成します。今回は、「Gateway to bubble - onedrive」という名前を付けました。

f:id:earthmash:20220105190832p:plain

後ほどBubbleでWebhookの連携を行うので、ひとまず「OK」をクリックしてポップアップを閉じます。

モジュール2: OneDrive > Upload a file の設定

モジュール1の右側のサークル「Add another module」をクリックして、2つ目のモジュール「OneDrive」の「Upload a File」を追加します。

f:id:earthmash:20220111111711p:plain

f:id:earthmash:20220104180744p:plain

Upload a Fileのポップアップでは、連携するMicrosoftアカウントとファイルのアップロード先やアップロードするファイルのソースを設定します。

アカウント連携

まず、「Connection」でMicrosoftアカウントを連携します。「Add」をクリックして「Connection name」で適当な接続名を付けます。今回はデフォルトの「My Microsoft connection」としました。

f:id:earthmash:20220104184451p:plain

右下の「Continue」を押すと、Microsoftアカウントのリダイレクトページが表示されるので、アカウントを選択します。

f:id:earthmash:20220104184514p:plain

アクセス権限の許可を求められるので許可してください。

f:id:earthmash:20220111192904p:plain

Integromatのシナリオ編集画面に自動で戻り、OneDriveの設定ポップアップでConnectionタブにアカウントと、アップロードに関する設定項目が表示されたら連携成功です。

ファイルアップロードの設定

アカウントの連携に成功すると、アップロードの設定ができるようになります。 各項目では以下を参考に設定してください。

f:id:earthmash:20220107184437p:plain

項目 設定内容
Enter(Folder Location ID & Path) ファイルをアップロードするフォルダをIDで指定するかパスで指定するか選択。今回はどちらでも構いませんが、Folder Location IDを選択します。
Choose your OneDrive location ファイルをアップロードするドライブをMy Drive(使用可能なドライブ)、Site's Drive(ユーザーがフォローしているSharePoint)、Group's Drive(選択したグループのドライブ)から選択。今回は自分のドライブにアップロードしたいのでMy Driveを選択します。
Enable to Enter a Drive ID ファイルをアップロードするフォルダをIDで指定するにはYesを選択します。今回はNoにしておきます。
Folder ファイルをアップロードするフォルダを選択します。Click here to choose folderをクリックすると、連携したアカウントのフォルダが表示されるので選択します。今回はMy Driveの直下に保存したいので、/を選択します。
Source file アップロードするファイルの取得元を設定します。File Name、DataはWebhooksでPOSTするデータを使用したいのですが、まだデータが来ていないので適当なファイル名とデータを直接入力してください。イニシャライズ後に修正します。
If the File with the Same Name Exists 同じ名前のファイルが存在する場合の挙動を選択します。今回は、Replace the existing file(存在するファイルを置き換える)を選択しました。

設定項目についての詳細はこちらのページをご覧下さい。

www.integromat.com

全ての項目が設定できたら、「OK」をクリックしてポップアップを閉じます。

モジュール3: Webhooks > Webhook responseの設定

最後に、このシナリオの成功応答を返す設定をします。

モジュール2の右側のサークル「Add another module」をクリックして、3つ目のモジュール「Webhooks」の「Webhook response」を追加します。

f:id:earthmash:20220104192936p:plain

今回は成功応答としてOneDriveのアップロード先URLを取得したいので、Statusは200、Bodyにはモジュール2: OeDriveのWeb Urlを設定します。

f:id:earthmash:20220106111655p:plain

設定したら「OK」でポップアップを閉じます。

これでIntegromatシナリオの基本的な設定はひとまず完了しました。

Bubbleの設定①

次に、Bubbleで設定を行います。ここでは、まずAPI ConnectorでのWebhookの設定を行います。

API Connectorの設定

API Connectorで、Integromatのシナリオを動かすトリガーとなるWebhookの設定を行います。

Pluginsタブで「API Connector」をインストールし、新規のAPIを作成して以下のように設定してください。

f:id:earthmash:20220107185443p:plain

API CallのURLには、Integromatでモジュール1: Webhookを作成した時に取得したURLをコピーして入力します。

変数とその値は以下になります。Dynamic Dataが入るのでPrivateのチェックはオフにしておきます。

Key Value
file アップロードするファイル。ファイルを送信するので「Send file」のチェックをオンにするのを忘れずに!

【補足:ファイルの送信について】

前述したファイルアップロードのOneDrive APIではリクエスト本文をバイナリ形式で送信する必要がありましたが、Integromat経由であればファイルはファイルとして送信することで、Integromatが適切な処理でOneDriveにファイルをアップロードしてくれます。

イニシャライズ

イニシャライズ用に、変数fileの「Value」欄をクリックしてテスト用のファイルをアップロードします。

f:id:earthmash:20220107190929p:plain

Integromatのシナリオ編集ページに戻ってモジュール1: Webhooksのポップアップを開き、「Re-determine data structure」という青いボタンをクリックします。

f:id:earthmash:20220111115452p:plain

次にBubbleのAPI Connectorに戻って、作成したWebhook用API Callの「Initialize」をクリックします。

API Connectorで以下のような応答があり、Integromatのモジュール1: Webhooksの青いボタンが「Succesfuly determined.」に変わっていたら連携成功です。

f:id:earthmash:20220107191605p:plain

「SAVE」をクリックして保存します。

f:id:earthmash:20220105195156p:plain

Integromatの設定②

イニシャライズが完了したら、Integromatに戻ってイニシャライズ前にはできなかった設定を行います。

モジュール3: OneDriveで、OneDriveにアップロードするファイルのソースを「Source file」の項目で設定します。File NameとDataをそれぞれ、WebhookでPOSTしたファイルデータからfile: namefile: Dataに変更します。

f:id:earthmash:20220107192336p:plain

Bubbleの設定②

ここでは、BubbleのページとWorkflowの作成を行います。

まずはIntegromatのシナリオ全体を試行してWorkflowで必要な変数をIntegromatから受け取ります。

シナリオ編集画面左下の「Run once」をクリックします。

f:id:earthmash:20220112104959p:plain

次にBubbleのAPI Connectorで、先程と同様API Callの「Initialize」をクリックします。

今度は、API Connectorの応答の一行目bodyで、Integromatモジュール4: Webhooks responseで設定したOneDriveのアップロード先URLが確認できるはずです。

f:id:earthmash:20220106150654p:plain

こちらも「SAVE」をクリックして保存します。 これでbodyとして受け取ったWeb UrlをWorkflow中で使えるようになりました。

Integromatシナリオは以下のような表示になります。

f:id:earthmash:20220111120341p:plain

ページとWorkflowの作成

ファイルをアップロードするページはFile UploaderエレメントとButtonエレメントで以下のように作成します。

f:id:earthmash:20220105162005p:plain

「アップロードする」ボタンクリックのWorkflowを新規作成し、STEP①Webhookでファイルを送信→STEP②OneDriveで保存したファイルを開くの順で以下のようにWorkflowを設定します。

f:id:earthmash:20220112115004p:plain

■STEP① Plugins > Integromat webhook - Get a file

FileUploaderで選択したファイルをfileでPOST

f:id:earthmash:20220112105834p:plain

■STEP② Navigation > Open an external website

確認を兼ねて、アップロードしたファイルをOneDriveで開く

※Interomatのモジュール3: Webhooks responseの応答のBodyに指定したURLをブラウザで開きます。

f:id:earthmash:20220112105843p:plain

これでBubbleの設定は完了です。

Integromatの設定③

まず、データの機密保持設定をします。「Controls > Scenario settings」を開き「Data is confidential」を有効にします。

f:id:earthmash:20220111105746p:plain

次に、シナリオの稼働スケジュールを設定します。編集画面左下の時計マークをクリックしてシナリオを動かすタイミングを「Immediately」に設定し、Schedulingを「ON」にしたらシナリオを保存してください。

f:id:earthmash:20220112122234p:plain

Integromatの設定はこれですべて完了です。

ユーザーとしてファイルをアップロード

ここまでで、IntegromatとBubbleで必要な設定がすべて完了しました。BubbleアプリのユーザーとしてファイルをOneDriveに正常にアップロードできるか試してみます。

ファイルのアップロードページをPreviewで開き、ファイルをアップロードします。

アップロードボタンクリック後、OneDriveからファイルが開けました。

f:id:earthmash:20220107193240p:plain

念のため、OneDriveの一覧からもアップロードされているか確認します。アップロード成功です!

f:id:earthmash:20220112112227p:plain

まとめ

今回は、OneDrive APIを使わずIntegromatでOneDriveにファイルをアップロードする方法をご紹介しました。

IntegromatのWebhookの使い方やOneDriveとの連携方法に加え、API Connectorの弱点もご理解いただけたかと思います。Bubbleへの理解がさらに深まっていれば幸いです。

下記の「参考」では、個人用MicrosoftアカウントのOneDriveにファイルをアップロードする場合の方法を簡単にご紹介しているのでぜひご覧下さい。

それでは、次回の記事でまたお会いしましょう!

参考: 個人用Microsoftアカウント向けの場合

個人用Microsoftアカウント向けのアプリを開発している場合、以下のAPIを使うことができます。

docs.microsoft.com

こちらのAPIではファイルをバイナリ形式で送信する必要がないので、API Connectorからでもファイルをアップロードすることができますよ。

個人用Microsoftアカウント向けのWebアプリを開発している方は参考にしてみてくださいね。