Ver. 2.12 の ビルド環境ご紹介

この記事は公開日より2年以上経過しているため、現在の内容と異なる可能性があります。

この記事では、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);
}

最後に

以上になります。 ビルド環境を使用することにより、よりよいパフォーマンス、保守性の向上、よりよい開発体験をすることができます。ぜひお試しください。

同じタグ付けがされている記事