a-blog cms をインストールすると themes フォルダに公式テーマが含まれています。公式テーマをベースにカスタマイズをすることで動作の安定した様々なサイトを少ない工数で制作することが可能です。また、初心者の方は公式テーマを使用することで a-blog cms の機能やテーマの構成を自然に学ぶことができます。

それでは早速、それぞれの公式テーマの特徴をご紹介します。

Beginner

その名の通り初心者向けでありながら、そのシンプルさ、カスタマイズの容易さから多くの上級者にも愛用されているテーマです。HTML、CSS を習得したばかりといった Web の初学者でもカスタマイズしやすくなっています。

• トップページ、インデックス、エントリーともに2カラムをベースにしています。
• お問い合わせフォームのテンプレートがあり、特別な準備なしにフォームを使用できます。
• 物件情報カテゴリーのエントリーには多くのカスタムフィールドが使われています。カスタムフィールドのカスタマイズの参考としてご使用ください。
• Webpack の開発環境は含まれていません。
• テンプレートの継承機能を使っていないため、テンプレートファイルの構成が理解しやすくなっています。テンプレートの継承機能を使いたい場合には、子テーマの extend@beginner をご使用ください。

Beginner テーマを適用したサンプル Figma ファイル

Site

• コンフィグセット
• 動的フォーム
• ルール
• エイリアス
• モジュールユニット

といった a-blog cms の多彩な機能のほとんどを含んだテーマです。Siteテーマを理解することによって a-blog cms に習熟することができます。Siteテーマをベースにカスタマイズし、不要な機能やテンプレートを削除するといった使い方はもちろん、自作のテーマや他の公式テーマに Siteテーマから必要な機能を取り込んで使用することも可能です。

また、Siteテーマには子テーマとして sp@site、lp@site が用意されています。インストール時点にはルールとしてユーザーエージェントがスマートフォンの場合 sp@site が設定されており、「トピックパス」「続きを読む」「ページャー」に PC とは異なるテンプレートが適用されています。lp@site はランディングページを制作することに特化したテーマです。

Site テーマを適用したサンプル lp@siteを適用したサンプル デザインファイル テーマ解説（準備中）

UTSUWA

画像や動画を大きめにフィーチャーし、余白や文字サイズなどデザイン品質にこだわった現代的、実用的なテーマです。

• 企業サイトとしてすぐに使えるカテゴリー構成を備えています。
• 豊富なユニットで多彩なコンテンツを調和のとれたレイアウトで追加していくことが可能です。
• お問い合わせ前の文章と完了ページの文言はエントリーで作成しているので、ブラウザから変更可能です。

UTSUWA テーマを適用したサンプル β版配布時のブログ記事 デザインファイル テーマ解説

Member

Ver. 3.1 から追加された、会員制サイトを制作するための実装が事前にされている機能的かつ、モダンなテーマです。

• マイページからの会員情報の変更や退会など、会員制のメディアサイトとしてすぐに使える機能を備えています。
• メールリンクやSNSログインといった認証方法が設定を切り替えるだけで利用できます。
• 豊富なユニットで、見ているだけでも楽しく続きをどんどん読んでしまうようなコンテンツを追加していくことが可能です。

Member テーマを適用したサンプル Figma ファイル テーマ解説

Blog

時系列順のエントリー表示を前提にしたブログやニュースサイト向きのシンプルで機能的なテーマです。

• トップページ、インデックスページは2カラム、エントリーページは1カラムをベースにしています。
• サブカラムにはさまざまなインデックスや検索フォームが用意され、各エントリーページへ遷移しやすくなっています。またプロフィールやバナーを簡単に登録できるモジュールも用意されています。
• エントリーページではエントリー作成者のプロフィール、ハッシュタグからの関連エントリーが表示されます。
• お問い合わせ機能はデフォルトでは用意されていません。

Blog テーマを適用したサンプルサイト Figma ファイル

Develop

