name_untitledのエッセイ

IT関係で知ったことなどを記事としてあげていきます。内容に不備や質問などあればぜひコメントをよせてください。

ChatBotで位置情報をとって、それをGoogle Map上に表示。

活動でデモをする必要があり、チャットボットいろいろと作ろうと思っている。

今日作ったのは、送信された位置情報を受け取って、DBに保存し、Webサイト上でそれを見れるようにするというもの。簡単なChatBotを作成している想定で話をします。

手順としては、

1.ユーザーから受け取ったメッセージから位置情報を抜き出す

2.DBにその情報を保存

3.Google Map上に表示

 

1.ユーザーから受け取ったメッセージから位置情報を抜き出す

受け取ったメッセージから位置情報をとるのは下記のようにします。

 lat = event.message.attachments[0].payload.coordinates.lat
lng = event.message.attachments[0].payload.coordinates.long

 

stackoverflow.com

2.DBにその情報を保存

このChatBotではMongoDBをMongoose経由で利用しているのですが、位置情報の入れ方がよく分からず時間がかかってしまいました。

var location;
var locationSchema = mongoose.Schema({
title: String,
coordinates: [Number]
}); 

 

new location(
{"title": title
, "coordinates":[lat,lng]}).save();

こんな感じで定義して、保存したら問題なく行けました。

 

3.Google Map上に表示

地図を表示するには、、、

あとから見つけましたがGoogleのサイトが丁寧で分かりやすかったです。

Adding a Google Map with a Marker to Your Website  |  Google Maps JavaScript API  |  Google Developers

吹き出しを追加したい場合は以下のサイトを参考に。

http://www.tam-tam.co.jp/tipsnote/javascript/post7755.html

 

JSONデータを取得する処理久しぶりに書いて、はてさてとなったので今どきの書き方のリンクも貼りつけます。

developer.mozilla.org

 

色々とあさってたらこういうGitHubのレポジトリが。ChatBotのコードを丁寧に説明してくれている。また読んでみよう。

github.com