DPS 用の HTML 記事の作成

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

ビデオチュートリアル

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

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 リソース

• HTML5 を使用した記事の作成については、Johannes Henseler 氏の記事単一ファイル HTML5 のフレームワーク（英語のみ）を参照してください。

• CreateJS で Flash Pro を使用して HTML5 を作成する方法については、Toolkit for CreateJS を参照してください。

• iPad の HTML 記事および Web ビューオーバーレイで利用可能なフォントについては、www.michaelcritz.com/2010/04/02/fonts-for-ipad-iphone/（英語のみ）を参照してください。

• Rufus Deuchler 氏が、Adobe Muse を使用してデジタルパブリケーション用の HTML コンテンツを作成する方法（英語のみ）についてのビデオチュートリアルを作成しました。

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

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

次の例では、ビデオは 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>

次の動作は、ウィンドウオブジェクトに対して 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>