ブラウズページ用バナーと動的バナーの作成

バナーとは、コレクションのブラウズページに表示されるアイテムです。バナーには 2 つの種類があります。

基本バナー – 基本バナーは、コレクションのブラウズページに表示される画像です。バナーをタップしたとき、何も実行されないようにすることもできれば、アクションがトリガーされるようにすることもできます。例えば、バナーをタップして、Web ページを起動したり、他の記事またはコレクションにリンクしたり、電子メールやテキストメッセージを送信したり、電話をかけたりすることができます。また、バナーはブランドを表示する目的のほか、ブラウズページの視覚的な区切りとしても使用できます。

動的バナー – ブラウズページの動的バナーには、HTML コンテンツが表示されます。例えば、動的バナーには、株価、スライドショーカルーセル、またはソーシャルメディアのフィードなどを表示できます。Cordova プラグインを使用することで、AEM Mobile 固有の機能を活用することができます。例えば、ユーザーがバナーのスライドをタップして、記事に移動したり、エンタイトルメントのログインプロンプトを表示したりできるようにします。

基本バナー

バナーの外観は、割り当てられるカードによって決まります。バナーの画像は、必要に応じて、マッピングされたカードの領域に合わせて中央配置でサイズ調整およびトリミングされます。カード内でバナーが正しく表示されるように十分大きなサイズの画像を作成してください。AEM Mobile アプリで使用するコンテンツの最適化を参照してください。

  1. 「コンテンツとレイアウト」で、「コンテンツ」をクリックし、「追加」>「バナーを追加」をクリックします。

  2. プロジェクト内で固有のバナー名を指定します。

  3. バナーのメタデータを指定します。

    必要に応じて、コンテンツをカードにマッピングする際のマッピングルールを使用し、バナーと他のコンテンツを区別するメタデータを追加します。

  4. バナーをタップしたときの動作を指定します。

    ユーザーがタップしたときに何の動作も発生させない場合は、「なし」を選択します。

    バナーをタップしたとき何らかのアクションを実行する場合は、次のいずれかのオプションを選択します。

    http:// – ユーザーがバナーをタップしたとき、アプリ内ブラウザーで指定した Web ページ(http: または https:)を開きます。

    例:http://www.adobe.com

    navto:// – 指定した記事またはコレクションにジャンプします。記事内のページ番号へのリンクはサポートされていません。navto 形式について詳しくは、AEM Mobile 記事のハイパーリンクを参照してください。

    例:navto://collection/coffeeProducts

    mailto: – デバイスのデフォルトの電子メールアプリを使用して、電子メールメッセージを送信します。

    簡単な例:mailto:jane@example.com

    詳細な例:mailto:jane@example.com?cc=maria@example.com&subject=Thanks%20Again&body=Thank%20you%20for%20your%20support.%0D%0A%0D%0ANew%20line.

    sms: – デバイスのメッセージアプリを使用して、テキストメッセージを送信します。

    簡単な例:sms:1-206-555-2323

    詳細な例(iOS):sms:+1206-555-2323&body=Text%20message

    詳細な例(Android):sms:+1206555-2323?body=Text%20message

    tel: – デバイスの電話アプリを使用して、電話をかけます。

    例:tel:1-206-555-2323

    ホームコレクションに移動 – 最上位レベルのコレクションの最初の記事またはコレクションに戻ります。

    戻る – ユーザーが現在のブラウズページに移動することをタップまたはクリックした、前のブラウザーページまたは記事に戻ります。(モバイルデバイスの戻るナビゲーションでは、スワイプ操作は含まれません。)

    mailto、sms、および tel アクションは、モバイルデバイスでのみサポートされています。デスクトップ Web Viewer には影響しません。

  5. 画像」タブを使用して、バナーの画像をアップロードします。

    バナーにバナータイトルのみを表示したり、単色表示にするなどで画像を使用しない場合は、任意の画像ファイルをアップロードし、画像を表示しないカードを作成することもできます。

  6. コレクションにバナーを追加します。ブラウズページで適切な位置に表示されるように、コレクション内で正しく(上部など)配置されていることを確認します。

  7. 必要に応じて、バナーが表示されるカードが含まれるようレイアウトテンプレートを編集します。

    例えば、デバイスの幅全体に表示されるカードを作成し、そのカードをバナーにマッピングするルールを作成できます。カードとレイアウトの作成を参照してください。

