2018年6月より既存のサービスが整理された形で Google Maps Platform という新しいサービスが Google よりリリースされ、より Googleマップを簡単に利用することが出来るようになりました。

gusuku Customine では、この新しい Google Maps Platform と kintone を簡単に連携させる機能をご提供しておりますので、今回はその利用方法をご紹介したいと思います。このカスタマイズは、PC版でもスマートフォン版でもご利用いただけます。


Customineの基本的な事柄は、こちらの「はじめてのカスタマイズ」をご参照ください。


利用想定シーン

今回は郵便番号と住所フィールドを備えた顧客リストに地図を表示する、というシンプルなカスタマイズを作成してみたいと思います。利用する kintone アプリは、アプリストアにある「顧客リスト」を利用します。このアプリは cybozu developer network でも「住所から地図を表示する」というタイトルでカスタマイズ例が紹介されています。同じようなカスタマイズになりますので、見比べていただくのも面白いかと思います。

事前準備：Googleマップ APIキーの用意

まず、Googleマップを利用するためのAPIキーを用意します。手順や料金についてはこちら（もしくはこちら）をご確認ください。2018年7月現在のところ1ヶ月200ドルの無料クレジットが利用できますので、その範囲内であれば無料でご利用いただけます（この価格は変更される可能性がありますので、詳しくは Google のサイトにてご確認ください）。


Customineの設定

それでは、この顧客リストアプリに対してカスタマイズをしていきます。Customine のアプリ選択画面から、顧客リストアプリを選択してカスタマイズの作成を始めます。


このカスタマイズでは、次のような流れで Googleマップを表示してみたいと思います。

  • 編集画面で郵便番号のフィールドに値が入ったら、住所を検索
  • 詳細画面で、住所があれば地図を表示

それでは、それぞれの手順を設定してみましょう。


郵便番号から住所を検索

まずは住所を検索する部分からです。郵便番号が入力されたら、住所を検索したいので、以下のような形になります。

  • 「やること」にカテゴリー：フィールドの中から、「郵便番号から住所を検索する」を選択します
  • 「郵便番号フィールド」は「郵便番号(数字のみ)」を選択します
  • 「都道府県フィールド」から「住所(4)フィールド」は、全て同じ「住所」のフィールドを選択します。こうすると、全てを繋げて1つのフィールドに書き込むことが出来ます

やることの設定は以上です。住所をまとめて1つのフィールドに書き込む、というのがポイントですね。


続いて条件の設定をします。

  • 「条件」には「フィールドの値を編集して値が変わった時」を選択します
  • 「フィールド」には「郵便番号(数字のみ)」を選択します
  • 「一覧画面の鉛筆を押した時」は「一覧画面の鉛筆を押した時は含めない」を選択しておきましょう

設定は以下のようになります。

ここまでで一旦「kintoneアプリへ登録」をクリックして、kintoneで動作を確認してみて下さい。

郵便番号を入力すると、住所が検索される動きをご確認ください。


詳細画面で地図を表示

これで郵便番号から住所が検索されますので、これをもとに詳細画面で地図を表示するようにします。

  • c「やること」にカテゴリー：外部サービス連携のなかから、「地図をメニュー位置に表示する」を選択します
  • 「場所」は「レコード詳細メニューの上側」を選択します
  • 「APIキー」には、Google のサイトより取得したAPIキーを設定してください
  • 「住所または緯度経度」には、住所のフィールドを選択します
  • 「ズームレベル」には、初期表示時のお好みのズームレベルを数値で入力します。ダイアログにある通り「1:世界」「5:大陸」「10:市」「15:通り」「20:建物」と、大きな数字になるとズームされる状態で表示されます
  • 「マーカー名」には、何も入力しなくても構いません。また、例えば会社名のフィールドを選択しても良いでしょう

「条件」には、「詳細画面を表示した時」を選択しておけばOKです。

設定は以下のようになります。

「kintoneアプリへ登録」をクリックして、kintoneで動作を確認してみて下さい。


住所の入ったレコードの詳細画面を開いて、地図が表示されることをご確認ください。

また、スマートフォン版でも同じように動作しますので、そちらでも試してみてください！


まとめ

郵便番号をもとに地図を表示するカスタマイズは以上になります。


今回は詳細画面に地図を表示しましたが、例えば一覧画面に表示されているものをマーカーで表示したりすることも可能です（ただし緯度経度情報がないと、多数のマーカーを表示するにはかなり時間がかかりますのでご注意ください）。

ぜひこのカスタマイズでGoogleマップを有効活用して（特にモバイルで！）、あなたの kintone アプリをより使いやすいものにしていってください。