Drupal 8 海外事例:The Weather Channel (weather.com)
Weather.com は Drupal サイトの中でも最もトラフィックが高く、月あたり1億人以上にサービスを提供しています。 The Weather Channelは以前利用していたCMSからDrupal に移行しました。 私たちは The Weather Channel に対してオープンソースという解決策を提供しました。また、新しい Web サイトではページの読み込み時間が大幅に短縮され、インフラストラクチャ要件も削減されました。
なぜDrupalが選ばれたのか
- 機能の柔軟性
- スケーラビリティ
- ライセンス料が不要であること
- 保守性の高さ
- 素晴らしい機能が利用できること
プロジェクトのゴール
- Weather.com の Drupal への完全な移行
- 旧プラットフォームを統合する(場合によっては移行する)
- コンテンツ作成のハードルを大幅に削減する
- 効率よくキャッシュを活用して、読み込み時間を短縮する
- 新製品やサイト機能をマーケットへ公開する際の時間を短縮する
- 柔軟に要件を満たすことができるように、アジャイル方式で開発する。
課題と解決策
スケーラビリティとパフォーマンス:
The Weather Channel のウェブサイトは、ユーザーや地域ごとに異なるコンテンツを提供します。これは大量のトラフィックにつながり、ウェブサイトを機能させるためには必然的に多くのリソースが必要となりました。そのため、ウェブサイトを設計する際には、ウェブサイト特有のスケーラビリティとパフォーマンス要件を考慮して進めなければなりませんでした。
技術面では、クライアント側のレンダリングでは Javascript と Edge Side Includes(ESI)を活用し、コンテンツデリバリネットワーク(CDN)である Akamai に対するコールを最適化することで、キャッシュ効率を向上させるアプローチをとりました。
コンテンツ作成のワークフロー:
以前の編集ワークフローでは、The Weather Channel のコンテンツ編集者はコンテンツを公開するまでに20回以上のクリックを伴う作業が必要でした。編集速度を向上させ、編集者のユーザーエクスペリエンスを快適なものにするため、開発チームは Drupal のコンテンツ作成機能を利用するだけでなく、以下のような新しい編集機能を追加する必要がありました。
レスポンシブなコンテンツ
編集者がコンテンツを入力すると、Drupal システムは、ユーザーのデバイス(デスクトップ、モバイル端末など)に応じて適切なレイアウトを自動的に表示します。
柔軟なページレイアウト
Angular ウィジェットの配置とレイアウトをPanelsモジュール上で行えるようにすることで、The Weather Channel のチームがページ上のレイアウトを完全にコントロールできるようにしました。
レイアウトプレビュー画面の改善
編集者はコンテンツ作成プロセスの初期段階でも素早く簡易的なプレビュー画面を確認できるので、コンテンツを一般公開したり、コンテンツサーバーで作業しなくても、コンテンツのレビューができます。
柔軟な要件
開発プロセス全体を通じて新しい要件が出てくることを踏まえ、Mediacurrent と The Weather Channel はプロジェクトをアジャイル手法で管理することにしました。私たちは2週間ごとにあるスプリントでウェブサイトの各機能を提供することにしました。
スクラムでは毎朝、前日の作業報告、抱えている問題の明確化、そして、その日に何を完了させる予定なのかについて設定するなど、両チームの間で意見を一致させることにしました。緊密なコミュニケーションを維持し、短いフィードバックサイクルを行うことで、要件が変化するたびに作業の優先順位を変更することができました。
Weather.com を Drupal に移行させることは非常に複雑なプロセスでした。プロジェクトでは、要件とそれぞれの決定による影響を把握するために時間をかけることで、レジリエンスの高いアーキテクチャを設計し、The Weather Channel と Mediacurrent の両方が日々変化する業務上のニーズに迅速に対応できるようにしました。
Weather.com は毎月1億人以上に数百万におよぶページを提供しています。The Weather Channel が Drupalへ移行した事例は、複雑で豊富なコンテンツを含むサイトがどのようにしてオープンでアジャイル方式に対応したプラットフォームのメリットを活用して、あらゆるサイト訪問者にとって素晴らしい経験を提供したのかを示しています。
終わりに
いかがでしたか?ウェブサイトを Drupal へ移行することで、読み込み時間を短縮でき、様々なデバイスに対応できるようになったことは、とても大きなメリットがあったかと思います。弊社でも~など、様々なデバイスでの表示に対応できるレスポンシブなウェブサイトの導入事例が多数ありますので、サイトリニューアルをご検討の際はぜひお声がけください。
関連コンテンツ
- 経済産業省・補助金電子申請システム Jグランツ
- Jグランツ: 経済産業省向け補助金申請・管理システムについて
- 補助金申請システム(jGrants)を省庁とアジャイル手法で開発
- 多言語CMSを選択する際に考慮すべき8つのこと
- シカゴ公園局のウェブサイトにおけるDrupal8の導入事例
- CMSの第四の波 Distributed CMS (Drupal Developer Days Transylvania 2019)
- Drupalを利用して顧客により良いUXを提供するサイトの事例
- マサチューセッツ州がDrupal8でMass.govを立ち上げ
- Drupal7導入事例 チューリッヒ観光局のサイトリニューアル
- e-Stat 政府統計の総合窓口(アーキテクチャ編)
Drupal 初心者講座バックナンバー
- Drupal 9/10 初心者講座
- 第 1 回 歴史に見る Drupal の DNA
- 第 2 回 Drupal はフレームワークか?CMS か?他の CMS との比較
- 第 3 回 Drupal の特徴
- 第 4 回 Drupal 9 / 10 のインストール (1)
- 第 5 回 Drupal 9 / 10 のインストール (2)
- 第 6 回 Drupal にコンテンツを投稿してみる
- 第 7 回 Drupal のボキャブラリとタクソノミーの使い方
- 第 8 回 コンテンツ管理における Drupal と他の CMS との比較
- 第 9 回 Drupal のブロックシステム
- 第 10 回 Drupal の標準クエリビルダー Views の使い方
- 第 11 回 Drupal と他の CMS のクエリビルダー機能を比較
- 第 12 回 Drupal の多言語機能と他の CMS やサービスとの比較
- 第 13 回 Drupal の権限設定と WordPress や Movable Type との比較
- 第 14 回 Drupal のテーマシステムについて
- 第 15 回 Drupal の拡張モジュールの選定と使い方
- 第 16 回 Drupal をもっと知りたい方に向けた各種情報