Acrobat ServicesとAcrobat Signで窓口業務をデジタル化

# はじめに
窓口業務をデジタル化することで、業務のペーパレス化やスピードアップやが実現されます。本記事では、旅行保険の申込の窓口業務を例としたサンプルアプリケーションを例にAcrobat Servicesの活用方法を紹介します。

# シナリオ
旅行者が旅行保険の窓口で申込を行い、保険証書を発行し、最後に相互に署名された保険証書を受け取る実用的なサンプルアプリケーションです。このサンプルでは、窓口で対面で署名を行うか、または契約者のメールアドレスに送付するかを選択できるようになっています。動作については以下の動画をご覧ください。

<iframe width="560" height="315" src="https://www.youtube.com/embed/xSQE-1c6KAY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

# アプリケーションの構成
上の動画内で紹介しているサンプルアプリケーションは、フロントエンドとバックエンドの２つから構成されています。フロントエンドはReact使用し、ユーザの入力フィールドの表示や、保険証書をAcrobat Embed APIを使ってプレビューしています。バックエンドはSpring Bootを使って、フロントからのリクエストをを処理しながら、PDFの生成や、電子サインのために、Adobe Document Generation API、Sign APIを呼び出すような構成となっています。

## Adobe Document Generation API
Document Generation APIについての説明は[以前の記事](https://qiita.com/azblueground/items/05c1fd49e16ac0e7c00c)でも紹介しましたが、ここでのサンプルではWebフォームに入力した情報をレイアウトして、パーソナライズされた保険証書のPDFとして出力する部分に利用しています。Document Generation APIは[RESTfulエンドポイント](https://developer.adobe.com/document-services/docs/apis/)が提供されています。前の記事ではJavaから利用する例をご紹介しましたが、言語に関わらずご利用いただけます。以下では認証の取得後、RESTで呼ぶ場合の手順を示します：
1. 契約書の作成のためのテンプレートファイルを用意します。サンプルアプリケーションでは以下のようなフォーム入力画面と、フォームのフィールドに対応したテンプレートファイルをWordファイル(.docx)で用意しています。

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3111352/6512dea7-ef2c-f703-d905-ed55bda86400.png)

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3111352/a5bd45ef-2109-3b36-c34f-22368e58d364.png)

    テンプレートファイルの二重の中括弧で囲っている部分には、後でJSONデータを差し込むためのキーが指定されています。ここでは単純にキーを並べていますが、配列データから直接表を作成するしたりすることや、文字の装飾のためのタグをデータの中に入れて使うことも可能になっています。詳細については[こちら](https://developer.adobe.com/document-services/docs/overview/document-generation-api/complextableconstructs/#conditions-inside-tables)のページをご覧ください。<p/>

1. Acrobat Servicesを利用するために、テンプレートファイルのアップロード用のURIとassetIdを取得します。

   :::note info
   Acrobat Servicesを利用する場合、処理のために入力するファイルと、出力するファイルは一時的にサービス内のInternal Storageに格納されます。これらのファイルは作成から24時間後に削除されます。このInternal Storageを利用する他に、お客様が指定するExternal Storageを利用することも可能で、この場合はこの手順によるアップロードは不要です。詳細については、[こちら](https://developer.adobe.com/document-services/docs/overview/pdf-services-api/howtos/pdf-external-storage-sol/)をご覧ください。
   :::
   
   ```
   POST https://pdf-services-ue1.adobe.io/assets
   ```
   Wordファイル（.docx)をテンプレートとしてアップロードする場合には、以下をBodyにセットします。
   ```json
    {
       "mediaType": "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
    }
   ```
    成功すると、uploadUriとassetIDが返ってきます。uploadUriは次のステップでテンプレートをアップロードするためにUriです。またassetIDはそのアップロードする（した）文書を一意に示しているものです。
    ```json
    {
       "uploadUri": "https://dcplatformstorageservice-prod-us-east-1.s3-accelerate.amazonaws.com/cec58d1062c3462e901a9caad437b61c_F725269E64663AE50A495C87%40techacct.adobe.com/4b68e173-9f6e-498a-8948-a4cca7b4d0e0?X-Amz-Security-Token=FwoGZXIvYXdzEMj%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaDFGXtAhU4tW0poTEaSLUAS1yE7oP3BaD%2FiPl1tGXS7Zb9iydCfTFCT7RpwmvV3P1wkGs6vSPNMg%2FW7SRnVptH9hugeCHCBGKCGJVsyF6%2FUNAxEi0MSKeIwtEoz1iLaWFtzx%2FRsu5EddAy0PP%2B%2BOuSCgR4YiRljw773fp7te96PpXLXWlu9bC9ThIYz89Iv5hBz7BPPKCoq37%2FRR3uim6JKZW6b%2BW3JYmJNNlO8GLgyloYjBpfYkEndsyg1N80owg1x70K5Zhii5a1JfHz7Pxx70oQUXERzqx%2FWeheOphPs%2BGLh16KOazyKkGMi1guvA0Z1QP8vyePkQE%2FXgxd8aM%2BFopPyQfurdN8qiD3UBeckz2p1RkItRKMwY%3D&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20231020T062339Z&X-Amz-SignedHeaders=content-type%3Bhost&X-Amz-Expires=3600&X-Amz-Credential=ASIAWD2N7EVPPXO4DEVU%2F20231020%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Signature=d5821b2ff869ab08b135a5fb943c9b5fe41d3fa10c99bbc1620c482b2a1808c1",
       "assetID": "urn:aaid:AS:UE1:348856dd-42b0-4262-xxxx-0a50435a3824"
    }
    ```
    　
1. 2で取得した**uploadUri**を使って、1で用意したテンプレートのWordファイルをアップロードします。

   ```
    PUT https://dcplatformstorageservice-prod-us-east-1.s3-accelerate.amazonaws.com/cec58d1062c3462e901a9caad437b61c_F725269E64663AE50A495C87%40techacct.adobe.com/4b68e173-9f6e-498a-8948-a4cca7b4d0e0?X-Amz-Security-Token=FwoGZXIvYXdzEMj%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaDFGXtAhU4tW0poTEaSLUAS1yE7oP3BaD%2FiPl1tGXS7Zb9iydCfTFCT7RpwmvV3P1wkGs6vSPNMg%2FW7SRnVptH9hugeCHCBGKCGJVsyF6%2FUNAxEi0MSKeIwtEoz1iLaWFtzx%2FRsu5EddAy0PP%2B%2BOuSCgR4YiRljw773fp7te96PpXLXWlu9bC9ThIYz89Iv5hBz7BPPKCoq37%2FRR3uim6JKZW6b%2BW3JYmJNNlO8GLgyloYjBpfYkEndsyg1N80owg1x70K5Zhii5a1JfHz7Pxx70oQUXERzqx%2FWeheOphPs%2BGLh16KOazyKkGMi1guvA0Z1QP8vyePkQE%2FXgxd8aM%2BFopPyQfurdN8qiD3UBeckz2p1RkItRKMwY%3D&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20231020T062339Z&X-Amz-SignedHeaders=content-type%3Bhost&X-Amz-Expires=3600&X-Amz-Credential=ASIAWD2N7EVPPXO4DEVU%2F20231020%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Signature=d5821b2ff869ab08b135a5fb943c9b5fe41d3fa10c99bbc1620c482b2a1808c1
   ```
   Message BodyにWordファイルを指定します。アップロードに成功するとHTTP Status 200が返ってきます。
　　
1. 1で取得したassetIdと埋め込む情報をJSONデータとして用意して、PDFを生成します。
    ```
    POST https://pdf-services-ue1.adobe.io/operation/documentgeneration
    ```
    Bodyには1で入力されたフォームの情報から以下のようなJSONデータを生成しセットします。
    ```json
    {
        "purposeOfTrip": "観光",
        "periodOfInsuranceFrom": "2023-12-10",
        "destination": "アメリカ",
        "dateOfContract": null,
        "insuranceType": "ベーシックタイプ",
        "dateOfIssue": "2023-11-09T09:43:04.7716641",
        "certNumber": "490584771",
        "insuredSex": "男",
        "insuredEmail": "yaochi+sasaki@adobetest.com",
        "periodOfInsuranceTo": "2023-12-16",
        "insuredBirthDate": "1970-03-01",
        "insuredName": "佐々木　隆",
        "policyHolderName": "佐々木　隆",
        "email": null
    }
    ```
    
    JSONデータのセットに成功すると、HTTP Status 201が返ってきて、レスポンスヘッダのlocationに作成のステータスが返却されます。<p/>
1. 作成のステータスをpollして確認します。
    ```
    GET <4のResponse Headerの中のlocationで指定されるURL>
    ```
    まだ作成途中であれば、以下のようにstatusに"in progress"が返却されます。まだ処理が完了していないので、数秒たってから、再度pollして確認します。
    ```json
    {
       "status": "in progress"
    }
    ```
    PDFが作成されると、以下のようなメッセージが返却されます。
    ```json
    {
       "status": "done",
       "asset": {
           "metadata": {
               "type": "application/pdf",
               "size": 33340
           },
       "downloadUri": "https://dcplatformstorageservice-prod-us-east-1.s3-accelerate.amazonaws.com/cec58d1062c3462e901a9caad437b61c_F725269E64663AE50A495C87%40techacct.adobe.com/f4e288ec-2a39-4678-bd37-276ac9c32515?X-Amz-Security-Token=hoge",
       "assetID": "urn:aaid:AS:UE1:dccc943f-aaf6-42ec-XXXX-75d9ba9606e6"
       }
    }
    ```
   :::note info
   downloadUriの後ろのtokenが"hoge"となっていますが、実際にはドメイン名以下のパスを含め、トランザクション毎に異なる値が自動的に入ります。
   :::

1. 5でstatusが"done"になっていたら、downloadUriをGETして、生成されたpdfをダウンロードします。

    ```
    GET https://dcplatformstorageservice-prod-us-east-1.s3-accelerate.amazonaws.com/cec58d1062c3462e901a9caad437b61c_F725269E64663AE50A495C87%40techacct.adobe.com/f4e288ec-2a39-4678-bd37-276ac9c32515?X-Amz-Security-Token=hoge
    ```
   ダウンロードしたPDFを開くと、テンプレートでタグを設定した箇所にJSONデータが埋め込まれて出力されています。サンプルアプリケーションの中では、次に紹介するAdobe PDF Embed APIを利用して表示されます。

   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3111352/6a1cade7-e7ce-47a4-fabc-8552b3e4bd96.png)


