いつもお世話になっております。

a-blog cms では、より使いやすいプロダクトを目指して日々改善を行っています。
今回は次期マイナーバージョンである、a-blog cms Ver. 3.2.0 で予定している機能追加や機能改善をまとめてご紹介します！

実際のリリースされた製品では内容や機能が違っている可能性がございます。

新機能

Ver. 3.2 で予定している新機能についてです。全く新しい機能というわけではなく既存機能を改善・より便利にする機能追加となります。

エントリー編集画面の改善

一番よく使用するエントリーの編集画面について以下改善を予定しております。より簡単・便利にエントリー編集ができるようになります。

デフォルトのテキストユニットを、よりリッチで使い易いエディタに改修（メディア挿入・簡易的なwysiwyg機能）
ユニットグループ機能改善（グループ化できる専用ユニットの用意）
ユニットの複製機能を追加
UI調整（全体的にボタンが多いのでシンプル化）

アップデート自動化

フィックスバージョンに限り、自動でアップデートを行うオプションを用意いたします。これにより、CMSアップデートの手間が少なくなり運用コストを削減できます。

Movable Type形式 or WordPress形式でのエクスポート機能

現状以下の形式のものをa-blog cmsにインポートできるようになっていますが、逆にエクスポートする機能は用意されていませんでした。

CSVインポート
Movable Type形式のインポート
WordPress形式のインポート

この状況はもし他のCMSに乗り換える場合の出口として選択肢がなく、お客様にとっても不安材料になるため、Movable Type形式かWordPress形式のエクスポート機能を用意することになりました。まだ形式は決定していませんが、例えば Movable Type形式でエクスポートできれば、WordPressにもインポートはできるので、柔軟なエクスポート形式を検討したいと思います。

開発者向け新規テーマの追加

新しい開発者向けの新規テーマを追加予定です。既存の「develop」テーマを改良する形を予定しております。新しいテーマの技術スタックは以下のものを予定しております。

Vite（ビルドツール）
Tailwind CSS（CSSフレームワーク）
Alpine.js（軽量フロントエンドフレームワーク）
HTMX（インタラクティブUIを実現するJavaScriptライブラリ）

また「develop」テーマと違い、標準の状態でトップ、一覧、詳細ページのテンプレートを用意したいと思います。

機能改善

Ver. 3.2.0 では日々ユーザーの皆様からいただくご意見をもとに、いくつか現状の機能の改善を予定しています。

一覧系管理画面の改善

開発・運用でよく使用する一覧系管理画面について、よりリッチなUIで操作できるような改善を予定しております。

現状の問題点

操作数が多い
ボタンが多くわかりずらい
一覧から詳細に移動したあと、元に戻ると絞り込みが外れてしまう
検索しずらい

対応予定ページ

モジュール一覧
エントリー一覧
カテゴリー一覧

カスタムユニットのデータがシリアライズされていてる問題の修正

現状カスタムユニットのデータをシリアライズして保存しているため「一括テキスト置換」に対応できていないなどの弊害があります。これを通常のカスタムフィールドと同じ形式で保存するようにし、一括でテキスト置換ができるよう改善いたします。

WebPアップロード対応

現状は、次世代画像フォーマットの「WebP」画像の生成には対応していますが、「WebP」画像のアップロードには対応していません。昨今「WebP」の普及からブラウザから画像をダウンロードすると「WebP」画像になっていてアップロードできないということも増えてきたため「WebP」画像のアップロードに対応したいと思います。

その他の機能改善

カスタムフィールドメーカー出力でtable以外のスタイル対応
利用頻度の低いモジュールの非推奨化
コンバーターの拡張機能の追加
会員一覧に最終セッション時間を表示できるように改善

リリース時期

2024年秋・冬にベータ版を用意、2025年初頭にはリリースしたいと考えております。

まとめ

次期マイナーバージョンである、a-blog cms Ver. 3.2.0 で予定している機能追加や機能改善についての情報をお届けいたしました。ユーザーの皆様に喜んでいただける CMS を目指して企画・開発を続けてまいりますので楽しみに待っていただけると幸いです。

