この記事では、2023年09月14日にリリースされた「Ver. 3.1.0」の「エントリー編集機能」の新機能・改善点について紹介しています。

大きい変更として、WYSIWYGエディタが「CKEditor」から「Trumbowyg」に変更されました。またバージョン管理を使いやすいように仕様変更し、プロフェッショナル版以上でエントリーの排他制御機能（編集ロック）が追加されました。

新機能・改善点一覧

• CMS-6379 wysiwygエディタを「CKEditor」から「Trumbowyg」に変更
• CMS-6126 エントリーの排他制御機能（編集ロック機能）を追加（プロフェッショナルライセンス以上）
• CMS-6308 バージョン管理機能で、バージョンを上書き出来るように改善
• CMS-6136 バージョン管理でバージョンの公開予約機能を追加

CMS-6379 wysiwygエディタを「CKEditor」から「Trumbowyg」に変更

WYSIWYGエディタが「CKEditor」から「Trumbowyg」に変更されました。UIが変わってしまい申し訳ございませんが、機能としてはほぼ同じことが出来るようになっておりますのでご安心ください。

Trumbowyg 公式ページ

通常テキストユニットのプルダウンメニューで「WYSIWYG」を選択すると、入力フィールドが「Trumbowyg」に切り替わりますが、今までと同様カスタムフィールドなどのカスタマイズした入力欄にもWYSIWYGを適応できるようになっております。

任意の入力フィールドを「Trumbowyg」にする

HTMLの書き方

以下のようにクラスに「js-wysiwyg」を設定すると、設定された「textarea」が「Trumbowyg」による編集欄になります。

<textarea name="textarea" class="js-wysiwyg"></textarea>

＊ デフォルトでは、互換性を保つため今まで指定していた「js-ckeditor」でも発火するようになっています。詳しくは以下設定をご覧ください。

設定方法

config.js で設定を変更することができます。

wysiwygMark: 'textarea.js-wysiwyg,textarea.js-ckeditor,textarea.js-emoditor', // 発火するクラス名を指定します
wysiwygConfig:
{
  lang: 'ja', // 言語を指定します
  // resetCss: true, // 「true」で、trumbowygのリセットCSSを適応します
  autogrow: true, //「true」で、編集欄の高さを入力内容によって自動で大きくします
  tagsToRemove: ['script'], // sciriptタグを入力できないようにします
  btns: [ // エディタのボタン設定
    ['viewHTML'], // HTMLを表示します
    ['undo', 'redo'], // 一つ戻る、一つ進む
    ['formatting'], // 段落、見出しなどのフォーマット
    ['fontsize'], // フォントサイズ
    ['lineheight'], // ラインハイト
    ['strong', 'em', 'del'], // <strong>, <em>, <del> タグ
    // ['superscript', 'subscript'], // 上付き文字、下付き文字
    ['foreColor', 'backColor'], // 文字色、背景色
    ['link'], // リンク挿入
    ['justifyLeft', 'justifyCenter', 'justifyRight'], // 左寄せ、中央寄せ、右寄せ
    ['unorderedList', 'orderedList'], // リスト、番号リスト
    ['horizontalRule'], // 水平方向の罫線
    ['table', 'tableCellBackgroundColor', 'tableBorderColor'], // テーブル、テーブルのセルカラー、テーブルのボーダーカラー
    ['removeformat'], // スタイルを削除
    ['fullscreen'], // フルスクリーン
  ],
  tagClasses: {
    // table: 'class-name', // テーブルのクラス名
  },
},

設定を変更する時は「js/config.js」を直接上書きすのではなく、各テンプレートで以下のように変更ください。

<script>
ACMS.Ready(function() {
    ACMS.Config.autogrow  = false;
});
</script>

参考 - 組み込みJSの設定を変更する

CMS-6126 エントリーの排他制御機能（編集ロック機能）を追加（プロフェッショナルライセンス以上）

プロフェッショナル版以上で、エントリーにロックがかけれるようになりました。これにより意図しないエントリーの上書きでのデータ消失のリスクが減ります。

