Skip to main content
Participant
May 18, 2022
Answered

「PDF Embed API」使用方法について

  • May 18, 2022
  • 1 reply
  • 1009 views

「PDF Embed API」の使用を検討しており、以下のサイトを確認しました。
https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos/

上記のサイトの上部の図の真ん中のWeb AppがAdobe Document Cloudにアクセスし、APIキーで認証され、「PDF Embed API」をロードできるようになると理解しました。
一番右のUsersにおいては、真ん中のWeb Appにアクセスできれば、「PDF Embed API」を利用できるようになるという理解は合ってますでしょうか?
※UsersはAdobe Document Cloudへのアクセスは不要

 

質問している背景としては、現在検討しているシステムの利用ユーザは、インターネットアクセスできない端末を利用しています。
※直接 Adobe Document CloudにHTTPリクエストを送ることができないため、「PDF Embed API」の認証を行う事が出来ず、使用できない

その環境下で、Web Appにはアクセスできるため、Web Appを介して、「PDF Embed API」を利用できるのか知りたいです。

 

また、無料で無制限にアクセスでき、「Adobe ID」が必要となる理解でいます。
上述のアクセス方法の記載を踏まえ「Adobe ID」が必要とする範囲は、図の真ん中のWeb Appに対する「Adobe ID」を持っていれば、Usersは「Adobe ID」は不要という理解でしょうか?

    This topic has been closed for replies.
    Correct answer Ten A
    インターネットに接続してないクライアントからではWeb上のAPIを蹴っ飛ばせませんから当然利用できません。基本的にWebページに埋め込むものですからスクリプトの実行によってAPIにアクセスします。
    例えば以下のページの例では
     
     
    該当するソースを抜き出すと、
     
    ...
    <!-- wp:html -->
    <p><script type="text/javascript">
    const viewerConfig = {
        embedMode: "IN_LINE"
    };
    document.addEventListener("adobe_dc_view_sdk.ready", function () {
        var adobeDCView = new AdobeDC.View({
            clientId: "<clientKey>",
            divId: "adobe-dc-view",
        });
        adobeDCView.previewFile({
            content: {
                location: {
                    url: "https://ten-artai.com/dc/wp-content/uploads/2020/11/P32-33.pdf",
                },
            },
            /* Pass meta data of file */
            metaData: {
                /* file name */
                fileName: "P32-33.pdf"
            }
        }, viewerConfig);
    });
    </script></p>
    ...
     
    この様にスクリプトでページ内に直接PDFを読み込んでいます。
    これは該当端末がWebにアクセス出来ることが前提条件となるということです。
    このページにアクセスした際のパケットの動きをトレースすると…
     
    204 11.225312 <client_add> <page_add> TCP 78 20009 → 443 [SYN] Seq=0...
    205 11.234171 <client_add> <dns_srv> DNS 83 Standard query 0xb2b1 A documentcloud.adobe.com
    206 11.234513 <client_add> <pdf_API> TCP 78 20010 → 443 [SYN] Seq=0...
    207 11.246227 <pdf_API> <client_add> TCP 74 443 → 20010 [SYN, ACK] Seq=0...
    208 11.246301 <client_add> <pdf_API> TCP 66 20010 → 443 [ACK] Seq=1...
    209 11.246538 <client_add> <pdf_API> TLSv1.3 684 Client Hello
    210 11.251099 <dns_srv> <client_add> DNS 203 Standard query response 0xb2b1 A documentcloud.adobe.com CNAME documentcloud.adobe.com.i.edgekey.net CNAME e29329.dsca.akamaiedge.net ....
    211 11.255074 <page_add> <client_add> TCP 74 443 → 20009 [SYN, ACK] Seq=0...
    212 11.255101 <client_add> <page_add> TCP 66 20009 → 443 [ACK] Seq=1...
    213 11.255299 <client_add> <page_add> TLSv1.2 583 Client Hello
    214 11.262863 <pdf_API> <client_add> TCP 66 443 → 20010 [ACK] Seq=1...
    215 11.263104 <pdf_API> <client_add> TLSv1.3 330 Server Hello, Change Cipher Spec, Application Data, Application Data
    216 11.263122 <client_add> <pdf_API> TCP 66 20010 → 443 [ACK] Seq=619...
    217 11.263297 <client_add> <pdf_API> TLSv1.3 146 Change Cipher Spec, Application Data
    218 11.263731 <client_add> <pdf_API> TLSv1.3 112 Application Data
     
    この様にHTMLからリクエストを受けたAPIがパケットをクライアントに送信しクライアント側ブラウザ上でレンダリングします。クライアントがWebに接続されていない状態ではJavaScriptを実行してデータを受け取る事が出来ません。

    1 reply

    Ten A
    Community Expert
    Ten ACommunity ExpertCorrect answer
    Community Expert
    May 19, 2022
    インターネットに接続してないクライアントからではWeb上のAPIを蹴っ飛ばせませんから当然利用できません。基本的にWebページに埋め込むものですからスクリプトの実行によってAPIにアクセスします。
    例えば以下のページの例では
     
     
    該当するソースを抜き出すと、
     
    ...
    <!-- wp:html -->
    <p><script type="text/javascript">
    const viewerConfig = {
        embedMode: "IN_LINE"
    };
    document.addEventListener("adobe_dc_view_sdk.ready", function () {
        var adobeDCView = new AdobeDC.View({
            clientId: "<clientKey>",
            divId: "adobe-dc-view",
        });
        adobeDCView.previewFile({
            content: {
                location: {
                    url: "https://ten-artai.com/dc/wp-content/uploads/2020/11/P32-33.pdf",
                },
            },
            /* Pass meta data of file */
            metaData: {
                /* file name */
                fileName: "P32-33.pdf"
            }
        }, viewerConfig);
    });
    </script></p>
    ...
     
    この様にスクリプトでページ内に直接PDFを読み込んでいます。
    これは該当端末がWebにアクセス出来ることが前提条件となるということです。
    このページにアクセスした際のパケットの動きをトレースすると…
     
    204 11.225312 <client_add> <page_add> TCP 78 20009 → 443 [SYN] Seq=0...
    205 11.234171 <client_add> <dns_srv> DNS 83 Standard query 0xb2b1 A documentcloud.adobe.com
    206 11.234513 <client_add> <pdf_API> TCP 78 20010 → 443 [SYN] Seq=0...
    207 11.246227 <pdf_API> <client_add> TCP 74 443 → 20010 [SYN, ACK] Seq=0...
    208 11.246301 <client_add> <pdf_API> TCP 66 20010 → 443 [ACK] Seq=1...
    209 11.246538 <client_add> <pdf_API> TLSv1.3 684 Client Hello
    210 11.251099 <dns_srv> <client_add> DNS 203 Standard query response 0xb2b1 A documentcloud.adobe.com CNAME documentcloud.adobe.com.i.edgekey.net CNAME e29329.dsca.akamaiedge.net ....
    211 11.255074 <page_add> <client_add> TCP 74 443 → 20009 [SYN, ACK] Seq=0...
    212 11.255101 <client_add> <page_add> TCP 66 20009 → 443 [ACK] Seq=1...
    213 11.255299 <client_add> <page_add> TLSv1.2 583 Client Hello
    214 11.262863 <pdf_API> <client_add> TCP 66 443 → 20010 [ACK] Seq=1...
    215 11.263104 <pdf_API> <client_add> TLSv1.3 330 Server Hello, Change Cipher Spec, Application Data, Application Data
    216 11.263122 <client_add> <pdf_API> TCP 66 20010 → 443 [ACK] Seq=619...
    217 11.263297 <client_add> <pdf_API> TLSv1.3 146 Change Cipher Spec, Application Data
    218 11.263731 <client_add> <pdf_API> TLSv1.3 112 Application Data
     
    この様にHTMLからリクエストを受けたAPIがパケットをクライアントに送信しクライアント側ブラウザ上でレンダリングします。クライアントがWebに接続されていない状態ではJavaScriptを実行してデータを受け取る事が出来ません。