自作テーマのためのフロントエンドビルド環境と最小限の基本的なテンプレートファイルを含んだテーマです。メンテナンス性が高く、パフォーマンスに優れるサイトを制作するベースになります。Webpack の知識が必要になりますが、解説やハンズオンを参考にしながらサイトを制作することで Webpack を習得することも可能なテーマです。

テーマ解説 ハンズオン

公式テーマとデモデータについて

インストール時に公式テーマを選択した場合にはそのテーマにあったコンフィグ、モジュールID、エントリーなどのデモデータが予め設定されています。途中で適用する公式テーマを変更した場合には、下記の手順に沿ってこれらのデータをテーマにあったものに変更することができます。

1. メンテナンスメニュー /setup_xxxxxx/index.php にアクセスする
2. ブログ毎のインポート > 「インポート実行画面へ」 をクリックする
3. インポート先、ブログデータ名、コンフィグ関連のインポート設定を選択して「インポートを実行する」をクリックする

3. の手順ですべてにチェックを入れるとすべてのデータが破棄されてインストール時のデモデータになるのでご注意ください。

UTSUWA は写真やコンテンツを入力すればそのまま企業サイトとして成り立つ構成を備えた、実用的でモダンなテーマです。また、CSS変数でカラーを変更するだけで手軽にサイト全体の雰囲気を変えることができます。こうした特長から、Web の初学者の方、a-blog cms の初心者の方にとっても即戦力となるテーマなので、ぜひ広く使っていただきたいと考えています。このエントリーでは、そういった初学者、初級者の方を対象としながら、中級者、上級者の方にもご紹介したい UTSUWA テーマの豊富なユニット類についても解説していきます。

UTSUWAテーマサンプル を確認しながら読み進めてください。

CSS 変数で色を変更する

/include/head/css-variables.css で CSS 変数を変更することによって簡単にサイト全体のカラーリングを変更することができます。

主な変数

• 同じ色を使いたい場合 CSS ファイル内では var(--color-primary)のように指定できます。
• Sass では、/src/scss/global/_variables.scss で CSS 変数をいったん Sass の変数に渡しています。

カラー変更のコツ

• 初期設定の色と明度があまり変わらない色を指定するとコントラストを維持できます。
• --color-white、--color-black、--color-grayxx といった無彩色の指定をニュアンスを持った色に変更するのもお勧めです。

テンプレートが分かりやすく、コンテンツの編集も簡単

UTSUWA は全体的にワンカラムのレイアウトで、すべて /_layouts/base.html を ベースにしているのでテンプレートもシンプルで分かりやすくなっています。

たとえば /_top.html でも、パーツ毎に @include 文とコメントがあるので、不要なパーツをコメントアウトしたり、順番を入れ替えたりするのも簡単です。トップページのそれぞれのパーツのコンテンツは表示画面側からも編集、設定しやすくなっています。

エントリーコードが空のエントリーではエントリータイトルが表示されない

デモデータの企業情報、お問い合わせ、採用情報カテゴリーのようにエントリーコード（ファイル名）が空のエントリーではエントリータイトルが表示されなくなっています。カテゴリートップをエントリー扱いにする場合にはカテゴリー名とエントリータイトルを揃えておくと管理画面においても分かりやすくなります。

エントリーサマリーのスタイルの種類

UTSUWAではエントリーサマリーにさまざまなスタイルがあります。すべてのエントリーサマリーでhover時にサムネイルが拡大されます。

事業紹介（/include/module/template/Entry_Summary/thumbnail.html)

事業紹介（service）カテゴリーインデックスのエントリーサマリーはサムネイルを大きくとったスタイルです。このスタイルはモジュールユニットにおいても thumbnail.html を選択すればそのまま使用できます。

お知らせ（/include/entry/summary.html）

画像がないエントリーも多いことが想定されるお知らせ（news）カテゴリーのインデックスでは、サムネイルがあってもなくても美しくレイアウトされるように工夫されています。CSS Grid が使用されています。

