カスタムフィールドを利用して、エントリーに複数の位置情報を持たせてみよう

2018年11月11日

この記事は公開日より5年以上経過しているため、現在の内容と異なる可能性があります。

a-blog cmsでは、位置情報の設定を有効化すれば、エントリーごとに一つの位置情報を登録できるようになっていますが、複数の位置情報を登録することができません。複数の位置情報を登録することができれば、例えばエントリーがイベント記事になっていて、そのイベントが複数会場になっている場合などに便利です。

このハンズオンで行うこと

このハンズオンでは以下の手順で、OpenStreetMapとカスタムフィールドグループを使って、一つのエントリーに複数の会場情報をもたせてみましょう。

siteテーマでeventというカテゴリーを作成
エントリーの編集画面のカスタマイズ
OpenStreetMapを使った表側での表示

1. siteテーマでイベントカテゴリーを作成

管理画面 > カテゴリーより、eventというカテゴリーコードでイベント用のカテゴリーを新規追加します。

2. エントリーの編集画面のカスタマイズ

site2018/admin/entry/field/event.htmlを追加し、以下のようなHTMLを記述します。

<h2 class="acms-admin-admin-title2">マップの焦点の設定</h2>
<table class="acms-admin-table-admin-edit">
  <tr>
    <th>緯度</th>
    <td>
      <input type="text" name="mapDefaultLat" value="{mapDefaultLat}" class="acms-admin-form-width-full">
      <input type="hidden" name="field[]" value="mapDefaultLat">
    </td>
  </tr>
  <tr>
    <th>経度</th>
    <td>
      <input type="text" name="mapDefaultLng" value="{mapDefaultLng}" class="acms-admin-form-width-full">
      <input type="hidden" name="field[]" value="mapDefaultLng">
    </td>
  </tr>
  <tr>
    <th>ズーム</th>
    <td>
      <input type="text" name="mapDefaultZoom" value="{mapDefaultZoom}" class="acms-admin-form-width-full">
      <input type="hidden" name="field[]" value="mapDefaultZoom">
    </td>
  </tr>
</table>
<h2 class="acms-admin-admin-title2">会場一覧</h2>
<div class="js-fieldgroup-sortable adminTable acms-admin-table-admin-edit">
  <!-- BEGIN VenueList:loop -->
  <div class="sortable-item" style="border-bottom: 1px solid #CCC;">
    <span class="item-handle" style="display:inline-block; padding: 10px;">
      <i class="acms-admin-icon-sort"></i>
    </span>
    <table class="acms-table-entry">
      <tr class="js-open-street-map-editable">
        <th>地図</th>
        <td>
          <div class="acms-form-group" style="padding-bottom: 10px;">
            <input type="text" name="" value="" class="js-osm-search" size="40" />
            <input type="button" name="" value="検索" class="js-osm-search-btn acms-admin-btn" />
            <input type="button" class="item-delete acms-admin-btn-admin acms-admin-btn-admin-danger acms-admin-float-right"
              value="削除">
          </div>
          <div class="acms-form-group" style="padding-bottom: 10px;">
            <input type="text" name="venueName[]" value="{venueName}" class="acms-admin-form-width-full" placeholder="会場名">
          </div>
          <div class="acms-form-group">
            <div class="acms-admin-gmap-container js-open-street-map-picker" style="position:relative; overflow: hidden; width: 100%; height: 300px;"></div>
          </div>
          <div class="acms-form-group" style="padding-top: 10px;">
            緯度 <input type="text" name="mapLat[]" value="{mapLat}" size="9" class="js-osm-lat" />
            経度 <input type="text" name="mapLng[]" value="{mapLng}" size="10" class="js-osm-lng" />
            ズーム <input type="text" name="mapZoom[]" value="{mapZoom}" size="10" class="js-osm-zoom" />
          </div>
        </td>
      </tr>
    </table>
  </div>
  <!-- END VenueList:loop -->
  <div class="sortable-item item-template" style="border-bottom: 1px solid #CCC;">
    <span class="item-handle" style="display:inline-block; padding: 10px;">
      <i class="acms-admin-icon-sort"></i>
    </span>
    <table class="acms-table-entry">
      <tr class="js-open-street-map-editable">
        <th>地図</th>
        <td>
          <div class="acms-form-group" style="padding-bottom: 10px;">
            <input type="text" name="" value="" class="js-osm-search" size="40" />
            <input type="button" name="" value="検索" class="js-osm-search-btn acms-admin-btn" />
            <input type="button" class="item-delete acms-admin-btn-admin acms-admin-btn-admin-danger acms-admin-float-right"
              value="削除">
          </div>
          <div class="acms-form-group" style="padding-bottom: 10px;">
            <input type="text" name="venueName[]" value="" class="acms-admin-form-width-full" placeholder="会場名">
          </div>
          <div class="acms-form-group">
            <div class="acms-admin-gmap-container js-open-street-map-picker" style="position:relative; overflow: hidden; width: 100%; height: 300px;"></div>
          </div>
          <div class="acms-form-group" style="padding-top: 10px;">
            緯度 <input type="text" name="mapLat[]" value="" size="9" class="js-osm-lat" />
            経度 <input type="text" name="mapLng[]" value="" size="10" class="js-osm-lng" />
            ズーム <input type="text" name="mapZoom[]" value="" size="10" class="js-osm-zoom" />
          </div>
        </td>
      </tr>
    </table>
  </div>
  <div class="clearfix" style="padding: 10px;">
    <input type="button" class="item-insert acms-admin-btn-admin acms-admin-float-right" value="追加">
  </div>
