ANNAIマガジン
telegraph
この記事は「 Drupal Case Study : The Telegraph Travel Guides App 」の翻訳です。
この記事の目次

 

Drupal 導入事例:The Telegraph Travel Guides App

Telegraph Media Groupは、英国はもちろん国際的に読まれている英字朝刊「The Daily Telegraph」の経営母体です。同社は「The Daily Telegraph」に加え、「The Telegraph Travel Guides」という旅行者向けの無料アプリで情報を公開しています。 情報は地元の専門家によって書かれており、何をして、どこに滞在し、食べ、飲んで、買い物するかといった、旅行者にとって非常に便利な情報を提供しています。

Telegraph誌の編集者とライターは、「Travel Guides App」はモダンでシンプルなUIであるべきだと考えていました。 彼らが使っていたCMSは時代遅れであり、コンテンツの編集にはGoogle スプレッドシートを通じた時間のかかるものでした。 また、旅行アプリの安定性を向上させたいという思いもありました。

なぜDrupalが選ばれたのか

このプロジェクトの主な目的は、Telegraph Media Groupの旅行アプリの安定性、ワークフロー、コンテンツ配信を改善することでした。Webサイトが複雑なコンテンツ管理を必要とするプロジェクトであるため、Drupalがコンテンツ管理システム用に選ばれました。 

編集者とライターは別々の権限を持っている必要がありますが、Drupalなら簡単に管理できます。 これにより、コンテンツ管理を各部門に簡単に分散することができました。

更にリニューアルの主な目標は、Telegraph社の編集者やライターが、記事を簡単に作成、編集、公開できることです。以前のシステムやワークフローでは、Google スプレッドシートがCMSとして使用されていました。
旅行アプリにはたくさんのコンテンツがあるので、編集者やライターがコンテンツを作成、編集、削除しようとしたときに、Googleスプレッドシートを使用するのは面倒でした。

記事を保存するために異なるタブ、列、行が使用され、特定の旅行ガイドや関連性を簡単に検索するワークフローはなく、加えられた変更についても効率的に改訂できませんでした。編集者はスプレッドシートのコピーを余儀なくされ、異なるタイプのコンテンツソートなど、他のタスクも非常に難しく非効率的だったのです。

Drupalは、Drupal Viewsモジュールによってユーザーがコンテンツタイプごとに並べ替えたり、公開されたフィルタを使用してシンプルに検索できるなど、チームが欲していた検索、改訂、および分類機能を実現しました。

使いやすいユーザーインターフェイス(UI)を使用して、CMSを構築する

私たちの最初のステップは、既存のIA構造を見直し、既存のコンテンツタイプとその依存関係を調査し、Webサイトの新しい構造を構築することでした。 これがいったん完成したらエディタのUI改善に注目し、コンテンツを簡単に埋め込むための簡単な仕組みを作成しました。

サイトの外観には、開発者がより良いコードを書いてスタイルシートを簡潔に保つために、Sass(CSSプリプロセッサ)を使用しました。これは、スタイルを共通ファイルと部分ファイルに分割するなど、明確な構造を定義するのに役立ちました。 Sassと並んでCompassとBootstrapが補助的に使われました。
バックエンドの開発では、1つのカスタムモジュールと1つのフィーチャモジュールのみを使用して簡単にメンテナンスできるようにしました。 

カスタムモジュールをメインアプリケーションモジュールとして使用し、編集者がDrupal UIを使用してコンテンツを作成、編集、削除できるようにする動作を処理しました。 また、ステージングまたはプロダクションアプリに利用可能なコンテンツをパッケージ化して公開するプロセスも処理します。このモジュールは、コントローラ、例外、テストケース、フォームの作成、パッケージング/パブリッシング、および全体的な管理などのさまざまな機能を処理するもので、Drupalから「Travel Guides App」へのコンテンツ公開のワークフローとの統合のために構築されました。

Drupalのfeature moduleは、サイトのさまざまな構成設定を保管します。 これには、ビュー、コンテンツタイプとそのフィールド、テーマ設定、タクソノミー設定、ユーザー権限が含まれます。 これは、1つのDrupal環境から別の環境に構成をエクスポートするのに役立ちました。 

開発ワークフローでは、コンポーネントの変更をさまざまな環境に展開するために使用されました。コンテンツが豊富なWebサイトで作業することに自然に迫る課題にもかかわらず、開発段階では、アプリの機能や動作を損なうことなくUIをできるだけシンプルにするよう努力しました。 Viewsモジュールを表示に使用するというアイデアは、UIの向上に役立ちました。Viewsは複雑な機能を扱いながら、表示をシンプルに保ちます。 また、コンテンツの作成や編集などのボタンを使用することもできました。

