組み込みJS Yahoo! Map Cluster を使ってピンが集まった場所をまとめよう
Yahoo! Map Cluster の実装イメージ
Yahoo! Map Cluster のJSライブラリの紹介はすでに過去開催のTraining Camp（Yahoo! 地図とYahoo! Map Clusterをためしてみよう | 2019春合宿 | ハンズオン）で行なっておりますが、Ver.2.11より組み込みJSとして仲間入りしました。
以前は JS を書かなければいけませんでしたが、組み込みJSとして Yahoo! Map Cluster を使えば、HTMLに追記するだけで実装することができます。
ここでは、beginner2019テーマの初期インストール状態を例に解説していきます。環境が異なる場合はご自身の環境に合わせて読み替えてください。
Yahoo!地図を利用するメリット
Webサイトへの地図の埋め込みに Google Maps を利用する機会も多いと思います。昨年、Google Maps がクレジットカード情報の登録が必須になり、無料での利用が 28,000pv/月までと仕様が変更になりました。
それに対してYahoo!地図は現在のところ、クレジットカードの登録は必要がなくAPIの利用上限もGoogle Mapsと比べると50倍以上となっています。日本国内の地図であれば、Yahoo!地図 を利用することも検討に加えていいサービスではないでしょうか。
今回のハンズオンはa-blog cmsでGoogle Mapsの代替としてYahoo!地図を使いこなすためのものとなっています。
組み込みJSの解説
組み込みJSは、a-blog cms 本体に同梱されているJavaScriptのライブラリです。a-blog cms をインストールしてある環境であれば特別なファイルを読み込まなくても、HTMLにclass属性を追加するだけでお手軽に利用できます。
組み込み方法
<div class="js-yahoo-map" data-cluster="true" data-lat="35.172775" data-lng="136.887466" data-zoom="15" data-markers='35.172762,136.887447|35.176559,136.885409|35.170394,136.887383' data-messages='<table>... 省略 ....</table>' style="width: 820px; height: 400px;" ></div>
※横幅と高さを指定することにより、地図のサイズを指定できます
データ属性解説
| データ属性名 | 詳細 | 記述方法 |
|---|---|---|
| data-lat | ピンを表示する地図の緯度 | 数字 |
| data-lng | ピンを表示する地図の経度 | 数字 |
| data-zoom | ピンを表示する地図のズームの値 | 数字 |
| data-markers | 地図内に表示したいピン。経度と緯度を「,」つなぎで記述する | 数字 |
| data-messages | 吹き出し内に表示するコンテンツ | HTML |
| data-cluster | クラスターを使用するかどうか | true|false |
Yahoo!地図の設定方法
a-blog cmsでYahoo!地図を利用するには、以下の手順が必要になります。
- Yahoo! デベロッパーネットワークにてAPIの利用申請
- a-blog cmsの管理画面よりアプリケーションIDを登録
Yahoo! デベロッパーネットワークにてAPIの利用申請
まず、Yahoo! JAPAN IDでログイン（Yahoo! JAPAN IDをお持ちでない方は新しく取得）し、アプリケーションの登録を行います。
アプリケーションの種類が2種類ありますが、「クライアントサイド」をお選びください。
以下を参考にしてアプリケーションの基本情報の必須事項を記入し、ガイドラインを確認し、ご登録ください。
| アプリケーション名 | JS Yahoo! Map Cluster |
a-blog cmsの管理画面よりアプリケーションIDを登録
登録が完了すると、Client ID が発行されます。この Client ID をa-blog cmsの管理画面にて登録をします。
管理画面に入り、 コンフィグ > プロパティ設定にて、APIキーを登録します。
これにより、Yahoo!地図が現在のブログで有効になりました。
Yahoo!地図を実装する
すでに経度や緯度の情報を持っている、物件情報のページで実装してみましょう。
/themes/beginner2019/realestate/index.html を開き、28行目に以下の記述を行なってください。
<div class="main-inner is-space-right">
<!-- ▼▼▼以下を記述▼▼▼ -->
<div class="module-header acms-margin-bottom-small clearfix">
<h2 class="module-heading">%{CATEGORY_NAME}の検索</h2>
</div>
<div class="map-wrapper acms-margin-bottom-large">
<div class="realestate-map">
<!-- BEGIN_MODULE Entry_Summary id="summary_custom" -->
<!-- BEGIN_SetRendered id="map-markers" -->
<!-- BEGIN unit:loop --><!-- BEGIN entry:loop -->{map_lat},{map_lng}<!-- BEGIN glue -->|<!-- END glue --><!-- END entry:loop --><!-- END unit:loop -->
<!-- END_SetRendered -->
<!-- BEGIN_SetRendered id="map-messages" -->
<!-- BEGIN unit:loop --><!-- BEGIN entry:loop --><table><tr><td><a href="{url}"><!-- BEGIN_IF [{main_photo@path}/nem/] --><img src="%{MEDIA_ARCHIVES_DIR}{main_photo@path}" width="200" alt="" /><br/><!-- END_IF -->{title}</a></td></tr></table><!-- BEGIN glue -->[[:split:]]<!-- END glue --><!-- END entry:loop --><!-- END unit:loop -->
<!-- END_SetRendered -->
<!-- END_MODULE Entry_Summary -->
<div class="js-yahoo-map"
data-cluster="true"
data-lat="35.172775"
data-lng="136.887466"
data-zoom="15"
data-markers='<!-- GET_Rendered id="map-markers" trim="1" -->'
data-messages='<!-- GET_Rendered id="map-messages" trim="1" -->'
style="width: 820px; height: 400px;"
></div>
</div>
</div>
<!-- ▲▲▲ここまで▲▲▲ -->
<!-- エントリーサマリー（カスタムフィールド画像表示） -->
@include("/include/entry/summary-custom.html")SetRenderedとGET_Rendered
ピンの位置指定と吹き出し部分にGET_Renderedを使うことにより、Entry_Summary モジュールの実行が通常は2回かかるところを1回にしています。動作するモジュールを節約することにより、ページの表示速度を早くすることが可能です。
SetRenderedとGET_Renderedについては、以下のページをご覧ください。
エントリーデータを増やす
今のままではピンの数が少ないので、エントリーを増やしましょう。 下記で配布しているCSVファイルをダウンロードして、管理画面のサイドカラムにある「インポート」ページから、エントリーをインポートしてください。 カテゴリーは「物件情報」を選択します。
物件情報のエントリーデータ（CSV）
管理画面からモジュールID「summary_custom」の表示を30件にするとピンがたくさん表示されます。
