a-blog cms の Unit_List のおすすめの使いかた
a-blog cms の Unit_List のおすすめの使いかたについて、a-blog cms DAY in Nagoya で紹介しました。今回はa-blog cms DAYの後に、a-blog cms Training Camp 2015 Autumn が開催され、私は事例紹介の枠で10分ほどお時間をいただきましたが、タイトルを見たらわかる通り機能紹介9割事例紹介1割の内容になっています。
発表資料
以下が当日発表したスライド資料です。合わせてこちらもご覧ください。
今回、Unit_Listなんていうマイナーなビルトインモジュールについてお話ししたのにはいくつか理由があります。
1. 全体的にUnit_List の利用数は少ないんじゃないかと思ったから
2. 弊社ではよくUnit_Listを導入するから
全体的に Unit_List の利用数は少ないんじゃないかと思ったから
全体的に Unit_List の利用数は少ないんじゃないかとは思っており、発表しようとは思ったのですが、会場で聞いてみると4人の方の手が挙がりました。a-blog cms の中でもパワーユーザーの方が集まるイベントなんですが、そのイベントでもやはり Unit_List は利用数が少ないことがわかりました。
そもそも Unit_List とは
ビルトインモジュールの1つで、現段階では Entry_Body 以外で唯一ユニットを表示できるモジュールです。Entry_Body と違うところは、Entry_Body はエントリーのユニットを表示するのに対し、 Unit_List はエントリーをまたいで一覧にすることができます。
弊社ではよく Unit_List を導入するから
最近よくUnit_Listを導入するようになりました。Ver.2.0 になったときに Unit_List も機能が増えた使いやすくなったこともありますが、他にも導入の理由としては2つあります。
- 1つのエントリーに画像を登録し、登録した分画像を一覧に表示できるから
- 場合によってはカスタムフィールドを作成することなく、目的の表現が実装できるから
1つのエントリーに画像を登録し、登録した分画像を一覧に表示できるから
例えばギャラリーページとは相性が良いです。例えば、ギャラリーページを作ろうとしたとき、「いつもはエントリーサマリーのメイン画像を使って1エントリーにつき1画像しか登録していない」という使いかたをされている方もいらっしゃるかもしれません。Unit_List を使えば、1エントリーに例えば20枚画像を登録しても、一覧に1つの画像ずつ表示することができます。
以下、サンプルで使っている Unit_List で実装したギャラリーのコードです。acms.cssを使っていて、少しsite2015のスタイルも使っています。site2015内であればスタイルも正常に動作するはずです。ギャラリーページを作る際のご参考にしてください。
場合によってはカスタムフィールドを作成することなく、目的の表現が実装できるから
ユニットリストを使えば、指定したユニットの情報を抽出して使ううことができました。弊社では以前、クライアントから1エントリーにつき必ず1地図登録されているコンテンツのカテゴリーの一覧ページにGoogle Mapをまとめて見せたという要望があり、Google MapのAPIを使った MarkerClusterer を実装することになりました(サンプルページ)。
ただ、公開間近に要望が来て、実装の手間とデータ入力の手間が省ける Unit_List を導入することになりました。すでにコンテンツは入力されていたので、既存のエントリーのユニットを活用できる Unit_List を採用しました。
HTMLのhead
タグ内の記述
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="/js/markerclusterer.js"></script>
MarkerClustererを設置したい場所の記述
<div id="map" style="height: 400px;"></div>
実際のJSのコードとカスタムフィールドの記述
中には、map.htmlとmap_field.htmlが入っています。JSファイルはないのですが、map.html内にscript
タグで囲んでいます。JSファイルでも a-blog cms を動かしてしまうと、パフォーマンスに影響が出てしまう可能性があるので、HTMLファイルとしてインクルードしてもらえるよう、あえてJSをHTMLファイルに記述しています。作る際のご参考になればと思います。
map_field.htmlは、site2015の物件情報のカテゴリーフィールドです。map.html内のJSの中にCategory_Fieldのブロックの記述があるので、/admin/category/field.htmlにmap_field.htmlをインクルードしてご使用ください。
以上になります。a-blog cms DAY 及び a-blog cms Training Camp 2015 Autumn にご参加いただきありがとうございました!