ダッシュで奪取

自分用のメモ

【Google Apps Script】10分でできるSlackへのお天気通知bot

この記事のゴール
  • 毎日指定の時間になったら、Slack に天気予報が投稿される
補足
  • 天気予報の取得には Weather Hacks を使用しました。

  • Weather Hacks の利用規約は こちら

目次

  1. Webhookの導入
  2. スクリプトの準備
  3. スクリプトの書き換え
  4. テスト実行してみる
  5. 定時実行させる
  6. 参考URL

1. Webhookの導入

  • その他 → アプリを追加する

f:id:kyoruni:20200505164527p:plain

  • webhook で検索し、 Incoming WebHooks を探してクリック

  • ※ 既に導入済のため画像では「表示する」になっていますが、何もしていないのであれば「インストール」と出ていると思います。

f:id:kyoruni:20200505164618p:plain

  • Slackに追加

f:id:kyoruni:20200505165007p:plain

  • 投稿させたいチャンネルを選択

  • 今回は test チャンネルにしています。

f:id:kyoruni:20200505165315p:plain

  • Webhook URL をコピーしておく

f:id:kyoruni:20200505165429p:plain

  • 下の方にスクロールすると、名前を変更できる箇所があるので任意で設定

    • アイコンについては、今回はスクリプト側で設定させるため不要です。
  • 変更したら、画面最下部の 設定を保存する を忘れずに!

f:id:kyoruni:20200505165520p:plain

2. スクリプトの準備

  • Google ドライブへ

  • 新規 → その他 → Google Apps Script を選択

  • 名前は適当で良いです!

f:id:kyoruni:20200505165657p:plain

  • エディタ画面が表示されるので、下記コードを貼り付け

f:id:kyoruni:20200505170029p:plain

const baseUrl    = `http://weather.livedoor.com/forecast/webservice/json/v1`
const dayText    = ['今日', '明日', '明後日']

// 地域ID: 横浜市 140010
const cityCode   = '140010'

// 天気予報を取得したい日: 今日 → 0, 明日 → 1, 明後日 → 2
const day        = 1

// webhook URL
const webhookUrl = 'ここにWebhookのURLを書く'

function main () {
  const url         = getUrl()
  const response    = fetchWeatherApi(url)
  const cityName    = response.location.city
  const weatherData = response.forecasts[day]
  const weather     = getWeather(weatherData)
  const message     = getMessage(cityName, weather)
  sendToSlack(weather.imageUrl, message)
}

function getUrl () {
  return `${baseUrl}?city=${cityCode}`
}

function fetchWeatherApi (url) {
  const response = UrlFetchApp.fetch(url)
  return JSON.parse(response.getContentText())
}

function getWeather (weatherData) {
  return {
    date:     weatherData.date,
    telop:    weatherData.telop,
    imageUrl: weatherData.image.url,
    max:      weatherData.temperature.max.celsius,
    min:      weatherData.temperature.min.celsius
  }
}

function getMessage (cityName, weather) {
  const dateMessage        = `${cityName} ${dayText[day]} \( ${weather.date} \) の天気`
  const weatherMessage     = `【 ${weather.telop}\n`
  const temperatureMessage = `最高気温:${weather.max}\/ 最低気温:${weather.min}\n`
  return { dateMessage, weatherMessage, temperatureMessage }
}
          
function sendToSlack (icon_url, message) {
  const jsonData = {
    'icon_url': icon_url,
    'text':     message.dateMessage,
    'attachments': [{
      'text': message.weatherMessage + message.temperatureMessage
    }]
  }
  const payload = JSON.stringify(jsonData)
  const options = {
    'method':      'post',
    'contentType': 'application/json',
    'payload':     payload
  }
  UrlFetchApp.fetch(webhookUrl, options)
}

3. スクリプトの書き換え

  • 5行目:天気予報を取得したい地域IDに書き換える(そのまま使うと 140010 = 横浜市になります)

// 4:
// 地域ID: 横浜市 140010
const cityCode   = '140010'
  • 8行目:天気予報を取得したい日に書き換える → 今日なら 0、明日なら 1、明後日なら 2
// 7:
// 天気予報を取得したい日: 今日 → 0, 明日 → 1, 明後日 → 2
const day        = 1
  • 11行目:Webhook URL → 先ほどコピーしておいたURLに書き換える
// 10:
// webhook URL
const webhookUrl = 'ここにWebhookのURLを書く'

4. テスト実行してみる

  • 赤枠の部分が main になっていることを確認して、青枠の 実行ボタン をクリック

f:id:kyoruni:20200505171457p:plain

  • 初回だと以下のメッセージが出るかもしれません。

    • 許可を確認 ボタンをクリック
Authorization needed
test needs your permission to access your data on Google.
  • 以下の画面が表示されるので、安全ではないページに移動

    • ページ移動したら、 外部サービスへの接続 を許可

f:id:kyoruni:20200505171553p:plain

  • ヤッター!(アイコン潰れちゃうのは見なかったことにしてください)

  • 画像では最高気温と最低気温に同じものが出ています(間違えた)(恥ずかしい)

f:id:kyoruni:20200505172127p:plain

5. 定時実行させる

このままだとボタンを押した時にしか動かないので、指定されたタイミングで Slack に投稿させるようにします。

  • エディタの時計アイコンをクリック

f:id:kyoruni:20200505172601p:plain

  • 右下の トリガーを追加

f:id:kyoruni:20200505173138p:plain

下記のように設定し、保存

  • 実行する関数の設定:main

  • 実行するデプロイを選択:Head

  • イベントのソースを選択:時間主導型

  • 時間ベースのトリガーのタイプを選択:時間ベースのタイマー

  • 時間の間隔を選択:任意の時間

f:id:kyoruni:20200505173356p:plain

  • 完了!

  • あとはドキドキしながら指定の時間を待つだけです。

f:id:kyoruni:20200505173803p:plain

6. 参考URL