Drupal開発実績 デジタル庁

デスクトップ及びスマートフォン上で表示されたデジタル庁サイト

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

このデジタル化の一環としてデジタル庁は、全府省が段階的に移行する政府統一Webプラットフォーム構築プロジェクトを実施しており、このための調査事業を ANNAI が担当することとなりました。

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

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

    Drupal が採用された理由

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

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

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

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

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

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

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

    デジタル庁ヘッドレスCMSのアーキテクチャー図

    SSG の他にも様々な方式がありますが、最終的に SSG を用いたこのアーキテクチャーが採用された理由は、アクセシビリティーに最大限配慮するため JavaScript 無しにページやコンテンツが正しく表示できる方式が望まれたこと、またセキュリティーなどの観点からデジタル庁が SSG の利用に積極的であったことが挙げられます。

    Next.js の採用

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

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

    の 2 点が挙げられます。

    関連記事

    プレスリリース

    ANNAI マガジン