Interest.CivicTheme / Drupal
メニュー

テーマから探す

構築し、試し、学んだ記録。

CIVICTHEME JOURNAL 02

CivicThemeのインストール

·DrupalDrupal PostCivic Theme

約7,000文字 読了目安：約15分

この記事の目次

Themeの設定

DrupalをインストールするとデフォルトでOliveroと言うThemeがインストールされています。

今回インストールしたDrupal Coreは10.31なのでOlivero 10.31と言うThemeがデフォルトテーマとして設定されています。

Oliveroは優れたテーマでDrupalの基本的なFront End機能（ページ作成やブログ、カテゴリー分けなど）が用意されておりデザインもレスポンシブ（PCや携帯の利用環境に応じたサイトデザインの最適化）となっています。

Oliveroをそのまま利用しても優れたWEBサイトを構築出来ますが、Drupalは政府機関や教育期間のWEBサイトに利用されていてその優れた情報整理やユーザービリティを使って見たいので、私はCivicThemeと言うオーストラリアの政府機関が使っているThemeをインストールします。

CivicThemeとは

政府関係や教育機関のWEBサイトを構築し運用するためのGovCMSとして作られています。オーストラリア政府関係機関が採用しています。開発にもオーストラリア政府関係機関が関与し堅牢で情報整理と情報配信に優れ、WEBの知識がなくても使えるシステムになっています。

atomic designと言われる構造ルールに準拠し、構築する方もルールに則る事で、同一のクォリティを維持出来ます。その事で公共性の高い政府関係の情報を誰が見ても見やすく情報を得られるWEBサイトを構築する事が出来ます。

Civic Themeの特徴に

  • atomic design
  • CompornentはFigma準拠
  • WCAG 2.2 AA compliantに準拠
  • ユーザー第一主義
  • 専門知識に明るくなくても構築が可能

といった構造とルールで作成されています。

Civic Theme

非常に優れたコンセプトで構築されたテーマであり、政府機関での使用を考慮されて作られています。そのため見た目は少しお堅いイメージでおしゃれなデザインといった印象は薄いのですが、WEBサイト内に記載された文章などは非常に読みやすく、どこに何の情報があるかといったユーザービリティは非常に優れています。

Drupal Download & Extend 　Drupal公式内のダウンロードページ

Civic Theme 公式WEBサイト

Civic Themeはサルサデジタルと言うオーストラリアの会社が構築し提供しています。

Salsa Digital公式WEBサイト

Civic Themeのインストール

Civic ThemeのインストールはComposerで行います。

Drupal Download & Extend

Drupal公式内のダウンロードページのガイドに従いインストールします。

Civic Themeの前に、DrupalCoreとの相性の問題を解決するパッチを当てる必要があります。

重要 Drupalコアには既知の問題があり、CivicThemeのインストールを正常に完了させるためには、CivicThemeをインストールする前にパッチをサイトにインストールする必要があります。このパッチは本番環境では必要ありません。

パッチの当て方については別項で説明していきます。

パッチを当てたらいよいよCivic Themeのインストールを行います。

以下を実行しCivic Themeのインストールを実行

% ddev composer require drupal/civictheme

※$ composer require drupal/civictheme　でも行えますが、DDEVを使用しているのでddevのコマンドを利用してComposerを使う事が推奨されています。

インストールがWSODで終了した場合は、問題を提出しないでください - これは、完全にインストールされていないCivicThemeを使用していることを意味します。上記のパッチをインストールし、インストールを最初からやり直してください。

CivicThemeをインストールする前に、上記のパッチが適用されていることを確認し、キャッシュをクリアしてください。

必要なモジュールを有効にします

（Drupalはテーマがモジュールの依存関係を宣言することを許可していますが、それらのモジュールを自動的に有効にすることはまだ許可していません）

以下を実行してモジュールを有効にする。

% ddev drush ev "require_once dirname(\Drupal::getContainer()->get('theme_handler')->rebuildThemeData()['civictheme']->getPathname()) . '/theme-settings.provision.inc'; civictheme_enable_modules();"

