お天気ババアをリッチにした話

こちらのお天気ババアbotを改良しました。
http://qiita.com/bbq-all-stars/items/4792c2443dbb6ecb777c

<img width="300" alt="スクリーンショット 2017-01-26 19.41.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/69711/66085bb9-e330-ce73-6e30-2de0d46e06d6.png">

ババアをリッチに表示しました。
ついでにSlackのデフォルト投稿チャンネルを設定して、前チェック時から雨のステータスに変化があった場合に、投稿チャンネルに自動でババアが通知をするようにしました。

ババアは降雨強度に従って全9種類 + エラー文言1種類
<img width="300" alt="スクリーンショット 2017-01-26 19.14.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/69711/1e9e8140-50fe-416a-b964-6721387df1c2.png">


Githubにもあげた。
https://github.com/bbq-all-stars/RainBBA

# ババアの機能
* Slackの公開チャンネルならどこでもコマンド一つで雨が降っているか教えてくれる
* 雨のステータスに変化があったら、設定したチャンネルに通知をしてくれる
* ステータスに応じてババアの態度が変わる
* ステータスに応じてババア横のバーの色が変わる
* (コマンド) list ってやると全ババアを表示してくれる
* エラー時にはエラーメッセージと共に罵倒される

# 使い方
1. code.gsをGoogle Apps Scriptにあげる
2. Google Apps Scriptを「ウェブアプリケーションとして導入」する
3. [ここ](https://api.slack.com/docs/oauth-test-tokens)でSlackのアクセストークンを取得
3. 前工程で得られたウェブアプリケーションのURLを、SlackのOutgoing Webhooksに設定。同時にババア起動コマンドを決める。ここでは「rain?」にしている。
4. Outgoing Webhooksのトークンを取得
4. YahooのAPIのトークンを取得
5. Google Apps Scriptのプロジェクトのプロパティに、下記のパラメータを追加する
6. おもむろにSlackの公開ちゃんねるでババアを起動コマンドを叩く

# 設定値一覧
|プロパティ名|説明|
|:-:|:-:|
|SLACK_ACCESS_TOKEN|Slackのアクセストークン|
|OUTGOING_WEBHOOK_TOKEN|Outgoin Webhookのトークン|
|YAHOO_API_TOKEN|YahooのAPIトークン|
|DEFAULT_COODINATES|デフォルト観測場所|
|DEFAULT_WEATHER_CHANNEL|デフォルトで投稿するのSlack公開チャンネル|

# 地味にハマった箇所
## SlackのpostMessageの画像表示
今回ババアをリッチに表示するにあたって、画像をLineのスタンプみたいに表示出来ないかなー、と考えてました。
最初はメッセージ本文に画像のURLを入れて、Slackの自動プレビュー機能でやってたんですけど、なぜかたまに画像が表示されないことがある。
<img width="499" alt="スクリーンショット 2017-01-26 20.17.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/69711/eb8a8b9f-be1a-cc81-802a-1fe7481c0378.png">

直近で同じ画像があるとどうやらプレビューが表示されないらしい。
ということで、何か方法はないかと探すと、今回使ってる[GASのライブラリ](https://github.com/soundTricker/SlackApp)が使っている[SlackのWebAPI](https://api.slack.com/methods/chat.postMessage)に、[attachmentsっていう設定項目があって](https://api.slack.com/docs/message-attachments)、そこにimage_urlって項目があるじゃありませんか。
そこで前出のGASのライブラリを使ってこうやってみた。

```js:postMessage
  var app = SlackApp.create(SLACK_ACCESS_TOKEN);
  app.postMessage(
    channelId, 
    "",
    {
      username: botName,
      icon_url: icon,
      attachments: [{
        pretext: "",
        image_url: icon,
      }],
    }
  );
```
...動かない。
てっきりattachmentsの書き方が間違っているのかと思って、[MessageBuilder](https://api.slack.com/docs/messages/builder)で試すと動く。
で、ライブラリのソースコード読んだり、色々いじったりしてもなぜか動かなくて、おかしいなとSlackのAPIのドキュメントを読んでみたらこんな記述が。

> * For the Web API, include an attachments property, containing a JSON-encoded array of attachment hashes.

ん？もしかしてと思ってattachmentsをJSON.stringifyしてみる。


```js:postMessage
  var app = SlackApp.create(SLACK_ACCESS_TOKEN);
  app.postMessage(
    channelId, 
    "",
    {
      username: botName,
      icon_url: icon,
      attachments: JSON.stringify([{
        pretext: "",
        image_url: icon,
      }]),
    }
  );
```

<img width="300" alt="スクリーンショット 2017-01-26 20.32.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/69711/e4db0898-c4b8-6315-c70e-8518ba88de51.png">

やったぜババア

attachmentsはJSON.stringifyしないといけないみたいです。
ちなみにimage_urlだけ指定しても画像が表示されなくて、pretextに空文字を指定する必要があった。

# ちなみに
会社のSlackで#weatherチャンネル作ってやってたんですけど、ババアをリッチ表示にしたら何人かチャンネルを抜けました。