#D02 CivicThemeのインストール

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サイト内に記載された文章などは非常に読みやすく、どこに何の情報があるかといったユーザービリティは非常に優れています。

<Civic Theme> Drupal Download & Extend <Theme>(Opens in a new tab/window)　Drupal公式内のダウンロードページ

Civic Theme 公式WEBサイト(Opens in a new tab/window)

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

Salsa Digital公式WEBサイト(Opens in a new tab/window)

Civic Themeのインストール

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

<Civic Theme> Drupal Download & Extend <Theme>(Opens in a new tab/window)

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-1
 6/3204271-20-missing-layout-exception.patch)!

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

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

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

extra.patches.drupal/civictheme（誤）　extra.patches.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(Opens in a new tab/window)　レイアウトビルダー不具合について

※参考　https://www.drupal.org/files/issues/2023-07-16/3204271-20-missing-layou…(Opens in a new tab/window)　上記修正パッチのリンク

※参考　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のバージョンをプロジェクト毎（フォルダ毎）に切り替えられる便利ツールです。

% brew install direnv　※Direnvのインストール
% echo 'eval "$(direnv hook zsh)"' >> ~/.zshrc　※Zshにパスを通す
% touch .envrc　※プロジェクトのルートフォルダに移動し.envrcを作成
% vi .envrc　※.envrcに以下のパスの書き込み
export PATH=$(brew --prefix)/opt/php@8.3/bin:$PATH
% direnv allow　※Direnvを起動し有効化
direnv: loading ~/civictheme_demo/.envrc　※civictheme_demoはプロジェクトフォルダ名です
direnv: export ~PATH
% php -v　PHPのバージョンが変更されているか確認
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 ※27行目付近
    },
    "conflict": {
        "drupal/drupal": "*"
    },
    "minimum-stability": "beta",
    "prefer-stable": true,
※stableからbetaに変更

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

表示されるエラー

[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_discover

y, media, media_library, options, rest, shortcut, taxonomy, user, views, field_group, layout_builder_restrictions, linkit, menu_block, paragraphs, pathauto, redirect, webform, system, n

ode, search_api, search_api_db due to missing modules 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

対応したエラー

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

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

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

サブテーマの設定

CivicThemeのインストールが終了したのでサブテーマの設定を行います。

Drupalの記事

関連するDrupalでWEBサイトを構築する為の環境構築の記事やDrupalについて書いた記事になります。

記事は全てナンバリングしています。Drupalを初めて使う為の準備から始まる最初の記事から読む事もできます。

最初の記事から購読

最新の記事

Drupalについて書いた最新の記事になります。

Life Styleの記事

Drupalとは関係ないのですがLife Styleの記事も書いていますのでよろしければ購読ください。

2024/08/01(木) - 12:00