#D36 Civic Theme 1.10.0 | Hooked-on Drupal

Civic Theme 1.10.0

2025年3月25日にCivic Theme 1.10.0がリリースされました。1.10.0のリリースにより1.9.0のサポートが完了になるので、Civic Theme 1.10.0にアップデートを行います。

サポートされていないリリース:
Your currently installed release is now unsupported, and is no longer available for download. 
Uninstalling everything included in this release or upgrading is strongly recommended!
以下を含みます： CivicTheme, CivicTheme Demo

Civic Themeのアップデートは過去に1.7→1.8→1.9と行っています。バージョンアップ時に軽微な不具合が出てしまい、修正版が急遽リリースされたり、1.9はカラーがデフォルトになってしまいパッチでの対処などアップデート後の不具合があるので、少し慎重になっています。

Mac BookにDDEVを使いDrupal10.4.5とCivic Theme 1.9.0をインストールしてあるのでまずローカルでのアップデートを行い、不具合の確認をしてから、本番環境のアップデートを行います。

私が利用しているXserverビジネススタンダードは、Webサイト構築と運営に必要と思われる機能がほぼ全てパッケージされています。サーバーの完全なバックアップとMySQLのバックアップが過去14日分保存されていますので、最悪Xserverのバックアップでロールバック出来ます。

そのような環境ですので、躊躇せずCivic Theme 1.10.0にアップデートを行います。

Mac Bookでの確認

まずMac BookのDDEVでアップデートの確認をします。

composer update --dry-run を使い変更を適用せずに、アップデート後の状態をシミュレートします。
問題なければ、Civic Themeの更新を行います。

DDEVでの確認

以下のアコーディオンメニューでご覧いただけます。

composer update --dry-run でシュミレートします。

% cd civictheme
% ddev start
Upgraded DDEV v1.24.4 is available!
Please visit https://github.com/ddev/ddev/releases/tag/v1.24.4
.....
Your project can be reached at https://civictheme.ddev.site
See 'ddev describe' for alternate URLs.
% ddev ssh
@civictheme:/var/www/html$ composer update --dry-run
Loading composer repositories with package information
Updating dependencies
...
Upgrading drupal/civictheme (1.9.0 => 1.10.0)
...
Upgrading drupal/layout_builder_restrictions (2.20.0 => 3.0.3)
...
44 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
...
$

特に問題ないので、アップデートを行います。公式サイトに記載される方法でアップデートで行います。普段アップデートは composer update を使いますが今回は composer require を使います。

composer require 'drupal/civictheme:^1.10'

