記事のソース HTML ファイルを作成するには、Adobe Experience Manager などの CMS システムや、Dreamweaver、CMS、HTML エディターなどのツールを使用します。サイズの異なるタブレットやスマートフォンにも対応できるように、カスケーディングスタイルシート(CSS)を使用してリフロー可能なコンテンツを作成することをお勧めします。

注意:

場合によっては、Adobe Muse を使用して最初の HTML 記事を作成できます。ただし、ほとんどの場合、AEM Mobile で使用する HTML 記事を修正するための HTML に関する高度な知識が必要です。

HTML 記事の作成について説明するビデオ(英語のみ)

HTML 記事の作成について説明するビデオ(英語のみ)
このビデオは本来 Adobe Digital Publishing Solution 向けに録画されたものです。プロセスは AEM Mobile にも当てはまります。
Adobe

詳しい解説について、Adobe MAX 2015 セッションのビデオ録画映像をご覧ください。

HTML を賢く利用する方法(英語のみ)

インタラクティブな HTML コンテンツの最適化(英語のみ)

HTML ファイルをアップロード用に準備する

HTML Article Packager を使って、HTML コンテンツの記事ファイルを作成します。HTML ファイルが入ったフォルダーを Article Packager アイコンにドラッグすると、必要な manifest.xml ファイルが作成され、複数のファイルがアップロード用の記事ファイルに圧縮されます。

HTML Article Packager をダウンロードするには、AEM Mobile のインストールとセットアップを参照してください。

  1. HTML Article Packager をダウンロードしてインストールします。

    Mac OS の場合は、.dmg ファイルをダブルクリックし、HTML Article Packager ファイルを Applications フォルダーにドラッグします。

  2. フォルダーにメインの HTML ファイルと必須のアセットを追加します。メインの HTML ファイルに index.html という名前を付けます。Finder またはエクスプローラでそのフォルダーを開きます。

    HTML コードで参照されているファイルのみを入れるようにします。PSD 画像など、参照されていないファイルを入れても、ファイルのサイズが大きくなるだけです。

  3. 別の Finder またはエクスプローラーウィンドウで、HTML Article Packager ユーティリティを含むフォルダー(Mac OS の Applications フォルダーなど)を開きます。

  4. HTML フォルダーを HTML Article Packager アイコンにドラッグ&ドロップします。

    HTML Article Packager

    注意:

    Windows では、記事を含むフォルダーのドライブパスは、HTML Article Packager をインストールした場所と同じにする必要があります。

    HTML フォルダーが置かれているのと同じ階層に記事ファイルが作成されます。

  5. オンデマンドポータル(https://aemmobile.adobe.com)で記事を編集し、記事ファイルをアップロードします。

    詳しくは、AEM Mobile での記事の管理を参照してください。

CMS システム用プラグイン

Adobe Experience Manager(AEM)オーサリング

AEM Mobile で動作するように AEM を設定する

サードパーティ製 CMS システム

Web ベースのオーサリング

 

HTML コンテンツをモバイルデバイス用に最適化する

デスクトップブラウザーで正しく表示される HTML コンテンツがモバイルデバイスで正しく表示されないことがあります。HTML 記事を作成するときに、次を実行します。

  • HTML コンテンツをモバイルデバイス用に最適化します。300 dpi 12000x8000 ピクセルの画像は、72 dpi 800x600 ピクセルの画像よりも処理に時間がかかります。容量を節約し、パフォーマンスを改善するために、必要以上に大きい画像を使用することは避けてください。
  • ビデオおよびオーディオファイルを最適化し、サイズを小さくしてパフォーマンスを改善します。
  • コードをモバイルブラウザー向けに簡略化し、テストします。

詳しくは、AEM Mobile アプリで使用するコンテンツの最適化を参照してください。

HTML 記事用の共有フォントの使用

HTML 記事からアプリにアップロードされたフォントを参照することができます。アプリにアップロードされるフォントを参照することで、記事のダウンロード速度とパフォーマンスが向上します。

 

 

注意:

HTML 記事で使用される共有フォントは、モバイル アプリケーションでのみサポートされ、デスクトップ Web Viewer ではサポートされません。デスクトップ Web Viewer でフォントを使用できるようにするには、HTML 記事にフォントを含めるか、API を使用して共有コンテンツでフォントを使用できるようにします。

  1. オンデマンドポータルにフォントをアップロードします(コンテンツとレイアウト/フォントとアプリのカスタマイズ)。AEM Mobile アプリのカスタマイズ:カスタムフォントの使用を参照してください。

  2. ポータルの「フォントとアプリのカスタマイズ」セクションで、参照するフォントを作成または編集します。「フォントファイル名」フィールドに入力されていることを確認します。必要に応じて、フォントファイルを再度アップロードします。

     

    フォントを追加または編集する場合、フォントを使用するためにアプリを更新して再送信します。

  3. ポータルの「フォントとアプリのカスタマイズ」セクションで、アイコンをクリックしてフォントファイルを表示し、「コピー」をクリックします。

  4. ソース HTML ファイルに、アップロードしたフォントの参照を追加します。

    アプリのフォントを参照する HTML 記事の例

  5. HTML 記事を作成して、プロジェクトに追加します。

  6. 参照しているフォントを含むカスタムアプリを作成します。記事をテストし、フォントが正常に表示されることを確認します。

ビューアでのジェスチャーの処理について理解する

デフォルトでは、非インタラクティブ領域をタップするとビューアにナビゲーションバーが表示され、スワイプすると次の記事やページに移動します。HTML 記事では、<a/>、<video/>、<audio/>、<textarea/>、<input/>、および <button/> などの既知のインタラクティブ HTML 要素については、ビューアにナビゲーションバーが表示されません。他の要素をタップすると、ナビゲーションバーが表示されます。

ゲームやスライドショーなどの高度なインタラクティブコンテンツにおけるジェスチャーの処理を管理するには、カスタム HTML Gesture API を使用します。

HTML Gesture API を使用する

HTML Gesture API を使用することで、より高度なインタラクティブ HTML 要素で優れたユーザーエクスペリエンスを実現します。例えば、フルスクリーンのスライドショーで、最後のスライドをスワイプして次の記事に移動するようにエクスペリエンスをカスタマイズできます。HTML パズルがある場合、キャンバスをタップすることでナビゲーションバーを表示し、パズルのピースをタップしてもナビゲーションバーが表示されないように設定できます。

relinquishCurrentGesture() は Windows アプリではサポートされていません。その他すべてのジェスチャーはすべてのプラットフォームでサポートされています。

詳しくは、サンプルファイルをご覧ください(英語版のみ)。

HTML 記事を作成するために Adobe Muse を使用している場合は、Gesture API を Muse プロジェクトに追加することをお勧めします。Bates Creative はこの作業のために mucow を作成しました。コードと手順については、こちらを参照してください。

Adobe Muse 用 AEM Mobile Gesture API (英語版のみ)

 

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

リーガルノーティス   |   プライバシーポリシー