Help us understand the problem. What is going on with this article?

サーバーサイドでGoogleマップ。 Hubotでslackにgooglemapを表示させてみてnpm登録もしてみた。

More than 5 years have passed since last update.

はじめに

こんにちはLIGのエンジニアのびすけです。

とあるプロジェクトでgoogle mapsを使う話が出たのですが、サーバーサイドからアクセス出来ないか思い立ったらカンタンに出来たので勢いでhubot scriptを作ってみました。

hubotの最近のバージョン(2.9系)だとscriptsフォルダ内にあったスクリプトが全て外部モジュールになってましたね。
ということもあり、これを機会に練習がてら、作成したhubotスクリプトをnpmに登録までしてみました。

googlemapsモジュール

まずは、googlemapsをnode.jsから扱ってみます。
ググると大抵ありますね。

https://github.com/moshen/node-googlemaps

$ npm i googlemaps

サンプルをもとに台東区周りを指定してみます。
かなり短いコードで試せます笑

map.js
var gm = require('googlemaps');
var util = require('util');

markers = [
    { 'location': '東京都台東区浅草' },
    { 'location': '東京都台東区上野' },
    { 'location': '東京都台東区東上野',
        'color': 'red',
        'label': 'A',
        'shadow': 'false',
        'icon' : 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe%7C996600'
    }
];

util.puts(gm.staticMap('東京都台東区', 14, '2000x800', false, false, 'roadmap', markers));

実行すると地図の画像リンクが吐き出されます。

$ node map.js
http://maps.googleapis.com/maps/api/staticmap?center=%E6%9D%B1%E4%BA%AC%E9%83%BD%E5%8F%B0%E6%9D%B1%E5%8C%BA&zoom=14&size=2000x800&maptype=roadmap&markers=%7C%E6%9D%B1%E4%BA%AC%E9%83%BD%E5%8F%B0%E6%9D%B1%E5%8C%BA%E6%B5%85%E8%8D%89&markers=%7C%E6%9D%B1%E4%BA%AC%E9%83%BD%E5%8F%B0%E6%9D%B1%E5%8C%BA%E4%B8%8A%E9%87%8E&markers=%7Ccolor%3Ared%7Clabel%3AA%7Cicon%3Ahttp%3A%2F%2Fchart.apis.google.com%2Fchart%3Fchst%3Dd_map_pin_icon%26chld%3Dcafe%257C996600%7Cshadow%3Afalse%7C%E6%9D%B1%E4%BA%AC%E9%83%BD%E5%8F%B0%E6%9D%B1%E5%8C%BA%E6%9D%B1%E4%B8%8A%E9%87%8E&sensor=false

ブラウザからアクセスするとこんな感じになります。

いちいちブラウザにアクセスするのは怠いのでSlackに貼りたい(hubot経由)

話の流れとしては、googlemapsをnode.jsで使えればOKだったのですが、確認用にブラウザにURLを貼るのが面倒だったという理由でHubot->slackへ投稿という形を取りました。

という理由で、Hubotのスクリプトで記述してみます。

"Hubot デフォルトのスクリプトで遊べそうなのものまとめ"にもあるようにデフォルトのhubotスクリプトでgoogle mapを表示するコマンドがあるっぽいですが、日本語対応してないみたいですし、スクリプト作成の練習がてら作ってみました。

$ npm i --save googlemaps
scripts/gmap.js
// Description:
//   Messing around with the google map API.
// Commands:
//   hubot gmap 'location'  - Return google map static images.

var gm = require('googlemaps');

module.exports = function(robot) {
    robot.respond(/gmap (.+)$/i, function(msg){
        console.log(msg.match[1]);
        markers = [{ 'location': msg.match[1] }]
        var output = gm.staticMap(msg.match[1], 14, '1000x800', false, false, 'roadmap', markers);
        msg.send(output);
    });
};
hubot gmap "location"

という感じで使えます。

ついでにnpm登録してみた

npm登録って初めてなのですが汗
こちらの記事(hubot-scriptを公開する方法(npm編))を参考にしてnpm公開してみました。

ちなみに.coffeeでnpm登録しましたが、↑のコードをCoffeeScriptに変換するとこんな感じ(?)でした。

map.coffee
#Description:
#   Messing around with the google map API.
#Commands:
#   hubot gmap 'location'  - Return google map static images.

gm = require("googlemaps")

module.exports = (robot) ->
  robot.respond /gmap (.+)$/i, (msg) ->
    markers = [location: msg.match[1]]
    output = gm.staticMap(msg.match[1], 14, "1000x800", false, false, "roadmap", markers)
    msg.send output
    return

  return

hubot-googlemaps

npmに公開したScriptです。
https://www.npmjs.com/package/hubot-googlemaps

使い方ですが、hubotのルートディレクトリで

$ npm install --save hubot-googlemaps
$ echo '["hubot-googlemaps"]' > external-scripts.json

とすればOKです。こんな感じで実行出来ます。

Hubot> hubot gmap 東京
http://maps.googleapis.com/maps/api/staticmap?center=%E6%9D%B1%E4%BA%AC&zoom=14&size=1000x800&maptype=roadmap&markers=%7C%E6%9D%B1%E4%BA%AC&sensor=false
n0bisuke
プロトタイピング専門スクール「プロトアウトスタジオ」で教えたりしてます。 プロフ -> https://dotstud.io/members/n0bisuke
https://protoout.studio
dotstudio
全ての人がモノづくりを楽しむ世界を目指して活動しています。
https://dotstud.io
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away