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で動作を確認してみて下さい。
郵便番号を入力すると、住所が検索される動きをご確認ください。
詳細画面で地図を表示
これで郵便番号から住所が検索されますので、これをもとに詳細画面で地図を表示するようにします。
- 「やること」にカテゴリー：外部サービス連携のなかから、「地図をメニュー位置に表示する」を選択します
- 「場所」は「レコード詳細メニューの上側」を選択します
- 「APIキー」には、Google のサイトより取得したAPIキーを設定してください
- 「住所または緯度経度」には、住所のフィールドを選択します
- 「ズームレベル」には、初期表示時のお好みのズームレベルを数値で入力します。ダイアログにある通り「1:世界」「5:大陸」「10:市」「15:通り」「20:建物」と、大きな数字になるとズームされる状態で表示されます
- 「マーカー名」には、何も入力しなくても構いません。また、例えば会社名のフィールドを選択しても良いでしょう
「条件」には、「詳細画面を表示した時」を選択しておけばOKです。
設定は以下のようになります。
「kintoneアプリへ登録」をクリックして、kintoneで動作を確認してみて下さい。
住所の入ったレコードの詳細画面を開いて、地図が表示されることをご確認ください。
また、スマートフォン版でも同じように動作しますので、そちらでも試してみてください！
まとめ
郵便番号をもとに地図を表示するカスタマイズは以上になります。
今回は詳細画面に地図を表示しましたが、例えば一覧画面に表示されているものをマーカーで表示したりすることも可能です（ただし緯度経度情報がないと、多数のマーカーを表示するにはかなり時間がかかりますのでご注意ください）。
ぜひこのカスタマイズでGoogleマップを有効活用して（特にモバイルで！）、あなたの kintone アプリをより使いやすいものにしていってください。