装飾用二重らせん

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

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

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

新しいファイルを作成すると、公式チュートリアルで既に [email protected] とフォルダを共有しているため、「作成して共有」するように求められます。フォルダー、ひいてはその中のドキュメントを共有することで、EDSはGoogleドライブのコンテンツを表示して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デモでの「ページが見つかりません」エラーの様子です。まだページをプレビューして公開していないため、ウェブサイトは現在ページを見つけることができません。ドキュメントに戻り、AEM Sidekick 拡張機能（下のスクリーンショットの左端のアイコン）をクリックします。

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

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

今あるように、私たちのページはかなりわかりやすいです。画像を使って色を付けてみましょう。わかりやすくするために、サンプルページの青い DNA 画像を使用します。

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

よさそうだ！テキストを画像の上に重ねたくない場合は、文書の見出しテキストの上ではなく下に画像を配置するだけで、このようなページが表示されます。

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

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

そして、これが私のプレビューページではどのように見えるかです。

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

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

これで世界中に見せたいページができたので、公開前に完了しなければならない最後のステップがあります。記事のタイトルを変更せずに、メタデータのこのページのタイトルを「My New Page」から「Demo Page」に変更したいです。また、メタデータに説明を追加して、検索エンジンがページを見つけやすくしたいと考えています。そのためには、メタデータブロックを追加する必要があります。

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

まず、文書の末尾に 2X3 の表を挿入します。最初の行のセルを強調表示し、右クリックして [セルの結合] を選択します。

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

さあ、今すぐページをプレビューしてください。ページのコンテンツはまったく変更されていないことがわかりますが、Chrome のタブを見ると、以前のデフォルトのタイトルの代わりに新しいタイトルが表示されます。

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

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

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

このチュートリアルが面白く、AEM 製品について詳しく知りたい場合は、AEM の概要に関するこちらの記事をご覧ください。