GoogleAppsScriptでSlackにGoogle急上昇ワードを送信する（番外編でTeamsも追加）

# やりたいこと
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/c09b799a-1ca4-a9ed-38e5-333d62220f7b.png)

Googleトレンドの急上昇ワードを、SlackBotに投稿する。
目的は、仕事の息抜き。

## ゴールはGoogle急上昇ワードの内容をSlackに送ること！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/c78aca1a-a59f-a694-536a-a69841098f22.png)
↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/63232b51-cdc0-c0d0-4b8b-d63f734235ad.png)

# 手順
1. SlackAPIトークンキー取得
2. GoogleAppsScript作成
3. GoogleAppsScriptトリガー設定

# SlackAPIトークンキー取得
1. SlackAppsを作成する。
    https://api.slack.com/apps
  1. SlackAPIページにアクセスして、「Create New App」を実行する。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/f4f3d325-c416-5cc7-666a-6267551f56f1.png)
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/5cd2e3a5-b037-200a-37cd-76e226a8c924.png)
  1. 「Basic Information - Display Information」でApp名称やアイコンを設定する。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/9808cd64-77ab-8f6d-8aff-4f8340a0d78f.png)
1. SlackAppsのBotを作成する。
  1. 「App Home - Your App’s Presence in Slack」でBot名称を設定する。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/4c600390-5e21-905e-3027-9e54473c278f.png)
  1. 「OAuth & Permissions - Scopes」で権限を設定する。
     * channels:read
     * chat:write
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/d3642477-527c-f1eb-460d-270763bef705.png)
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/00800a2d-8b2f-8369-cd6c-53f706841143.png)
  1. 「OAuth & Permissions - OAuth Tokens & Redirect URLs」で「Install App to Workspace」を実行する。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/bf0250ef-a59f-02ad-4318-9d76abc13f17.png)
  1. 「OAuth & Permissions - OAuth Tokens & Redirect URLs」に作成された[Bot User OAuth Access Token]が表示される。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/43cefcd3-1937-765a-cc0d-d54eed098ce8.png)

1. Botをチャンネルに設定する。
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/79dc775d-2721-b66b-0ea1-402901eac79f.png)
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/0e4b23d4-2e31-bbe3-fd2d-e97749779104.png)

# GoogleAppsScript作成
1. プロジェクトを作成する。
    https://script.google.com/home
  1. 「新しいプロジェクト」を実行する。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/7b625fe9-5c9d-8200-e718-f6d303233c4d.png)
  1. プロジェクト名を変更する。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/d3d794ee-848d-3a09-d08c-f4bd4b41dd7b.png)
1. コード.gsを変更する。

```javascript:コード.gs
const GOOGLE_TRENDS_URL = 'https://trends.google.com/trends/api/dailytrends?geo=JP'
const SLACK_URL = 'https://slack.com/api/chat.postMessage'
/* SlackAPIトークンキーを設定!!!! */
const SLACK_TOKEN = 'xoxb-13848890xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
/* SlackAPIを設定したチャンネル名を設定!!!! */
const SLACK_CANNEL = '急上昇ワード'


/**
 * function name : notifySlackOfTrend.
 * Overview : Notify Slack of trend information.
 */
function notifySlackOfTrend() {
  // Get trend information from Google.
  const response = UrlFetchApp.fetch(GOOGLE_TRENDS_URL, {
    'method' : 'get',
  });
  const trends = JSON.parse(response.getContentText().replace(/^\)\]\}\'\,/g, ''))
  
  if (trends.default.trendingSearchesDays.length === 0) return 

  // Create a Slack message from trend information.
  const trendingSearches = trends.default.trendingSearchesDays[0].trendingSearches
  let trendMessages = ['*Google急上昇ワード*']
  for (const trendingSearchesDay of trends.default.trendingSearchesDays) {
    trendMessages.push('*' + trendingSearchesDay. formattedDate + '*')
    let ranking = 1
    for (const trendingSearche of trendingSearchesDay.trendingSearches) {
      const message = ranking++ + '. ' + '<https://trends.google.com' + trendingSearche.title.exploreLink + '|' + trendingSearche.title.query + '> '
        + '_' + trendingSearche.formattedTraffic + '_'
        + (trendingSearche.relatedQueries.length ?
          '\n```\n関連ワード:' + trendingSearche.relatedQueries.map(relatedQuerie => {
            return '<https://trends.google.com' + relatedQuerie.exploreLink + '|' + relatedQuerie.query + '>'
          }).join(',')
          + '\n```' 
          : '')
      console.log(message)
      trendMessages.push(message)
    }
    // Send a message to Slack.
    sendSlackBot(SLACK_CANNEL, trendMessages.join('\n'))
    trendMessages = []
  }
}

