カテゴリー内の他の記事

拠点案内サービス プラグイン

フォローする

概要

株式会社ゼンリンが提供するサービス「拠点案内サービス」を利用している方向けのプラグインです。
kintoneアプリにこのプラグインを追加すると、kintoneに登録された住所データをMAP上に表示させることができます。
「拠点案内サービス」の詳細はこちら

レコード一覧画面

レコード詳細画面

モバイル画面 

拠点案内サービス プラグインを利用する

STEP1:フォームを設定する

アプリのフォームを設定します。次のフィールドを配置します。

*・・・配置が必須のフィールド

  • 住所フィールド*
    文字列(1行)フィールドを配置します。
  • 緯度フィールド*
    文字列(1行)フィールドを配置します。
  • 経度フィールド*
    文字列(1行)フィールドを配置します。
  • 地図を表示するスペースフィールド
    スペースフィールドを配置します。
  • マーカーのツールチップに表示する項目のフィールド
    任意の文字列(1行)フィールドを配置します。

STEP2: アプリにプラグインを追加する

アプリに拠点案内サービスプラグインを追加します。プラグインの追加方法は、kintoneヘルプを参照してください。

プラグインを追加する

STEP3: プラグインを設定する

  1. アプリ管理画面の「詳細設定」>「プラグイン」を開き、拠点案内サービスプラグインの歯車マークをクリックします。
  2. 各項目を設定します。
    項目名 説明
    住所 STEP1で配置した住所用のフィールドを選択します。
    緯度 STEP1で配置した緯度用のフィールドを選択します。
    経度 STEP1で配置した経度用のフィールドを選択します。
    地図 STEP1で配置した地図用のフィールドを選択します。
    マーカーのツールチップに表示する項目のフィールド STEP1で配置したマーカーのツールチップ用のフィールドを選択します。
    使用する機能

    以下から必要な機能を選択します。

    • 一覧画面のマップ表示
      レコード一覧画面で、表示されている各レコードの住所を1つのマップに全て表示します。
    • 詳細画面のマップ表示
      レコード詳細画面で、現在開いているレコードの住所をマップに表示します。
    • 現在値から目的地までのルートを表示する(詳細画面のみ)
      レコード詳細画面にて、現在値からのルート検索をおこないます。徒歩もしくは車でのルート検索が可能です。
    • モバイル画面でのマップの表示
      モバイルで本アプリを観た時にマップを表示します。
    マップのサイズ

    以下を設定します。

    • 一覧画面のマップの高さ
      pxで指定します。未入力の場合、デフォルト値の600pxが適用されます。 
    • 詳細画面の高さ
      pxで指定します。未入力の場合、デフォルト値の600pxが適用されます。 
    • 詳細画面のマップの横幅
      pxで指定します。未入力の場合、デフォルト値の600pxが適用されます。 
    • モバイル画面のマップの高さ
      pxで指定します。未入力の場合、デフォルト値の200pxが適用されます。 
    一覧画面に表示する地図の中心緯度・経度・ズームサイズ

     以下を設定します。

    • 一覧画面のマップの中心緯度
      一覧画面でマップを表示させる場合の地図の中心緯度を指定します。デフォルトは35.681382です。
    • 一覧画面のマップの中心経度
      一覧画面でマップを表示させる場合の地図の中心経度を指定します。デフォルトは139.766084です。
    • 一覧画面のマップのズームサイズ
      5 - 17 の13段階で指定できます。デフォルトは10です。
    拠点案内サービスの企業ID  企業IDの設定は拠点案内サービスの利用が必要です。こちらからお問い合わせ下さい。
    開発用 or 本番用のドメイン 株式会社ゼンリンより提供されるサービスのドメインを入力してください。
  3. 画面下部「保存」をクリックします
  4.  「アプリの設定」画面で[設定完了]をクリックすると、プラグインの設定がアプリに反映されます。

STEP4: プラグインを利用する

  1. レコードを登録します。保存ボタンを押す際に、住所から緯度・経度を自動で取得するため緯度・経度の入力は不要です。
  2. 選らんだ「使用する機能」に応じて、各画面でレコードに保存された住所情報を元に地図が表示されます。

サンプルプラグイン

plugin-sdkにアクセスしてフォルダごとダウンロードしてください。そのフォルダ内の「examples/kyotenn」に、今回のファイル群があります。
「kyotenn」 配下のファイル構成は次のとおりです。

kyotenn/ 
 css/
  -51-modern-default.css
  -config.css
