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つのダッシュボードで、ユーザーは最初から新しいガイド情報を作成できます。
2つめのダッシュボードには、既存のガイド情報、場所、都市、ホテル、レストラン、バー、ビーチ、ショップなどの利用可能なコンテンツがリストされています。
この新しい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ファイル構造の例は次のとおりです。
最小限のコンテンツセットが利用可能になるまで、編集者やライターが公開できない場合には、いくつかの検証が追加されました。
アプリにプッシュできなかった場合にメッセージが表示されるSFTP設定にも検証が追加されました。検証中に、Telegraph誌の 「Travel Guides App」へ公開するという目的を維持しながら、CMSがGoogleスプレッドシートを使用するプロセスに代わっていることを確認する必要がありました。 これは、コンテンツが公開されて本番アプリと比較されるテストアプリを持つことで実行されました。 Telegraph誌の社内比較ツールも、テストアプリケーションのカスタムモジュールで作成されたjsonデータと本番アプリケーションの既存データを比較するために使用されました。
Drupalの持つインターフェイスのおかげで、 Telegraph誌の編集者とライターは、旅行アプリにコンテンツを簡単かつ迅速に作成、管理、公開することができるようになったのです。
終わりに
いかがでしたか?サイトを運営する上で効果的にコンテンツ管理フローを構築することは、どの企業も試行錯誤されていることだと思います。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 をもっと知りたい方に向けた各種情報