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

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

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

1. siteテーマでeventというカテゴリーを作成
2. エントリーの編集画面のカスタマイズ
3. 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つの地図情報を登録してください。 以下、カスタムフィールドの登録例です。

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

画像のカスタムフィールドを生成

タイトル、name要素、通常サイズ、altの入力、tinyサイズ、largeサイズ、squareサイズなど細やかに設定することができます。

また、「フロント側のリサイズ機能を使用する」という項目にチェックを入れることで、画像のブラウザ上でのリサイズを可能にするソースコードを生成します。 これを使うことで、通常だとそのままアップロードができないサイズの画像もアップロードできるようになります。例えば、デジタルカメラで撮影したような容量の大きい画像をブラウザ上でリサイズしてサーバーにアップロードすることができるということです。

まずは、下の図のように、「カスタムフィールド」、「カスタムフィールドグループ」、「カスタムユニット」からカスタムフィールドグループを選択します。

まずは、下の図のように、「カスタムフィールド」、「カスタムフィールドグループ」、「カスタムユニット」からカスタムユニットを選択します。

あとは、カスタムフィールドの作り方と同じです。 typeとタイトル、フィールド名を入力します。 それぞれの項目に応じた項目に対して、値を入力して[生成]ボタンを押すとカスタムフィールドのHTMLが生成されます

他にもカスタムフィールドメーカーには下記のような便利な機能が用意されています。

「オプション」という項目をクリックすると、下の図のように変換と、入力チェックのためのフィールドが出現します。

はじめに、「変換」ですが、これを使うことで例えば「大文字」で登録されたアルファベットを「小文字」に変換したりするためのソースコードを生成可能です。「参照」と書かれたボタンを押していただくと下の図のようにモーダルウィンドウが現れますので、その中から変換したい項目を選択してください。変換のフィールドには複数の値を登録することも可能です。

つづいて「入力チェック」ですが、こちらは入力された値を指定した条件でチェックできます。もし条件に沿わない値が入力された場合、再度入力を促すことができます。 下の例は、あるフィールドに対して値が入力されていない場合に、「値を入力してください」というメッセージを表示する際のサンプルです。

その他にも、文字数チェックや、URLチェックなど様々な条件で値を判定することができます。「値」の欄には文字数チェックにおいて最大文字数を入れたり、正規表現マッチで、正規表現を入れたりする際に使用します。

また、下の図のように、「入力用ソース」、「プレビュー」、「出力用ソース」と書かれたタブのあるボックスから、プレビューを選択していただくと、下の図のように実際に出力されたソースがどのような見た目になるのかを確認することができます。

これは、カスタムフィールドに入力された値の結果をテーブル形式で表示したい時に使用します。 例えばお問い合わせのフォームにて、入力された値をお客様に確認してもらうためのソースコードとして役にたちます。

下の図のように、「acms-admin.cssを使用する」という項目にチェックを入れることで、a-blog cmsの管理画面で使用されているクラスが施されたソースコードを生成できます。 これにチェックを入れていないと、全くクラスの施されていないソースコードが生成されます。