Ver. 3.1.x から 3.2.x への移行

目次

新機能


新しいマイナーバージョン Ver. 3.2 では、多くの新機能が追加されました。
Ver. 3.2 で開発を行う際は、ぜひ本内容に目をお通しください。

ブロックエディタを追加

従来のエディターに加え、新たにブロックエディタ機能が追加されました。
テキスト、画像、ファイルなどのコンテンツを「ブロック」単位で自由に組み立てることができ、みたままの視認性と柔軟性が大幅に向上します。

主な特徴・機能

  • HTMLのコピーアンドペーストに対応

  • スラッシュコマンド

    • マウスでブロックを選択しなくても、直感的にブロック挿入ができるようになります。

  • メディア機能に対応

    • メディアから画像やファイルを挿入することが可能

    • 大元のメディアで画像を差し替えても自動でブロックエディタ側も連動

  • インライン要素にカスタムクラス

    • 設定画面で設定した任意のクラスをインライン要素に設定可能

  • ブロック要素にカスタムクラス

    • 設定画面で設定した任意のクラスをブロック要素に設定可能

  • 2カラム・3カラムレイアウトに対応

    • みたままの状態でマルチカラムレイアウトに対応

  • マークダウンに対応

    • マークダウン記法で入力すると自動的にHTMLに変換します

組み込みJS

ブロックエディタは、ユニットだけではなく、カスタムフィールドでも利用可能です。組み込みJSとして用意しているので、下記HTMLを書くことで簡単にブロックエディタを導入可能です。

<div class="js-block-editor" data-target=".js-target" data-html=".js-html">
  <div class="js-target acms-admin-form-width-full"></div>
  <input type="hidden" class="js-html" name="hoge" value="{hoge}">
  <input type="hidden" name="field[]" value="hoge">
  <input type="hidden" name="hoge:extension" value="block-editor" />
</div>

ユニットの設定方法

編集画面 > 編集設定 > ユニットメニュー でブロックエディタを追加します。

ブロックエディターユニットを設定
ブロックエディターユニットを設定

編集画面 > ブロックエディタ設定 で、ブロックエディタ自体の設定を行います。

ブロックエディター設定画面
ブロックエディター設定画面

以下のことが設定可能です。

  • メディア画像のリサイズサイズ

  • 追加できるブロック、クラス

  • インライン要素のスタイルメニューの表示・非表示

  • インライン要素のカスタムクラス

  • カラーパレットの選択肢

  • フォントサイズの選択肢

  • フォントファミリーの選択肢



Twigを利用できるテンプレート機能を追加

新しいテンプレートエンジンとして Twig を利用できるようになりました。従来の独自テンプレートエンジンも引き続き使用可能で、Twig対応のテンプレート機能が追加された形となります。

Twigは広く利用されているテンプレートエンジンのため、関連する情報も多く、利用経験のある開発者も多いことから、カスタマイズのハードルが下がることが期待できます。

Twigを有効化する

Twigの有効化は、テーマ単位で行いますthemes/ご利用テーマ/template.yaml もしくは、テーマ設定からTwigを有効化します。

template.yaml ファイル

tpl_top : index.twig
tpl_index : index.twig
tpl_detail : _entry.twig
tpl_404 : 404.twig
tpl_admin : admin.html
tpl_entry_edit : _entry.twig
tpl_login : _member-admin/login.html
tpl_twig : enabled
テンプレート設定画面
テンプレート設定画面

モジュールの呼び出し方

Twigテンプレートでは、従来のモジュール(Entry_Summary など)は利用できません。代わりに、V2_ から始まる新しい「V2モジュール」(例:V2_Entry_Summary)を使用する必要があります。

このV2モジュールは、Twig専用に用意されたもので、独自のTwig関数 module() を使って呼び出し、データを変数に格納して利用します。

例:V2_Entry_Summary モジュールを呼び出して使用する

{% set entrySummary = module('V2_Entry_Summary', 'モジュールID名', { bid: BID, cid: CID }) %}
<div>
  <div class="acms-cssgrid acms-g-cols-1 acms-g-cols-md-3">
    {% for entry in entrySummary.items %}
    <div>
      {% if entry.mainImage.path %}
      <img
        src="{{ entry.mainImage.path|resizeImg(360) }}"
        alt="{{ entry.mainImage.alt }}"
        class="acms-img-responsive"
        width="{{ entry.mainImage.width }}"
        height="{{ entry.mainImage.height}}"
        loading="lazy"
        decoding="async"
      >
      {% endif %}
      <h3>{{ entry.title }}</h3>
      <p>{{ entry.summary }}</p>
      <p><a href="{{ entry.url }}" class="acms-btn">詳細をみる</a></p>
    </div>
    {% endfor %}
  </div>
</div>

module() 関数の引数について

引数

内容

第1引数

