システムのバージョンアップをする際に、利用しているバージョンから最新版までアップデートする際に、テンプレートや config の設定がどう変わっているのかを時系列で紹介しています。

Ver. 3.1.17 - 2024/06/10

• Ajaxによる部分テンプレートアクセスにCSRFトークンによる認証を追加し、許可するtpl指定（allow_tpl_path）を個別指定しなくてもいいように改修 & Ajaxリクエストのセキュリティレベルオプションを用意（ajax_security_level）

ポストインクルードや htmx など、Ajax による部分テンプレートへのアクセス時に、許可するtplを private/config.system.yaml で指定（allow_tpl_path）する必要がなくなりました。 また、ポストインクルードや htmx など、Ajax によるテンプレート取得用のPOSTモジュールとして、ACMS_POST_2GET_Ajax が追加されました。

詳しくはブログ記事をご確認ください。

Ver. 3.1.14 - 2024/04/23

• PHP8.2, 8.3対応

Ver. 3.1.12, 3.0.32 - 2024/04/08

• 【セキュリティ対応】Webhook機能のSSRF対応 「JVN#24538269」
• 【セキュリティ対応 & 仕様変更】Webhook機能のコードインジェクション対応 「JVN#36191600」

Webhook 機能のSSRF対策としてリクエスト先URLが「.env」で許可したホストのみ許可するように変更されました。またログ閲覧で機能でレスポンスの内容を表示するために「.env」の設定が必要になりました。 Webhook機能のコードインジェクション対策として、ペイロードのカスタマイズで利用するテンプレートエンジンがTwigに変更されました。

詳しくはブログ記事を御覧ください。

Ver. 3.1.7 - 2024/01/19

• 校正オプション[raw]を指定していても script・iframe を削除するオプションが追加
  
  参考記事 - エントリ編集のクロスサイトスクリプティング

アップデートの際には off になっていますが、private/config.system.yaml を最新のファイルと置き換えると on になり、管理画面で編集の際にタグが消えてしまう恐れがありますので紹介しておきます。同様の修正が 3.0.29 以降、2.11.58 以降、2.10.50 以降も同様に行われています。

Ver. 3.1.0 - 2023/09/14

ログインテンプレートの仕様が変更

themes/ご利用テーマ/login.html を設置してログイン画面や会員サイトのログイン画面をカスタマイズしている場合、Ver. 3.1 にアップデートするとログインできなくなる可能性があります。

Ver. 3.1 では会員機能の強化のため、ログイン周りのテンプレートの改修、管理者と一般会員でログインページを別にする修正がはいっているので、ログイン画面のテンプレートが新しくなっております。ログイン画面をカスタマイズしている場合や、会員サイトの場合は、テンプレートの修正が必要になりますので、慎重にアップデートください。

SNSログイン・SNS会員登録、Google Map以外の外部サービス連携機能を廃止

SNSログイン・SNS会員登録、Google Map以外の外部サービス連携機能が廃止になりました。廃止になった機能は以下になります。

• Google Analyticsランキング（Api_GoogleAnalytics_Ranking）拡張アプリに移行
• Twitterホームタイムライン（Api_Twitter_Statuses_HomeTimeline）
• Twitterユーザータイムライン（Api_Twitter_Statuses_UserTimeline）
• Twitterサーチ（Api_Twitter_Search）
• Twitterリストタイムライン（Api_Twitter_List_Statuses）
• Twitterリストメンバーズ（Api_Twitter_List_Members）
• Bingウェブ検索（Api_Bing_WebSearch）
• Bingイメージ検索（Api_Bing_ImageSearch）

• 8.1.x 対応

• PHP 7.2.5 - 8.0.x 対応
• ionCube Loader 利用を停止
• アップデート時、テンプレートキャッシュ機能が新しく増えた事により、グローバル変数を利用したインクルードの分岐処理が意図しないキャッシュが作成されてしまう可能性があります。

• private/config.system.yaml の template_cache: off でテンプレートキャッシュの利用を停止します。
  
  参考記事 - テンプレートキャッシュについて

