a-blog cms ver2.5の新機能「ルールでモジュールIDを切り替える」を使い、表示件数を変更した際にブロック要素の高さを揃える方法

2015年05月22日(金)

今日は久しぶりの勉強会ということで「a-blog cms DAY in NAGOYA 2015/05」に行ってきました。とてもためになる話が沢山聞けたので、さっそくa-blog cms ver2.5の新しい機能の一つ「モジュールIDをルールで切り替え」を試してみました。

今回はこの機能を使い、スマホの場合（表示件数：4件）PCの場合（表示件数：3件）とエントリーの表示件数を変更しました。しかし要素で利用していた、組み込みjsの「ブロック要素の高さを揃える（autoheight）」が、config.jsで指定した子要素の数で動作してしまい、UAを切り替えた時に数が変わるため意図したものになりませんでした。といってもこの様な動作は仕様として間違っていないので、実現する為に工夫する必要がありそうです。

そこで少し悩んだ結果、jsでclassを書き換えることにしました。
具体的には、

■ config.jsの設定　切り替え前と切り替え後で、2種類の設定を作っておく

//----------
// autoHeight
autoHeightMark   : '.js-autoheight',
autoHeightConfArray : [
    {
        '.column4'  : '4', // スマホ用
        '.column3'  : '3' // PC用
    }
],

■テンプレートのイメージ　スマホ基準で子要素のclassは「column4」を指定

<!-- BEGIN_MODULE Entry_Summary -->
<div class="js-autoheight">
	<!-- BEGIN unit:loop --><!-- BEGIN entry:loop -->
	<div class="column4">
		<div><!-- BEGIN image:veil -->
			<img src="/images/image.jpg" />
			<!-- END image:veil -->
		</div>
	</div>
	<!-- BEGIN entry:loop --><!-- BEGIN unit:loop -->
</div>
<!-- END_MODULE Entry_Summary -->

■js　UAによって処理を分ける（PCの場合にclassをcolumn4からcolumn3に変更）

$(window).load(function() {
	if((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
		// スマホ用の処理
		// 〜
	}else{
		// PC用の処理
		$('.js-autoheight div').each(function(){
			if($(this).hasClass('column4')){
			$(this).removeClass('column4').addClass('column3');
			}
		});
	}
});

この様な感じにすることで、無事PCの時だけclassがcolumn4がcolumn3に切り替わり、PCでもスマホでも「autoheight」が適用されました。これにて一件落着。a-blog cms ver2.5良いですよ。