オーサリングと公開の概要 author-content-publish
ユーザーが web サイトのコンテンツの更新方法を理解することが重要です。 この章では、コンテンツ作成者のペルソナを採用し、前の章で生成されたサイトに編集上の更新を加えます。章の最後では、変更を公開してライブサイトの更新方法を理解します。
前提条件 prerequisites
これは複数の部分からなるチュートリアルであり、サイトの作成の章で概説されている手順が完了していることを前提としています。
目的 objective
- AEM Sites の ページ および コンポーネント の概念を理解します。
- Web サイトのコンテンツを更新する方法を説明します。
- ライブサイトに変更を公開する方法を説明します。
新しいページを作成します。 create-page
通常、web サイトは複数ページに分割されて、複数ページでのエクスペリエンスを形成します。 AEM はコンテンツを同じ方法で構造化します。 次に、サイトの新しいページを作成します。
-
前の章で使用した AEM オーサーサービスにログインします。
-
AEM 開始画面で、サイト/WKND サイト/英語/記事をクリックします。
-
右上隅で、作成/ページをクリックします。
ページを作成ウィザードが表示されます。
-
記事ページテンプレートを選択し、「次へ」をクリックします。
AEM のページは、ページテンプレートに基づいて作成されます。ページテンプレートについては、ページ テンプレートの章で詳しく説明します。
-
プロパティの下に、「Hello World」という タイトル を入力します。
-
名前を
hello-worldに設定し、「作成」をクリックします。
-
ダイアログのポップアップで、「開く」をクリックして、新しく作成されたページを開きます。
コンポーネントのオーサリング author-component
AEM コンポーネントは、web ページの小さなモジュラー構築ブロックと考えることができます。 UI を論理チャンクまたはコンポーネントに分割することで、はるかに管理しやすくなります。 コンポーネントを再利用するには、コンポーネントを設定できる必要があります。 これは、オーサーダイアログを通じて実行します。
AEM は、すぐに使用できるコアコンポーネントのセットを提供します。 コアコンポーネントは、テキストや画像などの基本的な要素から、カルーセルなどのより複雑な UI 要素まで多岐にわたります。
次に、AEM ページエディターを使用して、いくつかのコンポーネントを作成します。
-
前の演習で作成した Hello World ページに移動します。
-
編集モードであることを確認し、左側のサイドパネルで コンポーネント アイコンをクリックします。
これにより、コンポーネントライブラリが開き、ページで使用できる使用可能なコンポーネントが一覧表示されます。
-
下にスクロールして、テキスト(v2)コンポーネントをページのメインの編集可能領域に ドラッグ&ドロップ します。
-
テキストコンポーネントをクリックして強調表示し、レンチアイコン
をクリックしてコンポーネントのダイアログを開きます。テキストを入力し、変更内容をダイアログに保存します。
ページ上の テキスト コンポーネントにリッチテキストが表示されるはずです。
-
画像(v2)コンポーネントのインスタンスをページ上にドラッグする以外は、上記の手順を繰り返します。画像コンポーネントのダイアログを開きます。
-
左側のパネルで、アセットアイコン
をクリックして、アセットファインダーに切り替えます。
-
画像をコンポーネントのダイアログに ドラッグ&ドロップ し、「完了」をクリックして変更内容を保存します。
-
ページ上に、タイトル、ナビゲーション、検索などの修正されたコンポーネントがあることを確認します。これらの領域は、ページテンプレートの一部として設定されており、個々のページでは変更できません。これについては、次の章で詳しく説明します。
その他のコンポーネントを自由に試してみてください。各コアコンポーネントのドキュメントについては、こちらを参照してください。ページのオーサリングに関する詳しいビデオシリーズについては、こちらを参照してください。
更新内容の公開 publish-updates
AEM 環境は オーサーサービス と パブリッシュサービス に分かれます。この章では、オーサーサービス上のサイトにいくつかの変更を加えました。サイト訪問者に変更内容を表示するには、それを パブリッシュサービス に公開する必要があります。
オーサーからパブリッシュへの大まかなコンテンツフロー
1. コンテンツ作成者がサイトのコンテンツを更新します。更新内容は、プレビュー、レビューおよび承認が済んだ後にライブでプッシュすることができます。
2. コンテンツが公開されます。公開は、オンデマンドで実行することも、後日にスケジュールすることもできます。
3. 変更内容がパブリッシュサービスに反映されているのがサイト訪問者にわかります。
変更内容の公開
次に、変更内容を公開します。
-
AEM 開始画面で Sites に移動し、WKND サイトを選択します。
-
メニューバーで「公開を管理」をクリックします。
これはまったく新しいサイトなので、すべてのページを公開する必要があり、公開を管理ウィザードを使用して、公開する必要があるものを正確に定義します。
-
オプションでは、パブリッシュの設定をデフォルトのままにし、スケジュールは 今すぐ に設定します。「次へ」をクリックします。
-
範囲で WKND サイトを選択し、「子の設定を含める」をクリックします。ダイアログで、「子を含める」のチェックをオンにします。残りのボックスのチェックをオフにして、サイト全体が公開されるようにします。
-
「公開済みの参照」ボタンをクリックします。ダイアログで、すべての項目のチェックがオンになっていることを確認します。これには、標準サイトテンプレートや、サイトテンプレートで生成されたいくつかの設定が含まれます。「完了」をクリックして更新します。
-
最後に、WKND サイトの横のボックスにチェックを入れ、右上隅の「次へ」をクリックします。
-
ワークフローステップで、「ワークフロータイトル」を入力します。これは任意のテキストで構いません。後で、監査記録の一部として役に立ちます。「初期公開」と入力し、「公開」をクリックします。
公開済みコンテンツを表示 publish
次に、パブリッシュサービスに移動して、変更を表示します。
-
パブリッシュサービスの URL を容易に取得するには、オーサー URL をコピーして、
author次の単語publishに置き換えます。次に例を示します。- オーサー URL -
https://author-pYYYY-eXXXX.adobeaemcloud.com/ - パブリッシュ URL -
https://publish-pYYYY-eXXXX.adobeaemcloud.com/
- オーサー URL -
-
パブリッシュ URLに
/content/wknd.htmlを追加して、最終的な URL がhttps://publish-pYYYY-eXXXX.adobeaemcloud.com/content/wknd.htmlのようになるようにします。note note NOTE サイト作成時に、一意の名前を指定した場合は、 wknd.htmlをサイト名と一致するように変更します。 -
AEM オーサリング機能を使用せずに、サイトが表示される公開 URL に移動します。
-
ナビゲーションメニューを使い、記事/Hello World をクリックして、先に作成した Hello World ページに移動してください。
-
AEM オーサーサービスに戻り、ページエディターでコンテンツをさらに変更します。
-
ページプロパティアイコン/ページを公開をクリックして、ページエディター内で直接、これらの変更を公開します。
-
AEM パブリッシュサービスに戻って変更を確認します。 おそらく、すぐに更新内容は表示 されない でしょう。 これは、AEM パブリッシュサービスに Apache web サーバーと CDN を介したキャッシュが含まれるからです。デフォルトでは、HTML コンテンツは約 5 分間キャッシュされます。
-
テストやデバッグの目的でキャッシュをバイパスするには、
?nocache=trueのようなクエリパラメーターを追加します。 URL はhttps://publish-pYYYY-eXXXX.adobeaemcloud.com/content/wknd/en/article/hello-world.html?nocache=trueのようになります。使用可能なキャッシュの戦略と設定の詳細については、こちらをご覧ください。 -
また、Cloud Manager でパブリッシュサービスの URL を見つけることもできます。Cloud Manager プログラム/環境/環境に移動します。
環境セグメントに、オーサーおよび パブリッシュ サービスへのリンクがあります。
おめでとうございます。 congratulations
これで、AEM サイトに対する変更を作成して公開できました。
次の手順 next-steps
実際の実装計画では、モックアップと UI のデザインを含むサイトは通常、サイトよりも前に作成されます。 Adobe XD UI キットを使用して、Adobe XDでの UI 計画で Adobe Experience Manager Sites の実装を設計および高速化する方法を理解しておきましょう。
AEM Sites の機能をさらに確認したい場合は、ページテンプレートを参照してください。ページテンプレートとページの関係を理解できます。