ANNAIマガジン
Drupalcon 2022 ロゴ
この記事の目次

ANNAI は Drupalcon Portland 2022 にて、我々の手掛けた政府統一Webサイトプロジェクトと、その検証事業の一環としてのデジタル庁ウェブサイトのヘッドレス CMS(Drupal + Next.js)への移行について講演を行いました。

講演は 3 部で構成されています:

  1. デジタル庁ウェブサイトのヘッドレス CMS への移行
  2. 政府統一Webサイトの実現のための調査事業
  3. 今後の方向性について

このブログポストでは、上の第 1 部について記しています。2、3 については別のブログポストにまとめる予定です。

プロジェクトの要約

2021 年 9 月に発足したデジタル庁は、社会全体のデジタル化をゴールに様々なプロジェクトを推進しています。また「誰ひとり取り残されない、人に優しいデジタル化を」というスローガンのもと、利用者視点からのサービスデザインを目指しています。

政府ウェブサイトの標準化と統一化(政府統一Webサイトの構築)は、日本の情報システムの刷新という目標のもと進められている事業の 1 つです。

なぜ政府統一Webサイトが求められるのか

政府統一Webサイト構築に向けたサービス基盤及びデザインシステム等の実証に関する調査業務」の説明には、現状の府省のサイトに関して以下の問題が指摘されています:

  • ユーザー視点からの問題
    • UI/UX の一貫性の欠如
    • 類似する内容が複数のサイトに散在
  • 政府視点からの問題
    • 各府省のサイトがそれぞれ異なるシステムで整備・運用されているため、コストや人的リソースの観点から課題が存在している

このため、UI/UX の改善及びシステム整備・運用の標準化・統一化を目指すこととなりました。

そして、デジタル庁ウェブサイトのヘッドレス CMS への移行はこの事業の一部という位置づけで、政府統一Webへの適用を検討しているヘッドレス技術に関する知見を広めたり、デザインシステムを適用するための検証事業でした。

デジタル庁ウェブサイトのヘッドレス CMS への移行

2021 年 9 月のデジタル庁発足時、同庁のウェブサイトはノーコードのウェブサイト作成ツールによって作られていました。

ヘッドレスアーキテクチャーとレンダリング方式

新しいサイトは、フロントエンドに Next.js を、バックエンドに Drupal を利用しています。Static Site Generation (SSG) 方式を採用しているため、サイトの全ページをビルドして提供しています。

デジタル庁ウェブサイトのアーキテクチャー

コンテンツの作成や管理には Drupal を使い、トリガーに基づきコンテンツがビルドされ、ビルドの結果生成された HTML ファイルがストレージに格納されます。これらの HTML ファイルは CDN を介して配信されます。

SSG の他にもリクエストに対してページ全体をリロードせずにページ内要素を更新する Signle Page Application (SPA) や、リクエストごとにサーバー側でページを生成する Server Side Rendering (SSR) など様々な方式があります。最終的にデジタル庁サイトに SSG を用いたこのアーキテクチャーが採用された理由は、アクセシビリティーに最大限配慮するため JavaScript 無しにページやコンテンツが正しく表示できる方式が望まれたこと、またセキュリティーなどの観点からデジタル庁が SSG の利用に積極的であったことが挙げられます。

Drupal の採用

2015 年の時点で Drupal はヘッドレス CMS としての利用が始まっていました。当時 Drupal (バージョン 7)ではエンティティーという概念が取り入れられました。これにより、データをテキストベースのウェブコンテンツとしてではなく、ページ(または Drupal におけるノード)の概念から切り離してデータ型をもとに個別に取り扱うことができるようになりました。エンティティーの登場により、Drupal は一般的なウェブ CMS とは一線を画す汎用バックエンドシステムとしての頭角を現し始めました。

しかし Drupal 7 は、リクエストに対してレンダーされた HTML ページを返すことを前提とした構造でした。ヘッドレス CMS だけでなく、モバイルアプリやスマートデバイスのバックエンドとして Drupal のニーズが高まっていることを受け、Drupal 8 では API ファーストという観点からアーキテクチャーを刷新しました。この完全なリビルドを経て、Drupal はパワフルなヘッドレス CMS としての進化を遂げ、多くのヘッドレスウェブサイトの構築を成功に導いています。

デジタル庁ウェブサイトのヘッドレス化に際しては、このような Drupal のヘッドレス CMS としての実績と、安定したコミュニティーのサポートが考慮され Drupal の採用に至りました。

Next.js の採用

バーチャル DOM の採用を前提とした場合、選択肢は Next.js と Nuxt.js の二択でした。その上で Next.js を採用した理由は

  1. デジタル庁サイトでは今後 SSR を採用することも検討しているが、Next.js では Nuxt.js に比べて SSG と SSR の切り替えが設定レベルで比較的簡単に行える
  2. Drupal で Next.js を利用する際に活用できる開発用ツール「Next-Drupal」があるため、Nuxt.js を利用するよりも効率良く開発を進められる

の 2 点が挙げられます。

マークダウンを使ったコンテンツのオーサリング