/**
 * function name : sendSlackBot.
 * Overview : If an channel is specified, an slack message will be sent.
 */
function sendSlackBot(channel, message) {
  if (!channel) return
  // Send message to bot.
  UrlFetchApp.fetch(SLACK_URL, {
    method: 'post',
    payload: {
      token: SLACK_TOKEN,
      channel: channel,
      text: message
    }
  })
}
```

1. 動作確認
  1. 実行メソッドを「notifySlackOfTrend」に変更後、実行ボタンを押下。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/b6ea5fe2-6c91-e739-fa85-4aff42c83478.png)
    権限確認が来るので、許可する。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/5b442d71-6160-7e14-614a-a0c275799b95.png)
  2. Slackのチャンネルに通知が来ていることを確認する
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/63232b51-cdc0-c0d0-4b8b-d63f734235ad.png)
    リンクもついているので、クリックで情報をみることもできます。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/3590a4a6-a003-368e-7a71-85314f577be1.png)
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/e2b1a3d2-0288-5e1c-c782-4a37943f05a3.png)
    

# GoogleAppsScriptトリガー設定
Slackに急上昇ワードのBot送信ができたので、定期的に実行するようにトリガーを設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/3c0cfaee-967c-9045-6615-bf455bf5a452.png)

1. 「トリガーを追加」からトリガー情報を設定する。
    今回は、ネタBotなので、お昼時間帯に1日1回送信する。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/8d5afd62-cc21-5eb9-91b2-099c32555ada.png)

# 最後に
今回は、毎日お昼になると急上昇ワードが送信されるようなネタBotを作成しました。
仕事で煮詰まっている人や、話す話題に困っている人に見てもらえると、チーム生産性やコミュニケーションが向上するかも！？

あまり、真面目にGASを触っていなかったのですが、手軽に使えるので今後もいろいろ試してみたいと思います。


# 番外編 Teamsに送信する場合

## GASスクリプト

```javascript:notifyTeamsOfTrend.gs
const GOOGLE_TRENDS_URL = 'https://trends.google.com/trends/api/dailytrends?geo=JP'
/* Teams Incoming WebhookのURLを設定!!!! */
const TEAMS_WEBHOOK = 'https://outlook.office.com/webhook/xxxxx'

/**
 * function name : notifyTeamsOfTrend.
 * Overview : Notify Teams of trend information.
 */
function notifyTeamsOfTrend() {
  // Get trend information from Google.
  const response = UrlFetchApp.fetch(GOOGLE_TRENDS_URL, {
    'method' : 'get',
  });
  const trends = JSON.parse(response.getContentText().replace(/^\)\]\}\'\,/g, ''))
  
  if (trends.default.trendingSearchesDays.length === 0) return 

  // Create a Teams message from trend information.
  const trendingSearches = trends.default.trendingSearchesDays[0].trendingSearches
  let trendMessages = ['# Google急上昇ワード']
  for (const trendingSearchesDay of trends.default.trendingSearchesDays) {
    trendMessages.push('## ' + trendingSearchesDay. formattedDate)
    let ranking = 1
    for (const trendingSearche of trendingSearchesDay.trendingSearches) {
      const message = ranking++ + '. [' + trendingSearche.title.query + '](https://trends.google.com' + trendingSearche.title.exploreLink + ') '
        + '_' + trendingSearche.formattedTraffic + '_'
        + (trendingSearche.relatedQueries.length ?
          '\n\n  - 関連ワード:' + trendingSearche.relatedQueries.map(relatedQuerie => {
            return '[' + relatedQuerie.query + '](https://trends.google.com' + relatedQuerie.exploreLink + ')'
          }).join(',')
          + '\n\n' 
          : '\n')
      console.log(message)
      trendMessages.push(message)
    }
  }
  // Send a message to Teams.
  sendTeamsBot({text:trendMessages.join('\n')})
}

/**
 * function name : sendTeamsBot.
 * Overview : Teams message will be sent.
 */
function sendTeamsBot(message) {
  // Send message to bot.
  UrlFetchApp.fetch(TEAMS_WEBHOOK, {
    method: 'post',
    payload: JSON.stringify(message)
  })
}

```

## Teamsの送信結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/97b2079f-e056-a4b0-e30c-bdec50059cc8.png)