（著者：サイボウズ 竹内 能彦）
はじめに
今回は OpenLayers とOpenStreetMap を使って kintone に登録した写真の位置情報を地図に表示するサンプルを紹介します。
OpenStreetMap とは「道路地図などの地理情報データを誰でも利用できるよう、フリーの地理情報データを作成することを目的としたプロジェクト」で、無償で地図を利用できることが大きなメリットになります。
OpenStreetMap のライセンスについてはこちらをご確認ください。
注意事項
- 本Tipsのサンプルプログラムは、その動作を保証するものではありません。
- 本Tipsのサンプルプログラムについて、技術的なサポート等は行っておりません。
- スマートフォンなど端末の位置情報が無効の場合や、縮小版の写真を登録すると位置情報が取得できません。
- kintoneモバイルもしくはブラウザから「写真またはビデオを撮る」メニューを使って、直接撮影した写真には位置情報が含まれないことを確認しています。
デモ環境
https://dev-demo.cybozu.com/k/255/
※デモ環境についての説明、アカウントとパスワードはこちら
結果
まずは結果からご覧いただきましょう。
画像が一枚の場合
レコードに画像を一枚しか登録しない場合は撮影地点を中心に地図を表示します。
画像が複数枚の場合
複数枚登録した場合は、すべてのピンを地図内に収めるようにズームを自動調整します。
位置情報が取得できない場合
位置情報が取得できない場合はメッセージを表示します。
一覧画面での見え方
一覧画面にも地図を表示します。
アプリの準備
フィールドの設定（今回のカスタマイズで必要なフィールドのみを抜粋）
| フィールド名 | フィールドタイプ | フィールドコード |
| 写真 | 添付ファイル | pic |
| スペース | map |
JS/CSS設定
「アプリの設定 > JavaScript / CSSでカスタマイズ」の「PC用のCSSファイル」に以下のURLを設定します。
- https://js.cybozu.com/openlayers/v3.17.1/ol.css
「アプリの設定 > JavaScript / CSSでカスタマイズ」の「PC用のJavaScriptファイル」に以下のURL/ファイルを設定します。
- https://js.cybozu.com/jquery/2.2.4/jquery.min.js
- https://cdnjs.cloudflare.com/ajax/libs/blueimp-load-image/2.1.0/load-image.all.min.js
- https://js.cybozu.com/openlayers/v3.17.1/ol.js
- 以下のサンプルコードをエディタにコピーして、ファイル名を「sample.js」、文字コードを「UTF-8N」で保存、アップロードします。
※ファイル名は任意ですが、ファイルの拡張子は「js」にしてください
終わりに
地図の表示に利用した OpenLayers には様々な機能がありますので色々試していただければと思います。
（OpenLayers の機能サンプルはこちら）
記事に関するフィードバック
記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。