この記事では、a-blog cms Training Camp 2021 Autumn のカスタマイズ講座「Ver.2.12のテーマのビルド環境ご紹介」について、補足事項や使用方法についてご紹介します。
各テーマにビルド環境入りました！
Ver. 2.11 までは、developテーマだけに、ビルド環境をいれていましたが、全てのテーマでビルドできるような環境を整えました。
ぜひ、いままでビルド環境を使ったことがなかった方や、自分で用意していたかたは、お試しください。
- beginner
- blog
- site
- utsuwa
- develop
LibSass から Dart Sass へ変更されました。
scssのビルドが、LibSass(node-sass)からDart Sassへ変更されました。scssの記述方法が変わっていますので、ご注意ください。
LibSassは廃止予定なので、この機にぜひDart Sassをお試しください。
初期設定
node が必要なので、nodeが入っていない場合はインストールします。
https://nodejs.org/ja/
おすすめは、nodenvという、nodeのバージョン管理ができるツールになります。
https://github.com/nodenv/nodenv
themes/各テーマ/ に移動して、下記のコマンドを実行します。実行することでビルドに必要なツールなどがインストールされます。
$ npm install
package.json を編集
もし、LiveReload を行う場合（npm run start）は、package.json の config.theme を変更してください。
実行しているローカル環境のアドレスに合わせて config.local に ドメイン を設定し、ご利用のテーマ名（ディレクトリ名）を config.theme に設定ます。
"config": {
"local": "localhost",
"theme": "テーマ名"
},
ビルド方法
本番用ビルド
cssのbuildとjsのbuildを行います。 納品時にはこのコマンドを実行して納品してください。 JavaScriptが productionビルド となります。
$ npm run build
開発用ビルド
以下のコマンドを実行すると、cssとjsの変更をwatchしてビルドを行います。余分なコードが入ったり、最適化されないため納品時には必ず npm run build しましょう。
Watchのみ
$ npm run dev
LiveReloadを行う場合
$ npm run start
CSSの読み込み方について
配信では、以下3つのCSSの読み込み方法をご紹介しました。ここでは、おすすめの全CSSをインライン化する方法について具体的にご紹介します。
- 通常の読み込み
- ファーストビューのCSSをインライン化
- 全CSSをインライン化
全CSSをインライン化
全CSSをインライン化するメリットは、パフォーマンス的にもHTMLに含まれているので、別で取得する必要がなくパフォーマンスが向上します。またレイアウトスラッシングも起きないのでユーザー体験も損ないません。デメリットはファーストビューのみCSSをインライン化する方法に比べれば若干パフォーマンスが落ちることです。気にするほどのものではないと思います。それよりも、レイアウトスラッシングのほうをが気になるので、この方法をお勧めいたします。
全CSSをインライン化する方法
ビルドされたCSSを手動で、テンプレートに貼り付ける方法でも実現できますが、スタイルの変更があるたびに貼り付けるのはめんどくさいです。そこで自動でテンプレートに挿入されるようにカスタマイズします。
CMSの処理が終わった後の、Hook（afterBuild）を利用して、ここでインラインCSSを挿入するようにします。
フックの有効化
config.server.php の HOOK_ENABLE を 1 に設定します。
define('HOOK_ENABLE', 1);
フックの実装
extension/acms/Hook.php をカスタマイズします。
管理画面や編集画面以外で、ビルドしたCSSを読み込むようにします。xxxxxx には、テーマのディレクトリ名を入れてください。
public function afterBuild(&$res)
{
if (ADMIN == 'entry-edit' || substr(ADMIN, 0, 9) === 'entry-add' || !ADMIN) {
$inlineCss = \Storage::get(SCRIPT_DIR . 'themes/xxxxx/dest/bundle.css');
$css = '<style>' . $inlineCss . '</style>';
$res = preg_replace('@(?=<\s*/\s*head[^\w]*>)@i', $css, $res);
}
}
テンプレートの編集
デフォルトのテーマのCSS読み込みを修正します。各テーマによって読み込み方が若干ちがいますが、include/head/link.html では、bundle.cssを読み込まないようにして、include/head/preload.html がある場合は、preload.html 内はすべて削除します。
組み込みJSについて
a-blog cms には組み込みJSが用意されていますが、汎用的にさまざまなことに対応しているため、便利ですがパフォーマンス的には、あまりよくありません。ただ組み込みJSを読み込まないとよく使うようなJavaScriptも自分ですべて実装しないといけないので、あまり実現的ではありませんでした。
そこで、Ver. 2.12 ではよく使う組み込みJSと同じ機能を、各テーマのバンドル環境に用意しました。これで組み込みJSを使わず、パフォーマンスを意識した開発ができるようになりました。
組み込みJSを使わないJSの読み込み
include/head/js.html を以下のように修正します。これにより、投稿者以上でログインしている場合だけ、組み込みJSを読み込み
ログアウトしている場合などは、組み込みJSを読み込まないようになります。
<!-- 投稿者以上以上の場合だけ組み込みJSを読み込むようにする -->
<!-- BEGIN_MODULE Touch_SessionWithContribution -->
<script src="%{JS_LIB_JQUERY_DIR}jquery-%{JS_LIB_JQUERY_DIR_VERSION}.min.js" charset="UTF-8"></script><!-- BEGIN_MODULE Js -->
<script src="/acms.js{arguments}" charset="UTF-8" id="acms-js"></script><!-- END_MODULE Js -->
<!-- END_MODULE Touch_SessionWithContribution -->
<script src="/dest/vendor.js" async></script>
<script src="/dest/bundle.js" async></script>
バンドル環境での組み込みJSの読み込み方
src/js/index.js ファイルで、組み込みJSと同じような機能をもつ処理を実装できます。
まず、import で、使用するJavaScriptを読み込みます。不要なJavaScriptはコメントアウトください。
import {
validator,
linkMatchLocation,
externalLinks,
scrollTo,
...
} from './lib/build-in';
次に、読み込んんだJavaScriptを実行します。使用しないJavaScriptは読み込みと同様コメントアウトください。
また、if (window.ACMS === undefined) で囲まれている理由としては、組み込みJSを読み込んでない場合だけ、
動作するようにするためになります。
if (window.ACMS === undefined) {
window.dispatch = (context) => {
validator(context);
linkMatchLocation(context);
externalLinks(context);
scrollTo(context);
...
};
window.dispatch(document);
}
最後に
以上になります。
ビルド環境を使用することにより、よりよいパフォーマンス、保守性の向上、よりよい開発体験をすることができます。ぜひお試しください。