スタッフブログ（/include/entry/summary-blog.html）

スタッフブログ（blog）カテゴリーのインデックスはオーソドックスなカードスタイルでPC時4カラムです。

お問い合わせ

お問い合わせ（contact）カテゴリーには「お問い合わせ」「お問い合わせ完了ページ」の2件のエントリーがあり、それぞれ赤枠で囲った箇所がエントリーのユニットとして編集可能です。

グローバルナビゲーションの内容を変更する

UTSUWAではスマートフォン用とPC用は別のナビゲーションモジュールになっています。公式テーマでは唯一、スマートフォンでの階層ナビゲーションの開閉に対応しており、特にスマートフォンでの操作性に優れています。

また、テンプレートファイル（ /include/global/header.html と /include/global/sp-header-nav.html）で確認できるとおり、属性と子要素属性（{attr}）はそれぞれclass属性の中に入っているので、モジュールIDの表示設定画面では値だけを書く点が Siteテーマ、Beginnerテーマとは異なっています。

nav_global_sp（スマホ用：グローバルナビゲーション）

スマートフォンのグローバルナビゲーション用のモジュールIDの「詳細設定を全て開く」をクリックして、設定を確認してみましょう。「企業情報」のようにサブメニューを持つ第1階層のアイテムは、URLに半角スラッシュ 、属性に is-expand、子要素属性に js-viewing-indelible が設定されていることが分かります。一方、「事業紹介」のようにサブメニューを持たない第1階層のアイテムは、URLに直接遷移先を設定してあるだけです。

フッター上CTAについて

CTA 関連のエリアが、どのように表示されているかを見ていきます。

グローバルな フッター上 CTA

/_layouts/base.html からインクルードされているグローバルな CTA のモジュールIDは MF_cta_visual_global（主要なCTA） です。サイト内のほとんどのエントリーテンプレート、インデックステンプレートでは footer-cta セクションを上書きしていないのでこの CTA がフッター上に表示されています。

トップページの CTA

トップページでは footer-cta セクションは上書きされ、テンプレートはグローバルなものと同じですがモジュールIDは MF_cta_visual_top で設定されています。グローバルな CTA より余白のサイズがゆったりめにとられ、吹き出しがない代わりにリード文や概要文、ボタンの文言がより詳細になっています。確認してみてください。

お問い合わせ、採用情報、事業紹介エントリーの CTA

お問い合わせ（contact）カテゴリーのエントリーテンプレートでは、footer-cta セクションは上書きによって空になっています。お問い合わせフォームでは実際の案件でもこのようにユーザーが入力に集中できるようになっていることが多いでしょう。

採用情報、事業紹介エントリーの CTA は上書きされて、グローバルな CTA ではなく、 /include/parts/cta.html をインクルードしてエントリーフィールドやカテゴリーフィールドを表示しています。

独自に書き換えられているテキストユニットについて

UTSUWA テーマでは、ユニットの表示側のテンプレートが /include/unit.html で独自に書き換えられています。ここでは特に使用頻度が高く、影響が大きいテキストユニットの書き換えについて解説します。

テキストユニットは全て

 <div class="entry-text-unit is-xx"></div>

で囲われます。

• div で囲うことによって不要な回り込みを防いでいます。
• .entry-text-unit クラス内の要素にスタイルを適用することによって、エントリー内のテキストユニット以外のカスタムユニットなどの要素にスタイルがあたってしまうことを防いでいます。
• .is-xx の部分には .is-p などテキストタグセレクトの内容が入り、 /src/scss/_entry.scss においてスタイルの調整に使用されています。

カスタムユニットの種類について

UTSUWA に用意されているカスタムユニットは次の 5種類です。

メッセージ

デモデータでの使用箇所は 採用情報トップ です。

余白

デモデータではユニットによる要素の掲載例の画像間に使われています。

罫線

デモデータではユニットによる要素の掲載例のリストの間に使われています。