WEB上のDrupal管理画面(UI)またはDrushでキャッシュをクリアする

%  ddev drush cr

WEB上のDrupal管理画面(UI)またはDrushでテーマを有効にする

% ddev drush then civictheme

これでCivic Themeがインストールされるはずですが。。。

そうは問屋が卸しません。複数のエラーが原因でインストール出来ないので出ているエラーを一つづつ潰していきます。自身のMacの環境や勘違いが原因でエラーを出してしまっているので以降に出たエラーと対応をまとめています。

Patchが当たっていない

表示されるエラー

 Cannot apply patch Layout builder cannot recover on missing layout: https://www.drupal.org/node/3204271 (https://www.drupal.org/files/issues/2023-07-16/3204271-20-missing-layout-exception.patch)!

Composerでjsonにパッチを書き込む際パッチの当て場所を間違えていたので訂正します。

Drupal Coreに当てるパッチをCivic Themeと勘違いしていた。

※Composer-Patchでパッチを当てています。

extra.patches.drupal/civictheme（誤）　extra.patches.drupal/core（正）

  • Patchを当てる場所の訂正(Drupal Core)

    誤
% composer config extra.patches.drupal/civictheme --json -m '{"Layout builder cannot recover on missing layout: https://www.drupal.org/node/3204271":"https://www.drupal.org/files/issues/2023-07-16/3204271-20-missing-layout-exception.patch"}'

正　※以下を実行しcomposer.jsonにパッチを書き込みます。
% composer config extra.patches.drupal/core --json -m '{"Layout builder cannot recover on missing layout: https://www.drupal.org/node/3204271":"https://www.drupal.org/files/issues/2023-07-16/3204271-20-missing-layout-exception.patch"}'

% composer install

    composer installを実行すると無事パッチが当たります。

    ※参考　https://www.drupal.org/node/3204271　レイアウトビルダー不具合について

    ※参考　https://www.drupal.org/files/issues/2023-07-16/3204271-20-missing-layout-exception.patch　上記修正パッチのリンク

    ※参考　composer-patchesのインストールは　% composer require cweagans/composer-patches

PHPバージョンが不適合

表示されるエラー

Problem 1
- Root composer.json requires drupal/civictheme == 1.8.0.0 -> satisfiable by drupal/civictheme[1.8.0].
- drupal/civictheme 1.8.0 requires php >=8.2 -> your php version (8.1.29) does not satisfy that requirement.

今回、最新安定版であるCivic Theme 1.8をインストールしますが、推奨されるPHPのバージョンは8.2以上のところMacのデフォルトのPHPのバージョンが8.19になっている為、Civic Themeがインストールされない。

PHPのバージョンを8.2以上に変更する事で対応。

※Macに入っている他のプログラムを動かす関係で、デフォルトのPHPバージョンの変更はしたくないのでこのプロジェクトのみPHPのバージョンを8.2以上にします。

Direnvを使いこのプロジェクトフォルダのPHPのバージョンのみを変える

※direnvは複数のPHPのバージョンをプロジェクト毎（フォルダ毎）に切り替えられる便利ツールです。

  • Direnvを使いプロジェクトのPHPのバージョンを変える事で対応

    // Direnvのインストール //
% brew install direnv
// Zshにパスを通す //
% echo 'eval "$(direnv hook zsh)"' >> ~/.zshrc
// プロジェクトのルートフォルダに移動し.envrcを作成 //
% touch .envrc
// .envrcに以下のパスの書き込み //
% vi .envrc
// .envrcに書き込むパス //
export PATH=$(brew --prefix)/opt/php@8.3/bin:$PATH
// Direnvを起動し有効化 //
% direnv allow
direnv: loading ~/civictheme_demo/.envrc
// civictheme_demoはプロジェクトフォルダ名です //
direnv: export ~PATH
// PHPのバージョンが変更されているか確認 //
% php -v
PHP 8.3.9 (cli) (built: Jul  2 2024 14:10:14) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.3.9, Copyright (c) Zend Technologies
   with Zend OPcache v8.3.9, Copyright (c), by Zend Technologies