html/
-config.html image/ -communication(green)_green.jpg js/ -config.js -jquery.min.js -map-zenrin_getLatLon.js
-map-zenrin_detail-show.js
-map-zenrin_index-show.js
-map-zenrin_mobile.js manifest.json

プラグインの開発手順 パッケージング を参考に、「kyotenn」をパッケージングします。

パッケージングしたサンプル

kyotenn_plugin.zip

更新履歴

2015/11/30 サンプルプラグインを公開しました
2015/12/01 レコードが新規登録できない不具合を修正しました。
2016/03/29 増殖バグを改修しました。
2016/11/16 複数の不具合を修正しました。詳細はgithub上のcommitでご確認ください。
2017/07/28 以下の点を修正しました。
      - スタイルシートを「51-us-default.css」から「51-modern-default.css」に変更しました。
      - その他軽微な修正を行いました。
2017/08/24 「51-modern-default.css」を差し替えました。
2017/10/31 以下の点を修正しました。
                 - プログラムで使用しているフォーム設計情報取得APIを、フィールドの一覧を取得するAPIとフォームのレイアウトを取得するAPIに置き換えました。

注意事項

  • サンプルプラグインは、その動作を保証するものではありません。
  • サンプルプラグインの技術的なサポート等は行っていません。
  • CSVファイルからデータをインポートした際は緯度・経度を取得しませんのでご注意ください。
  • 拠点案内サービスでは、日本測地系が採用されてます。他のMapサービスと比べて450mほどずれが生じる可能性がございます。
  • サンプルプラグインのご利用に際して、株式会社ゼンリン提供の「拠点案内サービスAPI」の利用契約が必要となります。
  • cybozu.comのセキュアアクセスを設定している方は、ゼンリンへキー発行申請をする際、リファラにセキュアアクセス用のURLを追加してください。

拠点案内サービス

拠点案内サービスは株式会社ゼンリンより提供されているサービスとなっております。詳しくは下記のリンク先をご参照ください。

お問い合わせ窓口

拠点案内サービス自体のお問い合わせはこちらからお問い合わせください。

※kintoneプラグインはスタンダードコースでのみご利用いただけます。ライトコースではご利用いただけませんのでご注意ください。

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

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

Avatar
マツ

松山と申します。
手順通り、設定したはずがレコードが保存できません。保存ボタンを押しても反応がありません。緯度・経度フィールドの自動取得もされません(入力不可項目としてグレーアウトはしています)。
以上のような状況なのですが、どなたかお力をお貸しいただけませんでしょうか。

Avatar
kyohei-kitagawa

マツさん
cybozu.com developer network事務局です。
12/1に一度差し替えていますが最新バージョンをお使いでしょうか?
(kyotenn_v1.0.1)

私の方で試しましたが正常に動きます。
もし、最新バージョンで動かない場合ブラウザのコンソールにどういったエラーがでていますでしょうか?

Avatar
マツ

事務局さん
早速コメントありがとうございます。
本日ダウンロードした「kyotenn_v1.0.1.zip」を使用しております。
エラーは表示されません。新規登録時、編集時とも保存ボタンを押しても反応が無い状態です。
プラグインの設定が誤っているのではとも思っているのですが、「開発用 or 本番用のドメインを入力」の項目は「企業ごとのドメイン.s.cybozu.com/k/アプリ№」と入力していますが間違いないでしょうか?

Avatar
マツ

補足ですが、
ゼンリンのいつもNAVIデベロッパーズサイトのリファラには「https://企業ごとのドメイン.s.cybozu.com/k/アプリ№/」と登録しています。

Avatar
kyohei-kitagawa

マツさん

「開発用 or 本番用のドメインを入力」の項目は「企業ごとのドメイン.s.cybozu.com/k/アプリ№」と入力していますが間違いないでしょうか?
こちらはcybozu.com環境のドメインではなく、ゼンリン様から提供される環境のドメインになります。(検証用 or 本番用)

Avatar
kyohei-kitagawa

また、設定がどこか間違えている場合はリクエスト失敗の主旨がブラウザのコンソールにでますのでご確認ください。

Avatar
マツ

ゼンリン様から正しいドメインを教えていただき設定しましたが、症状は改善しませんでした。
フォームにSTEP1で説明があるフィールド以外のフィールドが存在していても動作しますでしょうか?

Avatar
kyohei-kitagawa

マツさん
上記であげていただいているリファラ設定ですが、セキュアアクセス用のURLになっているようです。
こちらを通常のURLに変えてみてはいかがでしょうか。
また、ワイルドカードを用いて以下のようにしてみてはいかがでしょうか?

例:
https://example.cybozu.com/k/*

Avatar
マツ