ナビゲーション、レイアウト、公開プロセスなど、CMSからアプリケーションへのさまざまな側面を考慮しました。編集者は、コンテンツの作成、管理、およびアクセスのワークフローを簡単に理解することができる、使いやすいナビゲーションが必要でした。 レイアウトに関しては、コンテンツの読み込みにパフォーマンスの問題がなく、コンテンツを簡単に閲覧できるようにする必要がありました。 ビューで提供されるページャーの使用は、いくつものコンテンツを何ページにも渡って表示することができました。 シンプルなレイアウトは、コンテンツエディタがコンテンツを簡単にアプリに公開できるようにするという利点もありました。 

これは、異なるページに特徴を分割することによって行われました。 たとえば、ガイドとなるの基本情報の編集を処理するページで、別のページがガイド情報を公開して、内部コンテンツを公開して公開する機能を持つページなどです。

以上の結果、ユーザーは幅広いコンテンツを作成および管理できる2つのダッシュボードを構築しました。 1つのダッシュボードで、ユーザーは最初から新しいガイド情報を作成できます。

dashboard1

2つめのダッシュボードには、既存のガイド情報、場所、都市、ホテル、レストラン、バー、ビーチ、ショップなどの利用可能なコンテンツがリストされています。

dashboard2

この新しいUIを使用すると、編集者は右側のブロックのアクションボタンをクリックするだけで、既存のガイド情報の新しいコンテンツを作成できます。 Prepopulate Moduleは、追加されたコンテンツがその特定のガイド情報に属するように、ガイド情報の作成に役立ちます。 コンテンツが作成され、正常に保存されると、ユーザーはガイドのダッシュボードに戻ります。

ワークフローとテストの公開

公開時には、編集者またはライターに2つのオプションが用意されています。特定ガイド情報のコンテンツをステージングアプリまたはプロダクションアプリにプッシュすることです。システムは以下のような段階を経て公開されます。

まずはそのガイド情報に属するすべてのコンテンツをパッケージ化。次にJSONオブジェクトに変換し、そして関連するすべての画像をアップロードしてZIPファイルを作成します(カスタムZIPクリエータAPIによって行います) 。 

公開された各ガイド情報には、JSONファイルとイメージが格納されたフォルダが保存されます。既存のガイド情報が更新されて公開されている場合は、関連するJSONファイル(特定のガイド情報に関連するすべてのデータで構成されています)とフォルダ内のイメージも圧縮前に更新されます。 この処理中に、グローバルマニフェストJSONファイル(すべてのガイドの要約データを保持)も更新されます。

zipフォルダは、SFTPを使用してステージング/プロダクションサーバー環境にプッシュされ、処理され、アプリケーションにコンテンツが表示されます。 リモートサーバがファイル/フォルダを同期できるように、RsyncとPHP-execの権利も考慮されていました。 ステージングエンドポイントと本番エンドポイントが設定されているモジュール構成設定ページが作成されました。

コードの構造上、各コンテンツタイプはコントローラクラスとして記述され、関連するプロパティとメソッドが含まれています。各コントローラーはまた、すべての特定のコントローラー間で共有できる共通メソッドの「グローバルな」コントローラーを拡張します

記事コントローラクラスの例として、フィールドの1つを表すconstFIELD_HEADING = ‘field_article_body’; を持つ class ArticleController が挙げられます。

これは、公開プロセス中にも簡単に任意のデータセットを取得できるようにするためです。コントローラと同様に、エクスポート機能も保持しています。 Exporterは、関連するノードからデータをエクスポートし、それをJSONライクなデータ構造に変換する役割を果たします。各タイプのコンテンツには独自のエクスポート用クラスがあり、ガイド情報を格納するjsonファイルのさまざまな部分を構成します。以下に例を示します。

Class ArticleExporter - ガイド情報に属するすべての「記事」のエクスポートを処理します。
Class LocationExporter - ガイド情報に属するすべての「場所」のエクスポートを処理します。

ガイド情報を格納するjsonファイル構造の例は次のとおりです。

json

最小限のコンテンツセットが利用可能になるまで、編集者やライターが公開できない場合には、いくつかの検証が追加されました。 

アプリにプッシュできなかった場合にメッセージが表示されるSFTP設定にも検証が追加されました。検証中に、Telegraph誌の 「Travel Guides App」へ公開するという目的を維持しながら、CMSがGoogleスプレッドシートを使用するプロセスに代わっていることを確認する必要がありました。 これは、コンテンツが公開されて本番アプリと比較されるテストアプリを持つことで実行されました。 Telegraph誌の社内比較ツールも、テストアプリケーションのカスタムモジュールで作成されたjsonデータと本番アプリケーションの既存データを比較するために使用されました。

Drupalの持つインターフェイスのおかげで、 Telegraph誌の編集者とライターは、旅行アプリにコンテンツを簡単かつ迅速に作成、管理、公開することができるようになったのです。

終わりに

いかがでしたか?サイトを運営する上で効果的にコンテンツ管理フローを構築することは、どの企業も試行錯誤されていることだと思います。Drupalを活用することにより、フローの効率化から権限移譲までシンプルにすることができる事例として、参考にして頂ければと思います。

 
フッターの採用情報
 
Kentaro Inoueの写真

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

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

関連コンテンツ