AEM Mobile アプリのフォントとカラーの設定を変更します。

ブラウズページのカードやアプリビュー、HTML 記事で使用するフォントをアップロードすることで、アプリをカスタマイズできます。アプリメニュー、ナビゲーションバー、ログイン画面などのアプリビューで使用するカラーも変更できます。

 

カスタムフォントの使用

ポータルの「フォントとアプリのカスタマイズ」セクションで、レイアウトカード、HTML 記事、アプリビュー(アプリメニューなど)で使用するカスタムフォントをアップロードできます。

HTML 記事でフォントを参照するには、AEM Mobile 用の HTML 記事の作成:HTML 記事用の共有フォントの使用を参照してください。

  1. ポータルで、「コンテンツとレイアウト」をクリックし、「フォントとアプリのカスタマイズ」をクリックします。 「フォント」タブを選択します。

    customize_fonts_main
  2. フォントを個別に追加するには、追加フォントを追加をクリックします。

  3. フォントファイルを「フォントを追加」セクションにドラッグするか、「参照」ボタンをクリックしてフォントファイルを指定します。

    フォントファイルをドラッグ&ドロップしたら、フォント名が自動的に追加されます。

    パフォーマンスの向上とアプリのサイズを縮小するには、アップロードするフォントを制限して、アプリ内で使用する予定のフォントのみを追加することをお勧めします。

    フォントの追加
  4. フォントのアップロードが完了したら、カードとレイアウトを編集するときや HTML 記事を作成するとき、アプリビューをカスタマイズするときにフォントを指定します。

    ドロップダウンリストからフォントを選択
    レイアウトカードの編集中にアップロードしたフォントを選択する。

  5. フォントをプレビューするには、カスタムアプリを作成するか再構築します。

    カスタムフォントは AEM Preflight アプリには表示されません。変更内容を表示するには、フォントを追加または編集するたびにアプリを作成するか再構築する必要があります。

    AEM Mobile アプリのプロジェクトのコンテンツをプレビューするを参照してください。

注意:

アプリでフォントを使用するための適切なライセンスがあることを確認してください。

フォントの一括追加

フォントを一度に 1 つずつ追加する代わりに、複数のフォントをウィンドウ内にドラッグ&ドロップすることができます。

  1. ポータルの「フォントとアプリのカスタマイズ」セクションで、追加フォントを一括追加をクリックします。
  2. Finder またはエクスプローラーウィンドウでアップロードするフォントファイルを選択し、選択したフォントファイルをアイコンにドラッグ&ドロップします。
  3. アップロードするフォントのリストを確認します。アップロードしないフォントがあれば選択し、表示されるマイナス(–)アイコンをクリックします。「アップロード」をクリックして、フォントをアップロードします。

デバイスフォントと Web フォント

スマートフォンおよびタブレットでフォントを表示する場合は、デバイスフォントのみが必要です。ただし、使用するフォントごとに、デバイスフォント(OpenType または TrueType)と Web フォント(.woff)の両方をアップロードすることをお勧めします。デバイスフォントは、スマートフォンおよびタブレットのブラウズページで使用されます。Web フォントは、デスクトップ Web Viewer や Windows アプリ(.otf または .ttf をインストールできない場合)で使用されます。カードのフォントをプレビューする場合にも使用されます。

適切なフォントライセンスを取得している場合は、.woff バージョンのフォントを利用できます。.woff バージョンのフォントは通常、フォントのライセンスを取得したときのパッケージに含まれています。詳しくは、フォントの使用許諾者にお問い合わせください。

Adobe Typekit から利用できるフォントはアップロードできません。

 

注意:

新しいフォントを追加した場合は、この時点でアプリを再構築して、新しいフォントを利用できるようにする必要があります。

Windows アプリでのフォントの使用

Windows では、フォントベンダーがフォントに含めているフォント使用ルールが適用されます。フォントがフォントベンダーによって「インストール可能」とマークされていない場合は、Windows OS でそのフォントの読み込みが拒否されます。フォントが「インストール可能」とマークされているかを確認するには、フォントを右クリックし、プロパティを表示します。最良の結果を得るために、Windows アプリでは Web バージョンのフォント(.woff)を追加してください。