事務局さん
ご指摘いただきました通りにリファラを設定しましたところ、正常に動作しました。
本当にありがとうございました。

Avatar
kyohei-kitagawa

マツさん
正常に動作したようでよかったです!
またなにかあればコメント頂ければと思います!

Avatar
マツ

1つ質問させていただきます。
このプラグインの仕様に「保存ボタンを押す際に、住所から緯度・経度を自動で取得するため緯度・経度の入力は不要です。」とありますが、CSVより顧客の住所情報を読み込んだ場合、CSV読み込み時には緯度・経度は自動取得されないと思います。
緯度・経度を取得するには読み込み後に1件ずつ編集→保存という操作を繰り返さないといけないのでしょうか。顧客情報が多数あるのであまり現実出来ではありません。
そこで、ExcelでGeocoding API を使用し、予め緯度・経度を取得してからCSVにして読み込ませてみたのですが、ゼンリンAPIを使用した緯度・経度情報と微妙に異なってしまいます。
何かいい方法はございませんでしょうか。

Avatar
kyohei-kitagawa

マツさん

ご返信おくれてすみません。
恐らくですが、Geocoding APIはゼンリン社が採用している測定法とことなるので若干の差異がでてしまうのかと思います。
一括で更新する方法ですが、現在このページで公開しているサンプルを拡張して一括で緯度・経度を取得&更新できるようにするしかなさそうです。

Avatar
まさ

お世話になります。現在、こちらのサービスを利用をトライしているのですがうまく地図が表示されません。
初心者なのもので見当違いの質問なら申し訳ないのですが
どうも登録している住所から緯度経度への変換がうまくいっていない感じです。
直接緯度経度を手入力すれば表示されるのですが、、、
正常な動きだと住所から緯度経度を自動で算出してくれるのではと理解しておりますが設定が間違っているのでしょうか。
よろしくお願いいたします。

Avatar
kyohei-kitagawa

まささん
cybozu.com developer network事務局です。

今こちらの手元で確認した所、緯度経度変換に関しては問題ありませんでした。
ブラウザのコンソールなどからエラーの原因を追い、設定を見直してみてください。

Avatar
kyohei-kitagawa

デバッグに関してはこちらをご参照いただければと思います。

▼動かない?そんな時はデバッグをしてみよう!入門編
https://cybozudev.zendesk.com/hc/ja/articles/207613916

Avatar
まさ

事務局さん
有難うございます。頂い方法で調べましたが以下のエラーになってます。

Mixed Content: The page at 'https://XXXXXXX.cybozu.com/k/14/show#record=59&l.view=2189&l.q&l.sort_0=f2174&l.order_0=DESC' was loaded over HTTPS, but requested an insecure image 'http://mapcache.e-map.ne.jp/image/nomap.png'. This content should also be served over HTTPS.

原因は分かりましたがKintone側の設定なのかゼンリン側の設定の問題なのでしょうか。
お手数かけますがよろしくお願いいたします。

Avatar
kyohei-kitagawa

まささん
これは、レコード保存のタイミングで出たエラーでしょうか?
(関係ないエラーのように見えます。)

緯度経度に関して変換されない原因として考えられるものは…

・設定画面にて「緯度」「経度」フィールドがただしく設定できていない
・設定画面にて入力した企業ID or ドメインがただしくない

などの理由が考えられます。
また、ブラウザの設定などによって挙動が変わってしまう可能性があります。 
(ちなみに私が先ほど試したのはgoogle Chromeで、デフォルト設定でした。)

Avatar
まさ

事務局さん

ご回答有難うございます。
>これは、レコード保存のタイミングで出たエラーでしょうか?
>(関係ないエラーのように見えます。)
こちらは「レコード詳細画面」表示の際にコンソールに表示された内容です。

再度設定画面で確認しました。
・既存の「顧客リストアプリを利用」
・プラグインの設定画面にて「住所フィールド」には「住所」、緯度フィールドには「緯度」、「経度フィールド」には「経度」
 「地図表示スペース」には「MAP」、「ループチップ」には「会社名」を選択
