ページ内でユニットを配置するには、基本的にはテキストユニットや画像ユニットなどで用意されている「配置」の設定を変更しておこないますが、ここでは、複数のユニットをまとめてカラム（段）にする「ユニットグループ」を使った入力について説明します。
ユニットグループ機能を利用することで、複数のユニットをdiv要素で囲むことができます。そのグループにはラベル(選択時の名前)とクラス(HTMLの要素に適用するclass属性)を自由に追加できます。
ユニットグループを使った段組の例
本日、地図ユニットのカスタマイズの相談があった点について紹介しておきます。
英語サイトを作っているが地図ユニットの Google Maps の中は日本語で表示されてしまう。これを英語にするにはどうしたらいいでしょうか？ 上記は日本語の地図になります。
Unit_Listとは、ビルトインモジュールの1つで、現段階では Entry_Body 以外で唯一ユニットを表示できるモジュールです。Entry_Body と違うところは、Entry_Body はエントリーのユニットを表示するのに対し、 Unit_List はエントリーをまたぎ、ユニットのみを表示して一覧にすることができます。
Unit_List は特殊なモジュールのため、どう応用していいのか想像がつきづらいかと思いますが、その1例として、ギャラリーページに使われます。
ユニットリストをギャラリーとして利用した例
まずは、ギャラリーを表示したい場所に、ユニットリストを実装したファイルをインクルード機能を使って読み込みます。
インクルードファイルが /include/unit_list.html の場合、ソースコードは以下のようになります（※ファイルのパス、ファイル名が違う場合は30行目を修正してください）。
<script>
ACMS.Ready(function(){
ACMS.Config.ppMark = 'a[data-rel^="prettyPhoto"]';
});
</script>
<!-- BEGIN_MODULE Unit_List id="gallery" -->
<div class="acms-container">
<!--#include file="/admin/module/setting.html"-->
<div class="acms-grid">
<!-- BEGIN unit:loop -->
<div class="acms-col-md-4 acms-col-sm-6 text-center" style="position: relative;">
<a href="<!-- BEGIN_IF [{large}/nem/] -->%{ARCHIVES_DIR}{large}<!-- ELSE -->%{ARCHIVES_DIR}{normal}<!-- END_IF -->" data-rel="prettyPhoto[gallery{entry_id}]" title="{entry_title}" >
<p class="acms-text-center"><!-- #BEGIN image:veil -->
<img src="%{ARCHIVES_DIR}{normal}[resizeImg(200,200)]" alt="{alt}" class="acms-img-rounded"><!-- #END image:veil -->
</p>
</a>
<!-- BEGIN_MODULE Touch_SessionWithAdministration -->
<!-- 編集ボタン -->
<form action="" method="post" style="position: absolute; bottom: 20px; right: 15px;">
<input type="hidden" name="eid" value="{entry_id}" />
<input type="hidden" name="admin" value="entry-edit" />
<input type="submit" name="ACMS_POST_2GET" value="変更する" class ="acms-admin-btn" />
</form>
<!-- END_MODULE Touch_SessionWithAdministration -->
</div>
<!-- END unit:loop -->
</div>
<!-- 続きを読むボタン -->
<!-- BEGIN pager:veil --><!-- BEGIN forwardLink -->
<form action="" method="post" class="js-post_include">
<input type="hidden" name="bid" value="%{BID}" />
<input type="hidden" name="cid" value="%{CID}" />
<input type="hidden" name="tpl" value="/include/unit_list.html" />
<input type="submit" name="ACMS_POST_2GET" value="もっと見る" class="acms-btn acms-btn-block acms-btn-large" />
<input type="hidden" name="page" value="{forwardPage}" />
</form>
<!-- END forwardLink --><!-- END pager:veil -->
</div>
<!-- END_MODULE Unit_List -->
ユニットタイプの「画像」がチェックされていることを確認してください。
他の設定については、必要に応じて有効にしてください。
Unit_Listをギャラリーページで使うことになると、基本的にはエントリーのページでは文字を挿入することがなくなります。運用時に運営者が迷わないように、管理画面＞コンフィグ＞編集設定の順にページを移動し、「画像」以外のユニット追加ボタンを削除しましょう。
編集設定のページにある、ユニット追加ボタンを「画像」以外削除しておく
エントリー編集画面のユニット追加ボタン
このように画像投稿専用のUIが運営者に提供できます。
エントリー内のユニットを表示するUnit_Listの使用ケース紹介その2では、Google MapのAPI 「MarkerClusterer」を使ったUnit_Listの活用方法をご紹介します。
たとえば、1つの地図に各エントリーに1つずつ挿入されている地図ユニットをピンでまとめたいときに有効です。
MarkerClustererを使うことにより、同じ位置にエントリーが集中していたとしてもピンが多くなりすぎず、すっきりとした見た目になります。
3件のエントリーに1つずつ地図が入力されている場合の MarkerClusterer の例
/js/makerclusterer.jsと/images/フォルダをGitHubよりダウンロードしてください。
headタグ内に以下を記述してください。
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=%{GOOGLE_API_KEY}&sensor=false"></script>
<script type="text/javascript" src="/js/markerclusterer.js"></script>テーマフォルダに/images/フォルダを設置するときは、/js/makerclusterer.jsの以下の記述のパスを変更する必要があります（例： '/theme/site/images/m'; など）。
MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_PATH_ = '../images/m';
HTMLファイル内のMarkerClustererを設置したい場所に以下を記述します。
<div id="map" style="height: 400px;"></div>
ブログのトップに表示させたい場合はブログのカスタムフィールドに、カテゴリーの一覧に表示させたい場合はカテゴリーのカスタムフィールドに記述してください。
※Site2016内の/admin/category/field_realestate.htmlと同じ内容です
<h3 class="acms-admin-admin-title2">一覧ページで表示させる地図の中心の緯度経度設定</h3>
<table class="adminTable acms-admin-table-admin-edit">
<tr>
<th>地図</th>
<td class="js-map-editable">
<div class="acms-admin-form-group">
<label for="input-text-map-search_text" class="acms-admin-hide-visually">住所で検索する</label>
<input type="text" name="" value="" id="input-text-map-search_text" class="js-editable_map-search_text" disabled="disabled" size="40" />
<input type="button" name="" value="検索" class="js-editable_map-search_button acms-admin-btn-admin" disabled="disabled" />
</div>
<div class="acms-admin-form-group">
<img class="js-map_editable-container" src="http://maps.google.com/maps/api/staticmap?center={index_map_lat},{index_map_lng}&zoom={index_map_zoom}&size=640x400&maptype=roadmap&markers={index_map_lat},{index_map_lng}&key=%{GOOGLE_API_KEY}" width="640" height="400" style="display:block;" />
</div>
<!-- BEGIN index_map_lat:veil -->
<label for="input-text-index_map_lat">緯度</label> <input type="text" name="index_map_lat" value="{index_map_lat}" size="9" id="input-text-index_map_lat" class="js-map_editable-lat" />
<label for="input-text-index_map_lng">経度</label> <input type="text" name="index_map_lng" value="{index_map_lng}" size="10" id="input-text-index_map_lng" class="js-map_editable-lng" />
<label for="input-text-index_map_zoom">ズーム</label> <input type="text" name="index_map_zoom" value="{index_map_zoom}" size="10" id="input-text-index_map_zoom" class="js-map_editable-zoom" />
<!-- END index_map_lat:veil -->
<!-- BEGIN index_map_lat:empty -->
<label for="input-text-index_map_lat">緯度</label> <input type="text" name="index_map_lat" value="35.172775" size="9" id="input-text-index_map_lat" class="js-map_editable-lat" />
<label for="input-text-index_map_lng">経度</label> <input type="text" name="index_map_lng" value="136.887466" size="10" id="input-text-index_map_lng" class="js-map_editable-lng" />
<label for="input-text-index_map_zoom">ズーム</label> <input type="text" name="index_map_zoom" value="7" size="10" id="input-text-index_map_zoom" class="js-map_editable-zoom" />
<!-- END index_map_lat:empty -->
<input type="hidden" name="field[]" value="index_map_lat" />
<input type="hidden" name="field[]" value="index_map_lng" />
<input type="hidden" name="field[]" value="index_map_zoom" />
</td>
</tr>
</table><script type="text/javascript">
var map = null;
var markerclusterer = null;
var infowindow = new google.maps.InfoWindow();
var gmarkers = [];
// マーカーの作成と、吹き出しの作成
function createMarker(latlng, info) {
var marker = new google.maps.Marker({
position: latlng,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(info);
infowindow.open(map,marker);
});
// 情報を保存
gmarkers.push(marker);
}
// クリックイベントを作成する
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
function initialize() {
// 全体の地図を作成
<!-- BEGIN_MODULE Category_Field -->
var myOptions = \{
zoom: {index_map_zoom},
center: new google.maps.LatLng({index_map_lat},{index_map_lng}),
mapTypeControl: true,
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
\}<!-- END_MODULE Category_Field -->
map = new google.maps.Map(document.getElementById("map"), myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// 場所・吹き出しの情報を定義
var markers = [
<!-- BEGIN_MODULE Unit_List id="map" --><!-- BEGIN unit:loop -->
["{entry_title}", {unit_field_2},{unit_field_3},"{entry_url}"],<!-- END unit:loop -->[]<!-- END_MODULE Unit_List -->
];
// 吹き出しに入れる要素
for (var i = 0; i < markers.length; i++) {
var point = new google.maps.LatLng( markers[i][1], markers[i][2]);
var marker = createMarker( point, "<div class='scrollFix'><p class='mapEntryTitle'>" + markers[i][0] + "</p> " + "<p class='mapDetailInfo'>緯度: " + markers[i][1] + "<br> 経度: " + markers[i][2] + "</p><p class='mapLinkText'><a href='"+ markers[i][3] +"'>詳しく見る</a></p>" + " </div>") ;
}
markers.pop();
// 地図を表示
markerCluster = new MarkerClusterer(map, gmarkers);
}
window.addEventListener('load', initialize);
</script>モジュールID名「map」というUnit_Listのモジュールを作ります。
ユニットタイプの「地図」がチェックされていることを確認してください。
そのほかの設定については、必要に応じて有効にしてください。