ベストプラクティス best-practices

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

NOTE

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

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

NOTE

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

プラグイン機能を使用するテンプレートは、プラグインブリッジが存在することなく、ブラウザーで引き続きオーサリングできるように記述する必要があります。
- 例えば、プラグインの API にアクセスする前に、必ず deviceready 関数を待ってください。

AEM開発者向けガイドライン guidelines-for-aem-developers

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

再利用と拡張性を促進するためのAEM Sites テンプレートの構造化

単一のモノリシックなスクリプトファイルよりも複数のコンポーネントスクリプトファイルを優先します
- customheaderlibs.html や customfooterlibs.html など、いくつかの空の拡張ポイントが提供されており、開発者はできるだけ少ないコアコードを複製しながらページテンプレートを変更できます
- テンプレートは、Sling の sling:resourceSuperType メカニズムを使用して拡張およびカスタマイズできます
テンプレート言語として JSP よりも Sightly/HTL を優先します
- これを使用すると、コードをマークアップから分離し、組み込みの XSS 保護を提供し、より使い慣れた構文を使用できます

オンデバイスでのパフォーマンス用に最適化

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

NOTE

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

web 固有のものよりアプリ固有のクライアントサイド JS および CSS ライブラリを優先します

jQuery Mobile のようなライブラリでオーバーヘッドを回避して、幅広いデバイスとブラウザーを処理できるようにします
アプリの web ビューでテンプレートが実行されている場合、アプリがサポートするプラットフォームとバージョンを制御でき、JavaScriptがサポートする知識を利用できます。例えば、jQuery Mobile より Ionic （CSS のみ）を優先し、Bootstrapより Onsen UI を優先します。

NOTE

jQuery モバイルについて詳しくは、こちらをクリックしてください。

フルスタックよりマイクロライブラリを優先

コンテンツをデバイスに送信するのにかかる時間は、記事が依存するライブラリごとに短縮されます。この速度低下は、新しい web ビューを使用してすべての記事をレンダリングする場合に悪化するため、各ライブラリを最初から再度初期化する必要があります
記事がSPA（シングルページアプリ）としてビルドされていない場合は、Angularのようなフルスタックライブラリを含める必要はありません
Fastclick や Velocity.js など、ページで必要なインタラクティビティを追加するのに役立つ、より小さい単目的ライブラリをお勧めます。

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

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

recommendation-more-help

2eeeb575-8007-40cc-a72d-206fbc4ddd4b