装飾的な二重らせん

AEM Edge配信サービスにページを追加する方法

Edge Deliver Services (以下、EDS) の公式入門チュートリアルを完了したばかりの場合は、作成した Web サイトをどのように拡張すればよいか疑問に思うかもしれません。この記事では、新しいページを構築して AEM Web サイトに公開する方法を説明します。この記事では、元のチュートリアルを完了し、ブラウザーに AEM Sidekick 拡張機能がインストールされた稼働中の Web サイトがあることを前提としています。

まず、Googleドライブに新しいファイルを作成します

新しいファイルを作成すると、「作成して共有」するように求められます。これは、公式チュートリアルで既に helix@adobe.com とフォルダーを共有しているためです。フォルダーと、その中のドキュメントを共有すると、EDS が Google Drive のコンテンツを表示して、Web サイトに取り込むことができるようになります。「作成して共有」をクリックして、新しいドキュメントの編集を開始します。

EDS プロジェクトでドキュメントを編集するときに最初に注意する必要があるのは、ドキュメントの名前です。この名前は、ページが存在する URL を作成するために使用されます。

たとえば、このブログのスクリーンショットに表示されているプロジェクトのメイン URL はhttps://main--drews-franklin-demo--drew-cummings.hlx.live/です。

「新しいページ」という名前の新しいドキュメントを作成した場合、そのページが公開されたときの URL は https://main--drews-franklin-demo--drew-cummings.hlx.live/new-page になります。ドキュメント名が大文字であっても、生成される URL はすべて小文字になることに注意してください。読みやすさとナビゲーションのために、ドキュメント名は短く、関連性のあるものにしてください。

ドキュメントのタイトルを「新しいページ」に更新してください。

次に、ドキュメントの上部にタイトルを追加しましょう。テキストを「見出し 1」に設定し、タイトルを入力します。

ウェブサイトでどのように表示されるか見てみましょう。生成された URL (私の場合はhttps://main--drews-franklin-demo--drew-cummings.hlx.live/new-page ) にアクセスして、どのように表示されるか見てみましょう。

ああ、大変！このメッセージが表示されても、慌てる必要はありません。これは、デフォルトの EDS デモで「ページが見つかりません」というエラーが表示される様子です。まだプレビューして公開していないため、Web サイトは現在ページを見つけることができません。ドキュメントに戻り、下のスクリーンショットの一番左のアイコンである AEM Sidekick 拡張機能をクリックしてください。

しばらくすると、ヘルパーツールバーが表示されます。左側に赤い点が付いた「プレビュー」ボタンが表示されます。この赤い点は、ステージングされて Web サイトにプッシュされる新しいコンテンツがあることを示しています。そのボタンをクリックして、読み込まれるページを確認してください。

これは新しいページの プレビュー です。ページを公開すると、これが「ライブ」サイトでどのように表示されるかを示します。コンテンツが公開されていない間はライブページには表示されず、公開されていないページはライブ Web サイトにも表示されないことに注意してください。これにより、公開する準備ができるまで、サイトのユーザーに表示されずにコンテンツを試したり、好みに合わせて調整したりできます。今のところ、このページは未公開のままにして、Google ドキュメントに戻ってコンテンツを追加しましょう。

現状では、ページはかなりシンプルです。画像を使って色を加えてみましょう。わかりやすくするために、サンプルページの青い DNA 画像を使用します。

プレビューをクリックして、どのように見えるかを確認してください。

いいですね! 画像の上にテキストを重ねたくない場合は、画像をドキュメントの見出しテキストの上ではなく下に配置すると、次のようなページが表示されます。

テキストオーバーレイは、記事の最初の画像に対してのみ発生し、最初に表示されたとおりにフォーマットされ、画像のすぐ下にタイトルまたは見出し 1 スタイルのテキストが表示されている場合にのみ発生します。

それでは、この記事にテキストコンテンツを追加してみましょう。出版業界でテキストレイアウトの実験に伝統的に使用されているラテンテキストである Lorem Ipsum を使用します。Lorum Ipsum を使用すると、誤って読んでしまうことなく、アラビア語のアルファベットコンテンツがページ上でどのように表示されるかを確認できます。代わりに、任意のテキストコンテンツを自由に追加してください。私の Google ドキュメントでは次のようになります。

プレビューページでは次のようになります。

最後に、ページのコンテンツにインラインで配置された画像がどのように表示されるかを見てみましょう。デモページから 1 枚の写真を最初の段落の後に追加して、以下のサイトでどのように表示されるかを示します。

EDS は Google ドキュメントからコンテンツを取得し、それを使用して Web サイトを作成する HTML ファイルを生成することに注意してください。その結果、Google ドキュメント内の画像のサイズは、プレビュー/ライブページ上の画像のサイズとは相関しません。サイトで画像のサイズを調整する場合は、画像のネイティブ解像度を調整する必要があります。

世界に公開しても問題ないページが完成したので、公開する前にもう 1 つやらなければならないことがあります。記事のタイトルは変更せずに、メタデータ内のこのページのタイトルを「My New Page」から「Demo Page」に変更します。また、検索エンジンがページを見つけやすくするために、メタデータに説明を追加します。これを行うには、メタデータブロックを追加する必要があります。

メタデータブロックを追加する最も簡単な方法は、デモホームページからコピーして貼り付けることですが、最初から作成することに興味がある場合は、その手順を説明します。

まず、ドキュメントの最後に 2X3 の表を挿入します。最初の行のセルを選択して右クリックし、「セルの結合」を選択します。

一番上の行に「メタデータ」と入力し、次の 2 行の左側のセルに「タイトル」と「説明」と入力します。「タイトル」セルの右側にタイトルにしたい内容を入力し、「説明」セルの右側に説明にしたい内容を入力します。最終結果は次のようになります。

さあ、ページをプレビューしてみましょう。ページの内容はまったく変わっていませんが、Chrome のタブを見ると、以前のデフォルトのタイトルではなく、新しいタイトルが表示されています。

ウェブページのHTMLファイルを調べると、タイトルと説明の両方がウェブページのプロパティとして存在していることがわかります。

公開する準備ができました。プレビューページに表示される AEM Sidekick 拡張機能の左側にある [公開] ボタンをクリックし、Web サイトで新しいライブ Web ページを確認します。

ウェブサイトにページが追加されました。おめでとうございます。公開前にこのページの URL にアクセスして 404 ページが見つかりませんというエラーが表示された場合、公開後もそのエラーが表示される可能性があります。これはさまざまな理由で発生する可能性がありますが、AEM Sidekick 拡張機能からエラーメッセージが表示されない限り、コンテンツが実際に通過した可能性は低いです。1 ～ 2 分待ってページを更新すると、公開されたページが表示されるはずです。

このチュートリアルを気に入っていただき、AEM 製品についてさらに詳しく知りたい場合は、こちらでAEM についての記事をご覧ください。