
Drupal 8 海外事例:road.cc
road.ccは、英国のロードサイクリングのウェブサイトで、月間400万PV以上、の月間100万ユニークユーザー数を誇るサイトです。 過去5年間で4回、最高のサイクリングサイトに選ばれました。
サイトはロードサイクリングをあらゆる側面からカバーし、ニュース、レビュー、バイヤー向け情報、ブログ、ビデオ、分類された広告、イベント、フォーラムを提供しています。
既存のDrupal 6サイトを完全に再設計し、200,000人以のコンテンツととユーザーの移行を実施しました。
なぜDrupalが選ばれたのか
この案件はDrupal 6から7へのアップグレードプロジェクトでしたので、Drupalを使用する事は必然でした。
プロジェクトについて(ゴール、要望、成果)
このプロジェクトの目的は、road.ccのウェブサイトをDrupal 6からDrupal 7に移行し、モバイルデバイスに対応したテーマにアップグレードすることでした。 これには、以下を含む多くの要件が含まれていました。
- データ移行
- モバイル初の再テーマ
- サードパーティインテグレーション
- 再プラットフォームホスティング
road.ccには、新しいDrupal 7サイトに移行するために必要な膨大な量のコンテンツが存在しました。 これには、155,000以上のノードと56,000人のユーザー、ファイル、カテゴリーおよびコメントが含まれます。
サイト移行に伴う最も複雑な作業の1つは、新しいサイトにイメージギャラリーを実装することでした。 画像ギャラリーはroad.ccの至る所で使用されているため、サイトの重要なコンテンツです。
イメージギャラリーの作成・管理する際のユーザーエクスペリエンスを改善するために、Scald media managementモジュールを使用しました 。 このモジュールは、あらゆるメディアタイプをドラッグアンドドロップにより簡単に管理することを可能にする、非常に使いやすいメディアライブラリインターフェイスを提供します。
モバイルファーストを実現
road.ccチームにより提供されたデザインを実現するために、MicroserveはCodio boxにホストしたDrupalを使用し、ブラウザ上で直接新しいサイトのプロトタイプを開発しました。 これにより、クライアントはPSDの画像を見直すよりもずっと早くデザインを手に取り、これに基づいて意思決定を行うことができました。
新しいroad.cc Drupal 7のサイトは、デスクトップPC、タブレット、携帯電話のいずれのデバイスにおいても、綺麗に表示され、優れた拡張性も備えています。モバイルサイト全体を綺麗に見せる際に最も難しい事の1つは、多くのメニュー項目をユーザーに使いやすく実装する事でした。
解決策として、デスクトップ表示時にはメガメニューシステムを使用し、モバイルデバイスで表示時にはタッチにより階層構造を持つメニュー項目を辿る事のできるメニューを実装することでした。
外部サービス連携
road.ccの主な収益源は、広告スペースの販売です。そのため、ADTECHとSkimlinksの実装は必要不可欠なプロセスでした。
ADTECHの広告は、画面サイズによって動的に表示されるページ上のブロック内に表示されます。 デスクトップ上ではサイドバーに表示され、モバイル上ではテキストの本文に表示されます。
このサイトはユーザーが、オンラインでroad.ccクラブへの有料購読版を購入できるようにPaypalと統合されています。 Paypalの即時支払い通知(IPN)システムを設定することにより、トランザクションが正常に完了したときにroad.ccに通知し、PayPalから戻ってきたデータを確認して、支払いを完了したメンバーは各種特典、割引、ニュースなどのプレミアムコンテンツにアクセスする事が可能になります。
新しいroad.ccサイトは、Drupalに最適化された高可用性PHPクラウドホスティングプラットフォームであるPlatform.sh上にホストされています。
Platform.shはBitbucketやCodeshipなど、いくつかの開発ツールと統合されているため、新しいfeatureブランチが作成されるたびに無制限の開発環境とステージング環境を即座に立ち上げることができます。
終わりに
今回の事例では外部サービスとの連携がポイントでした。Drupalはそれ単独でも十分に優れたプラットフォームですが、他のwebサービスと連携をする事でさらなる価値を生み出すことができます。
弊社によるDrupalと外部サービスの事例
G空間情報センターでは問い合わせフォームとRedmineとの連携機能を実装する事で、問い合わせ内容を自動でチケット化する機能を備えています。
この事例は外部サービスとの連携においてDrupalがデータの送信側になる例ですが、Drupal 8では標準でREST APIをサポートしているため、逆に外部サービスからDrupalへデータを送信することも可能になっています。
関連コンテンツ
- Jグランツ: 経済産業省向け補助金申請・管理システムについて
- 補助金申請システム(jGrants)を省庁とアジャイル手法で開発
- 多言語CMSを選択する際に考慮すべき8つのこと
- シカゴ公園局のウェブサイトにおけるDrupal8の導入事例
- CMSの第四の波 Distributed CMS (Drupal Developer Days Transylvania 2019)
- Drupalを利用して顧客により良いUXを提供するサイトの事例
- マサチューセッツ州がDrupal8でMass.govを立ち上げ
- Drupal7導入事例 チューリッヒ観光局のサイトリニューアル
- e-Stat 政府統計の総合窓口(アーキテクチャ編)
- NBC Sports Digitalと数百万の視聴者のためのプラットフォームづくり
Drupal 8初心者講座バックナンバー
Drupal初心者講座について
第1回 歴史に見るDrupal のDNA
第2回 Drupalはフレームワークか?CMSか?
第3回 Drupalの特徴
第4回 Drupal 8のインストール(1)
第5回 Drupal 8のインストール(2)
第6回 コンテンツを投稿してみる
第7回 ボキャブラリとタクソノミーを使う
第8回 コンテンツ管理におけるDrupalと他のCMSとの比較
第9回 Drupal 8のブロックシステム
第10回 Drupalの標準クエリービルダ Views
第11回 Drupalと他のCMSのクエリビルダー機能を比較
第12回 Drupal 8の多言語機能と他のCMSやサービスとの比較
第13回 Drupalの権限設定とWordPressやMovable Typeとの比較
第14回 Drupalのテーマシステムについて
第15回 Drupalの拡張モジュールの選定と利用方法
第16回 Drupalをもっと知りたい方に向けた各種情報