この情報は、米国アドビシステムズ社が提供している情報をもとにローカライズし、作成したものです。日本語環境での動作保証はしておりませんのでご了承ください。

Adobe Digital Publishing Suite を使用して Folio を作成する場合、InDesign ドキュメント、または HTML ファイルから記事を作成できます。Digital Publishing Suite で HTML 記事を作成する際の基本的な情報は HTML の使用を参照してください。

Android 版アプリに対応する HTML 記事を作成する場合、以下の点に注意してください。

A. 導入と要件

A-1. HTML meta タグ

過去のリリースでは、すべての HTML ファイルを正しく拡大/縮小できるよう、meta タグをすべての HTML ファイルに含めるよう、ユーザーガイドに記述されていました。今後は meta タグは不要なため、HTML ファイルから削除してください。カスタムアプリには JavaScript が適用されたため、HTML が正しく拡大/縮小されます。別の理由から meta タグが必要な場合は、"target-densitydpi" および "user-scalable=no" の各パラメーターを削除してください。これらのパラメーターが残されていると、タブレットデバイスで正しく拡大/縮小されません。

A-2. AIR アプリに対する JavaScript の必要条件

タップ時にナビゲーションバーを表示する、以下の DOM Level 0/2 のイベントハンドラーを追加しないでください。

  • onmouseup (DOM level 0)
  • onmousedown (DOM level 0)
  • ondblclick (DOM level 0)
  • onclick (DOM level 0)
  • mouseup (DOM level 2)
  • mousedown (DOM level 2)
  • mousemove (DOM level 2)
  • mouseclick (DOM level 2)
  • touchstar (DOM level 2)
  • touchmove (DOM level 2)
  • touchend (DOM level 2)  

DOM level 2 JavaScript イベントに対して Javascript の addEventListener メソッドを使用するには、以下のいずれかの操作を行います。

  • <head> ブロックの先頭に、AdobeViewer.js への相対参照を含めます。この参照の前に他のスクリプトは追加しないでください。
<script type="text/javascript" src="../_AdobeViewer_HTMLResources/AdobeViewer.js"></script>
  • すべての addEventListener コールを onload() または $.ready() event handler の外に出し、カスタムの Adobe window.onAppear() event handler に入れます。
  • onclick=”” など DOM Level 0 イベントのみ使用します。

A-3. 埋め込みのフォント

The New Yorker など一部の iPad 用アプリには、組み込みのフォントが使用されます。Android タブレットの場合、CSS を使用してフォントを埋め込みます。CSS を使用してフォントを埋め込むには、ローカル参照から URL 参照に変更します。

以下の記述を

src:local("NYIrvinEM");

以下のように変更します。

src:url("../fonts/NYIrvEM.otf");

また、すべてのフォントを HTMLResources/fonts フォルダーにコピーします。OpenType フォントのみサポートされています。

A-4. 異なるサイズのタブレットデバイスを対象にする

iPad と同じサイズ(1024 x 768)を Android タブレットにも使用している場合、Android タブレット上では上下に黒い帯が表示されます。一部のデバイス(Galaxy Tab など)では、文字がきわめて小さく表示されてしまうため、これは適切な対処ではありません。

可能であれば、異なるサイズに対応できるよう、可変性の高いデザインにします。例えば、マージンを固定ピクセルで指定しないようにします。

1024 x 600 の解像度を対象にする場合、1024 x 600 用に設計されたセカンドセットの CSS 作成を検討してください。これを作成することにより、全体的な可視領域を活用できます。1024 x 600 用に InDesign 上でサイズ変更する必要もあります。

A-5. HTML イメージギャラリーの動的リサイズ

Galaxy Tab などの、小さいデバイスで HTML イメージギャラリーの動的リサイズをサポートするには、以下の JavaScript スニペットを含めてください。

var ORIGINAL_CONTENT_WIDTH_PORTRAIT = 768.0;
var ORIGINAL_CONTENT_HEIGHT_PORTRAIT = 980.0;
 
var ORIGINAL_CONTENT_WIDTH_LANDSCAPE = 1024.0;
var ORIGINAL_CONTENT_HEIGHT_LANDSCAPE = 740.0;
 
var CONTENT_SCALE_MODE = "none";
 
function adjustScale( scaleLevel ) {
    var metaId = "scale-adobedmp";
    var meta = document.getElementById(metaId);
    if( !meta )
    {
        meta = document.createElement('meta');
        var head = document.head;
        head.appendChild(meta);
 
        meta.setAttribute("id", metaId);
 
        // be sure to set the name first, because only 'content' attribute triggers a reprocess
        meta.setAttribute("name", "viewport");
    }
 
    meta.setAttribute("content", "initial-scale=" + scaleLevel + "; minimum-scale=" + scaleLevel + "; maximum-scale=" + scaleLevel + "; width=device-width; user-scalable=1");
 
    // Force re-layout. Sends a sync message a short while after this has occurred.
    document.body.style.display = "none";
    setTimeout(function(){document.body.style.display = "block"; }, 0);
};
 
function scaleContentToViewport() {
 
    if (typeof adobe == 'undefined' || typeof adobe.dps == 'undefined' || typeof adobe.dps.utils == 'undefined')
    {
        return;
    }
 
    adobe.dps.utils.getDimensions(function(data)
    {
        var isPortrait = data.width <= data.height;
         
        if ( (isPortrait && CONTENT_SCALE_MODE == "portrait") || (!isPortrait && CONTENT_SCALE_MODE == "landscape") )
        {
            return;
        }
         
        var originalContentWidth = 0.0;
        var originalContentHeight = 0.0;
         
        var curWidth = data.width;
        var curHeight = data.height;
         
        if (isPortrait)
        {
            CONTENT_SCALE_MODE = "portrait";
            originalContentWidth = ORIGINAL_CONTENT_WIDTH_PORTRAIT;
            originalContentHeight = ORIGINAL_CONTENT_HEIGHT_PORTRAIT;
        }
        else
        {
            CONTENT_SCALE_MODE = "landscape";
            originalContentWidth = ORIGINAL_CONTENT_WIDTH_LANDSCAPE;
            originalContentHeight = ORIGINAL_CONTENT_HEIGHT_LANDSCAPE;
        }
         
        if (curWidth < originalContentWidth)
        {
            adjustScale(curWidth/originalContentWidth);
        }
        else if (curHeight < originalContentHeight)
        {
            adjustScale(curHeight/originalContentHeight);
        }
        else
        {
            adjustScale(1.0);
        }
    });
};

以下のメソッドを使用してこの関数をコールしてください。

adjustScale(window.innerWidth / originalContentWidth);

以下の環境で関数はコールされます。

  • window.innerWidth がオリジナルコンテンツの幅よりも狭い場合のみ拡大/縮小されます。
  • コンテンツがタブレットの向きに対応する場合、onLoad または その $.ready block で関数がコールされます。
  • コンテンツがタブレットの向きに非対応の場合、方向が変更される際に関数がコールされます。

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

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