Show Menu
トピック×

ベストプラクティス

単一ページアプリケーションフレームワークを基にしたクライアント側レンダリング(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 サイトテンプレートを構造化する
  • 単一のモノリシックファイルよりも複数のコンポーネントスクリプトファイルを優先
    • 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よりもイオン(Onsen UI)を優先します。
jQuery Mobile について詳しくは、 こちら を参照してください。
フルスタックライブラリよりもマイクロライブラリの方が望ましい
  • 記事が依存するライブラリが増えるほど、デバイスの画面上にコンテンツが表示されるまでの時間が長くなります。記事ごとに新しい Web ビューを使用してレンダリングすると、毎回ライブラリが初期化されてしまうので、さらに時間が長くなります。
  • 記事が SPA(シングルページアプリ)として作成されていない場合は、Angular などのフルスタックライブラリを組み込む必要がない可能性があります。
  • ページに必要なインタラクティブ機能を追加するには、 Fastclick Velocity.js などの、より小規模で特定の目的に特化したライブラリを使用することが望ましいといえます。
記事のペイロードのサイズを最小限に抑える
  • サポートする最大のビューポートを効果的にカバーできる最小のアセットを適切な解像度で使用します。
  • ImageOptim などのツールを画像に使用して、余分なメタデータを削除します。

さらに先のステップ

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