正しい記事を見ていますか?

この記事は、Digital Publishing Suite に関するものです。AEM Mobile 記事については、HTML 記事の作成を参照してください。

Folio に HTML ベースの記事を読み込んで、Viewer 上に記事として表示させることができます。HTML 記事にはファイルサイズが非常に小さいという利点があり、週刊のパブリケーションや単純なテキスト中心の記事に適しています。Folio Overlays パネルで使用できないインタラクティブ機能を HTML 記事に含めることもできます。

ビデオチュートリアル

ビデオチュートリアル
<a href="http://tv.adobe.com/watch/learn-digital-publishing-suite/loading-html-articles/">HTML 記事の読み込み(英語のみ)</a>
Colin Fleming

Adobe Edge を使用して DPS 用 HTML を作成する方法については、Raghu Thricovil 氏の記事、Adobe Edge を使用した HTML アニメーションによる DPS Folio の強化(英語のみ)を参照してください。

  1. HTML ファイルを含んだフォルダーを作成します。

    フォルダーには使用しているアセットだけが含まれていることを確認します。フォルダー内のすべてのアセットは、使用されていない場合でもアップロードされます。

  2. HTML 記事を 1 方向用フォルダーに読み込む場合、.html ファイル名に _h または _v サフィックスを追加します(index_h.html など)。

    サフィックスを追加しない場合、記事は 2 方向の記事として読み込まれる可能性があります。1 方向の Folio をプレビューまたは公開しようとすると、エラーメッセージが表示されます。

  3. Folio Builder パネルで、HTML 記事を含める Folio を開きます。

  4. Folio Builder パネルの記事ビューで、パネルメニューから「記事を読み込み」をクリックします。

  5. 「1 つの記事を読み込み」オプションを選択し、場所フォルダーアイコン をクリックして HTML フォルダーを指定します。

    「複数の記事を読み込み」オプション(記事を読み込むためのフォルダー構造の設定を参照)または「sidecar.xml を使用して読み込み」オプション(パスベースの sidecar.xml ファイルを使用した記事の読み込みを参照)を使用して HTML 記事を読み込むこともできます。

  6. その他の設定(「スムーズスクロール」など)を指定し、「OK」をクリックします。

HTML ファイルを編集する場合は、Folio Builder パネルで HTML 記事を選択し、「更新」を選択します。

HTML 記事の要件

  • 横置きと縦置きの両方で機能する 1 つの HTML ファイルを作成することも、2 方向のそれぞれに対応する個別の HTML ファイルを作成することもできます。縦置きと横置きで別々の HTML ファイルを使用する場合は、HTML ファイル名に _v および _h のサフィックスを付けます(例:index_h.html)。単方向の Folio を作成する場合は、必要な HTML ファイルは 1 つだけです。単方向の Folio では、HTML ファイルに _h または _v のサフィックスを含めます。

  • 動的 HTML(DHTML)ファイルは、現在、完全にはサポートされていません。

  • ファイル構造としては、HTML ファイルの関連するすべてのグラフィックとスクリプトを個別の記事フォルダーに配置する方法と、Folio 全体の関連するグラフィックとスクリプトを HTMLResources.zip ファイルに配置する方法があります。HTMLResources.zip ファイルは、Folio Builder パネルから、または Web 上の Folio Producer から Folio に読み込みます。HTML リソースを読み込むを参照してください。


    HTMLResources フォルダーの例

  • HTML コードでは、相対パスを使用してください。HTML ファイルと同じレベルにある画像にリンクしている場合は、次のような方法を使用します。

    <img src="GlobalImage.jpg"/>

    HTMLResources フォルダーにある画像にリンクしている場合は、次のような方法を使用します。

    <img src="../HTMLResources/GlobalImage.jpg"/>

HTML 記事へのハイパーリンクおよび HTML 記事からのハイパーリンクの作成については、HTML 記事の navto ハイパーリンクを作成するを参照してください。

Android Viewer に対応した HTML 記事の作成

Android Viewer 向けに HTML 記事を作成する場合の手順説明と要件については、Android Viewer に対応した HTML 記事の作成(英語のみ)を参照してください。

HTML5 リソース

HTML 記事のビデオをフルスクリーンのビデオオーバーレイのように動作させる

ビデオがリンクされた 1 方向の HTML 記事を作成する場合、デバイスを回転すると、ビデオも同様に回転するようにできます。さらに、ビデオの再生が終わったときに、ビデオを再生中の App 内ブラウザーを閉じることができます。この動作を有効にするには、HTML ビデオリンク内で「videofile://」プレフィックスを使用してください。このオプションは iOS アプリケーションでのみ使用できます。

注意:

ビデオ動作の例については、無料の DPS Tips アプリケーションの HTML の例の問題を参照してください(英語のみ)。

標準のビデオ動作

次の例では、ビデオは App 内ブラウザーで再生され、1 方向の Folio では回転しません。<a href="Links/video.mp4">ビデオを再生</a>

または <a href="../HTMLResources/videos/video.mp4">ビデオを再生</a>

強化されたビデオ動作

次の例では、ビデオは 1 方向の Folio で適切に回転し、ビデオが終了すると記事に戻ります。<a href="videfile://Links/video.mp4">ビデオを再生</a>

または <a href="videofile://../HTMLResources/videos/video.mp4">ビデオを再生</a>

JavaScript

次の動作は、ウィンドウオブジェクトに対して playFullscreenVideo 関数を使用する JavaScript によってトリガーすることもできます。<a onclick="window.playFullscreenVideo('Links/video.mp4');">ビデオを再生</a>

または <a onclick="window.playFullscreenVideo('../HTMLResources/videos/video.mp4');">ビデオを再生</a>

ストリーミングビデオ

次の例では、ストリーミングビデオが再生されます。<a href="videohttp://www.mysite.com/video.mp4">ビデオを再生</a>

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

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