Civic Theme Sub Theme

XserverビジネススタンダードのNode.jsの制限で使用を諦めていたCivic Themeのサブテーマが使用出来そうなので試してみます。これまでサブテーマの使用不可の判断をしたのは以下の理由になります。

1. Civic Themeのサブテーマの使用には、Node.js 18.1.4以上が必要である。
2. 公開しているCivic ThemeをホスティングしているXserverビジネススタンダードで使用出来るNode.jsのバージョンはNode.js 17x以下である。
3. 公開しているサーバーで、サブテーマのインストールは、Node.jsのバージョンから使用不可である。

参考記事 #D11 公開準備その2
XserverビジネススタンダードにCivic Themeのサブテーマのインストールを試みましたがNode.jsのバージョンの制限で諦めた経緯を記事にしています。

参考記事 #D03 Civic Theme SubThene
Mac BookにインストールしたCivic Themeにサブテーマを使用するために必要なインストール方法を記事にしています。

サブテーマを使用するのに何故Node.jsが必要かを考えてみます。

1. サブテーマに適用されるCSSがSCSSとなっておりコンパイルにNode.js 18.1.4以上が必要
2. Story Bookを使用するのにNode.js 18.1.4以上が必要

現在ホスティングしているXserverビジネススタンダードで、Civic Themeのサブテーマをインストールするとサブテーマのインストールは可能ですが、CSSやJSが適用されません。このことで素のHTMLでコンテンツが表示されます。

この原因が、サブテーマをインストールする際にnpm run buildを行い、SCSSのコンパイルを行うのですがこのコンパイルがNode.js 18.1.4以下では行われない為にサブテーマをインストールしてもCivic Themeが用意するCSSやJavaScriptがビルドされず素のHTMLでコンテンツが表示されてしまいます。

当然Story Bookも使用出来ません。Node.jsの制限でサブテーマが使用出来ない理由がSCSSのコンパイルが出来ない事とStory Bookが使用出来ない2点になります。

ビルド済みファイルで対応

サブテーマを使用するために以下の2点について考えてみます。

1. SCSSのコンパイルはローカル環境で行い、ビルドしたファイルのアップロードで対応出来るのではないか？
2. Story Bookは公開するものではないので、サーバーにインストールする必要はないのではないか？

私自身が、Node.jsやSCSS、Story Bookについて詳しくないので、サーバー側にNode.jsが必要かを調べてみます。様々な考え方や用途がありますが、Drupalのデザイン面で使用するSCSSのコンパイルが目的であれば必ずしもNode.jsをサーバー側にインストールする必要はなく、ローカル環境でNode.jsを使いコンパイルしたビルド済みのファイルをサーバー側に設置するという方法は一般的にも良く使われている方法であるという事がわかります。

Story Bookは基本的にローカル環境での使用が前提であるのでStory Bookを動かすためにサーバー側にわざわざNode.jsをインストールする必要もありません。

MacBookにインストールしているCivic Themeは、Xserverで公開している環境とほぼ同様になっています。違いはMacBookにインストールしているNode.jsのバージョンが22xとなっていますのでMacBookのCivic Themeはサブテーマを使用しています。SCSSのコンパイルなどは問題なく行われておりコンテンツもCivic Themeが用意するデザインで表示されています。

ローカル環境のCivic ThemeのサブテーマでビルドしたものをXserveサーバーにアップロードすることで対応可能なので、ビルドされたファイルを確認します。

Civic Themeのサブテーマ用にビルドされたCSSやJavascriptなどのファイルはdistフォルダにまとめられています。このdistフォルダをXserverにインストールしたCivic Themeのサブテーマのディレクトリにアップロードすることで、CSSやJavascriptで整形されていない素のHTMLのサブテーマのデザインがCSSやJavascriptで整形されたCivic Themeが用意するデザインになります。

ビルドされたファイルは以下の形でdistフォルダにまとめられています。

|-dist //フォルダ
|  |-assets //フォルダ
|  |  |-.DS_Store //MacOSの隠しファイル　アップロード不要
|  |  |-backgrounds //サンプルバックグラウンド画像
|  |  |-favicon.ico //Civic Themeのファビコン
|  |  |-fonts //robotoなどのフォント
|  |  |-icons //iconのフォルダ
|  |  |-logos //Civic Themeのロゴ
|  |
|  |-styles.css //基本のスタイルシート
|  |-styles.variables.css //カスタムスタイルシート
|  |-scripts.js //基本のjsファイル
|  |-styles.editor.css //Civic Theme独自パラグラフなどで使用する管理画面のスタイル

distフォルダをXserverのサブテーマフォルダにアップロードする事で、サブテーマのデザインがCivic Themeのデザインで表示されるようになります。

サブテーマのインストール