V2モジュール名(例:V2_Entry_Summary

第2引数

モジュールID(管理画面で設定されたIDを指定)

第3引数

URLコンテキスト(従来の ctx に該当。例:{ bid: BID, eid: EID } など)

V2モジュールの変数の見方

V2モジュールでは、従来のような「変数表」は用意されていません。
その代わりに、Twigテンプレートでモジュールを読み込んだ状態で、クイックサーチ機能から利用可能な変数を確認できる仕組みになっています。

クイックサーチの起動方法

管理者としてログイン中に、以下のショートカットキーを押すことでクイックサーチが開きます:

  • Windows / LinuxCtrl + K

  • Mac⌘(Command)+ K

デバッグモードでの変数確認

クイックサーチを開いた状態で、デバッグモードが有効になっているときに #(シャープ)を入力すると、現在のページで読み込まれているV2モジュールの変数一覧(変数表)が表示されます。

クイックサーチから変数表を表示
クイックサーチから変数表を表示
実際の値が入った変数表が確認できる
実際の値が入った変数表が確認できる

校正オプション(フィルター)の指定

Twigでも、従来の校正オプションを利用できます。またTwigデフォルトのフィルターも同じように使用することが可能です。

<p>{{ content|nl2br|safe_html }}</p>

使用できる校正オプションの種類

  • 従来の標準校正オプション

  • Hook.php で拡張した校正オプション

  • Twig標準のフィルター

従来の標準校正オプションは利用できますが、Twig標準のフィルターと名前がかぶるものもあります。この場合Twigのフィルターが優先されるので、従来の標準校正オプションを指定したい場合は、プレフィックス acms_ を付与して指定ください。

名前が校正オプション・フィルター例

date escape nl2br trim number_format split など

従来の校正オプションを使用する

{{ entry.datetime|acms_date('Y年m月d日') }}

twigでの「raw」校正オプション(フィルター)の仕様が変更になります。

既存テンプレート
{hoge}[raw]
危険なタグはエスケープされ、安全なHTMLは出力されます

{hoge}[raw|allow_dangerous_tag]
scriptを含めエスケープを無効にして、値をそのまま出力します。使用箇所には注意が必要です。

Twigテンプレート
{{ hoge|safe_html }}
危険なタグはエスケープされ、安全なHTMLは出力されます。

{{ hoge|raw }}
scriptを含めエスケープを無効にして、値をそのまま出力します。使用箇所には注意が必要です。


タッチモジュールの使い方

独自のTwig関数 touch() を使って呼び出します。関数の戻り値は真偽値になっているので、if文をつかい表示・非表示を行います。

{% if touch('Touch_Login') %}
  <p>ログイン中です</p>
{% endif %}

touch関数は、module関数と違い既存のすべてのタッチモジュールを呼び出せます


表示・非表示を制御しているのは、単なる「ifタグ」なので、条件式をtouch関数だけではなく組み合わせて利用することもできます。

{% if touch('Touch_Login') and IS_ADMIN %}
  <p>ログイン中 かつ 管理ページの場合<p>
{% endif %}

Twigによる実装メリット

  • グローバル変数でも校正オプションの適応が可能に

  • 閉じ忘れなどテンプレートの間違いでエラーが出るようになるので間違い探しをしなくて済む

  • 複雑な条件を簡潔にかける

  • エスケープ地獄から抜け出せる

  • テンプレートの実行順を意識しなくてよくなる

  • インクルード文に、どんな変数も使えるように

  • エディタのサポート(ハイライト表示・フォーマットなど)

従来テンプレート記法との併用時の注意点

Twig記法と、従来記法を混ぜて書くことができますが、テンプレート解決順による注意点があります。


テンプレートが解決される順番は、Twig が解決されてから、従来テンプレートが解決されます。

よって以下のようなパターンで、テンプレートが解決されない場合がありますので、ご注意ください。

  • 従来の @include で読み込んだテンプレートにあるTwig記法は解決されない

  • 従来の @extends で継承したテンプレート以下にあるTwig記法は解決されない

  • 従来の @extends で継承されているテンプレートは、Twig記法でインクルード出来ない



グループユニットを追加

新しいユニットタイプとして、記事編集をさらに柔軟にする 「グループユニット」 が追加されました。
従来のユニットグループでの課題を解決し、より直感的で自由度の高いレイアウト作成を実現します。

グループユニットを適用した編集画面

従来のユニットグループでは、段組みレイアウトを作成する際に CSS の float レイアウトを利用する必要があり、回り込み解除などの知識や操作をユーザーが理解していないと扱いにくい面がありました。
また、グループは 1 階層までしか作成できないため、複雑な入れ子構造を持つレイアウトを実現することは困難でした。

今回の新しいグループユニットでは、こうした課題を解消し、編集者がより直感的にコンテンツを構築できるようになっています。

主な特徴・機能

  • 直感的な段組み操作
    float に依存せず、CSS の知識がなくてもレイアウトを組み立て可能

  • 多階層のグループ構造
    1 階層の制限がなくなり、柔軟に入れ子レイアウトを構成可能

  • グループ単位での操作
    移動やコピーをまとめて行えるため、効率的に編集可能

  • id・タグの設定が可能に
    グループに idsection タグを設定でき、LP などでアンカーリンクを利用したセクション設計が容易に

  • 意味的なマークアップの強化
    SEO やアクセシビリティの観点からも有効な HTML 構造を生成可能



jpeg・png 画像をWebP画像に変換するオプションを追加

jpeg・png 画像を WebP画像に変換してアップロードするオプションが追加されました。(デフォルト無効

有効化すると、jpeg・png画像は生成されず、WebP画像のみアップロードされることになります。

有効化するには private/config.system.yaml で設定します。

convert_2webp: on # on | off jpeg/png画像をweb画像に変換します

これにより、画像ファイル数が少なくなり、画像ファイルサイズも縮小されるため、全体のファイル容量の削減に役立ちます。

* WebP画像は、iOS14から対応(2020年9月)



自動オンラインアップデート機能を追加

CMSのアップデートを管理画面からアップデートを実行しなくても、指定した時間帯に自動でアップデートする機能が追加されました。

  • デフォルト機能オフ

  • パッチバージョンのみ対応

  • 自動更新する時間帯を指定可能

  • 事項更新する曜日を指定可能

管理画面 > コンフィグ > 機能設定 で設定が行えます。

自動アップデート設定画面
自動アップデート設定画面


WordPress eXtended RSS(WXR)形式でのエクスポート機能を追加

WordPressとの連携や移行を容易にするため、WXR(WordPress eXtended RSS)形式でのエントリーエクスポート機能を追加しました。

  • WXR形式でのエクスポートに対応
    WordPressがサポートするXMLベースのWXR形式でエントリーデータを出力可能になりました。

  • ブログ単位でのエクスポート
    複数ブログを運用している環境でも、特定のブログ単位でデータをエクスポートできます。

  • エントリー、カテゴリー、ユーザー情報を含む
    エクスポートデータには、エントリー本文だけでなく、カテゴリー情報や投稿ユーザー情報も含まれます。

  • メイン画像をサムネイルとして出力
    各エントリーに紐づくメイン画像を、WXRの<wp:postmeta>としてサムネイル情報に含めています。

WXR形式のエクスポート画面
WXR形式のエクスポート画面

この機能追加により、データのポータビリティが大きく向上しました。
WXR形式という標準フォーマットでエクスポートできるため、他のCMSやツールとの互換性が高く、柔軟な運用が可能になります。

  • ユーザーの安心感
    将来的なサイト移行やバックアップにも対応できることで、長期的な視点でも安心してご利用いただけます。

  • ベンダーロックインの回避
    特定のCMSに依存しないデータ設計を実現し、ユーザー側での選択肢と自由度を確保します。

  • データ解析や再利用のしやすさ
    XMLベースの形式により、他システムでのデータ解析やフォーマット変換などの再利用にも適しています。



ストレージをローカルではなくAWS S3に保存できる仕組みを用意

プロフェッショナル版以上のライセンスにて、メディア・アーカイブ・ストレージ・キャッシュなどの各種ファイルを、ローカルストレージではなく Amazon S3 に保存できる仕組みを新たに追加しました。

対象ストレージ領域

  • media:メディア管理の画像ファイル

  • archives:メディア管理していない画像やファイルなど

  • storage:メディア管理の画像以外のファイル

  • cache:キャッシュファイル

この機能によりできること

大規模サイトを複数台のWebサーバーで運用する際、画像などのファイルをどのように共有・配信するかが課題となっていました。今回の機能追加により、AWS上での複数台構成において、ファイル類をS3に集約し、CloudFrontなどのCDNを通じて効率的に配信できるようになります。

各Webサーバーが共通のS3ストレージを参照するようになるため、ファイルの重複管理やサーバー間の同期処理は不要になります。これにより、シンプルでスケーラブルな構成が可能となり、大規模運用におけるファイル管理の負担を大幅に軽減します。

設定方法

a-blog cms 設置ディレクトリの設定ファイル .env で行います。S3バケットの指定・認証情報の設定が可能です。

# ストレージ設定
STORAGE_DRIVER=local # (local|s3) 公開ストレージの保存先を選択します
STORAGE_S3_KEY= # S3のアクセスキーを指定します
STORAGE_S3_SECRET= # S3のシークレットキーを指定します
STORAGE_S3_REGION=ap-northeast-1 # S3のリージョンを指定します
STORAGE_S3_PUBLIC_BUCKET= # 公開用のS3のバケット名を指定します
STORAGE_S3_PUBLIC_PREFIX= # オプションでパスのプレフィックスを指定します
STORAGE_S3_PRIVATE_BUCKET= # 非公開のS3のバケット名を指定します
STORAGE_S3_PRIVATE_PREFIX= # オプションでパスのプレフィックスを指定します
ASSETS_DELIVERY_URL= # CMSのドメインとS3配信URLが違う場合は配信URLを指定します(例: https://assets.example.com)

バケットは PUBLICPRIVATE の2つご用意ください。media archivesPUBLIC なバケットを参照し、CMSからのみアクセスする storagecachePRIVATE なバケットを参照するようになっています。



組み込みJSに「htmx」を追加

組み込みJSに「htmx」ライブラリを追加しました。

htmx は、HTML を拡張して、ページの一部を動的に更新するための軽量なライブラリです。JavaScript を使わずに、HTML属性を用いてサーバーとの通信やページの更新を行うことができます。これにより、クライアントサイドのコードを減らし、シンプルで直感的な開発が可能になります。

a-blog cmsでは従来から「post include」機能という、htmxライブラリと同じような機能があり、htmxとの相性もよく、組み込みJSが読み込まれていれば、特に初期設定などせずに、すぐ使い始めることが可能です。



Vite 連携機能を追加

次世代のフロントエンドツール「Vite」との連携機能が追加されました。

これにより、テーマ開発時に Vite でビルドしたアセット(JavaScriptやCSSなど)を、テンプレートに簡単に読み込むことができるようになります。開発時はViteのDevサーバーと連携し、ビルド後はmanifest.jsonを元に本番アセットを読み込む運用が可能です。

従来テンプレートの場合

@viteReactRefresh <!-- Reactを利用する場合 -->
@vite(['src/js/main.js', 'src/style/style.css', {
  "scriptTagAttributes": {
    "async": true
  }
})

Twigテンプレートの場合

{{ viteReactRefresh() }} <!-- Reactを利用する場合 -->
{{ vite(['src/js/main.js', 'src/js/admin.js', 'src/style/style.css'], {
  'scriptTagAttributes': {
    'async': true,
  }
}) }}

viteReactRefresh() は開発環境でReactのホットリロード(Fast Refresh)を有効化するために使用します。

本番環境と開発環境の切り替え

.env ファイルに以下のような設定を追加することで、Viteの動作モード(開発モード/本番ビルド)を切り替えることができます。

# Vite(https://vite.dev/)
VITE_ENVIRONMENT=production # development | production
VITE_MANIFEST_PATH= # manifest.json のパスを利用しているテーマディレクトリから指定します。(例: dist/.vite/manifest.json)
VITE_DEV_SERVER_URL= # Viteの開発サーバーURLを指定します。(例: http://localhost:5173)

改善・修正した変更点


Ver. 3.2 ではPHP 8.4 対応をはじめとするプラットフォーム対応の更新、管理画面やパフォーマンスの改善、アクセシビリティ対応の強化など、多くの機能追加・修正が行われました。

対応PHPバージョンの変更

対応PHPバージョンが、PHP8.1.0 〜 PHP8.4.x に変更されました。 a-blog cms Ver. 3.1.x は PHP7.3まで対応していましたので、アップデート時はお気をつけください。



エントリ編集画面を改善

ユニット周りのUIを中心にエントリー編集画面の操作性と視認性を大幅に改善いたしました。ユニットの並び替え・追加・削除などの一連の体験が向上されています。

主な変更点

  • ユニットの追加をドロップダウンメニューから行えるように変更

    • 横並びのボタンから、ドロップダウンメニューで選択して追加する形式に変更され、目的のユニットを探しやすく

    • カテゴリー分けができるようになり、大量のカスタムユニットでも整理可能

    • アイコンがデフォルトで表示されるようになり、acms icon の他に Material Symbols が利用可能に

  • ユニットの上下移動機能を追加

    • ドラッグ&ドロップに加え、上下移動ボタンで位置を調整できるようになりました。細かな配置変更が容易に

  • ユニットの複製機能を追加

    • 既存のユニットをワンクリックで複製できるようになりました。同じレイアウトを再利用する際に効率的よく作業可能

  • 配置やユニットグループをドロップダウンメニューから選択するように変更

    • 利用頻度の低い配置やユニットグループを3点リーダーメニューにまとめました。必要なときのみ表示することで画面をすっきりさせます

ユニットの追加をドロップダウンメニューから行えるように変更

ユニットを追加するためのメニュー
ユニット追加メニュー

新規ユニットの追加がドロップダウンメニューからできるようになりました。合わせて、ユニット間のどこからでもこのメニューを開けるようになったことでより探しやすく、追加しやすくなりました。

また、メニューではカテゴリーによる分類ができるようになり、大量のカスタムユニットがある場合でも整理することができるようになりました。

アイコンについても各ユニットタイプ毎にデフォルトアイコンが追加され、アイコンを設定していない場合でもアイコンが表示されるようになっています。

さらに、アイコンは好みに合わせて変更することも可能で、編集画面 > 編集設定から変更できます。利用できるアイコン acms icon だけでなく、Material Symbols からお好きなアイコンを選んで設定できます。

ユニットの上下移動機能を追加

ユニットの上下移動機能を利用するためのボタンが赤い囲みで強調されています。
ユニットの上下移動機能

ユニットに上下移動機能が追加されました。

これによりドラッグ&ドロップだけではなく、ボタン操作による並び替えが可能になりました。ユーザービリティだけではなく、アクセシビリティ面の改善も期待できます。

ユニットの複製機能を追加

ユニットの複製ボタンが赤枠で囲まれて強調されています。
ユニットの複製ボタン

既存のユニットをワンクリックで複製できるようになりました。

同じような内容やレイアウトを再利用する際に効率的よく作業することができます。グループユニットを複製した場合は、グループ内のユニットをすべて複製します。

配置やユニットグループをドロップダウンメニューから選択するように変更

ユニットの3点リーダーメニュー。配置やユニットグループが編集できるようになっています。
ユニットの3点リーダーメニュー

利用頻度の低い配置やユニットグループを3点リーダーメニューにまとめました。

必要なときのみ表示することで画面をすっきりさせ、編集時によりコンテンツの入力に集中することができます。

この他にも細かな変更が行われています。より洗練され使いやすくなったエントリー編集画面をぜひお試しください。



acms.css に CSS Grid レイアウトを利用したグリッドシステムを追加 など

Ver. 3.2 より、acms.css に CSS Grid レイアウトを利用したグリッドシステムが追加されました。Ver. 3.2 以前のグリッドシステムは CSS の float を活用したものであり、Flexbox や Grid レイアウトが主流の現代では使いづらくなっていました。

.acms-cssgrid というクラス属性を適用するとCSS Gridレイアウトが適用されます。 .acms-g-col-*.acms-g-cols-* といったクラス属性を適用するだけで簡単に2カラムや3カラムなどレイアウトをスタイリングすることが可能です。

また、グリッドシステムだけではなく、ユーティリティクラスやスタックレイアウトなども acms.css に追加されています。

閲覧画面はもちろんですが、管理画面のスタイルを一部調整したいときなどに活用いただけます。


ユニットのレイアウトを Flexbox や Grid で組めるように

Ver. 3.2 未満の a-blog cms ではユニットのレイアウトと CSS float が強く結びついており、以下のような課題が発生していました。

  • Flexbox や CSS Grid を活用した段組みレイアウトができない

  • CSS の知識を理解していないとユニットグループや配置を使いこなすことが困難

  • CSS の float を理解していないとユニットのCSSをカスタマイズすることが難しい

Ver. 3.2 ではグループユニットの追加により、ユニットグループを利用せずレイアウトを組めるようになったことにより、CSS float を利用せず、Flexbox や CSS Grid を活用した段組みレイアウトができるようになりました。

Ver. 3.2 未満 では、以下のようにユニットを出力する親要素に .acms-grid を指定して、ユニットにマイナスマージンを適用することで本文のスタイルを組んでいましたが、Ver. 3.2 では、.acms-grid やマイナスマージンが必要なくなり、本文のスタイリングが大幅にカスタマイズしやすくなっています。

<!-- Ver. 3.2 から acms-grid が不要になりました。 -->
<div class="acms-entry acms-grid">
  @include("include/unit.html")
</div>

また、配置機能についても CSS float に依存した仕組みでしたが、新たに Flexbox を利用してユニットを配置し、より直感的な設定ができる 配置 v2 が追加されました。

配置 v2 では既存の配置機能に存在した、「おまかせ」や「全体」といった項目を廃止し、「中央」・「左」・「右」の3つから選択するようになり、よりシンプルかつ直感的にユニットを配置することができます。

また、配置を選択可能なユニットタイプも以下のタイプのみになります。

  • 画像

  • ファイル

  • 画像URL

  • メディア

  • Googleマップ

  • 標準マップ

  • ビデオ

  • YouTube

配置 v2 を利用することで、ユニットグループを解除するためにユニットの配置を「全体」に設定するのをわすれてレイアウトが崩れるようなことがなくなります。


配置 v2 を利用する場合、新聞や雑誌のような回り込みレイアウトを実現することはできません。


エントリー管理画面の UI をリニューアル

エントリー管理画面
エントリー管理画面

一覧画面の見やすさ・速さ・間違えにくさを重視して全面的に改善し、表示項目設定検索条件の保存高度な絞り込み機能を追加しました。また、全体的に操作が必要なUIの見直しを行いました。

主な変更点

  • 表示項目設定

    • カラムの表示・非表示・並び替えが可能

    • カスタムフィールドに対応

  • 検索条件の保持

    • 適用した検索条件(キーワード、日付、カテゴリ、ステータスなど)を再訪時に自動復元

  • 高度な絞り込み

    • 表示項目設定で追加したカスタムフィールドを条件に検索

    • 演算子検索や、複数条件による検索に対応

  • UIの見直し

    • 一括操作やフィルタ、ページネーションなど、ユーザーが直接操作するUIを全面的に改善

    • ボタンの配置整理や必要なときだけボタンを表示するようにし、不要な操作ミスを回避

  • アクセシビリティ

    • キーボード操作やスクリーンリーダーによる操作性の向上

表示項目設定

エントリー一覧の表示項目を編集するためのUIです。
表示項目設定

管理者権限を持つユーザーの場合、「その他」メニュー > 表示項目設定から一覧に表示する項目を編集できます。

チェックボックスによる表示・非表示の切り替えやハンドルアイコンによる並べ替えが可能です。

表示項目にカスタムフィールドを追加するためのダイアログです。
カスタムフィールド設定

また、カスタムフィールド設定からエントリーのカスタムフィールド項目を追加することができます。

表示項目設定ができることで、案件に合わせたエントリー管理画面を簡単に提供できるようになりますので、ぜひご利用ください。

検索条件の保持

新しくなったエントリー管理画面では一度検索した検索条件をローカルストレージに保存し、再度エントリー管理ページのURLにアクセスしたときに保存した検索条件を復元します。

これにより、検索 → 詳細 → 一覧に戻る のようなページ遷移を行ったときに、最初に検索したときの条件が解除されてしまい再度検索しなければならないということがなくなります。

また、表示件数についても前回設定した件数が保たれるため、毎回表示件数を選択し直す必要もありません。

これにより、よりシームレスなエントリー管理体験を得ることが可能です。


高度な絞り込み

高度な絞り込みを設定するためのUIです。
高度な絞り込み設定UI

高度な絞り込み機能では、表示項目設定で登録したカスタムフィールドに加えて以下の項目で検索することが可能です。

  • 日時

  • 開始日時

  • 終了日時

  • 更新日時

  • 投稿日時

  • 会員限定

  • インデキシング

これまでは、カスタムフィールドや標準外の項目で絞り込めるようにするのが難しかったですが、高度な絞り込み機能により編集したいエントリーをより簡単に見つけられるようになります。


private/config.system.yaml にて entry_admin_page_version: 1 に設定することで以前のエントリー管理画面に戻すことが可能です。

既に独自カスタマイズをしていて、新しい管理画面にしたくない場合にご利用ください。

## エントリー管理
entry_admin_page_version: 1 # 1 | 2 エントリー管理画面のバージョンを設定します

モジュール管理画面の UI をリニューアル

モジュール管理画面
モジュール管理画面

一覧画面の見やすさ・速さ・間違えにくさを重視して全面的に改善し、検索条件の保存機能の追加や、操作が必要なUIの見直しを行いました。また、モジュールIDに作成日時と更新日時を追加しました。

主な変更点

  • 検索条件の保持

    • 適用した検索条件(キーワード、ステータスなど)を再訪時に自動復元

  • 作成日時と更新日時の追加

    • モジュールIDに作成日時と更新日時が追加され、一覧・詳細で確認可能

    • 「最近触られていないモジュール」「直近で変更があったモジュール」の洗い出しが容易に

  • UIの見直し

    • 一括操作やフィルタ、ページネーションなど、ユーザーが直接操作するUIを全面的に改善

    • ボタンの配置整理や必要なときだけボタンを表示するようにし、不要な操作ミスを回避

  • アクセシビリティ

    • キーボード操作やスクリーンリーダーによる操作性の向上



メイン画像にカスタムフィールドを設定できるように改善

Ver. 3.2 では、エントリーのメイン画像に メディアカスタムフィールドを利用できるようになりました

これにより、従来のように「画像ユニット」や「メディアユニット」のみでしかメイン画像を指定できなかった制約が解消され、より柔軟なメイン画像管理が可能になります。

メイン画像を出力できるモジュール

以下のモジュールで、メイン画像の出力元(ユニット or カスタムフィールド)を選択できる設定が追加されています。

  • Entry_Summary

  • Entry_Body

  • Entry_GeoList

  • Entry_TagRelational

  • Category_EntrySummary

  • V2_Entry_Summary

  • V2_Entry_Body

  • V2_Entry_GeoList

  • V2_Entry_TagRelational

  • V2_Category_Entry_Summary

モジュールの設定方法

各モジュールの設定画面に「メイン画像の出力元」を選択する項目が追加されています。

ユニット or カスタムフィールドを選択します。
メインイメージ対象設定画面

メイン画像の出力元を選択

選択肢

説明

ユニット

従来通り、画像・メディアユニットからメイン画像を取得します

カスタムフィールド

指定したメディアカスタムフィールドからメイン画像を取得します。(対象フィールドは、カスタムフィールド選択肢横のテキスト入力欄でフィールド名を設定)


フィールド名を空にした場合は、デフォルトのカスタムフィールド(例:entry_main_image など)が自動的に使用されます。(後述)


カスタムフィールドが選択されている場合でも、該当するメディア画像が存在しない場合は、従来通りのユニットからのメイン画像出力に自動的にフォールバックします。


デフォルトのメイン画像カスタムフィールド設定

メイン画像用のカスタムフィールド名を明示的に設定しなくても動作する「デフォルトのフィールド名」が用意されています。

各モジュールの設定でフィールド名を空欄にしても、あらかじめ決められたデフォルトのカスタムフィールド名を使用することで、自動的にメイン画像として認識・出力されます

デフォルトのメイン画面カスタムフィールド名の変更

private/config.system.yaml で変更が可能です。

main_image_field_name: entry_main_image # エントリーのメイン画像のフィールド名を設定します。

デフォルトのカスタムフィールド名を使用するメリット

  • 各モジュールでフィールド名の設定が不要

  • エントリー管理画面(エントリー一覧)で、メイン画像として出力できる

  • 関連エントリーの設定画面でサムネイル画像として出力できる


メイン画像用のメディアカスタムフィールドを使用する場合は、フィールド名に entry_main_image を使用することを推奨します。これにより、CMS全体で一貫した動作と表示が可能になります。



WebP画像をそのままアップロードできるように改善

従来バージョンはWebP画像をそのままアップロードできませんでしたが、Ver. 3.2 では、WebP画像のままアップロードできるようになりました。

* 画像エンジン(ImageMagic / GD)がWebPに対応している必要があります。



メディア機能でHEIC画像のJPEG変更に対応

iPhoneなどで撮影された写真に多く採用されている HEIC形式(High Efficiency Image File Format) の画像のJPEG画像変換に対応しました。HEIC画像をアップロードした際に自動でJPEG形式に変換してアップロードするようになります。



メディア機能の代替テキストに改行が使えるように

これまで代替テキスト(alt属性)には1行のみの入力が想定されていましたが、改行を含む複数行のテキストが登録・表示できるようになりました。

メディアの代替テキストが改行できるように
メディアの代替テキストが改行できるように


メディア一覧の検索条件に「自分のメディアのみ表示」を追加、またファイル名検索をキーワード検索に変更

メディア管理で「自分のメディアのみ表示」する検索オプションを追加しました。これにより、ログインしているユーザーがアップロードしたメディアのみに絞り込みができますた。

また従来ファイル名でしか検索できなかったのを、ファイル名・キャプション・代替テキスト・メモ内容からキーワードで検索できるようになりました。

メディア管理画面
メディア管理画面


カスタムユニットのデータがテキスト置換の対象外になる問題を修正(シリアライズせずに保存するよう改善)

従来は、カスタムユニットのデータをシリアライズして保存していたため、テキスト置換に対応できず、不便な状態となっていました。

本バージョンでは、シリアライズによる保存を廃止し、カスタムフィールドと同様の形式で保存するように改善されたことで、テキスト置換に対応可能となりました。

テキスト置換画面で対象にカスタムユニットが追加された
テキスト置換ができるように

またカスタムフィールド同様、キーワード検索のワードに含めるかどうかの設定も可能となりました。

<input type="text" name="product_amount{id}" value="{product_amount}" />
<input type="hidden" name="product_amount{id}:search" value="0" /> <!-- キーワード検索でヒットしないように設定 -->
<input type="hidden" name="unit{id}[]" value="product_amount{id}" />

従来データについて

アップデート前に作成されたカスタムユニットのデータは、シリアライズされた形式で保存されていますが、CMSのバージョンアップ時に、自動的に新しい保存方式(配列形式)へと移行されます。



ログインユーザーの最終アクセス時間を、ダッシュボードおよびユーザー・会員一覧で確認可能に

従来は、ダッシュボードでログイン日時を確認することはできましたが、あくまで「ログインした瞬間」の情報であり、その後の最終アクセス日時までは把握できない状態でした。

今回の改善により、最終アクセス日時に加え、接続元のIPアドレスUser-Agent も確認できるようになりました。

管理画面 > ダッシュボード のログイン履歴から確認できます。

ダッシュボードからログイン履歴画面に移動できます。
ログイン履歴画面

会員ログインに有効・無効のオプションを追加

従来は、会員機能を利用していない場合でも、サインイン画面やパスワードリセット画面が表示され、会員登録はできないが、ページが表示される状態となっていました。
(※会員登録自体は無効のため、実際には使うことのない不要な機能です)

このような状態はセキュリティ上も望ましくないため、本バージョンでは、ログインやパスワードリセット機能を会員機能を利用しない場合は、無効化できるオプションを追加しました。

設定は管理画面 > コンフィグ > ログイン設定 で行えます。

ログイン設定画面で設定できます。
ログイン設定画面

表側のエントリー編集画面を廃止し、同様の編集機能を管理画面内に移設

従来は、エントリー編集を行う際、

  • 管理画面側の編集画面

  • 表側の実装テーマ内で提供される編集画面

のいずれかを使用できるようになっていました。

しかし、表側の編集画面はテンプレートの Entry_Body 内に編集テンプレートをインクルードする必要があり、テーマごとにテンプレートの対応が必要でした。

このため、本バージョンより、表側の編集画面は廃止され、管理画面側のシステムテンプレートで管理するようになりました。編集画面の見た目は変わりますが挙動は従来通りになります。

新しい編集画面
新しい編集画面

カスタムフィールドメーカーを改善

カスタムフィールドの設定をより柔軟に行えるよう、カスタムフィールドメーカーに以下の改善を行いました。

テキスト入力欄のタイプ属性を拡充

従来の「text」に加え、以下のHTML5入力タイプを選択できるようになりました:

  • tel(電話番号)

  • number(数値)

  • email(メールアドレス) など

これにより、スマートフォンなどでの入力支援(数字キーボード表示など)が期待できます。

プレースホルダーの設定に対応

各入力欄に任意のプレースホルダー(例:入力例や説明)を設定できるようになりました。

HTMLレイアウトタイプの選択オプションを追加

フィールド出力時のHTMLレイアウト方式として、以下から選択できるようになりました:

  • 従来タイプ(tableレイアウト)

  • モダンタイプ(div+グリッドCSSレイアウト)

「モダン」タイプを選択すると、生成されるHTMLが <div> ベースの構造となり、CSSグリッドにより柔軟なレイアウト調整が可能になります。レスポンシブ対応やデザイン調整がしやすくなるのが特徴です。

テーブルレイアウトか、divによるレイアウトを選択可能に。
生成されるHTMLタイプを選択

シンタックスハイライト用のライブラリを Google Code Prettify から highlight.js に変更

組み込みJSのシンタックスハイライター「Google Code Prettify」を廃止し「highlight.js」を導入しました。

初期設定が js/config.js で設定されています。

// Syntax Highlighter
highlightMark: 'pre',
highlightConfig: {
  theme: 'atom-one-light', // テーマを指定(https://highlightjs.org/examples を参照)
  languages: ['bash', 'css', 'javascript', 'json', 'php', 'sql', 'typescript', 'xml', 'yaml', 'twig'], // ハイライトする言語を指定(https://highlightjs.org/download を参照)
},

設定例

<script>
ACMS.Ready(() => {
  ACMS.Config.highlightConfig.theme = 'atom-one-dark';
});
</script>

組み込みJSのバリデーターをアクセシビリティ対応及び、動的に追加したバリデーション定義によるバリデーション、カスタムルール追加に対応

組み込みJSの「バリデーター」で以下の点を改善しました。

  • バリデーションのタイミングをフォーカス解除時に変更

  • 送信時のバリデーション失敗時に一番最初にエラーが発生した要素までスクロールする機能を追加

  • 送信時のバリデーション失敗時に一番最初にエラーが発生した要素をフォーカスする機能を追加

  • バリデーションエラーなフォーム要素の aria-invalid 属性を true にする機能を追加

  • JavaScript などで動的に追加したバリデーション定義でも動作するように変更

  • カスタムルールを追加できる機能を追加

  • コールバック関数を追加

    • バリデーション成功時

    • バリデーション失敗時

    • バリデーション後

config.js をカスタマイズすることで設定を変更することが可能です。

<script>
  ACMS.Ready(() => {
    ACMS.Config.validatorOptions = {
      /**
       * バリデーション結果のクラス名のプレフィックス
       */
      resultClassName: 'validator-result-',
      /**
       * バリデーション成功時に付与されるクラス名
       */
      okClassName: 'valid',
      /**
       * バリデーション失敗時に付与されるクラス名
       */
      ngClassName: 'invalid',
      /**
       * バリデーション失敗時にスクロールするかどうか
       */
      shouldScrollOnSubmitFailed: true,
      /**
       * バリデーション失敗時にフォーカスするかどうか
       */
      shouldFocusOnSubmitFailed: true,
      /**
       * バリデーション失敗時のコールバック関数
       */
      onInvalid: (results, element) => {
        ACMS.dispatchEvent('acmsFormInvalid', element, { results });
      },
      /**
       * バリデーション成功時のコールバック関数
       */
      onValid: (results, element) => {
        ACMS.dispatchEvent('acmsFormValid', element, { results });
      },
      /**
       * バリデーション完了時のコールバック関数
       */
      onValidated: (results, element) => {
        ACMS.dispatchEvent('acmsFormValidated', element, { results });
      },
      /**
       * 送信時のバリデーション失敗時のコールバック関数
       */
      onSubmitFailed: (results, form) => {
        ACMS.Dispatch.Utility.unloadAlert(window.document, ACMS.Config.unloadAlertMark, true);
        ACMS.dispatchEvent('acmsValidateFailed', form, { results });
      },
      /**
       * バリデーションのタイミング ( onBlur, onChange, false )
       */
      shouldValidate: 'onBlur',
      /**
       * バリデーションの再実行のタイミング ( onBlur, onChange, false )
       */
      shouldRevalidate: 'onChange',
      /**
       * 送信時のバリデーションを実行するかどうか
       */
      shouldValidateOnSubmit: true,
      /**
       * 送信時のバリデーションを実行させない送信ボタンに付与する属性
       */
      formnovalidateAttr: 'data-acms-formnovalidate',
      /**
       * カスタムバリデーションルール
       * @example
       * {
       *   'custom-rule': (val, arg, input, v) => {
       *     return val === 'custom-value';
       *   }
       * }
       */
      customRules: {},
    };
  });
</script>

ACMS.addListener 使用時に、event.detail でカスタムイベントのデータを取得できるように

従来、ACMS.addListener に登録したコールバック関数では、イベントオブジェクトの event.obj プロパティを使ってカスタムデータを受け取る仕様となっていました。

ACMS.addListener('custom-event', function (event) {
  const data = event.obj; // カスタムデータ
});

本バージョンから、標準的な Web API の仕様に則り、event.detail でも同様のデータが取得可能になりました。

ACMS.addListener('custom-event', function (event) {
  const data = event.detail; // より標準的な取得方法
});

API機能で新しいV2モジュールに対応

API機能が新しいV2モジュールに対応しました。V2モジュールによるAPI出力は、従来のAPIに比べて格段にわかりやすいレスポンスとなっており、より扱いやすくなっています。

設定は、管理画面 > コンフィグ設定 > API設定 から行えます。

API設定画面
API設定画面

エンドポイント

https://example.com/api/v2/モジュールID名/

下位互換性のない変更点


下位互換性のない変更点があります。Ver. 3.1 以下のバージョンからアップデートする際はお気をつけください。

標準CSSフレームワークの仕様変更

本バージョンでは ユニットのレイアウト方法を float を利用した方法から Flexbox 及び CSS Grid を利用した方法に変更しています。そのため、acms.css にて定義されているユニットのデフォルトスタイルが変更されています。

acms.css を利用してユニットのスタイルを定義している場合、Ver. 3.2.0 未満からアップデートする際には、アップデート前のバージョンの system テーマに同梱されている acms.css を利用中のテーマにコピーしてからアップデートを行ってください。

たとえば、以下のファイルをコピーします

  • themes/system/css/acms.css

  • themes/system/css/acms.min.css

これらを themes/ご利用テーマ/css/ に配置することで、既存のデザイン崩れを防ぐことができます。

なお、ユニットのスタイルを独自でCSSを記述して適用している場合は、この作業は不要です。


引用ユニットを埋め込みユニットに名称変更

これまで「引用ユニット」として提供されていた、OGP 情報を取得して外部コンテンツを表示するユニットを、より正確な表現である「埋め込みユニット」に名称変更しました。

あわせて、従来は blockquote タグで囲んでいた HTML 構造を、リンクとして適切に扱えるように a タグで囲む構造へ変更しています。これにより、外部コンテンツの埋め込み表現がより意味的に正しいマークアップになります。


HTML 構造の変更により、これまで「引用ユニット」に適用していた CSS スタイルが正しく反映されず、デザインが崩れる可能性があります。必要に応じてスタイルの修正を行ってください。


一部組み込みJSの廃止

本バージョンでは、以下の組み込みJSを廃止しました。これらのスクリプトをご利用中の場合は、アップデート前に代替手段へ切り替えるなどの対応をお願いいたします。

  • 「高さを揃える(js-autoheight)」を廃止

  • 「イメージビューアー(prettyPhoto)」を廃止

  • 「イメージビューアー(Highslide JS)」を廃止

  • 「アダプティブ・イメージ(js-adaptive_image)」を廃止

  • 「スライドショー(bxSlider)」を廃止

  • 「プレースホルダー(js-placeholder)」を廃止

  • 「現在のURLと一致するa要素を表示する(js-viewing-receptor, js-viewing-erase)」を廃止

  • 「クリックエリアを拡大する(js-biggerlink)」を廃止

  • 「SSLへの書き換え」を廃止

  • 「パラメータが指定されたdl要素をflashに置き換える(swfobject)」を廃止

  • 「セレクトボックス内の選択されている option要素のテキストを表示する(select2text)」を廃止

  • 「input要素の value 属性に指定したJavaScriptを実行する」を廃止

  • 「アクセス時に自動スクロール(ready scroll)」を廃止

  • 「リンク先をインラインフレームで表示する(copy right)」を廃止

  • 「送信ボタンからフォーム送信時に新規ウィンドウを開く(blank submit button)」を廃止

  • 「フォームのエンターによる送信禁止 (banEnterSubmitMask)」を廃止


cart@blog テーマを廃止

カート機能が実装されていた「cart@blog」テーマは廃止されました。代わりに、新しい「ECテーマ」をご利用ください。


コンフィグで設定するメタ情報を廃止(%{META_KEYWORDS}, %{META_DESCRIPTION})

使用されなくなっていたため、本バージョンで廃止しました。


トラックバック機能を廃止

本バージョンより、トラックバック機能を廃止しました。

従来は記事間で相互リンクを行う目的でトラックバック機能を提供していましたが、現在ではほとんど利用されておらず、またスパムの温床になるケースも多かったため、セキュリティとメンテナンス性の観点から完全に廃止することとなりました。


Facebookログイン機能を廃止

本バージョンより、Facebookログイン機能を廃止しました。

近年のFacebook側のAPI仕様変更や審査要件の厳格化により、運用コストや利用の安定性に課題があったため、今後の保守性とセキュリティの観点から、Facebookログイン機能の提供を終了することとなりました。


画像ユニットのexif情報設定機能を廃止

画像ユニットで選択された写真の情報を元に、exif 情報(カメラのモデル、焦点距離、絞り値、シャッタースピード、ISO感度、撮影日)を自動でキャプションに設定する機能を廃止いたしました。

既に登録されているデータに関しては今後も引き続き表示することが可能ですが、新規に exif 情報をキャプションに追加することはできなくなります。


Ver.2.7 以前のテキストユニット機能を利用する設定を廃止

Ver. 2.8 からテキストユニットで LiteEditor が利用できるようになりましたが、以下の JavaScript を適用することで、LiteEditor を無効にし、Ver.2.7 以前のテキストユニットを利用することができていましたが、今回この機能は廃止されました。

ACMS.Ready(function(){
  ACMS.Config.LiteEditorFeature = false;
});

各GETモジュールのコード変更

本バージョンでは、各GETモジュール(ACMS_GET系クラス)の内部コードを改善・整理しています。

そのため、標準のGETモジュール(例:ACMS_GET_Entry_Summary など)を継承してカスタマイズしているカスタムモジュールをお使いの場合、仕様の差異により不具合が発生する可能性があります。


バージョンアップ前に、カスタムモジュールの挙動を事前に確認・検証いただくことを推奨します。



SQLへルパの仕様変更

本バージョンでは、内部で使用しているSQLヘルパークラス(例:SQL::newSelect()SQL::newWhere()など)に仕様変更を加えました。これにより、以下のような影響がある可能性があります。


SQLヘルパを直接使用した独自処理やプラグインを実装している場合、カスタム部分の挙動を事前に確認・検証してください。



拡張アプリの互換性

Ver. 3.2.0 のリリース時点では、すべての拡張アプリが Ver. 3.2 に対応しているわけではありません。

現在、利用頻度の高い拡張アプリから順次 Ver. 3.2 に対応を進めております。


  • 一部の拡張アプリは Ver. 3.2 環境下で正常に動作しない可能性があります。

  • バージョンアップ前に、ご利用中の拡張アプリの対応状況をご確認ください。



Ver. 3.2.x で推奨されなくなる機能


以下内容が推奨されなくなります。将来バージョンで廃止される可能性がありますので、ご注意ください。

カート機能を非推奨化

カート機能を非推奨化しました。今後新しくカート機能を実装する場合は「Shopping Cart 拡張アプリ」をご検討ください。


一部組み込みJSの非推奨化


ping送信機能を非推奨化

ブログ更新時に外部サービスへ通知を行う ping 送信機能は、現在では多くのサービスで利用されていないことや、通知先の安定性・信頼性の観点から、今後の利用を推奨しない機能となりました。必要な場合は代替手段のご検討をお願いします。


一部モジュールを非推奨化

利用頻度の低いモジュールや役割が重複しているモジュールを一部非推奨化しました。

非推奨になったGETモジュール

  • Banner(代替: Media_Banner)

  • Category_EntryList(代替: Category_EntrySummary)

  • Entry_Headline(代替: Entry_Summary)

  • Entry_List(代替: Entry_Summary)

  • Entry_Photo(代替: Entry_Summary)

  • Plugin_Schedule(代替: Schedule)

  • Shop2_Cart_Empty(代替: Shopping Cart 拡張アプリ)

  • Shop2_Cart_List(代替: Shopping Cart 拡張アプリ)

  • Shop2_CartNotify(代替: Shopping Cart 拡張アプリ)

  • Shop2_Cart_Result(代替: Shopping Cart 拡張アプリ)

  • Shop2_Form_Address(代替: Shopping Cart 拡張アプリ)

  • Shop2_Form_DeliverList(代替: Shopping Cart 拡張アプリ)

  • Shop2_Form_Item(代替: Shopping Cart 拡張アプリ)

  • Shop2_Form_Order(代替: Shopping Cart 拡張アプリ)

  • Shop2_Form_PaymentList(代替: Shopping Cart 拡張アプリ)

  • Shop2_Form_RequestList(代替: Shopping Cart 拡張アプリ)

  • Shop2_Form_Tracking(代替: Shopping Cart 拡張アプリ)

非推奨になったPOSTモジュール

  • Ajaxリクエストでの ACMS_POST_2GET(代替: ACMS_POST_2GET_Ajax)

  • ACMS_POST_PingWeblogUpdate(代替: なし)

  • ACMS_POST_Shop2_Cart_Add(代替: Shopping Cart 拡張アプリ)

  • ACMS_POST_Shop2_Cart_Calculate(代替: Shopping Cart 拡張アプリ)

  • ACMS_POST_Shop2_Cart_Empty(代替: Shopping Cart 拡張アプリ)

  • ACMS_POST_Shop2_Form_Address(代替: Shopping Cart 拡張アプリ)

  • ACMS_POST_Shop2_Form_Backstep(代替: Shopping Cart 拡張アプリ)

  • ACMS_POST_Shop2_Form_Checkout(代替: Shopping Cart 拡張アプリ)

  • ACMS_POST_Shop2_Form_Confirm(代替: Shopping Cart 拡張アプリ)

  • ACMS_POST_Shop2_Form_Submit(代替: Shopping Cart 拡張アプリ)


ACMS_POST_2GET モジュール自体は非推奨になっていません。ポストインクルードhtmxリクエストでのモジュール指定の場合に限り「ACMS_POST_2GET」モジュールが非推奨になりました。代替モジュールとして「ACMS_POST_2GET_Ajax」をご利用ください。



リッチエディターを非推奨化

リッチエディターの利用が非推奨となりました。今後はブロックエディターをご利用ください。


テキストユニットで一部のタグセレクトを非推奨化

以下のタグセレクトは独立したユニットとして、利用できるようになったため非推奨になりました。

  • pre

  • none

  • markdown

  • wysiwyg


多言語ユニットを非推奨化

多言語ユニットは以下の理由から非推奨になりました。

廃止予定はありませんので、現在ご利用中の方はそのままお使いいただけますが、新規での利用は推奨いたしません

  • 仕様が複雑で開発や保守にかかるコストが高い

  • データ構造の特性上、再利用や拡張が難しい

  • 他のCMSと比べても独自性が強く、混乱を招きやすい

  • 運用や学習の難易度が高い


ユニットグループを非推奨化

グループユニットが追加されたことにより、ユニットグループ機能が非推奨になりました。

廃止予定はありませんので、現在ご利用中の方はそのままお使いいただけますが、新規での利用は推奨いたしません


新規インストール時はユニットグループが無効の設定でインストールされますが、アップデート時は互換性のため、ユニットグループが有効に設定されたままになります。


配置 v1 を非推奨化

配置 v2 が追加されたことにより、既存の配置機能を 配置 v1 と名称変更し非推奨化されました。

配置 v2 では既存の配置 v1 に存在した 「おまかせ」及び「全体」の設定項目が廃止され、「中央」「左」「右」の3項目のみの設定になりました。これにより、直感的にユニットの配置を行うことができるようになります。

配置 v1 については、廃止予定はありませんので、現在ご利用中の方はそのままお使いいただけますが、新規での利用は推奨いたしません


新規インストール時は配置 v2 の設定でインストールされますが、アップデート時は互換性のため、配置 v1 の設定のままになります。

テーマについて


Ver. 3.2.0 では 標準テーマが大きく刷新 され、新規案件では新しい標準テーマをベースに開発いただくことを推奨いたします。従来のテーマも引き続き利用可能ですが、最新の開発環境・UI をご活用いただくために、新標準テーマの採用をご検討ください。

Blogテーマ

従来テーマから大きな変更点はありません。

  • デザインの変更はありません

  • ブロックエディタ対応

  • ブログ向けテーマ

  • シングルブログ

blogテーマのデザイン

Memberテーマ

従来テーマから大きな変更点はありません。

  • デザインの変更はありません

  • ブロックエディタ対応

  • 会員機能を標準搭載

  • シングルブログ

memberテーマのデザイン。

Siteテーマ

従来からデザイン・実装ともに大きく変わっております。豊富なテンプレートを備えており、企業サイトとして利用しやすいテーマとなっております。

  • デザインの刷新(UTSUWAテーマベース)

  • インストール時点でマルチブログによる実装

siteテーマのデザイン

Beginnerテーマ

従来からデザイン・実装ともに大きく変わっております。Siteテーマを初心者向けにアレンジしたテーマです。a-blog cms の基本機能を学ぶのに最適で、HTML・CSS を学習したばかりの方でもカスタマイズしやすくなっています。

  • デザインの刷新(UTSUWAテーマベース)

  • シングルブログ

  • テンプレート継承機能を使わない実装

beginnerテーマのデザイン

Developテーマ

自作テーマのためのフロントエンドビルド環境と最小限の基本的なテンプレートファイルを含んだテーマです。メンテナンス性とパフォーマンスを高めたい場合におすすめです。

  • Tailwind CSS Alpine.js htmx Vite といったライブラリ・フレームワーク・ツールを利用

  • 一覧と詳細の基本テンプレートのほか、フォームのテンプレートを標準搭載

  • シングルブログ

developテーマのデザイン