Yahoo! 地図とYahoo! Map Clusterをためしてみよう
Yahoo! 地図とは
まず、Yahoo!地図とはヤフー株式会社が提供する地図サービスで下のようにWeb上に地図を埋め込めるAPIも提供しています。
a-blog cmsは以前からYahoo!地図に対応しており、APIの利用登録をすることにより、エントリー作成画面でYahoo! 地図ユニットを使えたり、組み込みJSでYahoo!地図を表示したりすることが可能になっています。
Yahoo!地図を利用するメリット
Webサイトへの地図の埋め込みに Google Maps を利用する機会も多いと思います。昨年、Google Maps がクレジットカード情報の登録が必須になり、無料での利用が 28,000pv/月までと仕様が変更になりました。
それに対してYahoo!地図は現在のところ、クレジットカードの登録は必要がなくAPIの利用上限もGoogle Mapsと比べると50倍以上となっています。日本国内の地図であれば、Yahoo!地図 を利用することも検討に加えていいサービスではないでしょうか。
今回のハンズオンはa-blog cmsでGoogle Mapsの代替としてYahoo! Mapを使いこなすためのものとなっています。
Yahoo! 地図 の設定方法
以下の手順で a-blog cmsでYahoo! 地図を利用可能になります。
- Yahoo! デベロッパーネットワークにてAPIの利用申請
- a-blog cmsの管理画面よりアプリケーションIDを登録
- Yahoo! 地図ユニットの追加
Yahoo! デベロッパーネットワークにてAPIの利用申請
Yahoo!デベロッパーネットワーク のサイトにて登録を行いAPIキーを取得する必要があります。
まず、Yahoo!にログインした後にアプリケーションの登録を行います。
a-blog cmsの管理画面よりアプリケーションIDを登録
登録が完了しますと、アプリケーションIDが発行されます。このアプリケーションIDをa-blog cmsの管理画面にて登録をします。
管理メニューの コンフィグ > プロパティ設定にて、APIキーを登録します。
Yahoo! 地図ユニットの追加
管理メニューの コンフィグ > 編集設定にて、ユニット追加ボタンにYahoo!地図の追加を行います。モードは「Yahoo!地図」、ラベルは任意の名前を設定します。
設定が問題なく完了していますと、ユニット追加ボタンにYahoo!地図のボタンが表示され、ボタンを押すとYahoo!地図の設定ユニットが表示されます。
Yahoo! Map Clusterを使ってみよう
さてここからがハンズオンです！今回のハンズオンでは、site2019の「物件情報（https://ドメイン/realestate/）」を利用します。ここのエントリーに登録されているカスタムフィールドを「Yahoo!地図」に切り替えて、一覧ページでは「Yahoo! Map Cluster」を利用して物件情報を表示してみましょう。
地図のカスタムフィールドをOpenStreetMapからYahoo!地図に変更
管理画面側の設定
エントリーのカスタムフィールド
/themes/site2019/admin/entry/field/realestate.htmlを編集します。
realestate.htmlの最後に記述されているOpenStreetMapのカスタムフィールドの記述をコメントアウトまたは削除します。代わりにYahoo! 地図がカスタムフィールドとして表示されるように以下のHTMLを貼り付けてください。
<table class="entryFormTable acms-table-entry">
<tr class="js-yolp-editable js-map-editable">
<th>地図</th>
<td>
<div class="acms-form-group acms-admin-margin-bottom-small">
<!-- BEGIN_IF [%{PROTOCOL}/eq/https] -->
<img class="column-map js-map_editable-container" src="//map.yahooapis.jp/map/V1/static?appid=%{YAHOO_API_KEY}&lat={map_lat}&lon={map_lng}&z={map_zoom}&width=400&height=400&pointer=on" width="400" height="400">
<!-- ELSE -->
<img class="column-map js-map_editable-container" src="//map.olp.yahooapis.jp/OpenLocalPlatform/V1/static?appid=%{YAHOO_API_KEY}&lat={map_lat}&lon={map_lng}&z={map_zoom}&width=400&height=400&pointer=on" width="400" height="400">
<!-- END_IF -->
</div>
<div class="acms-form-group">
緯度 <input type="text" name="map_lat" value="{map_lat}" size="9" class="js-map_editable-lat" />
経度 <input type="text" name="map_lng" value="{map_lng}" size="10" class="js-map_editable-lng" />
ズーム <input type="text" name="map_zoom" value="{map_zoom}" size="10" class="js-map_editable-zoom" />
</div>
<input type="hidden" name="field[]" value="map_lat" />
<input type="hidden" name="field[]" value="map_lng" />
<input type="hidden" name="field[]" value="map_zoom" />
</td>
</tr>
</table>以下のようにエントリー編集画面にYahoo!地図登録用のUIが表示されます。
カテゴリーのカスタムフィールド
/themes/site2019/admin/category/field_realestate.htmlを編集します。 以下のHTMLに内容を置き換えてください。
<h3 class="acms-admin-admin-title2">一覧ページで表示させる地図の中心の緯度経度設定</h3>
<table class="adminTable acms-admin-table-admin-edit">
<tr>
<th>地図</th>
<td class="js-map-editable js-yolp-editable">
<div class="acms-admin-form-group acms-admin-osm-container">
<!-- BEGIN_IF [%{PROTOCOL}/eq/https] -->
<img class="column-map js-map_editable-container" src="//map.yahooapis.jp/map/V1/static?appid=%{YAHOO_API_KEY}&lat={index_map_lat}&lon={index_map_lng}&z={index_map_zoom}&width=400&height=400&pointer=on" width="400" height="400">
<!-- ELSE -->
<img class="column-map js-map_editable-container" src="//map.olp.yahooapis.jp/OpenLocalPlatform/V1/static?appid=%{YAHOO_API_KEY}&lat={index_map_lat}&lon={index_map_lng}&z={index_map_zoom}&width=400&height=400&pointer=on" width="400" height="400">
<!-- END_IF -->
</div>
<div class="acms-form-group">
緯度 <input type="text" name="index_map_lat" value="{index_map_lat}" size="9" class="js-map_editable-lat" />
経度 <input type="text" name="index_map_lng" value="{index_map_lng}" size="10" class="js-map_editable-lng" />
ズーム <input type="text" name="index_map_zoom" value="{index_map_zoom}" size="10" class="js-map_editable-zoom" />
</div>
<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>表示側の設定
物件情報の一覧ページ
次に表示側の設定です。/themes/site2019/include/parts/map.htmlを編集します。ここにはオープンストリートマップで地図を表示するようにテンプレートが記述されていますが、その記述をコメントアウトまたは削除していただき以下のソースコードを記述してください。
<!-- BEGIN_MODULE Category_Field -->
<div class="realestate-map">
<div id="map" style="width:100%;height: 400px;"></div>
<style>
.yolp-infowindow td {
padding: 0;
border: none;
}
</style>
<script src="https://unpkg.com/yahoo-map-cluster@latest/bundle/ymap-cluster.js"></script>
<script>
ACMS.Ready(function() {
ACMS.Library.yahooLoadProxy({
'callback': function () {
var ymap = new Y.Map("map");
ymap.drawMap(new Y.LatLng({index_map_lat}, {index_map_lng}), {index_map_zoom}, Y.LayerSetId.NORMAL);
var markers = [];
<!-- BEGIN_MODULE Entry_Summary id="map_list" -->
<!-- BEGIN entry:loop -->
<!-- BEGIN_IF [{map_lat}/nem/_and_/{map_lng}/nem] -->
var marker = new Y.Marker(new Y.LatLng({map_lat},{map_lng}));
markers.push(marker);
marker.bindInfoWindow('<a href="{url}"><!-- BEGIN_IF [{main_photo@path}/nem/] --><img src="%{ARCHIVES_DIR}{main_photo@path}" width="200" alt="" /><br/><!-- END_IF -->{title}</a>');
<!-- END_IF -->
<!-- END entry:loop -->
<!-- END_MODULE Entry_Summary -->
new YmapCluster(ymap, markers);
var control = new Y.ZoomControl();
ymap.addControl(control);
}
});
});
</script>
</div>
<!-- BEGIN_MODULE Touch_SessionWithCompilation --> <p class="edit-link">[<a href="%{BLOG_URL}bid/%{BID}/cid/%{CID}/admin/category_edit/">編集</a>]</p><!-- END_MODULE Touch_SessionWithCompilation -->
<!-- END_MODULE Category_Field -->物件情報の詳細ページ
また、/themes/site2019/include/field/entry_realestate.html を編集して、物件情報の詳細ページもYahoo!地図が表示されるように以下のHTMLでOpenStreetMapに対応する箇所を置き換えます！
<!-- BEGIN lat:veil -->
<div class="realestate-map realestate-map-entry" style="margin-bottom:20px">
<!-- BEGIN_IF [%{PROTOCOL}/eq/https] -->
<img class="column-map" src="//map.yahooapis.jp/map/V1/static?appid=%{YAHOO_API_KEY}&lat={map_lat}&lon={map_lng}&z={map_zoom}&pointer=on" style="width:100%; height: auto;">
<!-- ELSE -->
<img class="column-map" src="//map.olp.yahooapis.jp/OpenLocalPlatform/V1/static?appid=%{YAHOO_API_KEY}&lat={map_lat}&lon={map_lng}&z={map_zoom}&pointer=on" style="width:100%; height: auto;">
<!-- END_IF -->
</div>
<!-- END lat:veil -->最終的に物件情報の一覧ページ（https://ドメイン/realestate/）にアクセスした際に以下のように地図が表示されていればカスタマイズ成功です。