// 無事PHPのバージョンが8.3に変更されています //

drupal/components^3@betaが必要な問題

表示されるエラー

Problem 1
   - drupal/civictheme[1.4.7, ..., 1.5.1] require drupal/components ^2 || ^3@beta -> satisfiable by drupal/components[2.0.0, ..., 2.4.0].
   - drupal/civictheme[1.4.2, ..., 1.4.5] require drupal/components ^2 -> satisfiable by drupal/components[2.0.0, ..., 2.4.0].
   - drupal/components[2.0.0, ..., 2.4.0] require drupal/core ^8.7.7 || ^9 -> found drupal/core[8.7.7, ..., 8.9.20, 9.0.0, ..., 9.5.11] but the package is fixed to 10.3.1 (lock file version) by a partial update and that version does not match. Make sure you list it as an argument for the update command.
   - drupal/civictheme[1.6.0, ..., 1.8.0] require drupal/components ^3@beta -> found drupal/components[dev-3.x, 3.0.0-alpha1, ..., 3.x-dev (alias of dev-3.x)] but it does not match your minimum-stability.
   - Root composer.json requires

Civic Theme1.8ではdrupal/components 3.0以上が必要であるが、安定版は2.0系のみで3.0以上はBeta版、dev版以外の配布がない。composer.jsonのデフォルトは安定版のインストールのみ許可をしているのでbeta版のインストールが出来るよう設定を変更する。

“minimum-stability"の指定を"安定版指定stable"から"beta版指定beta"に変更しdrupal/components 3.0のインストールを許可することで対応。

  • 対応策　composer.jsonの変更

    composer.json ※27行目付近
    },
    "conflict": {
        "drupal/drupal": "*"
    },
    "minimum-stability": "beta",
    "prefer-stable": true,
※stableからbetaに変更

search_api, search_api_db.が見当たらない問題

表示されるエラー

Problem 1
[warning] Undefined array key "search_api" ModuleInstaller.php:125
[warning] Attempt to read property "info" on null ModuleInstaller.php:125
 〜〜〜以下省略〜〜〜
In ModuleInstaller.php line 137:
  Unable to install modules components, block_content, ckeditor5, config, content_moderation, datetime_range, focal_point, help, image,inline_form_errors, layout_builder, layout_discovery, media, media_library, options, rest, shortcut, taxonomy, user, views, field_group, layout_builder_restrictions, linkit, menu_block, paragraphs, pathauto, redirect, webform, system, node, search_api, search_api_db due to missing modules search_api, search_api_db.

search_api, search_api_db.が見当たらない為、依存関係のあるモジュールのインストールが出来ていないと言うエラー。

  • search_api,search_api_dbエラーの対応策

    モジュールのインストール状況を確認

    % ddev drush pm-list --type=Module --status=enabled | grep "search_api"

    % ddev  drush pm-list --type=Module --status=enabled | grep "search_api_db"

    search_api, search_api_dbもインストールされていません。

    search_apiとsearch_api_dbのモジュールの追加をします。

    % ddev composer require drupal/search_api

    % ddev composer require drupal/search_api_db

    モジュールの有効化をします。

    % ddev drush en search_api search_api_db -y

    管理画面 > 機能拡張 > 検索 に Serch API,Serch API DBが追加

    チェックボックスにチェックが入っていればOK

対応したエラー

  1. Patchのエラー
  2. PHPバージョンに起因するエラー
  3. drupal/components^3@betaに起因するエラー
  4. search_api, search_api_dbがない為にモジュールがインストールされないエラー

エラーを修正し、CivicThemeがインストールされます。

PHPのバージョンによる依存や、Patchの問題、使用するモジュールのバージョンの問題などがあり、インストールに手間取りましたが無事Civic Themeのインストールが完了しました。現状メインテーマのインストールが完了した状況ですが、事項ではサブテーマを設定していきます。

すべての記事を見る ↗