動作の流れ

エントリーを編集していて、保存ボタンを押すまでは、編集中のエントリーにロックが自動でかかります。

ロック中は、以下のスクリーンショットのように、エントリー一覧からロックがかかっていることが分かるようになっています。 自分がロックしている場合と、他のユーザーがロックしている場合で、違うアイコンが表示されるようになっています。

自分ではない他のユーザーが、編集中（ロック中）のエントリーの編集画面を開くと、以下のようなスクリーンショットが表示され、ロックしているユーザーや編集日時がわかるようになっています。

アラートを閉じれば、この状態でもエントリーの編集は可能になっておりますが、保存をすると以下スクリーンショットのエラーが出て保存できないようになっています。ではなぜ編集できるようになっているかというと、違うバージョンでの保存はロックがかかっていても保存はできるためになります。

エントリーの編集中に編集をやめページを離脱した場合はロックが残ってしまいます。このような時は、再度エントリー編集ページを開いて保存をするか、以下スクリーンショットにあるようにエントリー一覧から、ロックアイコンをクリックするこで、ロックを解除することが出来ます。

コンフィグ設定

管理ページ > コンフィグ > 機能設定に「エントリー同時編集ロック」のコンフィグがあります。

• 同時編集ロック機能：チェックをつけると機能が有効になり、外すと機能が無効になります。
• アラートのみ：チェックをつけると、ロックされている事のアラートは表示されますが、アラートを無視して保存できるようになります
• ロック有効期限：ロックの有効期限を設定します。この期間を過ぎたロックは自動的に解除されます。

CMS-6308 バージョン管理機能で、バージョンを上書き出来るように改善

いままでのバージョン管理では一度作成されたバージョンを変更することはできなかったのですが、Ver. 3.1 では、バージョンを上書きできるようになりました。

改善の経緯

バージョン管理機能は、承認機能と密接に関わっている機能になります。多段階の承認で、最初の承認がされた後に、バージョンを上書きできてしまうと、承認後の変更になるので、承認の意味がなくなってしまうという考えで、バージョンの上書きはできないようになっておりました。

ただ承認機能ができてからしばらくの期間を経て、記事公開まで何度も承認・修正を繰り返すことが多く、この仕様だと運用が大変になるという結論となりました。 今回バージョンを上書き出来るようになり、多段階認証で承認後でも記事の編集が出来るようになりましたが、承認画面でコメントを残してやり取りができ、最終的には最後の承認を通らないと記事は公開されないので、承認機能としての役割は十分果たしていると思います。

また承認機能を利用されない方が一般的だと思います。バージョンを上書きできることで、あらかじめ更新予定の記事をバージョンで作成しておくこともより便利になったと思います。

バージョン保存ボタン

Ver. 3.1 では、バージョンを表示中「このバージョンを保存」と「新規バージョンとして保存」の２つになりシンプルでわかりやすくなりました。

CMS-6136 バージョン管理でバージョンの公開予約機能を追加

いままでの機能だと、新規記事を公開予約することは出来たのですが、記事更新を公開予約する機能はありませんでした。＊1
なので更新内容をバージョンとして作成していても、切り替えるには手動でバージョンを切り替える必要がありました。

そこで、Ver. 3.1 ではバージョンの公開予約機能を追加し、記事の更新でも時間を指定してバージョンが切り替わる仕組みを用意しました。

＊1 正確には、エントリーコードが同じエントリーを２つ用意して、公開日時と掲載期間を切り替え日時に合わせれば可能でしたが、公開予約のたびにエントリーを増やさないといけませんでした

公開済みのエントリーで、更新内容を公開予約する手順

1. バージョンを切り替えたい日時を「公開日時」に設定します

2. 公開日時に設定と編集ができたら「新規バージョン」として保存します

3. さらに編集したい場合は「このバージョンを」を選択して保存します（何度もOK）

4. 編集が完了したら編集したバージョンの確認をします

5. 「このバージョンを公開予約」ボタンを押して公開予約する

以上、エントリー更新の公開予約手順でした。予定している時間になると、自動的にバージョンが切り替わり記事の更新が完了します。

また公開予約が完了すると、ダッシュボードの「公開／掲載終了予定の記事」にエントリーが出現します。キャッシュもバージョン切り替え時に自動的にクリアするので、キャッシュの時間設定は気にしなくても問題ありません。

エントリーの編集機能の改善紹介については以上になります。他 Ver. 3.1.0 の新機能・改善も多くありますので、ぜひご覧ください。

• 会員機能の詳細を見る
• memberテーマの詳細を見る
• 監査ログ機能の詳細を見る
• 管理機能改善の詳細を見る
• テンプレート機能改善の詳細を見る
• キャッシュ機能改善 & Webhook機能改善の詳細を見る

日々使いやすいシステムとなるよう改善を勤めておりますので、皆様からの貴重なフィードバック、お待ちしております。
今後とも a-blog cms のことをどうぞよろしくお願いいたします。

テンプレートファイルやイメージファイル、CSSファイル、JavaScriptのファイル等を1つのフォルダにまとめたものをテーマと呼びます。a-blog cmsのカスタマイズをする際に作るものがテーマであり、そのテーマを指定することでサイトのデザインや機能を変更することができます。

オリジナルのテーマを作る際に、一番最初に設定を変更する部分になります。管理ページ > テーマ にアクセスして「テーマセットの作成」ボタンをクリックしてください。（Ver. 3.1.0 以上では「このブログの初期テーマ」は非推奨になりました。）

上記のような画面が表示されます。分かりやすい名前（テーマフォルダ名と同名など）や説明（必要であれば）を入力します。このテーマセットを下の階層のブログでも選択したい場合にはグローバルにチェックを入れます。これらの内容は後から編集することもできます。「作成」ボタンをクリックしたら「一覧」ボタンをクリックしていったん「テーマセット管理」画面に戻り、作成したテーマセット名の右側の「テーマ設定」をクリックします。

themes ディレクトリ内にあるテーマディレクトリを指定します。ここでは beginner テーマを選択しています。

「テンプレート設定」はどのページにどのテンプレートファイルを使用するかを設定する部分です。テーマフォルダの中に template.yaml ファイルがあり、「テンプレート選択ファイル（template.yaml）の値を優先する」にチェックが入った状態であれば template.yaml での設定が優先されます。beginner テーマを含む公式テーマに同梱された template.yaml の設定は標準的なものなので、ここではその設定を使用します。

テーマセットはブログにもカテゴリーにも使用することができます。ここでは、ブログにテーマセットを使用する例を説明します。管理ページ > ブログ をクリックしてテーマセットを選択し、保存します。

カテゴリー毎にテンプレートを設定する場合は、テーマディレクトリ内にカテゴリーコードのフォルダと、その中に必要なテンプレートファイルを用意します。 また、エントリーコードのファイル名を用意することで特定のエントリー専用のテンプレートも設定できます。

news というカテゴリーには、/themes/beginner/news/index.html（一覧）と /themes/beginner/news/_entry.html（詳細）のテンプレートが用意されています。この場合であれば、news のカテゴリーの際は、これらのテンプレートファイルを利用することになります。

もし、詳細ページのテンプレートを他のページと共用の設定にするのであれば、/themes/beginner/news/_entry.html（詳細）のファイルを削除します。すると、newsより上の階層にあるファイルを参照するようになり、この場合 /themes/beginner/_entry.html（詳細）を利用するようになります。

表示テンプレートの確認は管理ボックスで行います。デバッグモードのとき、下図のようにテンプレートのファイル名が表示されます。

もしくは、調べたいテンプレートの場所で（Win: Ctrl, Mac: ⌘） + K を押してクイックサーチを起動し、%tpl と入力することでも確認できます。

(Win: Ctrl, Mac: ⌘) + K -> %tpl と入力

テーマディレクトリ（themes）には、テーマ設定で指定するテーマディレクトリ以外に、system という a-blog cms のシステムで利用しているテーマが入っています。さらに system の中に admin というディレクトリがあり、ここにすべての管理ページのテンプレートファイルが格納されています。

テーマ設定のページで設定されているテーマ（beginner）と、system のテーマは継承関係にあります。テーマ設定のページで設定されているテーマに呼び出すファイルが存在しない時は、system のファイルをチェックし、存在していればそのファイルを表示します。例えば、login.html や 404.html は beginner のテーマの中には存在していませんが、system のテーマに存在しているため、表示される仕組みになっています。

管理ページをカスタマイズする際は、テーマ作成の作法として、system のファイルを直接修正するのではなく、設定しているテーマにコピーして修正するようにしてください。

例として、/themes/system/404.html をコピーし /themes/beginner/404.html に設置して修正をします。

system のファイルを直接修正してしまうと、システムのアップデートの際に system ディレクトリも同時にアップデートされ、カスタマイズ部分が消えてしまう恐れがあります。ご注意ください。

blog@beginner

この記事では、2023年09月14日にリリースされた「Ver. 3.1.0」の「監査ログ」機能について紹介しています。

CMSで操作された内容や、CMSで発生したエラーがログとして残り管理画面から確認できるようになりました。 操作した人や、URL、HTTPヘッダーや、送信内容などログ毎に細かく情報が取れますので、何か問題が起きた時の調査に役立ちます。

＊ 操作ログはプロフェッショナルライセンス以上になりますが、何かしらエラーが起きた場合のログは、スタンダード版でも確認できるようになっております。

ログ確認画面

管理者でルートブログの管理ページにアクセスすると、右側メニューに「監査ログ」があります。クリックすると監査ログページにアクセスできます。

監査ログ画面では、ログの一覧が確認でき、ユーザーや期間、ログレベルで絞り込みが行えるようになっています。

詳細な情報を確認したい場合は、確認したいログの「詳細」ボタンを押すことで確認できます。 この画面では様々な情報が確認でき、右上の「クリップボードにコピー」ボタンを押すことで「JSONデータ」としてコピーすることができます。サポートを受ける際にも非常に有効な手段ですので、ぜひご利用ください。

ログレベル

ログのレベルは全部で以下のものがあります。「INFO（情報）」については、プロフェッショナルライセンス以上でのみ記録されるようになります。ユーザーの操作履歴を残したい場合は、プロフェッショナルライセンス以上をご検討ください。

通知機能とファイルへの保存

エラーが発生した際、問題にすぐに気がつけるように監査ログ機能には通知機能がついており、設定したログレベル以上のログが発生すると、メールで通知してくれます。 また、データベースにログは保存しているのですが、ファイルにも書き出すことが出来るようになっております。

設定方法

a-blog cms設置ディレクトリにある「.envファイル」で設定を行います。

# エラー通知
ALERT_EMAIL_FROM=info@example.com # エラー通知メールの送信元
ALERT_EMAIL_TO= # エラー通知メールの送信先。空の場合「UID」が一番小さい管理者アカウントのメールアドレスに送信します。
ALERT_EMAIL_BCC= # カンマ区切りで指定
ALERT_REPORTING_LEVEL=WARNING # エラー通知をする最低ログレベルを設定します。(DEBUG|INFO|NOTICE|WARNING|ERROR|CRITICAL|ALERT)

# ロガー
LOGGER_ROTATING_MAX_FILES=60 # ログローテーションの日数を設定します。
LOGGER_MODE=development # (development|production) productionに設定すると、ライセンス切れやデバッグモード時なども、ログとして残します

LOGGER_MODEはデフォルトだと「development」になっています。この状態だと、ライセンスに問題があった場合などログが残らず通知もしてくれないので、本番環境では必ず「production」に設定しましょう。

開発者向け

専用モジュールやHookなどを使用して、PHPをカスタマイズしている方もいると思います。 そんな方には、以下の方法を使うことで自分のプログラムにログを追加できるようになります。

基本的な使い方

• 保存したいログレベルのメソッドを呼び出す
• 第1引数: メッセージ文字列
• 第2引数: 保存したい情報（連想配列）

AcmsLogger::[ログレベル](string $message, array $info);

// 例
AcmsLogger::info('xxxを作成しました', [
  'hoge' => 'abc',
  'hoge2' => 200,
]);

use して使う場合

use Acms\Services\Facades\Logger;

Logger::info('xxxx');

コード例

メッセージだけ指定

\ AcmsLogger::critical('重大な問題により動作を停止しました');

例外をログとして残す

「Common::exceptionArray()」を第２引数に指定すると、例外の詳細な情報を渡してくれます。

try {
...
} catch ( \Exception $e ) {
    \AcmsLogger::warning($e->getMessage(), \Common::exceptionArray($e));
}

このログは通常のログと同じように表示や通知などに利用できますので、PHPでカスタマイズを行っている方はぜひお試しください。

監査ログ機能の紹介については以上になります。他 Ver. 3.1.0 の新機能・改善も多くありますので、ぜひご覧ください。

• 会員機能の詳細を見る
• memberテーマの詳細を見る
• エントリー編集機能改善の詳細を見る
• 管理機能改善の詳細を見る
• テンプレート機能改善の詳細を見る
• キャッシュ機能改善 & Webhook機能改善の詳細を見る

日々使いやすいシステムとなるよう改善を勤めておりますので、皆様からの貴重なフィードバック、お待ちしております。
今後とも a-blog cms のことをどうぞよろしくお願いいたします。

a-blog cms で更新できるページを作るためのHTMLファイルをテンプレートファイルといいます。このテンプレートファイルにモジュールを貼り付けていくことで、データベースに保存されている情報をHTMLに配置していきます。

エントリーの一覧の例：

<!-- BEGIN_MODULE Entry_List -->
<ul>
   <!-- BEGIN entry:loop -->
   <li><a href="{url}">{title}</a></li>
   <!-- END entry:loop -->
</ul>
<!-- END_MODULE Entry_List -->

この例では、<!-- BEGIN entry:loop -->から<!-- END entry:loop -->の間を繰り返し表示しています。また、モジュールのコメントタグについては実行後には削除され、通常のHTMLソース側には表示されません。

また、a-blog cms はテキストファイルであれば、HTML形式に限らずテンプレートにすることが可能です。

ここからはタッチモジュール内で使用する、部分的な表示の制御について見ていきましょう。

例えば、画像を表示させる際には、下のような記述をすることになります。

<img src="{photo1@path}" width="{photo1@x}" height="{photo1@y}">

しかし、ここで表示する画像を指定していない場合、下のようなタグがそのままHTMLに表示されてしまいます。

<img src="" width="" height="">

この不適切な img タグ自体を消すために、:veil という機能が用意されています。

<!-- BEGIN photo:veil -->
<img src="{photo1@path}" width="{photo1@x}" height="{photo1@y}">
<!-- END photo:veil -->

削除したい部分を <!-- BEGIN photo:veil --> から <!-- END photo:veil -->で囲むことで、その間にある変数 {photo1@path}, {photo1@x}, {photo1@y} のいずれも指定されなかった時に、囲まれていた部分全体を非表示にします。

:veil については、変数名:veil と決まっているものではなく、中の複数の変数が1つも書かれなかった時に動作することになります。

Ver1.6.1で追加された特定の変数が空の時に表示させる機能です。:veil の時の例に画像がなかった場合、 noimage.png を表示させるには以下のように記述します。

<!-- BEGIN photo:veil -->
<img src="{photo1@path}" width="{photo1@x}" height="{photo1@y}">
<!-- END photo:veil -->
<!-- BEGIN photo1@path:empty -->
<img src="noimage.png" width="100" height="100">
<!-- END photo1@path:empty -->

1点注意するべきところとしては、:veil の前の文字列は任意ですが、:empty はモジュールやカスタムフィールドで利用する変数 {photo1@path} を指定し photo1@path:empty ように記述しなければならない点です。:emptyブロックは:veilブロック内では動作しませんのでご注意ください。

IFブロックはVer.2.0から追加された機能です。 さきほど紹介した、:veil や :empty は、ブロック内のすべての変数がなかった時のみ表示または非表示の動作をしますが、IFブロックは指定した条件だった時に表示または非表示の動作をするブロックになります。

<!-- BEGIN_IF [%{CID}/eq/1] -->
<img src="{photo1@path}" width="{photo1@x}" height="{photo1@y}">
<!-- END_IF -->

例えば、IFブロックをカテゴリーIDを指す%{CID}を使って上のように記述すれば、カテゴリーIDが1の時しか、画像が表示されないようにすることができます。（%{CID}などのグローバル変数については後述します。）

さらに、その他にも条件を指定する時には、ELSE_IF を使って以下のように記述します。

<!-- BEGIN_IF [%{CID}/eq/1] -->
  <!-- カテゴリーIDが1の時に表示します -->
  <p>サンプルの本文です。</p>
<!-- ELSE_IF [%{CID}/eq/2] -->
   <!-- カテゴリーIDが1ではなくて、2だった時に表示します -->
  <p>サンプルの本文です。</p>
<!-- ELSE -->
  <!-- さらに上の条件が一致しなかった時に表示します -->
  <p>サンプルの本文です。</p>
<!-- END_IF -->

いくつかのテンプレートファイルができてくると、共通の記述を1つにまとめて管理したいというニーズが出てくるかと思います。このような時は共通部分を別のテンプレートファイルに記述し、以下のような記述でインクルード（外部ファイルを読み込む）を設定することができます。

@include("/include/sample.html")
@include("http://www.example.com/include/sample.txt")

{title}のような変数はモジュールの中に記述されている必要がありますが、% を使って%{BLOG_NAME}などと表すグローバル変数はテンプレートのどこに記述しても出力されます。実行順序としては、グローバル変数、インクルード、モジュールの順となります。

例：

• %{BLOG_NAME} 表示ページが属するブログの名前
• %{CATEGORY_NAME} 表示ページが属するカテゴリーの名前
• %{KEYWORD} URLコンテキスト上で、指定されたキーワード
• %{CID} カテゴリーID
• %{EID} エントリーID

また、グローバル変数を利用したインクルード機能を使うと、表示ページのカテゴリー毎に違うテンプレートファイルを読み込むことも可能になります。

@include("/admin/entry/category%{CID}.html")

このような組み合わせでテンプレートのカスタマイズをするケースは多々あります。特定のカテゴリー内でのみ利用したいカスタムフィールドを書く際には、大事なテクニックになります。

データ出力する間にプログラムでフィルタリング処理をする機能を校正オプションと呼びます。表記については、{data}[option]のように変数に続いて [ ] 内にオプションを定義します。ここでは、その中でもいくつかの例をご紹介します。

{text}[trim(13, '...')]

{number}[number_format]

日付から和暦の年を算出して表示します。（1985/08/26[wareki] -> 昭和60年）

{date}[wareki]

日付を誕生日としたときの現在の年齢を表示します。（1985/08/26[age] -> 23）

{date}[age]

また [ ] 内で | を利用することで、複数の校正オプションを設定することもできます。

{var}[escape|nl2br]

校正オプションがない変数はすべてエスケープしてデータが編集されますが、校正オプションを何か一つ設定すると エスケープが自動で指定されません。 エスケープが必要な場合は必ずescapeをパイプでつなげてください。

またセキュリティ対策として、お問い合わせフォーム内の TEXTAREA では、一般的に改行を <br> に置き換える処理をしなければなりません。この際には上記のように escape を必ず設定してください。

Ver. 2.8 からテンプレートを継承できる機能が追加されました。Beginnerテーマでは利用しておりませんが、extend@beginner では同様の構造で継承機能を使ったテンプレートの記述ソースが確認できます。※Beginnerテーマ以外のテーマではテンプレートの継承機能を使った記述になっています。