Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

MySQLの GEOMETRY 型とJavaScriptの Geolocation API の活用事例

190 views

Published on

FOSS 4G TOKAI 2018での発表内容です
弊社が開発しているCMS(a-blog cms)では MySQLのGIS機能を活用しています。このセッションでは、どのようにGIS機能を活用しているか、その活用例と技術的説明をさせていただきます。

Published in: Software
  • Be the first to comment

  • Be the first to like this

MySQLの GEOMETRY 型とJavaScriptの Geolocation API の活用事例

  1. 1. MySQLの GEOMETRY 型とJavaScriptの Geolocation API の活用事例
  2. 2. 目次 1.位置情報の活用例 2.技術的説明 3.今後の課題
  3. 3. 1.位置情報の活用例 a‑blogcmsではMySQLの GEOMETRY 型を活用していてます。 この機能を活用することで、利用者の位置情報に応じて店舗情報の出し 分けが可能になります。
  4. 4. 記事に対して、位置情報を登録 GoogleMapAPIを使用して取得した緯度、経度をエントリー(記事)に 紐づけて保存します。
  5. 5. この位置情報の機能を活用してできたのが以下のサイト spymaster.jp 愛知県の情報を集めたウェブマガジン
  6. 6. spymaster.jp
  7. 7. たとえば、
  8. 8. 自分が現在いる地点から近い位置順にお店を表示
  9. 9. たとえば、
  10. 10. あるお店から近い位置順にお店を表示
  11. 11. 2.技術的説明
  12. 12. JavaScriptのGeolocationAPIで現在地を取得 window.navigator.geolocation.getCurrentPosition(    success,     error,     options  );  https環境下でないと位置情報を取得できない
  13. 13. JavaScriptのGeolocationAPIで現在地を取得 success時 (longitude, latitude) => {       }); 
  14. 14. JavaScriptのGeolocationAPIで現在地を取得 https://caniuse.com/#search=geolo
  15. 15. JavaScriptのGeolocationAPIで現在地を取得 デバイスによる挙動の違い モバイルは2回聞いたら再び聞いてくる PCは一回許可すると許可したまま
  16. 16. フロントから送られてきた位置情報を元にSQL文を発行 MySQL5.7よりGIS機能関連が刷新されGEOMETRY型など位置情報に関 するデータを扱いやすくなりました。 ROUND(    GLENGTH(      GEOMFROMTEXT(        CONCAT('LineString($lat $lng, ', X($fd),  ' ', Y($fd),')')     )    ) * 111000  ); 
  17. 17. 今後の課題 GoogleMapだけではなく、 OpenStreetMap や Yahoo Maps にも対応し ていきたい。
  18. 18. ありがとうございました

×