$ composer require 'drupal/civictheme:^1.10'
./composer.json has been updated
Running composer update drupal/civictheme
...
Problem 1
    - Root composer.json requires drupal/civictheme ^1.10 -> satisfiable by drupal/civictheme[1.10.0].
    - drupal/civictheme 1.10.0 requires drupal/layout_builder_restrictions ^3 -> found drupal/layout_builder_restrictions[3.0.0, 3.0.1, 3.0.2, 3.0.3] but the package is fixed to 2.20.0 (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.
Use the option --with-all-dependencies (-W) to allow upgrades, downgrades and removals for packages currently locked to specific versions.
Installation failed, reverting ./composer.json and ./composer.lock to their original content.

composer.json の layout_builder の指定が ^2 にロックされていて ^3 が必要なので composer のアップデートに --with-all-dependencies のオプションをつけて書き換えてくださいとの事です。

--with-all-dependenciesをつけてアップデートを行います。

$ composer require drupal/civictheme:^1.10 --with-all-dependencies

$ composer require drupal/civictheme:^1.10 --with-all-dependencies
./composer.json has been updated
Running composer update drupal/civictheme --with-all-dependencies
...
Upgrading drupal/civictheme (1.9.0 => 1.10.0)
Upgrading drupal/layout_builder_restrictions (2.20.0 => 3.0.3)
...
44 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
No security vulnerability advisories found.
$

アップデートは無事完了します。DBのアップデートを行い、最後にキャッシュをクリアします。

$ drush updatedb
$ drush cr

$ drush updatedb
------------ --------------------------------------------------- ------------- ------------------------------------------------------------------------------
 Module       Update ID                                           Type          Description
------------ --------------------------------------------------- ------------- ------------------------------------------------------------------------------
 civictheme   add_search_link_field_to_search_component           post-update   Add field_c_b_link_in_mobile_menu field config and update form view.
                                                                                @SuppressWarnings(PHPMD.StaticAccess)
 civictheme   update_editor_allowed_field                         post-update   Update editor config for D11 requirement (remove duplicate settings).
 civictheme   update_view_mode_civictheme_navigation_card_ref_1   post-update   Update the view mode 'civictheme_snippet' to 'civictheme_navigation_card'.
                                                                                @SuppressWarnings(PHPMD.StaticAccess)
------------ --------------------------------------------------- ------------- ------------------------------------------------------------------------------

┌ Do you wish to run the specified pending updates? ───────────┐
│ Yes                                                          │
└──────────────────────────────────────────────────────────────┘
// Select YES //
[notice] Update started: civictheme_post_update_add_search_link_field_to_search_component
[notice] Added field_c_b_link_in_mobile_menu field config and updated form view.
[notice] Update completed: civictheme_post_update_add_search_link_field_to_search_component
[notice] Update started: civictheme_post_update_update_editor_allowed_field
[notice] Updated editor allowed field.
[notice] Update completed: civictheme_post_update_update_editor_allowed_field
[notice] Update started: civictheme_post_update_update_view_mode_civictheme_navigation_card_ref_1
[notice] Updated view mode from "civictheme_snippet" to "civictheme_navigation_card".
[notice] Update completed: civictheme_post_update_update_view_mode_civictheme_navigation_card_ref_1
[success] Finished performing updates.
// Database update completed. //
$ drush cr
[success] Cache rebuild complete.
// Cache clearing complete. //

以上で Civic Theme 1.9.0 から Civic Theme 1.10 にアップデートが完了します。

Web ページの表示や管理画面の表示を確認し不具合がないかの確認をしますが特に問題なくアップデートが完了しました。

Mac Book の DDEV でのアップデートの検証に問題がないので、本番環境のアップデートを行います。

Civic Theme 1.10.0へのアップデート

Xserver に SSH でログインを行いアップデートします。作業は Mac Book と同様になります。

composer update --dry-run を使い変更を適用せずに、アップデート後の状態をシミュレートします。
問題なければ、Civic Themeの更新を行います。
メンテナンスモード
$ drush cr
$ composer require drupal/civictheme:^1.10 --with-all-dependencies
$ drush updatedb
$ drush cr
メンテナンスモードの解除

Civic Theme 1.10.0へのアップデート

以下のアコーディオンメニューでご覧いただけます。

XserverにSSHで接続を行います。
composer update --dry-run でシュミレートします。

// SSHで接続 //
% ssh -i ~/.xssh/xb123456.key -p 10022 xb123456@xb123456.xbiz.jp
Enter passphrase for key '/Users/takedashinichiro/.xssh/xb123456.key':
Last login: Fri Mar 21 04:41:33 2025 from h123-012-123-123.extradomain.com
// Drupalのディレクトリに移動 //
[xb123456@sv000 ~]$ cd hooked-on01.com/public_html/drupal.hooked-on01.com/recommended-project
// dry-run で確認//
[xb123456@sv000 recommended-project]$ composer update --dry-run
Loading composer repositories with package information
Updating dependencies
Lock file operations: 0 installs, 36 updates, 0 removals
- Upgrading drupal/civictheme (1.9.0 => 1.10.0)
- Upgrading drupal/components (3.0.0-beta3 => 3.1.0)
...
42 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
No security vulnerability advisories found.

問題ないので、アップデートを行います。

メンテナンスモード
$ drush cr
$ composer require drupal/civictheme:^1.10 --with-all-dependencies
$ drush updatedb
$ drush cr
メンテナンスモードの解除

// キャッシュのクリア //
$ drush cr
[success] Cache rebuild complete.
// アップデート //
$ composer require drupal/civictheme:^1.10 --with-all-dependencies
./composer.json has been updated
Running composer update drupal/civictheme --with-all-dependencies
...
Upgrading drupal/civictheme (1.9.0 => 1.10.0)
- Upgrading drupal/components (3.0.0-beta3 => 3.1.0)
- Upgrading drupal/layout_builder_restrictions (2.20.0 => 3.0.3)
...
Generating autoload files
42 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
Scaffolding files for drupal/core:
// DBのアップデート //
 $ drush updatedb
 ------------ ---------------- ------------- ----------------------------------
  Module       Update ID        Type          Description
 ------------ ---------------- ------------- ----------------------------------
  civictheme   add_search_lin   post-update   Add k_field_to_sea field_c_b_link_in_mobile_menurch_component field config and update form view.
                                              @SuppressWarnings(PHPMD.StaticAccess)
  civictheme   update_editor_   post-update   Update editor config for D11 allowed_field requirement (remove duplicate settings).
  civictheme   update_view_mo   post-update   Update the view mode de_civictheme_ 'civictheme_snippet' to navigation_car 'civictheme_navigation_card'. d_ref_1
                                              @SuppressWarnings(PHPMD.StaticAccess)
 ------------ ---------------- ------------- ----------------------------------
 ┌ Do you wish to run the specified pending updates? ───────────┐
 │ Yes                                                          │
 └──────────────────────────────────────────────────────────────┘
 [notice] Update started: civictheme_post_update_add_search_link_field_to_search_component
 [notice] Added field_c_b_link_in_mobile_menu field config and updated form view.
 [notice] Update completed: civictheme_post_update_add_search_link_field_to_search_component
 [notice] Update started: civictheme_post_update_update_editor_allowed_field
 [notice] Updated editor allowed field.
 [notice] Update completed: civictheme_post_update_update_editor_allowed_field
 [notice] Update started: civictheme_post_update_update_view_mode_civictheme_navigation_card_ref_1
 [notice] Updated view mode from "civictheme_snippet" to "civictheme_navigation_card".
 [notice] Update completed: civictheme_post_update_update_view_mode_civictheme_navigation_card_ref_1
 [success] Finished performing updates.
// キャッシュのクリア //
$ drush cr

メンテナンスモードを解除し、Civic Theme 1.10.0 のアップデートが完了します。

管理画面と Web サイトを確認し表示の不具合がないかを確認します。念の為、テーマの設定が機能するかの確認も行いますが問題はありません。

アップデートの完了

Civic Themeのアップデートは過去に不具合が出てしまいページの表示にも問題が生じたりしたので今回のアップデートも慎重に行いましたが特に不具合もなくアップデートが完了します。

Drupal CMSへの対応

Civic Theme に限らず、Drupal のモジュールやテーマは、Drupal core 11.x と Drupal CMS への対応を進めています。今回の 1.9.0 から 1.10.0 へのアップデートは Drupal CMS での利用を考慮したアップデートとなっています。私自身が Drupal CMS をMac Book にインストールしていますが、アップデートの不具合などまだまだマイナートラブルもあり、公開するサイトでの使用は様子をみているところです。

Civic Theme は元々他の Drupal のテーマよりユーザーのインターフェースが完成しています。その事でDrupal Coreの設定や CSS や JS を意識しなくてもサイトが構築出来ます。このインターフェースの発想は、DrupalよりWord Press に近い発想です。Drupal CMS がこれまでの専門知識を必要とする Drupal のインターフェースから専門知識をそれほど必要としないWord Press のインターフェースに近い発想で作られています。まだ始まったばかりでモジュールやテーマの対応が追いついていませんが、専門知識を持たなくても Web サイトの構築が可能となり、その事で利用者が増える可能性を持つプロジェクトになっています。

Word Press のカスタマイズとなると、Drupal より面倒な部分もあるので、Drupal が持つ設定の自由度がありながら、優れたテーマやモジュールが用意されていく事で、非常に使いやすい CMS となるのではないかと考えています。

逆に Word Press はナビゲーションの自由な設定やページ内のレイアウトの自由な設定はプラグインやウィジェットに頼っていましたが 6.7 系では、Word Press のコアプログラムに組み込まれるなど、Drupal的な Core プログラムの設定を用意し設定の自由度が高くなっています。

技術やトレンドの収束

Drupal CMS や Word Press 6.7 の進化はそれぞれ別の発想で進化してきたものが、ここに来て同じ方向に向いて来ているような印象を受けています。Web サイトだけでなくSNSや動画配信など情報告知の手段が多様化してきた中で、 Web サイトの役割の本質が見えて来たのではないでしょうか。この本質を開発者の方が感じ取ることで技術面やトレンドが収束しているんではないかと感じています。

Drupalの記事

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

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

最初の記事から購読

最新の記事

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

Life Styleの記事

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

2025/04/04(金) - 12:00

Hooked-on Drupal.

For non-Japanese speakers

Civic Theme 1.10.0

Mac Bookでの確認

DDEVでの確認

Civic Theme 1.10.0へのアップデート

Civic Theme 1.10.0へのアップデート

アップデートの完了

Drupal CMSへの対応

技術やトレンドの収束