アプリビューのカスタマイズ

アプリに表示される様々なビュー(ナビゲーションバー、アプリケーションメニュー、ログイン画面、ペイウォール画面など)ごとに、別々のカラーとフォントを指定できます。また、アプリケーションメニューやアプリメニューの「アカウント」オプションを表示または非表示にしたり、ナビゲーションバーを常に表示または非表示にできます。

次の点に注意してください。

  • アプリのカスタマイズのプレビュー画像は完全に正確な表現ではありません。カスタムアプリを作成することで、アプリのカスタマイズのカラーとフォントをテストして確認ください。
  • カラーテーマの設定(明るいテーマ、暗いテーマ、カスタムテーマ)は、各プラットフォームですべてのビューに適用されるグローバル設定です。明るいテーマと暗いテーマはプリセットであり、編集できません。カラーまたはフォントの設定を変更すると、テーマはカスタムテーマに切り替わります。
  • 他の場所に移動する前に、「保存」をクリックして作業を必ず保存してください。「保存」は、現在のプラットフォームにのみ適用されます。

アプリのカスタマイズのビデオ

アプリのカスタマイズのビデオ
このビデオでは、2016.14 および 2017.1 でリリースされた新しいアプリのカスタマイズ機能を実演します。

  1. ポータルで、「コンテンツとレイアウト」をクリックし、「フォントとアプリのカスタマイズ」をクリックします。 「アプリのカスタマイズ」タブを選択します。

    customize_allscreens
  2. プラットフォーム(iOS または Android)を指定します。

    指定した設定は、選択したプラットフォームにのみ適用されます。現時点ではカスタム設定は保存できないので、iOS と Android ごとにアプリのカスタム設定を指定する必要があります。

  3. すべての画面ビューを選択します。プリセットを使用するには、「明るいテーマ」または「暗いテーマ」を選択します。カラーまたはフォントの設定を変更した場合は、「カスタムテーマ」が自動的に選択されます。カスタム設定をおこなうには、すべての画面ビューで、使用するカラーとフォントの設定を選択します。

    「すべての画面」を選択すると、すべての変更はすべてのビューに適用されます。ビューごとにカスタムのカラーとフォントの設定をオーバーライドできます。

    注意:

    フォントとカラーの設定は、各テーマ(明るいテーマ、暗いテーマ、カスタムテーマ)に関連付けられます。別のテーマを選択すると、フォントとカラーの設定がリセットされます。

  4. すべての画面ビューで、アプリケーションのジェスチャ設定を指定します。

    ピンチしてズーム – 記事のタイプごとに、ピンチしてズームする操作の有効/無効を切り替えます。このオプションを無効にすると、ユーザーはピンチ操作で記事をズームインまたはズームアウトすることができません。

    • ラスタライズ記事」オプションには、「1 ページ全体を画面サイズに合わせて表示」オプションが選択されている InDesign ベースの記事と PDF ベースの記事が含まれます。
    • PDF 記事」オプションには、「1 ページ全体を画面サイズに合わせて表示」オプションが選択されていない PDF ベースの記事が含まれます。
    • HTML記事」オプションには、HTML ベースの記事が含まれます。

    ピンチして閉じる(iOS のみ) – iPad では、ブラウズページからピンチアウトして直前の表示に戻ることができます。この操作の有効/無効を指定します。

    ベゼルスワイプ(iOS のみ) – iOS アプリでは、左からスワイプすると、直前の表示に戻るか、最上位レベルのビューのアプリケーションメニューを表示できます。この操作の有効/無効を指定します。

    customize_gestures
  5. 個別のアプリビューを選択し(メニューからオプションを選択するか、ナビゲーション矢印をクリックします)、そのビューで使用するカラーとフォントのカスタム設定を指定します。

    customize_app_appmenu2
  6. アプリケーションメニューまたは「アカウント」オプションを非表示にするには、「アプリケーションメニュー」ビューに移動します。アプリケーションメニューアイコンをクリックすると、オン/オフが切り替わります。また、「ログイン」オプションをクリックすると、「アカウント」オプションのオン/オフが切り替わります。

    アプリケーションメニューをオフにすると、アプリにアプリメニューを表示できません。

    ログインをオフにすると、アプリケーションメニューの下部に「アカウント」オプションが表示されなくなります。

    メニューバーが表示されていない場合は、navto および goto 形式を使用して、ナビゲーションリンクを提供したり、検索などの機能を起動したりできます。AEM Mobile 記事のハイパーリンクを参照してください。

    「ログイン」オプション(UI の「アカウント」オプション)またはメニューバーを非表示にする場合は、HTML と Cordova JavaScript API を使用してユーザーのログインおよびログアウトを許可できます。動的バナーを使用してユーザーのログインおよびログアウトを許可するサンプルコードについては、バナーと動的バナーの作成:動的バナーを参照してください。

  7. ナビゲーションバーの動作を変更するには、アプリケーションのナビゲーションバービューに移動します。タブレットとスマートフォンの両方で次のオプションから選択します。

    デフォルト:ユーザーが記事の非インタラクティブ領域をタップした場合にのみ、ナビゲーションバーが表示されます。ナビゲーションバーの表示中は、記事のコンテンツは非表示になります。

    常に表示:このオプションを選択すると、ナビゲーション画面と記事の上部にナビゲーションバーが表示されます。非表示にすることはできません。ナビゲーションバーを常に表示されるように設定すると、記事の上部のコンテンツは非表示になりません。HTML 記事の始まりは、画面上部のナビゲーションバーの下からになります。固定レイアウトの記事は、縮小およびレターボックス表示されます。

    app_customization_example
    ナビゲーションバーを常に表示されるように設定すると、固定レイアウトのコンテンツは、縮小およびレターボックス表示されます。

    常に非表示:このオプションを選択すると、ナビゲーションバーとステータスバーは無効になって非表示になります。ナビゲーションバーが表示されていない場合は、記事で navto および goto 形式を使用して、ナビゲーションリンクを提供したり、「戻る」ボタンやソーシャルシェアオプションなどの機能を起動したりできます。AEM Mobile のハイパーリンクを参照してください。

    ステータスバーは表示、ナビゲーションバーは非表示:このオプションを選択すると、ナビゲーションバーは無効になって非表示になり、ステータスバーは常に表示されます。記事のコンテンツはステータスバーの下に表示され、必要に応じてサイズ調整およびレターボックス表示されます。

    app_customization_navbars
  8. 保存」をクリックして、現在のプラットフォーム用の設定を保存します。

    保存」をクリックして、現在のプラットフォーム用の設定を保存。iOS プラットフォームと Android プラットフォームの両方で同時に作業している場合は、プラットフォームごとに「保存」をクリックします。

  9. アプリのカスタム設定を表示するには、カスタムアプリを作成するか再構築する必要があります。

    アップロードしたフォントとアプリのカスタム設定がアプリに組み込まれます。新しいフォントをアップロードしたときやアプリのカスタム設定を変更したときに、それらの変更を表示するには、アプリを再構築する必要があります。

    アプリのカスタム設定は、AEM Preflight アプリには表示されません。

    AEM Mobile アプリのプロジェクトのコンテンツをプレビューするを参照してください。

その他のアプリのカスタマイズ方法

ポータルの「フォントとアプリのカスタマイズ」セクションを使用する以外に、以下の方法でもカスタマイズを変更できます。

  • プロジェクト設定で、ブランド画像がアプリメニューに表示されるように指定できます。
  • アプリを作成するときに、スマートフォンを 2 方向(iOS)、縦置きのみ、横置きのみのいずれにするかを指定できます。iOS および Android アプリの場合は、アプリケーションがスマートフォンまたはタブレット、またはその両方で動作するかを指定することもできます。
  • コレクション設定で、水平スワイプによって別の記事にするかどうかを指定できます。コレクションがブラウズページとして表示されるようにするか、コレクションの最初のアイテムを開くかの指定もできます。また、ユーザーがコレクションをオフライン表示用に保存できるようにすることもできます。
  • レイアウトテンプレートを使用して、コレクションのブラウズページの外観を決めることができます。
  • ソーシャルシェアエンタイトルメント検索などの機能を有効にできます。

 

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

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