ANNAIマガジン
roadcc
この記事は「 Drupal Case Study : road.cc 」の翻訳です。
この記事の目次

 

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つは、多くのメニュー項目をユーザーに使いやすく実装する事でした。

解決策として、デスクトップ表示時にはメガメニューシステムを使用し、モバイルデバイスで表示時にはタッチにより階層構造を持つメニュー項目を辿る事のできるメニューを実装することでした。
 

bike_reviews

 

外部サービス連携

adtech

road.ccの主な収益源は、広告スペースの販売です。そのため、ADTECHSkimlinksの実装は必要不可欠なプロセスでした。

ADTECHの広告は、画面サイズによって動的に表示されるページ上のブロック内に表示されます。 デスクトップ上ではサイドバーに表示され、モバイル上ではテキストの本文に表示されます。

 

paypal

このサイトはユーザーが、オンラインでroad.ccクラブへの有料購読版を購入できるようにPaypalと統合されています。 Paypalの即時支払い通知(IPN)システムを設定することにより、トランザクションが正常に完了したときにroad.ccに通知し、PayPalから戻ってきたデータを確認して、支払いを完了したメンバーは各種特典、割引、ニュースなどのプレミアムコンテンツにアクセスする事が可能になります。

platform_sh

新しいroad.ccサイトは、Drupalに最適化された高可用性PHPクラウドホスティングプラットフォームであるPlatform.sh上にホストされています。

Platform.shはBitbucketCodeshipなど、いくつかの開発ツールと統合されているため、新しいfeatureブランチが作成されるたびに無制限の開発環境とステージング環境を即座に立ち上げることができます。

終わりに

今回の事例では外部サービスとの連携がポイントでした。Drupalはそれ単独でも十分に優れたプラットフォームですが、他のwebサービスと連携をする事でさらなる価値を生み出すことができます。

弊社によるDrupalと外部サービスの事例

gspace

G空間情報センターでは問い合わせフォームとRedmineとの連携機能を実装する事で、問い合わせ内容を自動でチケット化する機能を備えています。

この事例は外部サービスとの連携においてDrupalがデータの送信側になる例ですが、Drupal 8では標準でREST APIをサポートしているため、逆に外部サービスからDrupalへデータを送信することも可能になっています。

この記事を書いた人 : Kentaro Inoue

ANNAI株式会社
経営企画室 室長
サービスの設計・企画、マーケティング、採用戦略の立案などを担当。普段は新潟で猫と一緒に、時々海外からリモートで働いています。好きなモジュールはRulesとFlagです。

関連コンテンツ