カテゴリー内の他の記事

Mapboxを使って地図表示をしてみよう!

フォローする

(著者:サイボウズ 三宅 智子)

 [kintone環境をお持ちでない方へ]developer network(当サイト) のメンバー登録をした後、1年間無料の開発者向けライセンスを使えます。

Index

概要

この記事では、JavaScriptとMapbox APIを使って顧客リストアプリの住所を地図にマッピングするカスタマイズにチャレンジします。
今までもGoogle Map/ゼンリン拠点案内サービス/OpenStreetMapなどを使った地図連携記事が出ていますが、もう少し地図のスタイルを工夫したくなることはありませんか?

そこで今回はMapboxという、簡単な操作で独自の地図を作成/拡張/公開できるサービスを使って「自由度が高い」地図開発をしていきたいと思います!

mapbox-logo-color.png

Mapboxとは

Mapboxとは、簡単な操作で独自の地図を作成/拡張/公開できるサービスです。
元となる地図は、OpenStreetMapなので、著作権フリーで利用することができます。
無料で利用することも可能ですが、リクエスト数が増えたり、kintoneのようなアプリケーション上で動かしたりする場合はCOMMERCIALプランの契約が必要になるので、ご注意ください。
詳しい料金体系についてはMapboxのPlans & Pricingページをご確認ください。

完成イメージ

出来上がりはこのようになります。kintoneに登録されている顧客の住所/緯度経度情報から、地図にマッピングします。
今回は、ベーシックなテンプレート地図を使っていますが、元となる地図は自分好みにアレンジすることが可能です。

主なカスタマイズ内容は以下です。

  • PC版とスマートフォン版のレコード一覧とレコード詳細画面に地図を表示
  • ピンのクリックで、会社名と住所のポップアップ表示
  • ポップアップ内の会社名リンククリックで、該当のレコード詳細画面に遷移

PC版

11.png

スマートフォン版

12.png

手順

  1. kintoneアプリの作成
  2. Mapboxへの地図スタイル読み込み
  3. JavaScriptカスタマイズ

事前に準備するもの

kintoneのアプリ作成

今回はkintoneでの地図カスタマイズでよく使われる、顧客リストアプリを使います。

  1. kintoneアプリストアの「顧客リスト」アプリを追加してください。
    アプリを追加すると、サンプルデータが予め登録された状態になっていると思います。
    詳細なアプリの追加方法はこちらのヘルプ(アプリストアからアプリを追加する)をご参照ください。

    1.png

  2. フィールドコードの編集を行います。以下の通り設定してください。(大文字/小文字にご注意ください)
     フィールド名  フィールドコード
    会社名 Company
    住所 Address
    また、以下のフィールドを追加してください。
     フィールドの種類  フィールド名  フィールドコード
    文字列 (1行) 緯度 lat
    文字列 (1行) 経度 lng
    スペース Map
  3. サブドメイン名をメモしておきます。(後ほどコード内で記述します)
    例)https://〇〇〇.bozu.com/k/xxx/ ←サブドメイン名は〇〇〇の部分です。

 これで一旦kintone側の下準備は完了です。

Mapboxの設定

次にMapboxへの地図スタイル読み込みを行います。因みにMapboxには、下のギャラリーChoose a mapにあるように、様々なスタイルの地図が用意されています。
これらのテンプレートの地図を利用することもできますが、初期設定では日本語表記に対応していないので、少し加工したスタイルを読み込んでいただきます。
(ご自身で編集することも可能ですが、ここではその方法の紹介は割愛します)

4.png

今回はシンプルな「Streets」というスタイルを使います。それでは早速Mapboxにログインして作業していきましょう!

  1. Mapboxにログインして、スタイルを作成します。まず「Create a style」をクリックしてください。
    5.png
  2. 以下の「style.json」ファイルを手元にダウンロードします。
    style.json
  3. ポップアップ画面の「Upload a style」>「Select a file」の順にクリックします。ダウンロードした「style.json」をアップロードして、「Create」ボタンをクリックします。
    6.png
  4. 読み込みが完了したら、左上の「Streets」と書いてある箇所をクリックして、スタイルの一覧画面に戻ります。
    7.png
  5. 出来上がった「Streets」スタイルの右上の「Menu」ボタンから「Share, develop & use」をクリックします。
    8.png
  6. 少し下にスクロールすると「Style URL」と「Access Token」が発行されているので、メモしておきます。(後ほどコード内で記述します)
    9.png

これでMapboxでのスタイル作成は完了です。この後はこのスタイル上にkintone JavaScript APIとMapboxのAPIを使って、顧客の住所をプロットしていきます。

JavaScriptカスタマイズ

下のJavaScriptファイルをkintoneの顧客リストアプリに適用します。
またmap.jsには、編集が必要な箇所があります。domain / token / style をご自身の環境のものに編集してファイルを保存してからkintoneに適用してください。

map.js

レコード一覧と詳細画面で地図表示するためのJavaScriptファイルです。

 

また、いくつかライブラリも使っているので、それらもkintoneに適用します。
map.jsと併せて、PC用とスマートフォン用のJavaScriptファイル両方に記述してください。

  • jQuery
    • https://js.cybozu.com/jquery/3.2.1/jquery.min.js
  • Moment.js
    • https://js.cybozu.com/momentjs/2.20.1/moment.min.js
  • mapbox GL JS
    • https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.js