動的バナー

ブラウズページの動的バナーには、HTML コンテンツが表示されます。

  • ブラウズページで複数の動的バナーを使用する場合は、ターゲットデバイスでエクスペリエンスをテストし、安定したパフォーマンスが得られることを確認してください。ブラウズページの読み込みに時間がかかり過ぎる場合、またはその他の問題が発生する場合は、ブラウズページで使用する動的バナーの数を減らすことを検討してください。
  • バナーでのサムネール画像の使用は任意です。画像は、ユーザーがオフラインの場合、または透明の HTML コンテンツの背後に表示するために使用できます。
  • 動的バナーで Cordova プラグインを使用する場合、動的バナーのプロパティで「拡張機能を有効にする」が選択されていることを確認します。
  • HTML ファイルで外部コンテンツを参照するときは、HTTP ではなく HTTPS プロトコルを使用することをお勧めします。デスクトップ Web Viewer には、HTTPS プロトコルが必要です。
  • ダイナミックバナーでビデオを自動再生するには、<video playsinline autoplay>要素を使用します。バナーが表示される前にビデオが自動再生される場合は、window.onAppearイベントでビデオを再生し、window.onDisappearイベントでビデオを一時停止する JavaScript を使用することを検討してください。

 

動的バナーについて説明するビデオ(英語のみ)

動的バナーについて説明するビデオ(英語のみ)

権利付与バナーの例

この HTML コンテンツを使用すると、動的な権利付与バナーを作成できます。ユーザーがログインしていない場合は、バナーにログインプロンプトが表示されます。ユーザーがログインしている場合は、バナーに「ログアウト」ボタンが表示されます。動的バナーを作成する場合、Cordova プラグインを有効にするために「拡張機能を有効にする」が選択されていることを確認します。

ダウンロード

動的バナーの作成

  1. HTML コンテンツを作成し、記事ファイルを生成します。

    AEM Mobile 用の HTML 記事の作成を参照してください。

  2. 「コンテンツとレイアウト」で、「コンテンツ」をクリックし、「追加」>「ダイナミックバナーの追加」をクリックします。

  3. プロジェクト内で固有のバナー名を指定します。

  4. バナーのメタデータを指定します。

    必要に応じて、コンテンツをカードにマッピングする際のマッピングルールを使用し、バナーと他のコンテンツを区別するメタデータを追加します。

    注意:

    HTML コンテンツに Cordova プラグインへの参照が含まれている場合、「拡張機能を有効にする」が選択されていることを確認します。

  5. 画像」タブを使用して、バナーの画像をアップロードします。

    バナーの画像の使用は任意です。バナーの画像は、デバイスがオフラインの場合に、または透明 HTML コンテンツの背景として使用することができます。

  6. コンテンツファイル」タブを使用して、HTML コンテンツを含む記事ファイルをアップロードします。

  7. 動的バナーが広告の場合、「広告」タブを使用して、解析データの情報を指定します。

  8. コレクションにバナーを追加します。ブラウズページで適切な位置に表示されるように、コレクション内で正しく(上部など)配置されていることを確認します。

  9. 必要に応じて、バナーが表示されるカードが含まれるようレイアウトテンプレートを編集します。

    例えば、デバイスの幅全体に表示されるカードを作成し、そのカードをバナーにマッピングするルールを作成できます。カードとレイアウトの作成を参照してください。

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

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