#C26 Civic Theme

前回、MacBookの環境整備を行なった記事にて触れましたが、私のMacBookにはBootstrap5のテーマとCivic Themeのテーマがインストールされています。今回はCivic Themeについてまとめてみます。

今回は、Drupalのテーマの中でもDrupalの特徴やイメージを理解しやすい非常に優れたテーマであるCivicThemeについての記事になります。テーマの用途が大学などの教育機関や政府機関、公共性の高い企業での利用を目的として開発されたテーマであり、実際にオーストラリアの政府機関や教育機関、NASAのWEBサイトで使用されています。

Civic Themeはオーストラリアのサルサデジタル社が開発を行い配布されています。コンセプトは公共性、社会性を重視したテーマである事とITのリテラシーを持たない方でもWEBサイトの運営ができるよう配慮されています。

サルサデジタル社はオーストラリアの政府機関と協力し政府機関での使用を前提するGovCMSと呼ばれるテーマも開発しており配布されています。GovCMSは政府や公共機関での使用が前提となっていますので一般の企業が利用する事は出来ません。GovCMSもCivic Themeと開発思想やデザインコンセプトは共通しています。

少しお堅い話になっていますが、規模の大きな団体が、大量の情報を扱い、情報整理を的確に行い、目的とするターゲットに対して正確に情報を告知する機能を重点的に開発されており、そのことで、サイト上に配置したコンテンツから閲覧者が欲しい情報を得やすくなっています。

本来私のような個人のブログで使用するようなテーマではないのですが、個人がブログを作成し公開しても情報整理がしやすく管理者にとっても閲覧者にとっても非常に見やすいWebサイトを構築する事が容易なテーマとなっています。

Civic ThemeはDrupalを初めて使用した際に選択したテーマであるので非常に愛着があります。Civic Themeはサイト構築の理解がしやすい優れたインターフェースになっています。用意されたテンプレートを触る事でDrupalの各機能や設定を自然な形で習得する事が出来ますので初期設定などを理解出来ずに挫折することなくサイトの構築が進みます。

コンテンツタイプやビュー、ブロックレイアウトもDrupalの機能設定を意識する事なくテンプレートで用意されているものを使用する事でサイト構築が進みます。契約しているインフラがXserverビジネススタンダードですのでXserverビジネススタンダードにDrupalのインストールを行い、Civic Themeをインストールして公開しています。

Xserverビジネススタンダードは共用サーバーであるので、機能的な制約はありますが、PHPは8.3.x、DBはMaria DB 10.5xで稼働しています。Drupal Core 10.3xの稼働条件は満たしていますのでDrupal Core 10.3xは問題なく動いており、Civic Themeの最新版である1.9x系も問題なく稼働しています。

Civic Themeもサブテーマでの運用を推奨しており、サブテーマでサイト構築をする際、SCSSのコンパイルにNode.jsの18.1.4以上が必要になります。Xserverビジネススタンダードが、Node.jsの17xまでの対応となっていたため、公開以降しばらくサブテーマの使用は行わずメインテーマでの運用を続けていました。

サブテーマを使用しない仮運営の状況なのでNode.js 18.1.4以降が動くVPSサービスへの移転を検討していたのですが、MacBookにインストールしているCivic Themeが推奨であるサブテーマを使用しているので、MacBookにビルドされたCSSファイルをXserverにアップロードする形でNode.jsが動かなくてもサブテーマの使用が可能となり現在Xserverビジネススタンダードで運営をしています。

以下がCivic Themeで構築したWebサイトになります。

1. Civic Themeの特徴に記事が非常に読みやすい事があります。フォントの選択やサイズ、字間、見出し要素やアクセントなどデフォルトで用意されるパーツが、厳選され、検証されているので、CSSのカスタマイズなど考える必要もありません。
2. Civic Themeの特徴に、ITのリテラシーを持たない人でもWebサイトを構築し、運営を行えるように構成されています。管理画面はDrupalの基本構成ですがDrupalの初期設定や基本設定を済ませたテンプレートが用意されておりDrupalの設定を意識せずにサイト構築が行えるように最適化されています。

