ビートルズ公式サイトのDrupal導入事例　

Drupal 海外事例：The Official Beatles Website

誰もがビートルズのことを聞いたことがあると思います。彼らの音楽は、人々の生活において必ずサウンドトラックの一部になっていると思うし、彼らの曲の多くは、その当時と同じぐらい今も素晴らしい音楽です。ということは、ビートルズは世界中に何百万人ものフォロワーがいるファンベースである点に驚かないと思いますし、ファンはサイトやソーシャルメディアは自分たちのことを惹きつけてほしい、と思っています。

Apple RecoredsとMotherlode Mediaはビートルズの新公式サイトを作るために開発者を探しました。目的は、The Beatles Anthology bookと同じ体験と見た目を提供することでした。テキストのスニペットや、引用、これまで後悔したことのない画像や映像バンドの個人的なインサイト、楽曲、当時のアイデアなど。同時にニューアルバムやグッズ、ファンをエンゲージするためのイベントなどを宣伝する必要もありました。売上などはメインの要求ではありませんでしたが、創造性や新しい体験が求められていました。

なぜDrupalが選ばれたのか

今回、Drupalのみがこのプロジェクトで検討されていました。Drupalは柔軟性があって、素晴らしいAPIフレームワークは考えるほぼ全ての機能を導入することができます。大企業向けのたくさんのプロジェクトでDrupalを使用してきた経験から、今回のような重要なクライアント様のケースでもDrupalでうまく行くと思っていました。

プロジェクトについて（ゴール、要望、成果）

技術的にいくつかの要望がありました。

• サイト編集者にとって管理が簡単でなければならない
• 新しい記事は（場合によっては）Facebookにも投稿したい
• 既存ユーザーは、過去のプロフィールやコメントもそのままに、新サイトにも簡単にユーザー移行されなければならない
• UXはレスポンシブで、全てのデバイスで人を惹きつけるものであること
• コンテンツページは既存のテキスト、引用、画像、オーディオでの「ストーリ」から構築されなければならない
• サイトは多数の訪問者や突発的なサイトトラフィック増にも対応できなければならない

コンテンツキュレーション

このプロジェクトのクリエイティブ的な発想の元になったのは、見た目の部分でも人を惹きつけるストーリの観点でもThe Beatles Anthology bookでした。明らかにビートルズはもう作曲活動をしていませんが、同じストーリーを語る方法もたくさんのやり方があるし、ウェブサイトの能力がそれを反映する必要があります。1965年のアメリカツアーを例にしましょう。話の一部はツアーそのものの視点で語られますし、1965年に起こったことをベースに語ることもできるし、その年に発売されたアルバムに関連する話で語ることもできます。どのアーキテクチャーも、壮大な話を語るために特定のテーマを掘り下げるにあたり、話のスニペットを引き出すために柔軟であることが必要でした。キーとなるアイデアは、毎回違う話を伝えるためにストーリーのスニペット、画像、オーディオクリップ、ビデオを異なる順序でならべかえることができるようにすることでした。それは博物館のキュレーターが違うテーマを扱うにあたり展示物をならべかえることと似ています。

画像、オーディオ、ビデオ、テキスト、引用を配置するためにフィールドと共に違うコンテンツタイプを作成しました。（タイトルとチーム内では呼ぶことにしていた）情報のスニペットは、タクソノミーを利用するのにタグ付けされ、（960gridに基づいて）タイトルの幅を与えました。ストーリー・ノードは、エンティティ参照とビューウィジェットを使用して、編集者がストーリー内のタイルを検索、選択、再配置できるようにしました。コンテンツ編集者は、ページで宣伝するための関連するストーリーや販売グッズを選ぶことができます。ストーリーレイアウトでは、jQuery nmasonryを使用して、タイルに割り当てられた幅に基づいてコンテンツを配置します。サイトを見た方がわかりやすいとおもうので確認してみてください。

テーマレイヤー

Drupalのテーマは、シンプルだが洗練されたデザインと技術の有効です。開発チームは、masonryプラグインをベースにして、レスポンシブのUXコンセプトをデザインしました。画像とストーリータイルはブラウザの幅に合わせて動的に拡大され、デザインにはいくつかのCSSブレークポイントがあります。単純にCSSに対応する同じ画像名を提供することがいいと思っていませんでした。今回は、真のレスポンシブル対応が求められていました。例えば、ブラウザの幅と要件が変化すると、実際の画像ファイル名が（jQuery経由で）変更される最適化された帯域幅の高い画像を配信する、など。これを達成するために、結構なtemplate.phpのカスタマイズをして、picture and breakointo moduleを使用しました。ブラウザのサイズを変更すると、コンテンツは文字通りページ上で踊り、jQueryは画像をシームレスに変更します。サイトの”Explore”ページか記事ページいアクセスして、実際にブラウザサイズを変更してみてください。

ユーザー登録

もう1つの重要な要件は、サイトをFacebookに結びつけることでした。ユーザーはFacebookアカウントを使って登録でき、（プロフィールフィールドをfacebookからDrupalにコピーする）サイトへのアクセスを増やすために、ユーザーが投稿した内容は（ユーザーの希望に応じて）自分のタイムラインでも流れるようにすることでした。コンテンツ編集者は新しい投稿内容をFacebookアプリを経由してFacebookタイムラインでも宣伝できます。この機能はDrupal.orgにあるFacebookモジュールで実装しました。

もう一つ追記しておきたいのは、既存ウェブサイトからユーザープロフィールとコメントを連携したことです。フィードとSQLパーサーを使用して古いデータベースを照会し、多数の既存のコンテンツ、イメージ、オーディオ、ビデオ、コメントを取り込みました。bespoke registrationモジュールはユーザーの既存プロフィールを新しいサイトに移行するのに役立ちました。リアルタイムで私たちは古いデータベースのアーカイブ・コピーを照会し、すでに移行されたコメントにユーザーを関連付けると同時に、すべてのプリファレンスとプロファイル・フィールドをコピーしました。

ホスティングアーキテクチャ

サイトはピークタイムに起きるアクセスの急騰に対応しなければなりません。このサイトは、AmazonのCloudfront CDN（DrupalのCDNモジュール経由）を介して配信されるイメージとファイル資産を使用して、負荷分散されたRackspaceクラスタでホストされています。基本的には、画像は世界中の需要に応じて自動的に生成されるため、イメージコンテンツはローカルのAmazon Cloudコピーから配信できます。これにより、プレスリリースや発表が行われたときのウェブサイトの負荷が大幅に軽減されます。サーバーの負荷を軽減するための匿名で認証されたキャッシュも用意されています。

その他

このサイトにはさらに多くの機能が搭載されており、特注のSoundCloudオーディオプレーヤー、Topspinサインアップ、特注のメディアブラウザ、Wikipediaのスクレーピング、View Filterやプレゼンテーションのカスタマイズなど、多くのカスタマイズをしました。もっと具体的な事例についてご紹介することができます。Drupalがなければ、またはDrupalの開発者によって提供された膨大な数のモジュールがなければ、開発には信じられないほどの時間がかかったとおもいます。

終わりに

ここまで有名なバンドのサイトを運営する使命として、音楽体験、バンドのストーリーをサイトでも体験できることが求められていました点がとても印象的でした。そのほか、ピークタイムのアクセス対策についての言及も印象的な事例でした。ぜひ参考にしてみてください。