・企業IDはゼンリン社から提供のIDとドメインを記載(http://www.zenrin.co.jp/lp/opn/kintone/step.pdf)
・IEでログインして確認しましたが結果は変わらず(通常はChromeを利用)

上記内容で確認しましたがやはり緯度経度がブランクのままで地図上に示されません。
プラグイン側に設定しているフィールは「フィールドコード」ではなく「フィールド名」で選択してますが
これは問題ないのでしょうか。

Avatar
kyohei-kitagawa

まささん
>こちらは「レコード詳細画面」表示の際にコンソールに表示された内容です。
こちらで同様のメッセージを確認しましたが、エラーではなく警告レベルのメッセージでした。 処理上問題はなさそうです。
恐らく、JavaScriptのエラーである場合レコード保存前イベントが発火するタイミングでなんらかのエラーがでていますのでご確認ください。
(もし出ない場合は、設定の誤りが原因である可能性が高いです。使用する機能のチェック忘れ等今一度ご確認いただければと思います。)

また、プラグイン設定画面ではフィールドコード名を表示するようにしてはいますが、
処理をする際にフィールドコードを使うようにしているので問題ありません。

Avatar
kyohei-kitagawa

まささん
いつもNAVIデベロッパーズサイトをお使いでしょうか?
もしかしたら、リファラ設定がそちら側で正しくされていない可能性があります。
ご確認ください。

Avatar
まさ

事務局さん

ご確認有難うございます。
私の方でも色々と調べてみましてある程度要因が絞り込めました。

顧客リストのアプリを使って利用しているのですが
レコード一覧画面からレコード詳細画面に移動し、新規でレコードを追加すると「レコード詳細画面」の「住所」の下に
問題なく地図が現れます。

今回、地図表示させたい「リスト」は「ファイルから読み込む」で一括登録してます。
おそらくこの過程で不具合が生じているのかかといろいろ試してますが今だ原因特定まで行けません。
(一括ではなく手作業で入力すると問題なく表示されます)

一括登録する際のフィールド名に制約などあるのでしょうか。
(試しに住所1列だけの50件のファイルを上げましたが同様に表示されません)

よろしくお願いいたします。

Avatar
kyohei-kitagawa

まささん

そうだったのですね…
現状、JavaScriptの処理としては画面からレコードを追加する時にしか処理をおこなえないので、
CSVファイルからインポートした際は、緯度・経度は追加されません。。
掲載のサンプルを更にカスタマイズして、例えば一覧画面でボタンを押したら一括で全レコードの緯度経度を取得するような拡張をしなければいけなさそうです…

Avatar
kyohei-kitagawa

注意事項を追記しました。
>CSVファイルからデータをインポートした際は緯度・経度を取得しませんのでご注意ください。

Avatar
まさ

事務局さん

ご対応有難うございます!理由がわかったので良かったです。
実運用時は、一括して住所などの顧客情報を入れることになると思いますので
プログラム初心者の私としては、「一括で全レコードの緯度経度を取得する」ボタンなどがあると嬉しいです!

この度は有難うございました!

Avatar
伊坂

はじめまして、伊坂と申します。
初心者のため、初歩的な質問で申し訳ないのですが…ご教示ください。

一覧画面で、次のページに進むと、地図と一覧表示の間に、
地図の表示スペースと同じくらいの大きさの空白スペースができます。
次へ次へとページを進めるごとにそのスペースが増えていくので、
できればスペースのできない状態で使用したいと思います。

この場合、こちらで提供されているプラグインファイルを解凍して、
map-zenrin_index-show.js ファイルにスペースができないよう追記し、
再度パッケージングをすれば、またプラグインファイルとして使えるものなのでしょうか?

Avatar
kyohei-kitagawa

伊坂さん
cybozu.com developer networkです。

原因は想像できますので、こちらでアップデートしようと思います。
(いつまでとは保証できませんがはやめに対応します!)

なお、第三者のかたでも
https://github.com/kintone/plugin-sdk
からソースを取得して拡張することが可能です。
(もし、汎用性のたかい機能拡張などをしたソースを公開してほしい場合などは、pull requestをいただければこちらで判断しマージ致します。)

Avatar
伊坂

ありがとうございます、アップデートしていただけると助かります!
よろしくお願いいたします。

第三者でも、プラグインファイルに手を加えることも可能なんですね。
勉強のために、自分でも頑張ってやってみようと思います。

Avatar
kyohei-kitagawa

伊坂友加里 さん
cybozu.com developer networkです。
ご依頼いただいた不具合を改修し、サンプルをアップデートしました。
ご確認よろしくお願いします!

Avatar
伊坂

ありがとうございました!さっそく最新版をアプリに適用させていただきました。

Avatar
さち

バグが見つかりましたのでご報告します。
プラグインの設定画面で、「詳細画面のマップの高さ」欄を変更して、保存すると…
「企業ID」欄が変更されてしまうようです。

再現方法
 1.詳細画面のマップの高さに「400px」と入力し保存する。
 2.再度、プラグインの設定画面を開くと、企業ID欄に「400px」と表示される。

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