1. パラグラフのモジュールを有効活用することで、デコレーションしたコンポーネンツが複数用意されています。この用意されたコンポーネンツにビューの要素を持たせており、コンテンツタイプに自由にビューの要素を持たせる事が出来ます。
2. この事から、ビューの設定を考える事なく、コンテンツタイプで記事やページを作成するのと同様にコンテンツにリスト化された記事を自由にレイアウトする事が出来ます。
3. Civic Themeのコンセプトに合うモジュールが最初にパッケージ化されていますので、テーマをインストール以降モジュールの追加も最低限で済みます。このことでモジュール管理がしやすいです。
4. 検索機能にSerch APIのモジュールを使用しています。Drupal Coreのデフォルトで用意される検索機能を拡張したモジュールでビュー機能が使用出来ますので検索機能のデザインやカテゴリー分けなど柔軟に行えます。
5. WebフォームにWebformのモジュールを使用しています。Drupal Coreのデフォルトで用意されるコンタクトフォームより機能が多彩でデザイン面や、HTMLメールなど様々な機能を利用出来ます。
6. コンテンツタイプのデフォルトにPage、イベント、エマジェンシーが用意されています。主にPageのコンテンツタイプを使用しますがデコレーションされたコンポーネンツを使用することで、Pageのコンテンツタイプでほとんどのページを作成する事が出来ます。タクソノミーの設定もタグとサイトセレクションのボキャブラリーが用意されているので、タクソノミーのボキャブラリーの初期設定も意識せず記事やページを仕分けする事が出来ます。
7. レスポンシブ対応したナビゲーションメニューが用意されていますので、名称とリンクを設定するだけでナビゲーションメニューが構築できます。同様にフッターメニューも用意されています。
8. ブロックレイアウトは、ヘッダー4段、フルワイドのバナー要素とハイライト要素が各1段、サイドバーが左右各2段、フッターが3段がデフォルトで用意されています。フルで使用しても必要に応じて使用するブロックを選定しても利用可能なので、小規模なサイトから大規模なサイトまで対応可能なレイアウトになっています。
9. デザインの一貫性が徹底されており、記事内のフォントや見出しから、各コンポーネンツ、メニューに至るまで、Civic Themeのコンセプトでデザインされていますので、完成したWebサイトは一貫したデザインとなります。
10. サイトの配色の自由度が高く、テーマの設定画面でサイトカラーをセクション毎に自由に設定出来ます。基本コンセプトがLightとDarkという背景色と文字の組み合わせを明暗で分けており、白、ライトグレーベースのLightとダークブルー（オーストラリア国旗の色）を基準にしたDarkの配色で構成されたテンプレートが用意されています。

Drupalを初めて使用する際に選んだテーマがこのCivic Themeです。Civic ThemeはDrupalの機能面や設定を意識することなくサイトの構築ができるので、サイト構築を進める事で自然とDrupalの機能を使用しています。Drupalに慣れてきたら必要に応じて設定を確認し、設定に触れることで、Drupalの設定を理解する事が出来ます。

私が、Drupalを使用し挫折する事なくサイトを構築する事が出来たのは、誰でもWebサイトを構築し運営できる事を目的としているCivic Themeのコンセプトによる事が大きく、テーマのインストールを行い、テンプレートを使用することでDrupalの初期設定を意識する事なくサイトの完成系が見えてきます。完成系がイメージ出来る事で実際にサイト構築を進めながら自然とDrupalの基本的な利用方法を覚えていきます。

Civic Themeを使用し、実際にDrupalを利用する事で、サイトの具体的なイメージが出来上がります。当初デフォルトのまま構築したサイトから実際に公開していくためのイメージが膨らみ、イメージを実現するためにビューの設定やコンテンツタイプの意味、タクソノミーの使い方や応用といった事を理解しながらサイト構築が進んでいきます。

このような理由から、初めてDrupalに触れる方におすすめのテーマでありますが、インストールやアップデートに関して幾つかの問題があり、初学者はインストールやアップデートで挫折するかもしれません。

1. レイアウトビルダーの問題を解決するためにパッチを当てる必要がある事
2. Civic Themeで使用しているモジュールの一部にStable(安定版)ではなくdev(開発版)のモジュールの機能を使用しているものがありDrupalのComposer.jsonの記述を一部変更する必要がある事
3. 高機能のモジュールを多数カスタマイズしているので、モジュールのアップデートやテーマのアップデートで依存関係からエラーを出してしまう事がある事

Civic Themeは公共性を意識して開発されている一貫したサイトデザインや構築と運営の容易さからDrupalの初学者の利用に適していますがインストールやアップデートに関わる問題点にターミナルの基本操作やPHPやDBの基本を理解する必要があります。ゼロからプログラムを書いていく知識までは必要ありませんがファイル操作やphpコマンドからの操作は必要になります。

