デスクトップ Web Viewer は、コンピューターにフルスクリーンでコンテンツを表示できる最新のブラウジングソリューションです。設定を管理して、ユーザーの操作性を定義することができます。

この Web Viewer は、ブラウズページナビゲーション、エンタイトルメントログイン機能、固定レイアウトや HTML ベースの記事などに対応しており、デスクトップ Web ブラウザー上で完全なアプリを実行します。

 

デスクトップコンピューターに表示される Web Viewer。ユーザーは、ページのスクロールダウン、ズームイン/ズームアウト、記事間のスムーズな移動、ブラウズページなどを行うことができます。

Web Viewer の構成

  1. オンデマンドポータル(https://aemmobile.adobe.com)で、左側のナビゲーションバーの「アプリケーション」を選択します。「作成」>「デスクトップ Web Viewer」を選択します。

     

  2. デスクトップ Web Viewer の設定を指定して、プロセスを完了します。

    カスタムドメインの URL – Web Viewer の URL をホストするように設定した Web サイトの(https:// で始まる)URL を指定します。カスタムドメインの URL の設定については、後述のセクションを参照してください。

    プライバシーポリシーの URL – プライバシーポリシーの URL を指定すると、Web Viewer のメニューに「プライバシーポリシー」が表示されます。ユーザーが「プライバシーポリシー」をクリックすると、指定した Web ページが表示されます。

    利用条件の URL – アプリの利用条件について記載した Web ページの URL を指定します。ユーザーが「利用条件」をクリックすると、指定した Web ページが表示されます。

    著作権情報 – Web Viewer に表示される著作権情報を指定します。

    解析オプトインダイアログを表示 – このオプションを選択すると、コンテンツを表示する前にオプトインダイアログボックスが表示され、ユーザーがデータの追跡をオプトアウトできます。このオプションが選択されているかどうかに関わらず、ユーザーは Web Viewer の設定を使用して、いつでもオプトインまたはオプトアウトできます。このオプションは、データの追跡をユーザーがオプトアウトできるように義務付けられている地域で特に便利です。

  3. Web Viewer でカスタムフォントを使用する場合は、ポータルの「フォント」セクションでフォントを編集し、「パブリックデスクトップ Web Viewer の Web フォントを有効にする」オプションを選択します。

    フォントのアップロードについて詳しくは、カードとレイアウトの作成:カードのカスタムフォントの使用を参照してください。

  4. コンテンツを公開して、Web Viewer で使用できるようにします。

  5. デスクトップ Web Viewer をオーディエンスが利用できるようにします。

    ポータルの「アプリケーション」セクションにある「URL」リンクをコピーして(下記の画像を参照してください)、自分の Web サイト上で、またはその他の方法でユーザーが利用できるようにします。

    プロジェクトでソーシャルシェアとデスクトップ Web Viewer の両方を有効にする場合、デスクトップコンピューターまたはラップトップコンピューターで共有リンクをクリックすると、Web Viewer バージョンの記事が開きます。AEM Mobile アプリでのソーシャルシェアを参照してください。

Web Viewer のテスト

ポータルでデスクトップ Web Viewer アプリを作成した後は、コンピューター上でそのリンクをクリックして、ブラウザーでデスクトップ Web Viewer を表示することができます。

Web Viewer の追加情報

Web Viewer の一般情報

  • プロジェクトにタブレットとスマートフォンの両方の最上位ナビコレクションが含まれる場合、Web Viewer ではタブレット用の最上位コレクションが使用されます。
  • Web Viewer はプリフライトオプションには対応していません。コレクションと記事を公開して、Web Viewer で使用できるようにしてください。
  • Web Viewer はオフラインでは動作しません。
  • ブラウズページや記事へ移動する場合は、最新バージョンが表示されます。ブラウズページや記事が既に表示されているときは、Web Viewer は新たな更新を検出しません。
  • Web Viewer のブラウズページは、一定の幅(960 ピクセル)でレンダリングされます。InDesign ベースの記事は、ターゲットのレイアウトサイズの幅でレンダリングされます。

 

 

必要システム構成

  • Mac OSX 10.10 以降と、Safari/Chrome/Firefox の最新バージョンとその 1 つ前のバージョン。
  • Windows 7 または 8.x と、Chrome/Firefox の最新バージョンとその 1 つ前のバージョン、または Internet Explorer 11 以降。
  • Web Viewer はタブレットとスマートフォンではサポートされません。

Web Viewer はコンピューターのブラウザーでのみ動作し、モバイルデバイスでは動作しません。Web Viewer のリンクをスマートフォンまたはタブレットで開くと、記事の設定で指定されているソーシャルシェアのランディングページにリダイレクトされます。このランディングページには、アプリケーションストアへのリンクを含めることができます。コレクションにはランディングページがないため、コレクションへの URL の場合は、そのデバイス向けのアプリケーションストアへのリンクを含む同様のページが表示されます。プロジェクト設定の「ストア」タブで、アプリケーションストアのリンクを指定します。

ホスティング場所

デフォルトでは、Web Viewer はアドビのサーバー(https://viewer.aemmobile.adobe.com)でホストされます。

後述のように、独自のドメインで Web Viewer の URL をホストすることができます。

ナビゲーション

  • 読者は、画面下部をポイントすると表示されるナビゲーションバーを使って前後に移動できます。
画面下部をマウスでポイントすると、ナビゲーションバーが表示されます。

  • navto://relative/parent の形式はサポートされていませんが、近日中に実装される予定です。

インタラクティブオーバーレイのサポートとガイダンス

  • InDesign ベースのすべてのオーバーレイがサポートされます。

 

  • スライドショーでのスワイプ操作はサポートされていません。「タップして再生」、または「前へ/次へ」ボタンを有効にすることをお勧めします。
  • オーディオオーバーレイについては、MP3 ファイルのみが完全にサポートされています。WAV、MP4、OGG などの他のオーディオ形式は、どのブラウザーでも完全にはサポートされていません。
  • バックグラウンドオーディオファイルの再生はサポートされていません。オーディオは特定の記事に限定されています。
  • コンテナオーバーレイ内のオーディオオーバーレイまたはビデオオーバーレイが自動再生に設定されている場合、オーバーレイが表示されるまでは再生は開始されません。
  • ビデオオーバーレイについては、MP4 と M4V 形式のみがサポートされています。Firefox で機能を十分に活用するためには、MIME タイプが重要です。外部でホストされているビデオは、video/mp4 の MIME タイプで提供する必要があります。また、ビデオは .m4v ではなく、.mp4 拡張子を使用することをお勧めします。ビデオファイルの拡張子の名前を変更するだけです。
  • ビデオオーバーレイがコンテナオーバーレイ内で再生されており、読者がコンテナをスクロールしてページ外へ出た場合、ビデオの再生は停止しません。
  • Web オーバーレイがコンテナのステート内にあり、読者がそのステートを変更した場合、その Web オーバーレイはアクティブなままです。

InDesign ベースの記事の表示

  • InDesign ベースの記事では「水平スワイプのみ」オプションはサポートされていません。これらの「分割・統合済み」の記事は垂直に表示されます。
  • InDesign でスムーズスクロール記事を作成する場合は、記事ファイルを書き出す際にページサイズ(1024x3000 など)ではなく、ターゲットサイズ(1024x768 など)を指定するようにします。
  • ページ単位の InDesign 記事は、Web Viewer ではページ間の区切りとともに表示されます。
ページ単位の InDesign ベースの記事の間には、仕様により区切りが表示されます。

解析

  • Web Viewer ではアプリ内メッセージはサポートされていません。アプリ内メッセージには Mobile SDK が必要ですが、これはデスクトップコンピューターでは使用できません。
  • Web Viewer でキャプチャされた解析について詳しくは、AEM Mobile アプリの解析を参照してください。

Web Viewer の無効化

プロジェクトに対してデスクトップ Web Viewer を無効にする場合は、ポータルの「アプリ」セクションで「デスクトップ Web Viewer」を選択し、ごみ箱アイコンをクリックして削除します。

カスタムドメインの URL の設定

カスタムドメインの URL を設定すると、すべてのアプリケーションのコードとコンテンツがアドビのサーバーでホストされていても、エンドユーザーには独自のドメインでホストされているように表示されます。

デフォルトの Web Viewer の URL の例

https://viewer.aemmobile.adobe.com/index.html#project/abcdefgh-a123-4567-890a-ab1234567890/view/myView/article/myArticle

カスタムの Web Viewer の URL の例

https://www.mydomain.com/custompage.html#project/abcdefgh-a123-4567-890a-ab1234567890/view/myView/article/myArticle

  1. 自分のサイト上のシンプルな HTML ページをホストします。この Web ページの名前は自由に付けることができます。

    ページは有効なドメインでホストされ、http ではなく https が使用されている必要があります。また、ホスティングドメインには有効な SSL 証明書が関連付けられている必要があります。

  2. 指定する Web ページに次の HTML コードを追加します。

    <!DOCTYPE html>
    <html>
    <head>
    	<meta http-equiv="x-ua-compatible" content="IE=edge">
    	<script src="https://viewer.aemmobile.adobe.com/loader.js"></script>
    </head>
    <body></body>
    </html>

    http-equiv="x-ua-compatible" という meta タグは Microsoft Internet Explorer で使用されるもので、ページのレンダリング時に使用されるドキュメントモードを指定します。この meta タグを使用すれば、ユーザーの IE で互換モードが有効になっている場合に発生する問題を回避できます。動的に追加される他の meta タグとは異なり、この meta タグは正しく解釈されるように IE のページに追加する必要があります。

    script タグは、アプリの表示とレンダリングに必要な HTML 要素を動的に生成する JavaScript のローダースクリプトを指定します。 

  3. ポータルでデスクトップ Web Viewer アプリを作成するときに、「カスタムドメインの URL」フィールドに URL を指定します。カスタムのホスティングページのプロトコルとページ名を含む完全な URL を指定します(https://www.mydomain.com/custompage.html など)。

     

  4. デスクトップ Web Viewer アプリを作成したら、「URL」をクリックして、現在のブラウザーでコンテンツを表示します。URL にカスタムドメインが使用されます。

その他のスクリプト、ライブラリまたは他のコンテンツの使用は、カスタムドメインのホスティングでは正式にはサポートされていません。特に、広告ライブラリなど、ページの DOM の変更やページへの視覚的要素の追加を行うコードは一切サポートされていないため、予期しない動作を引き起こす可能性があります。また、その他の CSS スタイルをページに追加すると、予期しない動作や視覚的な不具合が発生する場合があります。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー