この記事では、2023年09月14日にリリースされた「Ver. 3.1.0」で追加された「member」テーマついて紹介しています。

Ver. 3.1 で会員機能が大幅にアップデートされましたので、会員機能を使った新しいテーマ「member」を新たに追加いたしました。

新機能・改善点一覧

• CMS-6461 会員機能が入った、memberテーマを追加
• CMS-6477 ログイン中だけエントリーの続きを閲覧できる会員限定記事機能を追加

CMS-6461 会員機能が入った、memberテーマを追加

「member」テーマは、メディアサイトベースの作りになっており、会員機能を持ち、会員限定の記事を用意できるテーマとなっております。 基本的にコンテンツは記事のみになりますので、作りはそこまで難しくなく、会員サイトを作りたい場合のベースとして便利なテーマになっております。

また「member」テーマは、継承はしていませんが「UTSUWA」テーマベースで開発されていてパーツなどは「UTSUWA」と同じになっております。

memberテーマの主な機能

• メディアサイト
• カテゴリーによる記事の分類
• 会員登録機能
• マイページ（シークレットカテゴリー）
• 会員情報の変更機能（プロフィール、メールアドレス、パスワードなど）
• 会員限定記事機能
• SNS認証によるサインイン・会員登録
• お問い合わせフォーム

CMS-6477 ログイン中だけエントリーの続きを閲覧できる会員限定記事機能を追加

会員限定記事のカスタマイズ方法について紹介いたします。

エントリー編集画面に会員限定設定を表示させる

管理ページ > 編集画面 > 編集設定の「会員限定」の表示にチェックをつけます。これによりエントリーを会員限定記事に設定することができるようになります。

エントリーを会員限定にする

次に会員限定にしたい記事を編集します。エントリーの編集画面に移動すると「 会員限定記事にする」チェックボックスがあるので、チェックをつけます。

チェックをつけると、普段は「続きを読む」の位置を設定するバーが「以下ユニットが会員限定になります」と表示が変わります。このバー以下が会員限定のコンテンツになるので、好きな位置にバーを動かしましょう。

会員限定部分の表示テンプレートを用意

以上の設定ができると、エントリー詳細で会員限定コンテンツ部分が表示されなくなります。 このままだと会員限定コンテンツが表示されないので、会員限定コンテンツ部分のテンプレートを用意する必要があります。

ログインしている場合は、続きのユニットをJSで読み込み、ログアウトしている場合はサインインを促すテンプレートを用意します。

memberテーマの「include/parts/members-only.html」か、systemテーマの「include/members-only.html」を参考にください。

<!-- BEGIN continueLink -->
<div class="js-members-only-entry" data-eid="%{EID}" data-page="%{PAGE}" data-display="block" style="display: none;" >
  <div class="read-more entry-container">
    <div class="acms-alert acms-margin-top-small acms-margin-bottom-large">
      <p class="acms-margin-none acms-margin-top-large acms-margin-bottom-large acms-text-center">以降は会員限定コンテンツです。<br>続きを読むためには会員登録が必要になります。</p>
      <div class="acms-text-center">
        <p class="acms-margin-none acms-margin-bottom-medium">
          <a href="%{HOME_URL}%{SIGNUP_SEGMENT}/" class="acms-btn acms-btn-primary acms-btn-large">今すぐ無料で登録</a>
        </p>
        <form action="" method="post" class="acms-margin-bottom-large">
          <input type="hidden" name="bid" value="%{BID}" />
          <input type="hidden" name="eid" value="%{EID}" />
          <button type="submit" name="ACMS_POST_Member_SigninRedirect" class="acms-btn acms-btn-large">サインインして続きを読む</button>
        </form>
      </div>
    </div>
  </div>
</div>
<!-- END continueLink -->

このテンプレートをエントリー詳細のEntry_Bodyで読み込みます。 読み込む位置は、ユニット表示に下になります。

<!-- ユニット -->
<!-- BEGIN unit:veil -->
@include("/include/unit.html")
<hr class="clearHidden" />
<!-- END unit:veil -->

<!-- 会員限定 -->
@include("/include/members-only.html")

これで、会員限定設定の基本は完了になります。ログインしている時は全てのユニットが見え、ログアウトしている時は、サインインを促す表示がされると思います。

エントリー一覧や詳細に会員限定ラベルを表示

Entry_Summary系モジュールやEntry_Bodyモジュールに会員限定記事の場合に表示するブロックが新しく追加されました。これを利用して会員限定記事にはラベルをつけると分かりやすくなります。

<!-- BEGEIN entry:loop -->
...
<!-- BEGIN membersOnly --><span class="...">会員限定</span><!-- END membersOnly -->
...
<!-- END entry:loop -->

会員限定記事の一覧作成

必須の設定ではありませんが、サイトに会員限定記事の一覧を出したい場合もあると思います。ここでは会員限定記事のみの一覧の出し方を解説します。

といってもEntry_SummaryやEntry_Bodyモジュールの設定を１つ変更するだけです。

Entry_SummaryやEntry_BodyのモジュールIDの「表示設定」で、「会員限定のエントリーのみ表示する」にチェックをつけてください。 あとは、通常のモジュールの使い方で会員限定記事のみ表示することができるようになります。

以上、会員限定記事機能の紹介でした。

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

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

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

ルールという機能を利用すると、条件を指定してコンフィグまたモジュールIDを設定できるようになります。例えば、特定のデバイスやブラウザという条件で設定したり、特定のカテゴリーのみという条件で設定したい時に、このルール機能が役立ちます。

グローバルルールという機能を利用すると、ルールを設定した子ブログに同様のルールを適用し、多くの子ブログが存在するサイトの設定を一元化することができます。

ここでは、具体的なルール機能の活用例を3つ見ていきましょう。

a-blog cms では、スマートフォン専用のプラグインや専用のプログラムがあるというわけではなく、ルール機能によってブラウザの名前（USER-AGENT）をチェックし、設定を切り換えて表示します。

このルールの設定を行った後に、一覧の「コンフィグ」ボタンをクリックすると、スマートフォンで表示する時のコンフィグについて個別で設定することができます。

ルール機能の主な用途としては、テーマの設定を変更することが挙げられます。この場合、PCとスマートフォンでは同じURLで違ったテーマを表示することができるようになります。a-blog cms で標準搭載のキャッシュ機能もルールによって別で処理されますので、キャッシュを気にする必要もありません。

ブラウザの名前（USER-AGENT）だけでなく、特定のカテゴリー内のみでユニットの細かな設定を変更することもできます。例えば「商品紹介」と「お知らせ」では、ユニット設定の内容や、ユニット追加ボタン自体の設定、テキストタグセレクトの内容を適切に変更しカスタマイズすることで、表示する設定を区別することができます。

コンフィグによる大きな変更ではなく、限定的にモジュールIDの設定だけを変更することもできます。例えば、パソコンの時に表示するバナーと、スマートフォンの時に表示するバナーについて違うサイズやデザインのものを設定することができます。

利用するには、管理ページ > ルール のページに移動し、変更したいルール名の「モジュールID」ボタンをクリックしてください。モジュールID一覧と同じようなページに移動します。

変更したいルール名の設定を確認したい場合は、左上のプルダウン、もしくはトピックパスから確認できます。

このルール機能の中には「期間」の設定ができるものがあります。これを利用してコンフィグを変更することで、例えば年末年始のみ特定のテーマを適用することも可能になります。

この記事では、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