Ver. 3.2.0 ベータ版を公開しました

大変お待たせいたしました。現在開発中の次期バージョン Ver. 3.2.0 の ベータ版 を公開いたします。

主要な機能が一通り実装できたため、アルファ版からベータ版へ移行いたしました。 今後は引き続き機能の改善を行いつつ、動作の安定性向上と不具合の修正に取り組み、今夏の正式リリースを予定しております。

Ver. 3.2.0 ベータ版を試す方法

ablogcms.io で簡単に試す

ablogcms.io で簡単に試すことができます。以下URLよりお試しください。

https://www.ablogcms.io/v32-beta/

アップデートの場合

private/config.system.yaml に、以下コードを追記ください。

system_update_repository: http://www.a-blogcms.jp/api/update-edge.json

次に管理画面 > コンフィグ > 機能設定のオンラインアップデートで「マイナーバージョンも含める」にすることで、メニューから Ver. 3.2.0-alpha にアップデートできるようになります。

新規インストールの場合

新規でインストールする場合は、以下よりURL新規パッケージをダウンロードしてお使いください。

php7.4 〜 php8.3

https://developer.a-blogcms.jp/_package/3.2.0-beta.0/acms3.2.0-beta.0.zip

新機能

• CMS-6817 WebP画像をそのままアップロードできるように対応
• CMS-6895 カスタムユニットのデータがテキスト置換の対象外になってしまう問題を改善（シリアライズをしないように改善）
• CMS-6915 自動でシステム更新（パッチバージョンのみ）をする機能を追加
• CMS-6894 ログインユーザーの最終アクセス時間をダッシュボードやユーザー・会員一覧で確認できるように改善
• CMS-6920 WordPress eXtended RSS 形式のエントリーエクスポート機能を追加
• CMS-6930 ブロックエディターの組み込みJSを新しく用意 & ブロックエディターの新ユニットを追加
• CMS-6979 Twigを利用できるテンプレート機能を追加
• CMS-6821 エントリー一覧画面のUI・機能を刷新
• CMS-7097 モジュール一覧画面をリッチなUIで操作できるよう改善
• CMS-7053 Vite 連携機能を追加
• CMS-7034 media, archives, storage, cacheなどのストレージをローカルではなくAWS S3に保存できる仕組みを用意
• CMS-7147 Tailwind CSS, htmx, Vite, Alpine.js がデフォルトで利用できる develop テーマを追加（既存の develop テーマは削除）
• CMS-7148 組み込みJSのバリデーターをアクセシビリティ対応及び、動的に追加したバリデーション定義によるバリデーション、カスタムルール追加に対応
• CMS-7149 ACMS.addListener 利用時に、 event.detail プロパティでイベントのカスタムデータを取得できるように改善
• CMS-7169 カート機能を非推奨化 & cart@blog テーマの廃止
• CMS-7183 メディアモーダルの代替テキストを改行できるように修正
• CMS-6821 エントリー一覧画面のリニューアル
• CMS-7197 組み込みJSの削除・非推奨対応
• CMS-7198 コンフィグで設定するメタ情報を廃止（%{META_KEYWORDS}, %{META_DESCRIPTION}）
• CMS-7199 ping送信機能を非推奨に変更
• CMS-7200 トラックバック機能を廃止
• CMS-7201 利用頻度の低いモジュールや役割が重複しているモジュールを非推奨に変更
• CMS-7211 メディア一覧の検索条件で、現在のブログ以下の表示を追加と、ファイル名検索をキーワード検索に変更
• CMS-7218 組み込みJSに「htmx」を追

オフキャンバスメニューとは、画面全体を右、もしくは左にスライドさせ画面外に隠れていたメニューを表示させる機能です。
この機能を使用するには、組み込みJSと合わせてacms.cssもしくはacms-admin.cssのどちらかを読み込む必要があります。

デフォルト設定

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて：設定を編集する」を参照してください。

offcanvas     : {
    'fixedHeaderMark'  : '.js-offcanvas-header',
    'openBtnMark'      : '.js-offcanvas-btn',//offcanvasを開くボタンのクラス
    'openBtnRMark'     : '.js-offcanvas-btn-r',//offcanvasを右方向に開くボタンのクラス
    'openBtnLMark'     : '.js-offcanvas-btn-l',//offcanvasを左方向に開くボタンのクラス
    'closeBtnMark'     : '.js-offcanvas-close',//offcanvasを閉じるボタンのクラス
    'offcanvasMark'    : '.js-offcanvas',//offcanvasが適応されるエリアのクラス
    'breakpoint'       : 767, //max-widthで指定,'all'を指定すると全画面,
    'throttleTime'     : 100
}

使い方

オフキャンバスメニューを使用したHTMLの構造は例えば以下のようになります。

<ul class="js-offcanvas" id="offcanvas">
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
</ul>
<a class="js-offcanvas-btn js-offcanvas-btn-r" href="#offcanvas">メニューを表示</a>

まず、オフキャンバスメニューのコンテンツとして表示したいHTML要素に、offcanvasMarkで指定したセレクターを指定します。
（※画面幅がbreakpointで指定した値よりも数値が小さい場合はoffcanvasMarkで指定した範囲のHTMLが画面上に表示されなくなるので注意してください ）

さらに、js-offcanvas-btnのclass属性が適用された要素に対してdata-target属性もしくはhref属性に、オフキャンバスのコンテンツとして表示したいHTML要素のid名を指定する必要があります。

a-blog cmsでは、タブ型のメニュー表示にする設定が標準で実装されています。（Ver. 1.3.0より）