</div>


<input type="hidden" name="@VenueList[]" value="mapLat">
<input type="hidden" name="field[]" value="mapLat">
<input type="hidden" name="@VenueList[]" value="mapLng">
<input type="hidden" name="field[]" value="mapLng">
<input type="hidden" name="@VenueList[]" value="mapZoom">
<input type="hidden" name="field[]" value="mapZoom">
<input type="hidden" name="field[]" value="@VenueList">
<input type="hidden" name="@VenueList[]" value="venueName">
<input type="hidden" name="field[]" value="venueName">

以下のようなOpenStreetMapの地図登録UIがカスタムフィールドグループとして表示されたらカスタマイズ成功です。

3. OpenStreetMapを使った表側での表示

site2018/include/field/entry_event.htmlを作成し、以下のように記述します。

<!-- BEGIN_SetRendered id="map-markers" -->
<!-- BEGIN VenueList:loop --><!-- BEGIN VenueList:glue -->|<!-- END VenueList:glue -->{mapLat},{mapLng}<!-- END VenueList:loop -->
<!-- END_SetRendered -->

<!-- BEGIN_SetRendered id="map-messages" -->
<!-- BEGIN VenueList:loop --><!-- BEGIN VenueList:glue -->[[:split:]]<!-- END VenueList:glue --><p>{venueName}</p><!-- END VenueList:loop -->
<!-- END_SetRendered -->

<div class="entry-container">
	<div class="js-open-street-map"
		data-multiple="true"
		data-lat="{mapDefaultLat}"
		data-lng="{mapDefaultLng}"
		data-zoom="{mapDefaultZoom}"
		data-markers='<!-- GET_Rendered id="map-markers" trim="1" -->'
		data-messages='<!-- GET_Rendered id="map-messages" trim="1" -->'
		style="width: 857px; height: 400px;"
	></div>
</div>

エントリーのカスタムフィールドにマップの焦点の設定と、2つの地図情報を登録してください。以下、カスタムフィールドの登録例です。

	緯度	経度	ズームレベル
マップの焦点	35.1703969	136.8863534	16
会場A	35.16908096284039	136.8803542479873	17
会場B	35.1703969	136.8863534	17

最終的に、以下のようにテンプレートに2つピンが立っていることが確認できたらハンズオン成功です。

このハンズオンで行うこと

1. siteテーマでイベントカテゴリーを作成

2. エントリーの編集画面のカスタマイズ

3. OpenStreetMapを使った表側での表示

同じタグ付けがされている記事

カテゴリー