• マークダウンのライブラリが PHP 8.0 対応のために変更になりました。そのため マークダウンを利用の場合に表示崩れが発生する可能性があります。
  
  参考記事 - Ver. 3.0 へメジャーアップデート時にマークダウンの文章が崩れるケースについて

  • ネストしているリスト
  • 空白行が上にないコード、テーブル、引用

• jQuery のバージョンが 3.5.1 に変更しています。

• tplコンテキスト がデフォルトで無効になりました。

• アップデートの場合には private/cofig.system.yaml に設定が無いので大丈夫ではありますが、変更点として紹介しておきます。
  
  参考記事 - Ver. 2.11.25からのテンプレートの仕様変更について

  • forbid_tpl_url_context :
  • forbid_tpl_inheritance_when_path_unresolved :
  • allow_tpl_path :

• PHP 7.4 対応

• メディアダウンロードリンクが /media-download/xxx/ から /media-download/xxx/hash値/ のように変更になりました。テンプレートは関係ありませんが、テキストリンクで手動で /media-download/xxx/ へのリンクを書いているような時には注意が必要です。
  
  config.system.yaml の設定
  
  media_download_link: v1 # v1: media-download/xxx/ v2: media-download/xxx/hash値/
  ※ この設定で元の仕様に戻すことが可能です。

• ライセンスのアップデートが有償になりました。

• カスタマイズの際に、脆弱性を作り込んでしまう問題を減らすために、校正オプションの仕様変更しています。文章中のタグがそのまま表示されてしまう可能性があります。
  
  参考記事 - Ver.2.11 から校正オプションの仕様が変更になります

• 読者登録・パスワードリセット時に、パスワードを自分で指定できるように変更
  
  読者登録・パスワードリセット時に、パスワードを自身で指定できるようになりました。以前はパスワード再発行メールにシステム側で発行した新しいパスワードを記載しておりましたが、再発行時にユーザーが任意のパスワードを指定する仕様へ変更になりました。そのため、パスワードリセット用のテンプレートを追加する必要があります。また、パスワード再発行メールで使用できる {resetPass} 変数は削除されました。
  
  パスワードリセット用のテンプレートは system テーマ内、 /_layouts/login.html の <!-- BEGIN reset --> から <!-- END reset --> までを参考にしてください。

• PHP 7.3 対応

• タグの入力 UI が変更になっています。一応、前の UI がいい人のために戻す方法を紹介しておきます。
  
  参考記事 - エントリーのタグ UI を古いものに戻すには

• PHP 7.2 対応

• PHP 7.0 対応

• ルールをグローバル化して利用している場合の動きが変わりました。
  
  参考記事 - Ver.2.7.0以上へのアップデート

• utf8mb4 に対応し、絵文字が保存できるようになりました。
  
  参考記事 - UTF-8の絵文字を利用する

• a-blog cms で読み込みが必須の JavaScript のファイル名が index.js から acms.js に変更されました。
• acms.css から管理系の CSS を別にして利用できるようにした acms-admin.css が必須になりました。
• acms.js の前に jQuery の読み込みが必須になり、jQuery が同期的に読まれるように対策が必要になりました。
  
  参考記事 - Ver.2.5以上 へのアップデート

• config.system.yaml が config.system.default.yaml と config.system.yaml に分かれました。 1.x で利用していた config.system.yaml を利用することで、2.0 以前の設定を引き継ぎます。
• file_icon の場所が images/fileicon から themes/system/images/fileicon に変更になりました。
• Entry_Body の中でインクルードされている /include/column.html が /include/unit.html に変更になりました。
• Column_List モジュールの名前が Unit_List に変更になりました。
  
  参考記事 - Ver. 1.7 から 2.0 のアップデート

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件のエントリーがあり、それぞれ赤枠で囲った箇所がエントリーのユニットとして編集可能です。

フッター上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 を残して、お使いのコンパイルツールにあった設定にしてください。