webマーケター必見 – ページロード速度を向上させる最適解とは？
webサイトの表示速度は、SEO対策やユーザーの離脱防止のためにも、とても重要なポイントです。「様々な対策をしているものの、Google PageSpeed Insightsで高得点を取るのがなかなか難しい」とお悩みの方も多いのではないでしょうか。そんなwebマーケターの皆様におすすめなのが、Adobe Experience Manager Sitesの新機能である「Edge Delivery Services」です。今回は、この新機能を体験していただくべく開催した日本初のイベント「新機能でページロード速度を劇的に改善！- Adobe Experience Manager Sites：ハンズオンラボ」の模様をお届けします。
Edge Delivery Servicesとは？
Adobe Experience Managerは、直感的な操作性と豊富な機能を兼ね備え、多言語および多国籍サイトなどの大規模サイトにも対応できる企業向けCMSとして、過去10年にわたりリーダーポジションを獲得してきました。
しかし、その一方で、「Adobe Experience Managerを使いこなすには“Adobe Experience Manager デベロッパー”とも呼ばれる、特殊なスキルを持った開発者を確保する必要があること」、「リッチなコンテンツで表示速度を上げるためには、相応の技術力が求められること」という2つの課題を抱えていました。
まさに、これらの課題を解決するのが、今回のハンズオンラボで体験いただいた新機能「Edge Delivery Services」です。
アドビ 平嶋 英治
Edge Delivery Servicesとは、エッジサーバーを活用した高速配信システムのこと。アドビが培った様々な高速配信に必要なノウハウが詰め込まれているため、Edge Delivery Servicesを活用すればGoogle PageSpeed Insightsで容易に高得点の実現が可能になります。
さらに、Microsoft WordやGoogle Docsのような使い慣れたドキュメントツールを使い、データ収集に必要な「フォーム」やwebページをすばやく作成／編集できます。例えば、時間が勝負のトレンドブログの公開や、テキストやURLのちょっとした修正にEdge Delivery Services が役に立ちます。 “社内のマーケター自身がAdobe Experience Manager にログインすることなく、ドキュメントで作成したキャンペーン用のランディングページをブラウザの拡張機能を用いてクイックに公開する”といった使い方が可能です。公開後の修正はマーケター自身が公開したドキュメント上で実施し、再公開いただけます。外部のベンダーに頼むと1週間以上かかっていた作業を内製化できるのも、大きな魅力の一つです。
英語にはなりますが、こちらのwebサイト（https://www.aem.live/home）で詳しくご紹介しております。また、Edge Delivery Servicesを利用して作成されたwebサイトのコードが、こちらのGitHub（https://github.com/orgs/hlxsites/repositories?type=all）で公開されていますので、合わせてご参照ください。
さて、そんなEdge Delivery ServicesとAdobe Experience Managerは、どのような関係にあるのでしょうか。
この黄色の部分がEdge Delivery Services。Adobe Experience Managerとブラウザ間でデータを加工（＝最適化）するのがEdge Delivery Servicesの役割となります。Adobe Experience ManagerとEdge Delivery Servicesをつなぐ、薄いピンク色の部分は現在開発中ですが、Microsoft Word やGoogle Docs、GitHubからEdge Delivery Servicesへデータを送るやり方はすでにリリース済みであることから、今回のハンズオンラボでは、こちらを体験いただきました。
Edge Delivery Servicesを使ってみよう
参加者の皆様にお配りした開発用のPCを使い、いよいよEdge Delivery Servicesを用いたwebサイト制作のスタートです。アドビの担当者がサポートに入り、熱心に取り組んでいただきました。
- 開発マシンを準備
（今回は事前にアドビで設定）
・GoogleとGithubアカウントを用意。
・開発用PCに以下をインストール。（Windows／Mac／Linuxいずれも可）
-gitコマンド
-Node.js
-aem-cli
-VS Code
・Chrome系のブラウザ（Microsoft Edgeでも可）にAdobe Experience Manager Sidekick Extensionをインストール。
・事前に用意したHands On Assetをダウンロード。
- 開発プロジェクトの初期設定
（Edge Delivery Servicesにコードとコンテンツを送信するための設定を行う）
＜コードの準備＞
・GitHubにログインし、プロジェクトテンプレートのコードを自分のレポジトリにコピー。
・作成したレポジトリにAdobe Experience Manager Code Syncをインストール。
＜コンテンツの準備＞
・GitHubから「fstab.yaml」を開いて、中に書かれているURLを開く。
・indexドキュメントの中身と実際のサイトでの表示を比較。
・Google Driveにログインし、「edsholXX（XX：レポジトリを作成した際に割り振られた番号）」のフォルダを作成し、「index, nav, footer」というドキュメントを作成。
・先ほど確認したデフォルトコンテンツの内容をコピーし、新たに作成した「index, nav, footer」にペースト。
・Edge Delivery Servicesからドキュメントへアクセス可能にするために、「edsholXX」フォルダの共有設定を変更。（helix@adobe.comに編集者権限を付与する。）
＜コードを自分のコンテンツに紐付けする＞
・Google Driveの「edsholXX」フォルダのURLをコピー。
・GitHubの自分のレポジトリから「fstab.yaml」を開き、記載されているURLを、先ほどコピーしたURLに置き換える。
・「Commit directly to the main branch」を選択してmainブランチにコミットする。
＜Adobe Experience Manager Sidekickの設定＞
・Google Driveの「edsholXX」フォルダを開き、ブラウザの右上にある「Adobe Experience Manager Sidekick Extension」を右クリックの上、「このプロジェクトを追加」を選択。
・https://main--edsholXX--edshol.hlx.live/（XX：レポジトリを作成した際に割り振られた番号）にアクセスしてリロードを行うと、画面上にAdobe Experience Manager Sidekickのバーが表示されるので、「Reload」をクリック。コンテンツが表示される。
・Google Driveの「index」ファイルを開き、文字を編集。左上の「Preview」をクリックし、先ほどのhttps://main--edsholxx--edshol.hlx.live/にアクセスすると、編集した内容が反映されていることが確認できる。
・Google Driveに戻ったら、「index」ファイルと同様に、「nav」と「footer」ファイルをそれぞれ開き、Adobe Experience Manager Sidekickの「Preview」をクリック。https://main--edsholxx--edshol.hlx.live/にアクセスし、Adobe Experience Manager Sidekickの「Reload」を押すと、ナビゲーションとフッターが追加されていることが分かる。
ここまで約1時間でEdge Delivery Servicesを利用したサイト構築の初期セットアップが完了しました。今後、Google Driveでドキュメントを追加すると、新しいページが作成されます。
デフォルトのサイトURLは、フォルダ構造とドキュメントのファイル名で決まります。また、プレビュー環境と本番環境は、URLの最後で見分けることができます。
プレビュー環境…https://main--edsholXX--edshol.hlx.page/
本番環境…https://main--edshol91--edshol.hlx.live/
そして、Adobe Experience Manager Sidekickの「Publish」をクリックすることで、作成したサイトを公開することができます。
開発者の手を借りずに、高速表示を実現！
次に、ページを作成するための基礎概念を解説しました。
アドビ 金子 哲士
ドキュメントは、「セクション」「デフォルトコンテンツ」「ブロック」の3つを組み合わせて作成していきます。
・セクション…デザインや背景を変えたい場合など、グルーピングするために用いるもので、「---」で区切ることで、セクションを作成することができます。
・デフォルトコンテンツ…見出し／本文テキスト／リンク／リスト／画像
・ブロック…デフォルトコンテンツでは表現が難しいものを表現するための仕組み。Adobe Experience Managerの「コンポーネント」と同じような概念であり、JavaScriptやスタイルシートを理解していれば、オリジナルのブロックも簡単に作成することができます。また、コピー＆ペーストするだけで使えるサンプルのコードがこちら（https://www.aem.live/developer/block-collection）にたくさん公開されていますので、合わせてご活用いただけます。
会場では、参加者の皆様に新しいページを作成して公開するところまで体験していただきました。さらに、Edge Delivery Servicesで作成したサイトをGoogle PageSpeed Insightsで計測し、特別なSEO対策をしなくとも高得点が取れるところもご覧いただきました。
最後に、参加者の皆様のご感想を一部ご紹介します。
・比較的楽にサイトが作れたことや性能面も優れているので、キャンペーンサイトなどの静的ページを作成する際は検討してみようと思います。
・Edge Delivery Servicesを導入した際の具体的な対応フローなどがイメージできました。
・実際に体験ができたので分かりやすかった。
・実際にページを作ったりブロックを開発したり、幅広く体験できてよかったです。
・普段はAdobe Experience Managerの見たままオーサリングをしているので、Edge Delivery Servicesではどうやって開発しているのかまで知れて参考になりました。
イベント終了後には、参加者同士の懇親会も開催。ご自身の会社でどのようにAdobe Experience Managerを活用されているのか、今後どんなところにEdge Delivery Servicesを活用していけそうかなど、和気藹々と意見交換をされていました。
アドビにとっても日本初の試みとなった今回のハンズオンラボ。お客様が実際に使われる様子を知ることができ、私たちも多くの気づきをいただけました。次回の開催をぜひ楽しみにしてください。