ベストプラクティス

メモ

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

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

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

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

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

    • 例えば、プラグインのAPIにアクセスする前に、必ず​deviceready​関数を待ってください。

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

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

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

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

    • 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 などのフルスタックライブラリを組み込む必要がない可能性があります。
  • ページに必要なインタラクティブ機能を追加するには、FastclickVelocity.js などの、より小規模で特定の目的に特化したライブラリを使用することが望ましいといえます。

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

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

さらに先のステップ

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

このページ