1. XserverのPHPのバージョン切り替えはXserverの管理コンソールで行えますが、パスやシンボリックリンクが設定されていないのでPHPのバージョンを確認し、パスやシンボリックリンクの設定を行う必要があります。
2. 例えばCivic ThemeをXserverにインストールした際、Mbstringのエラーが出たのですが、このエラーを解決する為にはphp.iniの記述をmbstring.encoding_translation = Offからmbstring.encoding_translation = 0 に変更する必要があります。
3. XserverにはデフォルトでComposerがインストールされていません。Composerのインストールにphpコマンドを使います。
4. Drupalでパッチの適用はcomposer-patchのプラグインを使用しますが、Composerのプラグインのインストール方法と実際のパッチの当て方の理解がないとCivic Themeのレイアウトビルダーの修正パッチが当たらず、テーマのインストールが出来ません。
5. composer.jsonの理解と記述が理解出来ないとdev版として配布されている必要なモジュールのインストールが行えずCivic Themeのインストールが出来ません。

Civic Themeを使用する為には、インストールの段階で環境に合わせたターミナルの操作やphpコマンドの操作、DrupalのチュートリアルにはないComposerの操作が必要になります。

DrupalやCivic Themeをチュートリアルに沿ってGUI上で使えるCMSという考えでなく、PHPとDBを使用したシステムであるという事を理解し学習する意識がないとインストールもままならない点がCivic Themeの問題点となります。

インストールが完了すると、他のテーマより容易にWebサイトの構築が進みますが、使用モジュールにレイアウトビルダーのdev版を使用しておりパラグラフのモジュールとの相性から、アップデートで不具合を出してしまうケースもあり、エラーの解決は自力で行う必要があります。

私自身が新しいもの好きなので、アップデートの通知が来ると即アップデートを行うのですが、エラーで何度か痛い目を見ていることも事実です。ただ、壊滅的なエラーではなくレイアウトやレンダリングに関わる表示上の簡易なエラーが多いのでモジュールの削除と再インストールやComposerの再構築などで対応しています。

Civic Themeは優れたテーマであり、管理画面に用意されるテンプレートからWebサイトを構築するのは初学者にも理解しやすく、初学者でも高いクォリティのWebサイトが構築出来ます。

その反面、複数のモジュールを効果的に使用する事で、構築の容易さを実現している事からモジュール間の依存関係でエラーが発生しやすい事があり、インストールの敷居の高さや、アップデート時のエラーへの対処として、ターミナルの基本操作の理解や、phpの理解、Drupalのチュートリアルにはないcomposerの使用方法、エラー情報の収集にDrupal.orgで公開されている情報の理解が必要であります。

Drupalをお試しではなく実際に使用するという目的を持ち、エラーなどへの対処を行う学習意識をお持ちの方にお勧めする優れたテーマであります。PHPやDBは問題なく使えるエンジニアの方でデザイン面が苦手という方にもお勧めのテーマです。

本来、公共機関や教育機関が使用することを前提に開発されており、インストールやアップデートを専門家に任せて、Webサイトの運営を依頼した団体が行う事が前提のテーマなので私のような個人が利用する為のテーマではありませんが優れたデザインと情報整理と告知に長けているテーマでありDrupalの特徴やユースケースを体現出来る事と学習素材としても優れています。

私は最初に使用したテーマでありDrupalの理解を進めてくれたテーマでもあるので愛着も強くCivic Themeのコンセプトにも共感できる点が多数あります。当サイトはBootstrap5のテーマで構築していますが、Civic Themeが採用するパラグラフやSerch APIの使用など参考になる要素も多数あるので今後も使い続けていくテーマであります。

前回、Macbookのローカル環境を見直しアップデートを行なったのですが、MacBookにインストールしているCivic Themeのアップデートを行い、幾つかのエラーが発生したので対応しました。

その際にファイル構成を再確認したことで、XserverのNode.jsの制限により稼働を諦めていたサブテーマをMacBookのローカルにインストールしたサブテーマに構築されたSCSSのビルドファイルを使用することで解決しました。

サイト公開後サブテーマの使用を前提としていたので仮運営のまま記事の更新をしていなかったのですが、サブテーマでの運営が可能となったのでサイトの運営を再開しましたので今回記事にしています。