価格表

デモデータではユニットによる要素の掲載例のエントリー末尾近くに使われています。

目次

デモデータではユニットによる要素の掲載例の冒頭に使われています。 目次ユニットは a-blog cms の組み込みJSのひとつで、エントリー内の見出し要素に自動でアンカーリンクを生成、表示します。

ユニットグループの種類

ユニットグループも豊富に用意されています。デモデータではたとえばユニットによる要素の掲載例の価格表には「背景色：グレイ（全幅）」が使われています。

まとめ

UTSUWA はそのままで企業サイトとして使える工夫が随所にあり、その分初心者にとっても使いやすく、中級者、上級者にとってはカスタマイズのベースとしたり、他のテーマを使うときにもカスタマイズのヒントが得たりすることができるテーマです。ぜひご活用ください。

Beginnerテーマ以外の公式テーマには、 webpack のビルド環境が用意されています。このエントリーでは、webpack に馴染みがない方を対象に、導入の手順を解説します。

導入する前にはとっつきにくい印象のある webpack ですが、いったん慣れてしまうと意外に簡単でとても便利です。特に a-blog cms の公式テーマに同梱されているビルド環境はすべて設定済みであとは「使うだけ」なので最初の一歩として最適です。

（このエントリーの末尾で webpack を使用しない場合の注意点 についても触れています。）

webpack 導入のメリット

• 文法チェックやプロパティ順の整理を自動でやってくれるのでコードが読みやすく、メンテナンスしやすくなる
• スタイルや機能のモジュール化をしやすいので他案件への転用が簡単になる
• 使用しているエディタやツールに依存しないのでチームでの開発環境を揃えることができる
• LiveReload ( npm run start )を使うとファイルを保存すればブラウザが自動でリロードされるので開発効率が上がる
• CSSは /dest/bundle.min.css、JavaScript は /dest/bundle.js にまとめられ、パフォーマンスが向上する
• 慣れてくると外部のライブラリを読み込んで利用することも簡単にできるようになる

webpack 導入の手順

node.js をまだインストールしていない場合は .node-version でバージョンを確認し、node.js をインストールする

2022年8月現在、UTSUWA同梱のビルド環境の .node-version ファイルを開くと v14.16.0 になっています。

公式サイトのインストーラを使ってインストールする場合は、バージョン一覧から該当のバージョンを選んでください。コマンドでの操作に慣れている場合は、nodenv (Mac)、fnm (Windows) などの node バージョン管理ツールを使用するのがお勧めです。

インストールした後、ターミナルやコマンドプロンプトで

$ node -v （ または node --version ）

と打って該当のバージョン番号が表示されればオーケーです。

package.json でローカル環境のアドレスとテーマ名を設定する

LiveReload ( npm run start ) を使う場合に基準となる設定です。LiveReload を使わない場合はこの手順は飛ばしてかまいません。

"config": {
  "local": "acms.lab", （ http:// や https:// は不要です ）
  "theme": "テーマ名" （ テーマ名を utsuwa 以外にする場合は変更します ）
},

cd コマンドで themes/テーマ名 に移動して npm を使ってパッケージをインストールする

cd は change directory の略です。今いる場所が分からない場合は pwd ( present working directory ) コマンドで確認できます。

$ cd www/themes/テーマ名 （ パスはローカル環境のフォルダ構成や現在地によって異なります ）
$ npm i（ または npm install ）

必要なパッケージがインストールされると themes/テーマ名/node_modules というフォルダができて中にたくさんのファイルがダウンロードされます。ダウンロードが終わったらメッセージを見て、必要そうであれば

$ npm audit fix

しておきましょう。

※ 子テーマを使用する場合でも、ビルド環境は親テーマだけでまとめておきましょう。

ファイルを watch してコンパイルする

 $ npm run dev

あるいは

 $ npm run start

