新しいマイナーバージョン 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() 関数の引数について

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

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

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

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

• Windows / Linux：Ctrl + 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関数 touch() を使って呼び出します。関数の戻り値は真偽値になっているので、if文をつかい表示・非表示を行います。

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

Twigによる実装メリット

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

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

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

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

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

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

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

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

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

グループユニットを追加

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

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

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

主な特徴・機能

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

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

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

• id・タグの設定が可能に
  グループに id や section タグを設定でき、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形式という標準フォーマットでエクスポートできるため、他の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）

バケットは PUBLIC と PRIVATE の２つご用意ください。media archives が PUBLIC なバケットを参照し、CMSからのみアクセスする storage や cache は PRIVATE なバケットを参照するようになっています。

組み込み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）