a-blog cms の Unit_List のおすすめの使いかた

Published

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割の内容になっています。

発表資料

以下が当日発表したスライド資料です。合わせてこちらもご覧ください。


ユニットリストのおすすめの使い方 from Kasumi Morita

今回、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つの画像ずつ表示することができます。


[スクリーンショット]ユニットリストを使った一覧ページ

9枚中4枚が1つのエントリーに登録されている画像

以下、サンプルで使っている Unit_List で実装したギャラリーのコードです。acms.cssを使っていて、少しsite2015のスタイルも使っています。site2015内であればスタイルも正常に動作するはずです。ギャラリーページを作る際のご参考にしてください。


ファイルを開く

Unit_Listで実装したギャラリーのコード

場合によってはカスタムフィールドを作成することなく、目的の表現が実装できるから

ユニットリストを使えば、指定したユニットの情報を抽出して使ううことができました。弊社では以前、クライアントから1エントリーにつき必ず1地図登録されているコンテンツのカテゴリーの一覧ページにGoogle Mapをまとめて見せたという要望があり、Google MapのAPIを使った MarkerClusterer を実装することになりました(サンプルページ)。

ただ、公開間近に要望が来て、実装の手間とデータ入力の手間が省ける Unit_List を導入することになりました。すでにコンテンツは入力されていたので、既存のエントリーのユニットを活用できる Unit_List を採用しました。


[スクリーンショット]

Site2015の物件情報のページで実装したMarkerClusterer

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のコードとカスタムフィールドの記述


ファイルを開く

実際の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 にご参加いただきありがとうございました!

関連している記事

著者について

森田 かすみ

名古屋のWeb制作会社でマークアップエンジニアとして働いています。呼ばれれば登壇もします。Frontend Nagoya主催。ストレス発散方法はかっぱのイラストを描くこと。