ベストプラクティス

メモ

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

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

メモ

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

プラグイン機能を使用するテンプレートは、プラグインのブリッジなしでもブラウザーでオーサリング可能なように記述する必要があります。
- 例えば、 deviceready 関数を使用して、プラグインの API にアクセスしようとします。

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

次のガイドラインは、モバイルアプリのテンプレートとコンポーネントを作成する経験豊富なAEM開発者を支援します。

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

1 つのモノリシックスクリプトよりも複数のコンポーネントスクリプトファイルを優先
- 次のような空の拡張ポイントが多数提供されます。 customheaderlibs.html および customfooterlibs.htmlできるだけコアコードをほとんど複製せずに、開発者がページテンプレートを変更できるようにします。
- その後、Sling の sling:resourceSuperType 機構
使用するテンプレート言語は、JSP よりも Sightly/HTL の方が望ましい
- この方法を使用すると、マークアップからコードを分離し、XSS 保護に組み込まれたオファーを提供し、より身近な構文を持つようになります

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

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

メモ

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

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

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

メモ

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

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

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

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