サブテーマは過去に一度インストールしましたが、表示に問題がありアンインストールしてしまったので再度インストールします。Civic Themeのチュートリアルに従い、メインテーマのフォルダからインストールを行い、サブテーマのインストールが完了したらサブテーマのフォルダに移動し残りのインストールを行います。

1.Civic Themeのフォルダに移動します。
$ cd web/themes/contrib/civictheme

2.サブテーマのインストールをします。
$ php civictheme_create_subtheme.php civictheme_demo "CivicTheme Demo" "Demo sub-theme for a CivicTheme theme." ../../custom/civictheme_demo

3.キャッシュのクリア
$ drush cr

4.サブテーマのフォルダに移動します。
$ ../../custom/civictheme_demo

5.コンパイルをします。（実際には動きません。）
$ npm run build

6.サブテーマのインストール(有効化) / 管理画面からでも行えます。
$ drush theme:enable civictheme_demo -y

7.サブテーマのデフォルト設定 / 管理画面からでも行えます。
$ drush config-set system.theme default civictheme_demo

以上でサブテーマのインストールは完了し、サブテーマが表示されますが、CSSやJavaScriptがビルドされずdistフォルダは生成されていない為、CSSで整形されていない素のHTMLでページが表示されます。

distフォルダのアップロード

インストールしたサブテーマにMacのCivic Themeのサブテーマにビルドされているdistフォルダをアップロードします。

アップロード先 > project/web/themes/custom/civictheme_demo

アップロードは、SCPコマンドか、sFTPで行います。Xserverが用意するFTPsでも良いのですがセキュリティを考慮するとsFTPが望ましいです。

FTPクライアントはMacならFilezillaやCyberDack、WindowsならWinScpやFFFTPなど色々ありますので、環境に応じてお好みのものを使用ください。

私は、FTPクライアントにTrancemitを使用しています。TrancemitはsFTPにも対応しています。

sFTPでアップロード

distフォルダのアップロードはTransmitを使いMacのGUI上でドラッグアンドドロップするだけで簡単にアップロード出来ます。XserverのsFTPでの接続は、SSHで取得した認証キーとアカウントを使用して接続します。

Transmitの設定

1. サーバーリスト > +をクリックすると新しいサーバーが登録出来ます。
2. サーバーの登録名を入力します。Xserver sFTPなどわかりやすい名前で登録
3. プロトコルSFTPを選択
4. サーバー xb123456.xbiz.jp ６桁のID
5. ポート 22
6. ユーザー名 xb123456 ６桁のID
7. パスワード/キー 鍵マークをクリックするとキーに変わります。SSHを使用する為に発行した認証キーを選択します。
   Transmitに認証キーを登録しておくと選択出来ます。 設定 > 認証鍵で登録出来ます。

以上でサーバー登録が完了しますので、Xserverを登録したらアイコンをクリックするだけでsFTPでXserverに接続出来ます。

XserverにsFTPで接続しDrupalをインストールしたフォルダに移動します。サブテーマのフォルダに移動しこのフォルダにMacのCivic Themeのサブフォルダからdistフォルダをドラッグ&ドロップする事でアップロード出来ます。

project/web/themes/custom/civictheme_demo

アップロードが完了したら、管理画面でキャッシュをクリアし、ページを確認すると、素のHTMLで表示されていたページが、ビルド済みのCSSとJavascriptで整形されCivic Themeの用意するページで表示されます。

これでサブテーマの使用が可能になります。

まとめ

今回の記事をまとめます

1. XserverビジネススタンダードはNode.js 17xまでしか使用出来ない
2. Civic Themeのサブテーマを使用する為にはNode.js 18.14以上が必要
3. Civic ThemeのNode.jsはSCSSのコンパイルをしている。
4. MacにインストールしているCivic ThemeはNode.jsでSCSSのコンパイルを完了しており、SCSSやJavascriptがビルドされている。
5. ビルドされたファイルはdistフォルダにまとめられている。
6. Xserverにサブテーマをインストールすると、CSSやJavascriptのビルドが出来ないので、Civic Themeのデザインでの表示が出来ない。
7. XserverにMacでビルトしたdistフォルダをアップロード
8. ビルド済みのフォルダをアップロードする事で、サブテーマの表示がCivic Themeが用意するデザインに整形される。
9. 以上でXserverビジネススタンダードにインストールしたCivic Themeのサブテーマが使用可能になります。

Civic Themeのチュートリアルを額面通り受け、サーバーの仕様でサブテーマの使用を諦めていたのですが、頭を切り替える事で、使用可能になる良い経験になりました。

今回、Xserverでサブテーマを使用してみようと考えるきっかけが、MacBookにインストールしているDrupalとCivic Themeに久しぶりに触れ、アップデートやエラーの対処をした際に、サブテーマのファイル構成に触れる機会があり、ビルドファイルであるdistのフォルダがMacには存在し、Xserverに存在していなかったことから思いついた出来事になります。