Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

目次 1. 位置情報の活用例 2. 技術的説明 3. 今後の課題

Slide 5

Slide 5 text

1. 位置情報の活用例 a‑blog cms では MySQLの GEOMETRY 型を活用していてます。 この機能を活用することで、利用者の位置情報に応じて店舗情報の出し 分けが可能になります。

Slide 6

Slide 6 text

記事に対して、位置情報を登録 Google Map APIを使用して取得した緯度、経度をエントリー（記事）に 紐づけて保存します。

Slide 7

Slide 7 text

この位置情報の機能を活用してできたのが以下のサイト spymaster.jp 愛知県の情報を集めたウェブマガジン

Slide 8

Slide 8 text

spymaster.jp

Slide 9

Slide 9 text

たとえば、

Slide 10

Slide 10 text

自分が現在いる地点から近い位置順にお店を表示

Slide 11

Slide 11 text

たとえば、

Slide 12

Slide 12 text

あるお店から近い位置順にお店を表示

Slide 13

Slide 13 text

2. 技術的説明

Slide 14

Slide 14 text

JavaScriptの Geolocation API で現在地を取得 window.navigator.geolocation.getCurrentPosition( success, error, options ); https環境下でないと位置情報を取得できない

Slide 15

Slide 15 text

JavaScriptの Geolocation API で現在地を取得 success時 (longitude, latitude) => { });

Slide 16

Slide 16 text

JavaScriptの Geolocation API で現在地を取得 https://caniuse.com/#search=geolo

Slide 17

Slide 17 text

フロントから送られてきた位置情報を元にSQL文を発行 MySQL5.7よりGIS機能関連が刷新されGEOMETRY型など位置情報に関 するデータを扱いやすく なりました。 SELECT ROUND( GLENGTH( GEOMFROMTEXT( CONCAT( 'LineString( $lat $lng , ', X( $fd ) , ' ', Y( $fd ) , ')' ) ) ) * 111000 ) AS distance

Slide 18

Slide 18 text

今後の課題 Google Mapだけではなく、 OpenStreetMap や Yahoo Maps にも対 応していきたい。

Slide 19

Slide 19 text

ありがとうございました