全てアップロードすると、以下のようになります。アプリへのJavaScript/CSSファイルのアップロードの方法はこちらのヘルプ(JavaScriptやCSSでアプリをカスタマイズする)をご参照ください。

13.png

動作確認

設定が完了したら最後に動作確認をしましょう!

顧客リストアプリ作成時にはサンプルデータが予め入っていますが、緯度経度データは空です。
空のままだと地図へのプロットができないので、地図自体表示されません。

17.png

仕組みとしては、レコード詳細画面表示時に住所から緯度経度を計算してレコード更新しにいくようになっています。
まず任意のレコードを選んで詳細画面を表示してください。画面がリロードされて、緯度経度フィールドにデータが入り、地図も表示されると思います。
地図上のピンをクリックすると詳細情報がポップアップするはずです。

15.png

この後、レコード一覧画面に戻ると詳細画面と同様にプロットされます。ここまで上手くいけば成功です!いかがでしょうか?

16.png

実際に使う際は、最後の注意事項もよく読んでからお使いください。

サンプルコードの解説

コードのポイント解説を行います。6つピックアップしたので、気になるところをご覧ください!

  • CSSファイル読み込み用の関数を用意
  • 地図クリック時のみズームやピンチアウトされるように制御
  • 一覧の絞り込み条件に合致するレコードを全件取得
  • 地図へのデータマッピング
  • 住所から緯度経度を算出
  • スマートフォン版対応のためのちょい技

CSSファイル読み込み用の関数を用意

PC版はkintoneの画面上からCSSファイルを指定できますが、スマートフォン版は指定する箇所がありません。
今回は地図を表示するためにスマートフォン版でもCSSを適用させる必要があるので、JavaScript内でCSSライブラリを読み込むための「loadFiles」関数と、CSSを直接指定する「cssCustomize」関数を用意しました。

地図クリック時のみズームやピンチアウトされるように制御

通常地図にマウスオンすると、勝手にズームやピンチアウトされるようになっています。レコードを選択したいのに、地図が邪魔してしまうケースが発生します。
今回はそれを避けるために、地図をクリックした時のみ動作するように制御しました。「pointer-events」というCSSプロパティを使っています。
DOM要素を指定している点はご注意ください。

一覧の絞り込み条件に合致するレコードを全件取得

現在表示しているレコード分のみ地図にプロットすることも可能ですが、今回は一覧の絞り込み条件に合致するレコードをPromiseで全件取得してプロットするようにしています。
PC版、スマートフォン版どちらも対応できるように記述しているのもポイントです!

地図へのデータマッピング

緯度経度データから地図にプロットする部分の流れです。
ざっくり言うと、Mapboxの地図を作成して、プロットするデータ配列を作成し、マーカー(地図上のピンアイコン)を追加するという処理順になります。

マーカー(地図上のピンアイコン)の部分です。Layerを追加する処理を加えると、Mapboxの標準アイコンを使うこともできますが、今回はFontAwesomeのピンアイコンを地図上にプロットするようにしています。

住所から緯度経度を算出

レコード内の緯度経度データが空の場合や編集した場合は、MapboxのGeocoding APIを使って住所から緯度経度を算出して、レコードに登録する処理を入れています。

スマートフォン版対応のためのちょい技

スマートフォン版では使えない要素取得の仕方があるため、PC版とスマートフォン版で「event.type」を使って条件分岐するようにしています。

おわりに

地図連携には様々なツールの選択肢がありますが、その中でも「使える、かっこいい」ツールの一つとしてMapboxはいかがでしたでしょうか?
地図の作成から可能なので、変幻自在です。ぜひまた違ったスタイルの地図を作成してみてください。

注意事項

  • kintone PC版とスマートフォン版の両方で動作します。
  • Mapboxのライセンスや料金体系をご確認の上、ご利用ください。 
  • Mapboxでは、地図上の表記を全て日本語に設定することができません。
    初期設定では全て英語になっているので、各国の言語で表示されるように設定し直す必要があります。
    具体的には、スタイル内のテキスト設定で「name_en」となっている箇所を全て「name」に編集することで対応します。(本Tipsでは、予め編集したものを読み込みました)
  • 表示中の一覧の絞り込み条件に合致するレコード件数分が地図にプロットされます。
  • 地図をクリックした時のみズーム/ピンチアウト/ピンクリックできるように制御しています。
  • 緯度経度が空のデータは、レコード詳細画面表示時にMapboxのGeocodingで住所から検索し入力されるようになっています。
    そのためレコード詳細画面を表示しない限りは、一覧画面の地図にも住所がプロットされません。
  • 地図の中心は、一番上のレコードの緯度経度に指定しています。(一番上のレコードに緯度経度データがない場合は、次のデータを参照します)
  • 本Tipsでは、Mapbox GL JSというライブラリを利用しています。(Mapbox.jsではありません)

本Tipsは、2018年3月時点の kintone と Google Chrome で確認したものになります。

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

ログインしてコメントを残してください。