タブ表示は他に「js tabs」があります。js tabsはタブとタブパネル（タブの内容）が同じ親要素内に入っているのに対し、acms tabsはタブとタブパネルの親要素が必ずしも同じでなくてもよい、という違いがあります。acms tabsはタブのhref属性値（#を除く）とタブパネルのid属性値が同じであれば、それぞれが違う親要素の中にあってもタブ表現が可能です。

デフォルト設定について

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて：設定を編集する」を参照してください。

//----------
// acms tabs
acmsTabsMark     : '.js-acms_tabs',
acmsTabsConfig   :
{
    tabClass     : 'js-acms_tab',
    activeClass  : 'js-acms_tab-active',
    readyMark    : 'js-ready-acms_tabs'
},
acmsTabsArray  : [
//    {
//        'mark'    : '',
//        'config'  : {}
//    }
],

設定をカスタマイズする

config.jsのデフォルトの設定からカスタマイズする場合、JSファイルに下記のように記述します。

ACMS.Ready(function(){
  ACMS.Config.acmsTabsMark = '.js-sample-tabs';
  ACMS.Config.acmsTabsConfig = {
    tabClass     : 'js-sample-tab',
    activeClass  : 'js-sample-tab-active',
    readyMark    : 'js-sample-ready-tabs'
  }
});

配列で使用する方法

acmsTabsArrayでは配列を渡せるようになっているので、複数の設定を指定したいときに使います。 markにはacmsTabsMarkを、configにはacmsTabsConfigの設定を指定できます。

acmsTabsArrayを使って設定を追加する場合にはJSファイルに以下のように記述します。

ACMS.Ready(function(){
  ACMS.Config.acmsTabsArray.push({
    mark: '.js-sample-tabs',
    config: {
      tabClass.    : 'js-sample-tab',
      activeClass  : 'js-sample-tab-active',
      readyMark    : 'js-sample-tab-ready'
    }
  });
});

HTMLとCSSの記述

HTML

指定したクラスをHTMLに記述します。

例）acmsTabsMarkで .js-acms_tabsと指定した場合

タブ部分にクラス js-acms_tabs を付与します。また、タブ部分のa要素のhref属性は頭に#をつけ、タブの内容部分にid名として同じ名称を付与します。

<ul class="js-acms_tabs">
  <li><a href="#tab2-1">タブ1</a></li>
  <li><a href="#tab2-2">タブ2</a></li>
  <li><a href="#tab2-3">タブ3</a></li>
</ul>
<div id="tab2-1">
	タブ1の内容
</div>
<div id="tab2-2">
	タブ2の内容
</div>
<div id="tab2-3">
	タブ3の内容
</div>

CSS

必要に応じてスタイルを指定します。

例）

.js-acms_tab-active {
  background-color: #CCCCCC;
}

3. デモ

a-blog cmsでは、タブ型のメニュー表示にする設定が標準で実装されています。（Ver. 1.3.0より）

デモ

デフォルト設定について

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて：設定を編集する」を参照してください。

//------
// tabs
tabsMark     : '.js-tabs',
tabsConfig :
{
    collapsible : false,
    cookie      : null,
    fx          : {
        //opacity : 'toggle', // クロスフェード
        //height  : 'toggle', // 縦スライド
        //duration: 'fast' // ( 'fast' | 'normal' | 'slow' | '' )
    }
},
tabsArray  : [
//    {
//        'mark'    : '',
//        'config'  : {}
//    }
],

設定のカスタマイズ

config.jsのデフォルトの設定からカスタマイズする場合、JSファイルに下記のように記述します。

ACMS.Ready(function(){
  ACMS.Config. tabsMark = '.js-sample-tabs';
  ACMS.Config.acmsTabsConfig = {
    collapsible : false,
    cookie      : null,
    fx          : {
        //opacity : 'toggle', // クロスフェード
        //height  : 'toggle', // 縦スライド
        //duration: 'fast' // ( 'fast' | 'normal' | 'slow' | '' )
    }
  }
});

配列で使用する方法

tabsArrayでは配列を渡せるようになっているので、複数の設定を指定したいときに使います。
markにはtabsMark を、configにはtabsConfig の設定を指定できます。

tabsArrayを使って設定を追加する場合にはJSファイルに以下のように記述します。

ACMS.Ready(function(){
  ACMS.Config.tabsArray.push({
    mark: '.js-sample-tabs',
    config: {
      collapsible : false,
      cookie      : null,
      fx          : {
        //opacity : 'toggle', // クロスフェード
        //height  : 'toggle', // 縦スライド
        //duration: 'fast' // ( 'fast' | 'normal' | 'slow' | '' )
      }
    }
  });
});

HTMLとCSSの編集

HTML

指定したクラスをHTMLに記述します。

例）tabsMarkで「.js-tabs」と指定した場合

タブ部分とタブパネルを含んだ親要素にクラス.js-tabsを付与します。タブ部分のa要素のhref属性は頭に#をつけ、タブの内容部分にid名として同じ名称を付与します。

<div class="js-tabs">
  <ul>
    <li><a href="#tabA">タブA</a></li>
    <li><a href="#tabB">タブB</a></li>
    <li><a href="#tabC">タブC</a></li>
  </ul>
  <div id="tabA">
    <p>タブAの内容です。</p>
  </div>
  <div id="tabB">
    <p>タブBの内容です。</p>
  </div>
  <div id="tabC">
    <p>タブCの内容です。</p>
  </div>
</div>

CSS

必要に応じてスタイルを指定します。

例）

.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
  margin-bottom:0;
  padding-bottom:1px;
}
.ui-tabs .ui-tabs-nav li {
  border-bottom:0 none !important;
  float:left;
  list-style:none outside none;
  margin:0 0.2em 1px 0;
  padding:0;
  position:relative;
  top:1px;
  white-space:nowrap;
}