LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@azblueground(Yoshihiko Aochi)inアドビ株式会社

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

Last updated at Posted at 2023-11-14

はじめに

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

シナリオ

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

アプリケーションの構成

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

Adobe Document Generation API

Document Generation APIについての説明は以前の記事でも紹介しましたが、ここでのサンプルではWebフォームに入力した情報をレイアウトして、パーソナライズされた保険証書のPDFとして出力する部分に利用しています。Document Generation APIはRESTfulエンドポイントが提供されています。前の記事ではJavaから利用する例をご紹介しましたが、言語に関わらずご利用いただけます。以下では認証の取得後、RESTで呼ぶ場合の手順を示します：

  1. 契約書の作成のためのテンプレートファイルを用意します。サンプルアプリケーションでは以下のようなフォーム入力画面と、フォームのフィールドに対応したテンプレートファイルをWordファイル(.docx)で用意しています。

    image.png

    image.png

    テンプレートファイルの二重の中括弧で囲っている部分には、後でJSONデータを差し込むためのキーが指定されています。ここでは単純にキーを並べていますが、配列データから直接表を作成するしたりすることや、文字の装飾のためのタグをデータの中に入れて使うことも可能になっています。詳細についてはこちらのページをご覧ください。

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

    Acrobat Servicesを利用する場合、処理のために入力するファイルと、出力するファイルは一時的にサービス内のInternal Storageに格納されます。これらのファイルは作成から24時間後に削除されます。このInternal Storageを利用する他に、お客様が指定するExternal Storageを利用することも可能で、この場合はこの手順によるアップロードは不要です。詳細については、こちらをご覧ください。

    POST https://pdf-services-ue1.adobe.io/assets

    Wordファイル（.docx)をテンプレートとしてアップロードする場合には、以下をBodyにセットします。

     {
    "mediaType": "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
 }

    成功すると、uploadUriとassetIDが返ってきます。uploadUriは次のステップでテンプレートをアップロードするためにUriです。またassetIDはそのアップロードする（した）文書を一意に示しているものです。

    {
   "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"
}

    　

  3. 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が返ってきます。
    　　

  4. 1で取得したassetIdと埋め込む情報をJSONデータとして用意して、PDFを生成します。

    POST https://pdf-services-ue1.adobe.io/operation/documentgeneration

    Bodyには1で入力されたフォームの情報から以下のような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に作成のステータスが返却されます。

  5. 作成のステータスをpollして確認します。

    GET <4のResponse Headerの中のlocationで指定されるURL>

    まだ作成途中であれば、以下のようにstatusに"in progress"が返却されます。まだ処理が完了していないので、数秒たってから、再度pollして確認します。

    {
   "status": "in progress"
}

    PDFが作成されると、以下のようなメッセージが返却されます。

    {
   "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"
   }
}

    downloadUriの後ろのtokenが"hoge"となっていますが、実際にはドメイン名以下のパスを含め、トランザクション毎に異なる値が自動的に入ります。

  6. 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

Adobe PDF Embed API

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

このページで利用したいデザインが決まったら、埋め込むコードを生成することができます。
image.png

これをそのままhtmlページの中に埋め込んで利用できます。このEmbed APIはAcrobat Servicesの中で唯一無償でご利用できるサービスですが、credentialの取得が必要になります。

Acrobat Sign API

Acrobat Sign APIは、Acrobat Signの電子サインサービスを外部のアプリケーションから利用するためのAPIです。
このアプリケーションでは、生成した保険証書に申込者の署名を求める動作をしますが、APIの呼び出し手順は以下のように行っています。（認証はOAuth 2または統合キーとして事前に取得します）

Acrobat Sign APIではSwaggerが用意されていますので、APIのリファレンス、各APIのテストのために利用することができますが、ここでは、サンプルの中でも利用している、簡単な契約書の送信手順を紹介いたします。

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

動画で使用しているアプリケーションのサンプルコードはこちらです。主にAdobeのサービスとやり取りする部分はbackendの中にあり、Document Generation APIでPDFを作成する部分はContractCreateController.javaの中で行い、Sign APIでの署名のコントロールは、ContractSignController.java内で行っています。

さいごに

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

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?