オーサリングと公開の概要 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 の機能をさらに確認したい場合は、ページテンプレートを参照してください。ページテンプレートとページの関係を理解できます。