ベストプラクティス

メモ

単一ページアプリケーションフレームワークを基にしたクライアント側レンダリング(React など)が必要なプロジェクトでは、SPA エディターを使用することをお勧めします。詳細情報を参照してください。

AEM Mobile On-demand Servicesアプリの作成は、Cordova(またはPhoneGap)シェルで直接実行するアプリの作成とは異なります。 開発者は、以下の事項に精通している必要があります。

  • 標準でサポートされているプラグイン、および AEM Mobile 固有のプラグイン。
メモ

プラグインについて詳しくは、以下のリソースを参照してください。

  • プラグイン機能を使用するテンプレートは、プラグインのブリッジなしでもブラウザーでオーサリング可能なように記述する必要があります。

    • For example, make sure to wait for the deviceready function before attempting to access a plugin's API.

AEM 開発者向けガイドライン

次のガイドラインは、モバイルアプリのテンプレートとコンポーネントを作成するサイト開発経験があるAEM開発者の役に立ちます。

再利用性と拡張性を向上させるために AEM サイトテンプレートを構造化する

  • 1つのモノリシックファイルよりも複数のコンポーネントスクリプトファイルを優先

    • A number of empty extension points are provided, such as customheaderlibs.html and customfooterlibs.html, which allow the developer to change the page template while duplicating as little core code as possible
    • Templates can then be extended and customized via Sling's sling:resourceSuperType mechanism
  • 使用するテンプレート言語は、JSP よりも Sightly/HTL の方が望ましい

    • この方法を使用すると、XSS保護で構築されたオファーやマークアップからコードを分離することが推奨され、構文がより使い慣れています

デバイス上でのパフォーマンスを最適化する

  • 記事固有のスクリプトやスタイルシートは、dps-article contentsyncテンプレートを使用して、記事のペイロードに含める必要があります
  • 複数の記事で共有されるスクリプトやスタイルシートは、dps-HTMLResources contentsyncテンプレートを使用して、共有リソースに含める必要があります
  • レンダリングを妨げる外部スクリプトを参照してはなりません。
メモ

レンダリングを妨げる外部スクリプトについて詳しくは、こちらを参照してください。

Web 向けの汎用的な JS および CSS ライブラリよりも、アプリ固有のクライアント側 JS および CSS ライブラリの方が望ましい

  • jQuery Mobile などのライブラリで多数のデバイスやブラウザーを処理する際のオーバーヘッドを回避するためです。
  • テンプレートがアプリの Web ビュー内で実行されるときに、そのアプリがサポートするプラットフォームとバージョンを自身で管理でき、JavaScript がサポートされることをあらかじめ把握できます。例えば、jQuery MobileやOnsen UIよりもイオン性(おそらくCSSのみ)を、Bootstrapよりも優先します。
メモ

jQuery Mobile について詳しくは、こちらを参照してください。

フルスタックライブラリよりもマイクロライブラリの方が望ましい

  • 記事が依存するライブラリが増えるほど、デバイスの画面上にコンテンツが表示されるまでの時間が長くなります。記事ごとに新しい Web ビューを使用してレンダリングすると、毎回ライブラリが初期化されてしまうので、さらに時間が長くなります。
  • 記事が SPA(シングルページアプリ)として作成されていない場合は、Angular などのフルスタックライブラリを組み込む必要がない可能性があります。
  • ページに必要なインタラクティブ機能を追加するには、FastclickVelocity.js などの、より小規模で特定の目的に特化したライブラリを使用することが望ましいといえます。

記事のペイロードのサイズを最小限に抑える

  • サポートする最大のビューポートを効果的にカバーできる最小のアセットを適切な解像度で使用します。
  • ImageOptim などのツールを画像に使用して、余分なメタデータを削除します。

さらに先のステップ

他の 2 つの役割および責任について詳しくは、以下のリソースを参照してください。

このページ