## Adobe PDF Embed API
Adobe PDF Embed APIは、PDFをWebページに埋め込み、閲覧、操作を行うことができる、Client Side JavaScriptとして提供されるAPIです。PDF Embed APIはモードによって見映えを変更することができます。以下のページでモードによる違いを確認することができます。

https://documentservices.adobe.com/view-sdk-demo/index.html

このページで利用したいデザインが決まったら、埋め込むコードを生成することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3111352/2d4d1fd8-be5f-b2f2-19ed-d326c19005fc.png)

これをそのままhtmlページの中に埋め込んで利用できます。このEmbed APIはAcrobat Servicesの中で唯一無償でご利用できるサービスですが、[credentialの取得](https://acrobatservices.adobe.com/dc-integration-creation-app-cdn/main.html)が必要になります。

## Acrobat Sign API
[Acrobat Sign API](https://developer.adobe.com/document-services/apis/sign-api/)は、Acrobat Signの電子サインサービスを外部のアプリケーションから利用するためのAPIです。
このアプリケーションでは、生成した保険証書に申込者の署名を求める動作をしますが、APIの呼び出し手順は以下のように行っています。（認証は[OAuth 2](https://secure.na1.adobesign.com/public/static/oauthDoc.jsp)または[統合キー](https://helpx.adobe.com/jp/sign/faq/api.html)として事前に取得します）

Acrobat Sign APIでは[Swagger](https://secure.jp1.echosign.com/public/docs/restapi/v6)が用意されていますので、APIのリファレンス、各APIのテストのために利用することができますが、ここでは、サンプルの中でも利用している、簡単な契約書の送信手順を紹介いたします。

1. Restful Serviceを利用するためのアクセスポイントのベースURIを取得します。以降はこのベースURIを各URIの先頭につけて呼び出します。
   ```
   GET /api/rest/v6/baseUris
   ```
   成功すると、以下のようなアクセスポイントが返ってきます。RESTで呼ぶ場合には、apiAccessPointを先頭につけて、以降のAPIを呼び出して使用します。
   ```json
   {
      "apiAccessPoint": "https://api.jp1.adobesign.com/",
      "webAccessPoint": "https://secure.jp1.adobesign.com/"
   }
   ```
   　
1. 前項のAcrobat Generation APIで作成した契約書をAcrobat Signにアップロードします。
   ```
   POST /api/rest/v6/transientDocuments
   ```
   アップロードに成功すると、以下のようにtransientDocumentIdが返ってきます。以降、このtransientDocumentIdを指定して、契約書を送信することになります。
   ```json
   {"transientDocumentId":"3AAABLblqZhCvSCVW5qWyeXe6-aY6Wuah63OfTBjrBxdMo93qJfQIQsrNalQaFImuamr4h0kaAV4DlWouNSr5jvcKg1qc7Fo_fq8x3h1jEnYe2kalAv792NDirVAVIg4TAVelyEAEdVHuzosEmXRVphReKiDDnC_5plAlADV7zs49dfniOmmaGTDhR7N97OXhCk0uvd4h_2Jp2R8CQRVNdHI1dvCATfB9g3k_kxHdH0j5xKp4WlCJAp0M3jfYslsDEkNhKcZmfoJtTLpERyruSc4Jan-5rL18iiyH8DzQBiXZ0JydjuZwsQOhHjc2DjfWVp4VcJfoqmELCbyLf97RZ-SV_e90LAO75Q_4Y3-BsB0hrxExyF4MiJpuRXy8aanxQL-yJkmEtySA*"}
   ```
   　
1. 契約書を署名者に送信します。
   ```
   POST /api/rest/v6/agreements
   ```
   送信に成功すると、以下のようなagreementIdが返されます。
   ```json
   {
      "id": "CBJCHBCAABAAYiqspBjrvkW_gs-DElLIqHo_Kk0YU9Sb"
   }
   ```
   この時、対面で署名を行う場合には署名のためのページのURLを取得することができます。{agreementId}の部分は、上記で取得できたidの値を代入します。
   ```
   GET /api/rest/v6/{agreementId}/signingUrls
   ```
   レスポンスの例はこのような感じで、esignUrlが契約者に対して表示される画面になります。
   ```json
   {
      "signingUrlSetInfos": [
         {
            "signingUrls": [
              {
                "email": "hoge@xyz.com",
                "esignUrl": "https://secure.jp1.adobesign.com/public/apiesign?pid=CBFCIBAA3AAABLblqZhCGCS4oXeuepHezw_OTod2FZaGjxmvkIY6oRVooeyQAXZElUBGbZP_Ns7CLrhYDiW5ezh_--15DFilWyOqjQr4O&client_id=HOGEH253K6"
              }
            ]
        }
     ]
   }
   ```

動画で使用しているアプリケーションのサンプルコードは[こちら](https://github.com/bandetech/adobe-insurance-demo)です。主にAdobeのサービスとやり取りする部分はbackendの中にあり、Document Generation APIでPDFを作成する部分は[ContractCreateController.java](https://github.com/bandetech/adobe-insurance-demo/blob/main/backend/src/main/java/com/adobe/sign/demo/controller/ContractCreateController.java)の中で行い、Sign APIでの署名のコントロールは、[ContractSignController.java](https://github.com/bandetech/adobe-insurance-demo/blob/main/backend/src/main/java/com/adobe/sign/demo/controller/ContractSignController.java)内で行っています。

# さいごに
本記事では、Acrobat Servicesを使った窓口業務のデジタル化の方法について解説しました。
このような窓口業務の例は、銀行の口座開設、保険の申請、請求、自動車の登録、免許の更新、診療予約、検査の受付、不動産の賃貸、売買契約など、多岐に渡って利用することができます。

サンプルアプリケーションを参考に、Acrobat Servicesを使ったアプリケーションの構築を始めてみてはいかがでしょうか。また、Power Automateを使ってアプリケーションを構築し、開発期間をさらに短縮することも可能ですので、ぜひお試しください。