こんにちは。今回は、Integromatと連携してOneDriveにファイルをアップロードするWebアプリをBubbleで作っていきます。
OneDriveと言えばOneDrive APIを使う方法がまず思い浮かびますが、今回はOneDrive APIを使わずIntegromatとBubbleを連携する方法をとります。
その理由についても解説しているので、「OneDrive APIでBubbleからファイルをアップロードしたいのにうまくできない」とお悩みの方もぜひご覧下さい。
セキュリティやファイル容量に関する注意事項も参考にして実装してくださいね！
- 事前確認
- Integromatの設定①
- Bubbleの設定①
- Integromatの設定②
- Bubbleの設定②
- Integromatの設定③
- ユーザーとしてファイルをアップロード
- まとめ
- 参考: 個人用Microsoftアカウント向けの場合
事前確認
目標
BubbleからIntegromat経由でOneDriveにファイルをアップロードする
ファイルの機密性を保つ
方法
今回は、OneDrive APIではなくIntegromatを使ってファイルをアップロードします。
【具体的なファイルアップロードの手順】
Bubbleでアップロードするファイルを選択
BubbleからIntegromatに1のファイルをPOSTし、OneDriveにアップロード
OneDriveのアップロード先URLをIntegromatから受け取り、ブラウザで開く
ファイルをアップロードするOneDrive APIもMicrosoftにより公開されていますが、こちらのAPIではリクエスト本文がバイナリ形式である必要があります。
しかし、BubbleのAPI Connectorはリクエスト本文をバイナリ形式にすることができないため上記のAPIは使えません。
API Connectorで本文をバイナリ形式にできない問題はAPI Connectorの公開当初からあるようで、残念ながらいくつかのAPIの利用が制限されています。
上記のOneDrive APIに限らず、要求本文をバイナリ形式にする必要があるAPIは使えないのがAPI Connectorの現状です。
そんな理由で、今回はOneDrive APIではなくIntegromatを使う方法でファイルをアップロードします。
Integromatに関する注意事項
Integromatを経由する方法をとるにあたって、Integromatに関する注意事項を整理します。ご自身のケースに今回の方法が適切かどうか下記事項からチェックしてみましょう！
セキュリティ
今回の方法では、アップロードするファイルが一時的にIntegromatのサーバーに保存されることになります。個人情報が含まれているなど機密性の高いファイルを扱う場合、データがしっかり保護されるのか気になるところですね。
Integromatではシナリオ単位でデータの機密保持に関する設定ができるので、ファイル等データのやり取りが発生する場合はこちらを設定するのがおすすめです。
【設定方法】
シナリオ編集画面で「Controls > Scenario settings」を開き、「Data is confidential」を有効にする。
なお、「Data is confidential」を有効にする場合と無効にする場合では以下の違いがあります。
「Data is confidential」が有効・無効のどちらの場合でも、シナリオの実行中、Integromatはファイルを見ることができる状態にありますが、GDPRに則って基本的にファイルの中身を見ることはありません。ファイルを見るとしてもシナリオの実行にファイルの内容が必要である場合に限ります。
セキュリティにはしっかり配慮されていますが、「一時的にでもファイルを保存されたくない！」というケースには今回の方法は向いていないかもしれません。
※個人情報保護やデータの機密保持についてはこちら
ファイル容量
Integromatの「1つのファイルの最大サイズ」から、アップロードできるファイルサイズは5MB未満となります。
なお、5MB以上のファイルをアップロードしたい場合は、Integromatの有料プランに加入することで容量上限を拡大することができます。
※Integromatの課金体系についてはこちらから
※BubbleのFile Uploaderエレメントの最大容量…5GB未満（デフォルト設定：50MB未満）
Integromatの設定①
それでは、早速Integromatで以下のようなシナリオを作成します。
Integromatにログインし、新規でシナリオを作成します。
モジュール1: Webhooks > Custom webhook の設定
トリガーとなるWebhookを作成します。
新規でシナリオの編集画面を開いたら、真ん中の「＋」をクリックして「Webhooks」の「Custom webhook」を追加します。
Webhookの設定ポップアップで「Add」をクリックして、適当な名前を付けてWebhookを作成します。今回は、「Gateway to bubble - onedrive」という名前を付けました。
後ほどBubbleでWebhookの連携を行うので、ひとまず「OK」をクリックしてポップアップを閉じます。
モジュール2: OneDrive > Upload a file の設定
モジュール1の右側のサークル「Add another module」をクリックして、2つ目のモジュール「OneDrive」の「Upload a File」を追加します。
Upload a Fileのポップアップでは、連携するMicrosoftアカウントとファイルのアップロード先やアップロードするファイルのソースを設定します。
アカウント連携
まず、「Connection」でMicrosoftアカウントを連携します。「Add」をクリックして「Connection name」で適当な接続名を付けます。今回はデフォルトの「My Microsoft connection」としました。
右下の「Continue」を押すと、Microsoftアカウントのリダイレクトページが表示されるので、アカウントを選択します。
アクセス権限の許可を求められるので許可してください。
Integromatのシナリオ編集画面に自動で戻り、OneDriveの設定ポップアップでConnectionタブにアカウントと、アップロードに関する設定項目が表示されたら連携成功です。
ファイルアップロードの設定
アカウントの連携に成功すると、アップロードの設定ができるようになります。 各項目では以下を参考に設定してください。
| 項目 | 設定内容 |
|---|---|
| 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（存在するファイルを置き換える）を選択しました。 |
設定項目についての詳細はこちらのページをご覧下さい。
全ての項目が設定できたら、「OK」をクリックしてポップアップを閉じます。
モジュール3: Webhooks > Webhook responseの設定
最後に、このシナリオの成功応答を返す設定をします。
モジュール2の右側のサークル「Add another module」をクリックして、3つ目のモジュール「Webhooks」の「Webhook response」を追加します。
今回は成功応答としてOneDriveのアップロード先URLを取得したいので、Statusは200、Bodyにはモジュール2: OeDriveのWeb Urlを設定します。
設定したら「OK」でポップアップを閉じます。
これでIntegromatシナリオの基本的な設定はひとまず完了しました。
Bubbleの設定①
次に、Bubbleで設定を行います。ここでは、まずAPI ConnectorでのWebhookの設定を行います。
API Connectorの設定
API Connectorで、Integromatのシナリオを動かすトリガーとなるWebhookの設定を行います。
Pluginsタブで「API Connector」をインストールし、新規のAPIを作成して以下のように設定してください。
API CallのURLには、Integromatでモジュール1: Webhookを作成した時に取得したURLをコピーして入力します。
変数とその値は以下になります。Dynamic Dataが入るのでPrivateのチェックはオフにしておきます。
| Key | Value |
|---|---|
| file | アップロードするファイル。ファイルを送信するので「Send file」のチェックをオンにするのを忘れずに！ |
【補足：ファイルの送信について】
前述したファイルアップロードのOneDrive APIではリクエスト本文をバイナリ形式で送信する必要がありましたが、Integromat経由であればファイルはファイルとして送信することで、Integromatが適切な処理でOneDriveにファイルをアップロードしてくれます。
イニシャライズ
イニシャライズ用に、変数fileの「Value」欄をクリックしてテスト用のファイルをアップロードします。
Integromatのシナリオ編集ページに戻ってモジュール1: Webhooksのポップアップを開き、「Re-determine data structure」という青いボタンをクリックします。
次にBubbleのAPI Connectorに戻って、作成したWebhook用API Callの「Initialize」をクリックします。
API Connectorで以下のような応答があり、Integromatのモジュール1: Webhooksの青いボタンが「Succesfuly determined.」に変わっていたら連携成功です。
「SAVE」をクリックして保存します。
Integromatの設定②
イニシャライズが完了したら、Integromatに戻ってイニシャライズ前にはできなかった設定を行います。
モジュール3: OneDriveで、OneDriveにアップロードするファイルのソースを「Source file」の項目で設定します。File NameとDataをそれぞれ、WebhookでPOSTしたファイルデータからfile: name、file: Dataに変更します。
Bubbleの設定②
ここでは、BubbleのページとWorkflowの作成を行います。
まずはIntegromatのシナリオ全体を試行してWorkflowで必要な変数をIntegromatから受け取ります。
シナリオ編集画面左下の「Run once」をクリックします。
次にBubbleのAPI Connectorで、先程と同様API Callの「Initialize」をクリックします。
今度は、API Connectorの応答の一行目bodyで、Integromatモジュール4: Webhooks responseで設定したOneDriveのアップロード先URLが確認できるはずです。
こちらも「SAVE」をクリックして保存します。
これでbodyとして受け取ったWeb UrlをWorkflow中で使えるようになりました。
Integromatシナリオは以下のような表示になります。
ページとWorkflowの作成
ファイルをアップロードするページはFile UploaderエレメントとButtonエレメントで以下のように作成します。
「アップロードする」ボタンクリックのWorkflowを新規作成し、STEP①Webhookでファイルを送信→STEP②OneDriveで保存したファイルを開くの順で以下のようにWorkflowを設定します。
■STEP① Plugins > Integromat webhook - Get a file
FileUploaderで選択したファイルをfileでPOST
■STEP② Navigation > Open an external website
確認を兼ねて、アップロードしたファイルをOneDriveで開く
※Interomatのモジュール3: Webhooks responseの応答のBodyに指定したURLをブラウザで開きます。
これでBubbleの設定は完了です。
Integromatの設定③
まず、データの機密保持設定をします。「Controls > Scenario settings」を開き「Data is confidential」を有効にします。
次に、シナリオの稼働スケジュールを設定します。編集画面左下の時計マークをクリックしてシナリオを動かすタイミングを「Immediately」に設定し、Schedulingを「ON」にしたらシナリオを保存してください。
Integromatの設定はこれですべて完了です。
ユーザーとしてファイルをアップロード
ここまでで、IntegromatとBubbleで必要な設定がすべて完了しました。BubbleアプリのユーザーとしてファイルをOneDriveに正常にアップロードできるか試してみます。
ファイルのアップロードページをPreviewで開き、ファイルをアップロードします。
アップロードボタンクリック後、OneDriveからファイルが開けました。
念のため、OneDriveの一覧からもアップロードされているか確認します。アップロード成功です！
まとめ
今回は、OneDrive APIを使わずIntegromatでOneDriveにファイルをアップロードする方法をご紹介しました。
IntegromatのWebhookの使い方やOneDriveとの連携方法に加え、API Connectorの弱点もご理解いただけたかと思います。Bubbleへの理解がさらに深まっていれば幸いです。
下記の「参考」では、個人用MicrosoftアカウントのOneDriveにファイルをアップロードする場合の方法を簡単にご紹介しているのでぜひご覧下さい。
それでは、次回の記事でまたお会いしましょう！
参考: 個人用Microsoftアカウント向けの場合
個人用Microsoftアカウント向けのアプリを開発している場合、以下のAPIを使うことができます。
こちらのAPIではファイルをバイナリ形式で送信する必要がないので、API Connectorからでもファイルをアップロードすることができますよ。
個人用Microsoftアカウント向けのWebアプリを開発している方は参考にしてみてくださいね。