コンテンツの記述にはマークダウンを利用しています。これにより、今後 API を公開してサイトコンテンツを配信する際に、コンテンツの再利用性を高めています。また、API レスポンスに HTML を含めないというNext.js のベストプラクティスに従う目的もありました。

デザインシステムの適用

今回の検証事業に先立って、府省のサイトの UI/UX を視野に入れたデザインシステムが作成されました。このデザインシステムを新しいデジタル庁サイトに適用することも、今回の検証事業の一環でした。

デザインシステムについては、こちらのデジタル庁の Note に詳しく記されています:https://digital-gov.note.jp/n/n78f6a2f82e48 


検証事業から得られた学び - 技術的側面 - 

ヘッドレスアーキテクチャーについて

良かったこと

  • バックエンドと完全に切り離されているため、フロントエンドの自由度が高い
  • プロジェクトの早い段階でアクセシビリティーのテストを実施できた

あまり良くなかったこと

  • バックエンド・フロントエンドをそれぞれ開発する必要が生じるため、結果として工数が増大する
  • メニューやパンくずリスト他、Drupal が(半)自動で生成してくれるものが利用できないため、Drupal の強みが完全には活かせない

SSG 方式のヘッドレスは政府統一Webには適していない

各府省のサイトには、少なくとも10 万ページ以上のコンテンツが存在します。SSG の場合、1 ページ追加されただけでも再ビルドの対象になりますが、10 万以上のページをビルドするには多大な時間を要するため現実的とは言えません。

SSR であれば、リクエストごとにページをレンダリングするため採用可能ですが、この場合より多くのリソースを要することになります。

JSON:API は最良の選択ではないかもしれない

これは主に JSON API の利用に関連するモジュールのバグや仕様による問題で、今後解決されていく可能性も大いにあります。

  • ドキュメント生成のために利用した Open API for JSON:API は Open API Spec V3 に完全には準拠していないため、生成されたドキュメントをバリデーターに通すと大量のエラーが発生する
  • JSON:API Views にも特定の問題が発見されたため、利用を見送った

また、フロントエンド・バックエンドの開発リソースの可用性やアーキテクチャーの好みによっては Graph QL のほうが良い選択肢かもしれません。Graph QL を利用するとフロントエンドからの単一のリクエストに対してバックエンドがすべてのページ要素を返すことが可能になるのに対し、JSON:API ではフロントエンドが必要とする要素それぞれに対してバックエンドにリクエストする必要があります。そのため、GraphQL はバックエンドの開発負荷が多くなり、JSON:API はフロントエンドの開発負荷が多くなります。また、バックエンドへのリクエスト数の違いに伴うサーバーリソースへの影響なども考慮する必要があるでしょう。

マークダウン

マークダウンには標準規約というものが存在せず、また基礎的なマークダウンは表現力に乏しく、例えばテーブルなどを表現することができません。

マークダウンのフレーバーやバリアントについて調査した結果、それぞれに利点・欠点があり、例えば Github Markdown はイシューの記述に特化しているため、一般的なウェブサイトの表記には向いていないことが分かりました。

最終的に、PHP Markdown Extras がデジタル庁のコンテンツオーサリングに必要な要素を網羅していることが分かり、Markdown-it を利用してテーブル、ページ内リンク、定義リストおよびフットノートを利用可能にしました。

検証事業から得られた学び - 組織・人間的側面 -

これはほぼプロジェクト管理に収束するものでした。

まず今回のような検証事業においては成果物の最終像が明らかではないため、プロジェクト開始時に詳細な要件定義を行うと、事業の本来の目的を果たせないことになります。そのため、このようなプロジェクトにおいてはアジャイル的なプロジェクト管理が前提となります。

アジャイル手法を利用するにあたっては、組織が構造的にアジャイルに対応している必要があります。例えば最終的な意思決定者がチームからの問い合わせに迅速に対応できるかなどが重要なポイントになります。

また、アジャイル手法によって進め方や利用するアーティファクトおよび用語などが異なります。そのため、具体的にどのような手法をどのように適用するかについての説明と合意、またそれを実践で使うための教育は不可欠となります。

まとめ

デジタル庁ウェブサイトのヘッドレス化を経て、ヘッドレス技術やその適用について、またデザインシステムの適用について多くの知見が得られました。同時に、同庁のサイトのアクセシビリティーや機能をさらに向上させることができました。この検証事業を通して得られた見識は、今後の政府統一Webサイトのアーキテクチャーの選定や、構築に活用されていくことになります。

政府統一Webサイトの調査については、今後の記事で詳しく説明していく予定です。

 
フッターの採用情報
 
Mori Sugimotoの写真

この記事を書いた人: Mori Sugimoto

2006 年から欧米の大規模 Drupal 案件で開発・アーキテクチャーやコンサルティングなどを担当。コア・拡張モジュールの翻訳、また国内外でのミートアップのオーガナイズや Drupalcon での登壇およびボランティアなど積極的にコミュニティに参加。2008 年より Drupal Security Team コーディネーターを務める。オランダ在住。

関連コンテンツ