a-blog cms Ver.2.5.0 実装に役立つ小さな新機能6つ

Published


4月23日(木)に、a-blog cms Ver.2.5.0 がリリースされました。目玉機能はレイアウトモジュールや、Cookieを使ったユーザー別のコンテンツの切り替えなどのマーケティングなところが挙げられるのですが、目玉機能は他の方のご紹介に任せて、私からは地味だけど、これからの制作に役立っていきそうな便利な小さな機能をご紹介したいと思います。

組み込みJSのjs-autoheight のレスポンシブ対応

組み込みJSのjs-autoheight のレスポンシブ対応 がついにできるようになりました!いままで、PCでは高さを同じにして、スマートフォンの時はなりゆきの高さにするためにはJSでIF文を書かなくてはいけなかったのですが、その必要がなくなりました。

各アイテムに .js-autoheight-rと記述すれば実装ができます。

<ul>
  <li class="js-autoheight-r">...</li> <!--  揃う -->
  <li class="js-autoheight-r">...</li> <!--  揃う -->
  <li class="js-autoheight-r">...</li> <!--  揃う -->
  <li>...</li> <!--  揃わない -->
</ul>

こちらはsite2015テーマのトップページの製品情報の一覧で実装されています。

uni.htmlにユニットグループをクリアするためのJSのクラスを追加



unit.htmlにjs-unit_group-alignというクラスが増えています。これはユニットグループをクリアするクラスで、a-blog cmsのユニットグループに5種類のグリッドシステム方法を検討する | mkasumi.com の記事の問題を解消したクラスで、デフォルトでunit.htmlに書いてあります。

ツールチップが表のテンプレートでも使用可能



ツールチップが表側のテンプレートでも使用可能になりました。.js-acms-tooltipというクラス名を追加し、data-acms-tooltip というデータ属性に説明文を書けば使用できます。

<i data-acms-tooltip="エントリーの METAタグ(Title)を設定します。" class="acms-admin-icon-tooltip acms-admin-inline-space-left js-acms-tooltip"></i>

例えば、エントリー編集ページや、レイアウトモジュール使用時のモジュールのカスタムフィールドにちょっとした説明をつけられるようになります。

モジュールIDの引っ越しができるように

今まで間違えたブログに作ってしまったら、作り直していたモジュールIDですが、モジュールIDのブログ間の引っ越しができるようになりました。



他にもステータスの変更や、削除が一括でできるようになりました。

データ修正が管理画面から可能に



データ修正が管理画面から可能になりました。さらに、ユニットグループの修正もできるようになっています。これでリニューアルしているときやプロトタイプを作っているときにより楽に後から修正することができます。

各ルールごとにモジュールIDの設定を変更する

ルールで設定した条件の時に、コンフィグ以外に今回追加されたモジュールIDの設定が変更できるようになりました。


ルールのページに行くと、モジュールIDボタンが増えています

あまりルール機能を使わない方には文でみてもよくわからない機能かと思いますので、デモサイトやインストールしたsite2015テーマなどで比較していただければと思います。 たとえば、a-blog cmsのルールの条件設定の中には「ユーザーエージェントがスマートフォンだっとき」を設定することができます。

つまり、「ユーザーエージェントがスマートフォンだっとき」のモジュールIDの設定を変えることで、PCでは6件表示だったエントリーリストをスマートフォンの時は3件表示に管理画面から変更することができます。

以下、例としてsite2015テーマのトップページで使っている、モジュールID 「topSummary」のスクリーンショットです。

PCのときは6件表示、イメージのサイズが「120x120」に設定しています。


PCのとき


スマートフォンの時は3件表示、イメージのサイズが「60x60」に設定を変更しています。


スマートフォンのとき


テンプレートを触ることなく、管理画面内で変更できるので、以前よりもテンプレート数を少なくすることができ、メンテナンス性も上がります。


変更はルールの画面からでも、モジュールIDの画面からでも

このルールの条件ごとにモジュールの設定を変更するには、従来通りルールの画面から変更する方法とモジュールIDの画面から変更する方法の2つが用意されています。


スクリーンショット:ルールの設定画面

従来通りルールの画面にモジュールIDのボタンが用意されています


もう一つが、Ver.2.5.0からモジュールIDとコンフィグの画面にのみ増えた、サイドバーのすぐ右にあるルールのドロップダウンから変更する方法です。


スクリーンショット:モジュールIDの管理画面

モジュールIDの管理画面からもルールが選べるようになりました


ルールの設定画面に行かなくても変更できるようになりました。コンフィグにも同じドロップダウンが増えています。

まとめ

レイアウトモジュールやルール機能のクッキー判定の追加などもあるのですが、この2つの機能に比べて小さな機能だけど実際にこれまでの実装を楽にしてくれる機能たちなので、気づかれなかったらもったいない!と思ったのであえてピックアップしてみました。

Ver.2.5.0ではテンプレートのメンテナンス性もきっとよくなるような、カスタマイズする側の手も助かる機能も増えています。ぜひみなさんお使いください〜!

関連している記事

著者について

森田 かすみ

有限会社アップルップル所属。マークアップエンジニア→インハウスデザイナーの経歴を経て、今はUI/UX/サービスデザインを勉強中。呼ばれれば登壇もします。Frontend Nagoya主催。ストレス発散方法はかっぱのイラストを描くこと。