SPA の概要およびガイド spa-introduction

単一ページアプリケーション（SPA）により、Web サイトのユーザーに魅力的なエクスペリエンスを提供することができます。 開発者は SPA フレームワークを使用してサイトを構築したいと考え、作成者はそうして構築されたサイトのコンテンツを AEM 内でシームレスに編集したいと考えています。

SPA エディターには、AEM 内で SPA をサポートするための包括的なソリューションが用意されています。 この記事では、基本的な SPA アプリケーションを使用したオーサリングの手順を説明し、基礎となる AEM SPA エディターとの関連を示します。

はじめに introduction

記事の目的 article-objective

この記事では、まず SPA の基本的な概念を説明し、その後、簡単な SPA アプリケーションを使用して基本的なコンテンツ編集をデモしながら、SPA エディターのウォークスルーを行います。 次に、ページの構築、SPA アプリケーションと AEM SPA エディターとの関連とやり取りの仕組みについて説明します。

この概要とガイドの目的は、SPA がなぜ重要なのか、その一般的な動作、SPA が AEM SPA エディターによってどのように処理されるのか、そして標準的な AEM アプリケーションとどのように異なるのかを、AEM 開発者に示すことです。

要件 requirements

このガイドは、標準的な AEM 機能と、サンプルの WKND SPA Project アプリに基づいています。 このチュートリアルに沿って操作を進めるには、次の項目を利用できる必要があります。

SPA とは？ what-is-a-spa

単一ページアプリケーション（SPA）は、クライアントサイドでレンダリングされ、主に JavaScript 主導であり、Ajax 呼び出しに依存してデータを読み込み、ページを動的に更新する点で、従来のページとは異なります。 ほぼすべてのコンテンツは、1 回のページ読み込みで 1 回取得され、ユーザーによるページとのやり取りに基づいて、必要に応じて追加のリソースが非同期に読み込まれます。

これにより、ページを更新する必要が減り、シームレスで高速な、ネイティブアプリのエクスペリエンスに近いものをユーザーに提供できます。

AEM SPA エディターを使用すると、フロントエンド開発者は AEM のサイトに統合できる SPA を作成でき、コンテンツ作成者は SPA コンテンツを他の AEM コンテンツと同様に簡単に編集できます。

SPA が注目される理由 why-a-spa

より速く、流動的で、よりネイティブアプリケーションに近い SPA は、Web ページの訪問者だけでなく、SPA の仕組みの性質上、マーケターや開発者にとっても非常に魅力的なエクスペリエンスとなります。

訪問者数 visitors

マーケター marketers

デベロッパー向け developers

SPA の仕組み？ how-does-a-spa-work

SPA の背後にある主な考え方は、SPA がネイティブアプリケーションの応答性に近づくように、サーバーに起因する遅延を最小限に抑えるために、サーバーへの呼び出しと依存性を低減することです。

従来のシーケンシャルな Web ページでは、そのページに必要なデータのみが読み込まれます。 つまり、訪問者が別のページに移動すると、サーバーが追加のリソースを呼び出します。 訪問者がページ上の要素を操作する際に、追加の呼び出しが必要になる場合があります。 これらの複数の呼び出しにより、ページが訪問者のリクエストに追いつく必要があるため、ラグや遅延が生じているように感じられる場合があります。

訪問者がモバイルやネイティブアプリから期待する動作に近い、より流動的なエクスペリエンスを実現するために、SPA は、最初の読み込み時に訪問者に必要なすべてのデータを読み込みます。 最初は少し時間がかかる場合がありますが、その後はサーバーコールを追加する必要はありません。

クライアントサイドでレンダリングすると、ページ要素の反応が速くなり、訪問者によるページとのやり取りが即時に行われます。 ページの速度を最大化するために、必要になる可能性のある追加データはすべて非同期で呼び出されます。

SPA でのコンテンツ編集エクスペリエンス content-editing-experience-with-spa

AEM SPA エディターを活用する SPA が構築されている場合、コンテンツ作成者はコンテンツの編集と作成の際に違いを認識しません。 共通の AEM 機能を利用でき、作成者のワークフローに変更を加える必要はありません。

追加のコンポーネントをページにドラッグ＆ドロップしたり、コンポーネントを並べ替えたり、レイアウトを変更したりするなどのオーサリングツールは、SPA 以外のどの AEM アプリケーションでもサポートされます。

SPA アプリと AEM SPA エディター spa-apps-and-the-aem-spa-editor

ユーザーにとってSPAがどのように動作するかを経験してから、SPA ページを調査すると、SAP アプリが AEM の SPA エディターと連携する仕組みをより深く理解できます。

SPA アプリケーションの使用 using-an-spa-application

子ページをナビゲートする際にページがリロードされないとすると、どのように読み込まれるのでしょうか。

次の節 SPA アプリケーションの読み込みでは、SPA の読み込みの仕組みと、コンテンツの同期および非同の読み込み方法を詳しく説明します。

SPA アプリケーションの読み込み loading-a-spa-application

SPA エディターとのインタラクション interaction-with-the-spa-editor

サンプルの WKND SPA プロジェクトアプリケーションを使用すると、JSON コンテンツ配信のためのコンテンツサービスとリソースの非同期読み込みを利用して、アプリケーションが公開時にどのように動作し、読み込まれるかが明確にわかります。

また、コンテンツ作成者は、SPA エディターを使用したコンテンツを AEM 内でシームレスに作成できます。

次のセクションでは、SPA エディターが SPA 内のコンポーネントを AEM コンポーネントに関連付け、このシームレスな編集エクスペリエンスを実現できるようにするためのコントラクトについて説明します。

AEM におけるヘッドフルとヘッドレス headful-headless

SPA は、AEM の外部で開発されて保守される SPA を含む、AEM 内の柔軟なレベルの統合で有効にできます。 さらに、SPA は AEM 内で活用でき、AEM を使用して、追加のエンドポイントにヘッドレスにコンテンツを配信することもできます。

次の手順 next-steps

AEM での SPA の編集エクスペリエンスと、SPA と SPA エディターとの関係を理解したら、SPA の構築方法を深く掘り下げます。