ご意見・ご要望は Discordコミュニティ、公式ツイッターからお気軽にご連絡ください！
引き続き a-blog cms をよろしくお願いいたします！

WebP画像対応

Ver. 2.11.22 より、次世代画像フォーマット「WebP」画像の生成に対応しました。
さらに Ver. 3.2 以降では、WebP画像ファイルをそのままアップロードできるよう改善されています。

ここでは、WebP画像の利用条件・確認方法・設定方法について説明します。

対応ブラウザ

WebP画像は主要な最新ブラウザでサポートされています。

Chrome
Firefox
ChromiumベースのEdge
Safari（iOS含む）14以降

最新の対応状況は以下で確認できます。
Can I use WebP?

サーバーでWebP画像が生成できるか確認する

WebP画像を生成するには、サーバー上のPHP拡張（GDまたはImagick）が対応している必要があります。

以下のような info.php をサーバーに設置します。

<?php
  phpinfo();

ブラウザでアクセスし、表示される情報の中から GD または Imagick の項目に WebP が含まれているか確認してください。

設定方法

config.system.yaml の確認

config.system.yaml にて以下の設定を確認します。

webp_support: on # on | off webp画像を生成するかどうかを設定

off になっている場合は on に変更してください。

WebP画像生成の確認

カスタムフィールド・ユニット・メディアに画像を登録すると、同じファイル名で拡張子が .webp の画像が生成されます。

生成されていればWebP対応が有効です。

.htaccess の設定

WebP未対応のブラウザも存在するため、.htaccess で「対応ブラウザにのみWebP画像を返す」設定を推奨します。（デフォルトで設定されています）

# webpフォーマット画像対応
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1]
<IfModule mod_headers.c>
    Header append Vary Accept env=REDIRECT_accept
</IfModule>
<IfModule mod_mime.c>
    AddType image/webp .webp
</IfModule>

CDNなどでキャッシュを利用する場合、Header append Vary Accept を必ず指定してください。
指定しないと、未対応ブラウザでもWebP画像が返ってしまう恐れがあります。

WebP 画像をそのまま、または変換してアップロードする

Ver. 3.1 以下のバージョンではWebPファイルを直接アップロードすることはできませんでしたが、Ver. 3.2 以降では、WebP画像をそのままアップロード可能 になりました。

また、jpeg・png画像をWebP画像に変換してアップロードする機能が追加されました。

設定は private/config.system.yaml で行います。

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

on: JPEG/PNG 画像を自動的にWebPに変換
off: 変換せず、アップロードされたままの形式を保持

まとめ

Ver. 2.11.22 からWebP自動生成に対応
Ver. 3.2 からWebPそのままアップロードに対応
Ver. 3.2 から jpeg・pngをWebPに変換するオプションが追加
サーバーのGDまたはImagickがWebP対応している必要あり
.htaccessでブラウザ判定を行い、キャッシュ対応を必ず設定すること

WebPを利用することで画像容量を大幅に削減でき、表示速度改善が期待できます。
サーバーが対応している場合は、積極的に導入してください。

Ver. 2.8.82 をダウンロード

大阪で勉強会を開催しました

2024年5月22日(水) に大阪市北区の会議室をお借りして、htmx初心者向け勉強会（a-blog cms 勉強会 in 大阪 2024/05）を開催しました。平日のお昼に、お仕事の一環として参加された参加者は、9人での勉強会ということになりました。

前半：htmx だけの勉強会

最近、a-blog cms との連携についてブログの記事を公開したり、ablogcms.io の選択テーマの中に出てくる htmx とは、どんなものなのかをご紹介を行いました。

htmx 自体簡単な属性を設定するだけで実行が可能なライブラリという事で、基本のご紹介というだけだと短時間で終わってしまうので

後半：a-blog cms と htmx との連携について

実際に、a-blog cms と htmx の連携でどう実装していくのかを事例を交えてしっかりご紹介しました。

Ver. 2.11.72 をダウンロード

a-blog cms Ver. 3.2.0 で予定している機能追加や機能改善について（ロードマップ）

新機能