Bubble等のノーコードツールで、Salesforceと連携したアプリを作成するときに、ユーザーがアップロードした画像やファイルをSalesforceのCRMに取り込みたいことがあります。

特に個人情報などが含まれるファイルは、Salesforceにアップロードすることで安全に管理でき、ファイルのURLが分かれば誰でも閲覧できるような危険な状況を回避できます。

今回は、APIを使って画像をSalesforceにアップロードし、取引先と紐付け、その後CRM上で表示するところまでを解説していきます。

なお、全てZapier・Make等のiPaaSのHTTPリクエストで実行可能です。

外部アプリから画像をアップロードする手順

以下の順番に解説していきます。

1.Bubble上でファイルをbase64に変換する

画像やPDFなどのファイルは、そのままの状態ではAPI等で送信することができません。

そのため、一度ファイルを、base64という形式で長い文字列のデータに変換（エンコード）し、その文字列をAPIで送信します。

Bubble等のノーコードツールには、ほとんどの場合、画像やファイルを変換・送信する仕組みがあります。

Bubbleの場合であれば、画像ファイルに「:encoded in base64」というアクションが存在しますし、あるいは、プラグインを導入することで、ファイルを簡単にbase64形式にエンコードし、文字列としてAPIに利用できます。

※base64に変換時に冒頭に付与される「data:image/png;base64,」等のデータ形式の情報は不要です。

変換後、APIで直接Salesforceへ情報を送信することも可能ですが、私の場合は、以下のようにMakeのwebhookのendpointにPOSTして利用しています。

2.APIでSalesforceにファイルをアップする

Salesforceにファイルをアップロードするためには、HTTPリクエストを利用します。

残念ながら、MakeやZapierでは、Salesforceへのファイルアップロードにネイティブ対応はしていないため、HTTPリクエストを利用することになります。

APIでSalesforceにアクセスするには、まず「アクセストークン」をHeaderに含める必要があります。詳しくはこちらの記事をご覧ください。

さて、Salesforceにファイルをアップロードするには、まずは「ContentVersion」を作成します。

Salesforceでは、アップロードしたファイルのバージョンの管理機能がありますが、まずはファイルの最初のバージョンをアップロードします。

・Endpoint URL（POST）

https://自分のドメイン.my.salesforce.com/services/data/v58.0/sobjects/ContentVersion

・Header

Authorization: Bearer アクセストークン

・Body

{
    "Title": "Salesforceに表示する画像のタイトル",
    "Pathonclient":"拡張子を含む適当な画像名（例：image.png）",
    "VersionData":"base64の文字列"
}

その他のパラメータとしては、Description（説明文）やOwnerId（所有者ID）などがあります。詳しくはヘルプをご覧ください。

また、次に紹介するContentDocumentIdをパラメータに含めることで、既存のファイルに新しいバージョンを追加することもできます。

さて、上記でPOSTした後に、Salesforceの項目の「ファイル」を見ると、送信したファイルがアップロードされていることが確認できます。

Responseでは、以下が返ってきます。

{
    "id": "作成されたContentVersionのID",
    "success": true,
    "errors": []
}

このidは、次にファイルを関連先と紐づけるために使います。

3.APIでSalesforceにファイルを取引先と紐付ける

ファイルをアップロードできましたので、次に、そのファイルと、取引先やユーザーを紐付ける方法をご紹介します。

紐付けを行うためには、まずアップロードしたファイルの「ContentDocumentId」をHTTPリクエストで取得します。

ContentDocumentIdは、様々なバージョンを含む一つのファイルに対応したIDです。

・Endpoint URL（GET）

https://自分のドメイン.my.salesforce.com/services/data/v58.0/query

・Header

Authorization: Bearer アクセストークン

・Parameter

?q=SELECT ContentDocumentId FROM ContentVersion WHERE Id ='2.で取得したContentVersionのID'

ここで、2.のresponseで返ってきたidを挿入します。

実行すると、レスポンスから、ContentDocumentIdを取得できます。

{
    "totalSize": 1,
    "done": true,
    "records": [
        {
            "attributes": {
                "type": "ContentVersion",
                "url": "/services/data/v58.0/sobjects/ContentVersion/XXX"
            },
            "ContentDocumentId": "XXX"
        }
    ]
}

次に、ここで取得したContentDocumentIdを使って、ファイルと関連先との紐付けを実行します。

・Endpoint URL（POST）

https://自分のドメイン.my.salesforce.com/services/data/v58.0/sobjects/ContentDocumentLink

・Header

Authorization: Bearer アクセストークン

・Body

{
    "contentDocumentId":"先ほどGETしたcontentDocumentId",
    "LinkedEntityId":"紐付けしたい取引先等のID",
    "Visibility":"例）ALLUsers",
    "ShareType":"例）V"
}

Visibilityは、ファイルを閲覧できるユーザの権限、ShareTypeはユーザや公開グループに共有する際に付与する権限を設定します。詳しくはヘルプをご覧ください。

実行すると、以下のようなレスポンスが返ってきます。

{
    "id": "XXXX",
    "success": true,
    "errors": []
}

Salesforceで確認すると、ファイルの「共有先」に、指定した取引先のID（閲覧者）が関連づけられていることを確認できます。

4.Salesforceで公開したファイルを表示する

最後に、アップロードしたファイル（画像）をCRMで表示する方法について、ご紹介します。

Salesforceにアップした画像を表示する方法はいくつかありますが、今回は、ここまでで取得したContentVersionIdと、ContentDocumentIdを利用して、PNGの画像を表示してみます。

https://自分のドメイン.file.force.com/sfc/servlet.shepherd/version/renditionDownload?rendition=ORIGINAL_Png&versionId=[入手したContentVersionId]&contentId=[入手したContentDocumentId]

※パラメータ「rendition」は、jpgの場合は「ORIGINAL_Jpg」となります。自分がアップロードしたファイルを別タブで開くと形式が確認できます。

このURLをブラウザに貼り付けて開くと、画像が表示されていることを確認できます。

※この方法で画像を閲覧できるのは、ファイルに指定された権限を満たすユーザーのみです。

さらに、このURLをimgタグのsrcに指定すれば、リッチテキストコンテンツとして、画像をCRM上に表示することができます。

APIでSalesforceのファイルも使いこなそう！

今回の記事は、以下の英語記事を参考にしました。

https://www.linkedin.com/pulse/how-upload-document-salesforce-files-using-rest-api-subhajit-goswami

Salesforceのファイルの操作は、通常のAPI操作よりも手順がやや多いものの、手順通りに実行すれば、さほど難しくはありません。

また、ここで紹介した方法は、MakeやZapierなどのiPaaSで、HTTPリクエストを使用すれば、ノーコードでも実行可能です（POSTMANなどでも一通り試すことができます）。

ぜひお手元のノーコードツールでお試しください。

お読みいただきありがとうございました！