で src フォルダ内のファイルを watch して dest フォルダにコンパイルし始めます。npm run start は LiveReload の機能を含んでいるので、src フォルダ内のファイルを変更して保存するたびに自動的にブラウザがリロードされます。LiveReload 使用時にはブラウザのURL欄には「localhost::3000」が表示されます。これらのコマンドを止めるには「Ctrl + C」を押します。

ファイルを build する

納品時やリモートへの反映時などには

 $ npm run build

でファイルを build することによって、最適化されたコンパイルになります。このコマンドは実行に少しだけ時間がかかり、終わったら自動的に止まります。

JavaScript について

/src/js/index.js からさまざまなファイルを読み込んで /dest/bundle.js にコンパイルされています。その内容については各テーマフォルダに同梱されている README.md をご確認ください。

エラーが出たら

コマンドが問題なく実行されているときにはターミナルの画面に実行結果がスラスラと表示され続けていますが、赤字でエラーが表示された場合は、エラーメッセージを読んで対処しましょう。

Sass のルールは .stylelintrc、 JavaScript のルールは .eslintrc の rules のブロックに追記することでそれぞれ個別にオンオフすることができます。.stylelintrc では true / null で、.eslintrc では 0 / 1（警告を出す） / 2（エラーを出す）という値で設定します。たとえば、.stylelintrc の rules ブロックに

 "block-no-empty": null,

と追記すると、Sass ファイルに空のブロックがあってもエラーがでなくなります。

より高度な内容について

これだけで一通りのビルドはできますが、全CSSのインライン化や組み込みJSの整理、各ファイルの役割など、より高度な内容についてはこちらもご確認ください。

webpack を使用しない場合の注意点

補足として、webpack を使用しない場合に抑えておいたほうが良い点について説明します。

独自カスタマイズ用の CSS と JavaScript

/include/head/link.html において

<link rel="stylesheet" href="/dest/bundle.min.css">
<link rel="stylesheet" href="/css/style.css">

/include/head/js.html において

<script src="/dest/bundle.js" defer></script>
<script src="/js/script.js" defer></script>

のように独自カスタマイズ用の CSS ファイル、JS ファイルへのパスを追記して、追加した CSS ファイルでスタイルを上書き、追加していきます。script タグでは JSファイルの実行順を担保するため、async属性ではなく、defer属性を使います。

不要なファイルを削除する

不要なファイルはそのままにしておいても問題はありませんが、削除するとファイル構成が分かりやすくなります。コンパイルによる予期せぬ先祖がえりを防ぐためにも削除しておくことをお勧めします。

utsuwa/ 直下の不要なファイル

• .eslintrc
• .node-version
• .stylelintrc
• babel.config.js
• package-lock.json
• package.json
• webpack.analyze.js
• webpack.common.js
• webpack.dev.js
• webpack.prod.js
• webpack.uncompress.js

/src/ フォルダ

Sassを使用しない場合はフォルダごと削除してください。Sassを使用する場合は /src/scss を残して、お使いのコンパイルツールにあった設定にしてください。

<?php

// デフォルトではBID=1の文脈で実行されるため、
// OAuth認証を行っているブログのBIDが1以外の場合、
// php/standalone.php を読み込むより前にBIDを設定してください。
define('BID', 2);

// 設置場所に合わせて、php/standalone のパスを合わせてください。
require_once dirname(__FILE__) . '/../php/standalone.php';

use Acms\Plugins\ShoppingCart\ServiceProvider;

set_time_limit(0);
ini_set('memory_limit', '512M');

acmsStandAloneRun(function () {
    acmsStdMessage('[Start] 処理を開始しました');
    try {
        // ShoppingCart拡張アプリを初期化
        $App = new ServiceProvider();
        $App->init();

        App::make('square.service.oauth');

        acmsStdMessage('[Success] 処理を完了しました');
    } catch (\Exception $e) {
        acmsStdMessage('[Error] ' . $e->getMessage());
        return false;
    }
    return true;
});

0 0 */7 * * php path/to/cron/example.php