QiitaのOrganization一覧をGoogleスプレッドシート経由のWebスクレイピングしてSlackに毎日通知


# 背景

- エンジニアチーム全体にQiitaへの投稿を促す施策を考えてた
- そうこうしているうちに、みんなが投稿しまくったら、[QiitaのOrganization一覧ページ](https://qiita.com/organizations)で1位を獲得:muscle_tone3:

![image.png](https://qiita-image-store.s3.amazonaws.com/0/154018/a507d2f4-8456-2198-a11b-8bf00f771fdf.png)

- 沸き立つエンジニア。

**このモチベーションを続けさせたい！**

ということで、

- Webサービスと同じで、モニタリングしていく（見える化していく）ことで現在地がわかる

**毎日QiitaのOrganization一覧ページの上位20位までをSlackに通知して見える化だ！！**

思い立ったが吉日、早速作業に取り掛かる。

最近、Googleスプレッドシート×Google Apps Script（GAS）の組み合わせがお気に入りなので、スクレイピングできないかなーと思って調べてみた。

第一関門は、Webページの要素をGoogleスプレッドシートに落とすこと！！

# Googleスプレッドシートの編集

そう、`importxml` 関数を使えば、スクレイピングもできちゃいます。

- A2
    - `1`
- B2
    - `=importxml("https://qiita.com/organizations","//*[@id='main']/div/div/div[1]/ul/li["&$A2&"]/div[2]/h2/a")`
- C2
    - `=importxml("https://qiita.com/organizations","//*[@id='main']/div/div/div[1]/ul/li["&$A2&"]/div[2]/h2/a/@href")`
- D2
    - `="https://qiita.com"&C2&"/activities"`

※ `importxml` 関数の説明は [この記事](https://qiita.com/ktmg/items/d53440c913e20f8bb34c) を参考にした。

上記の数式を入力すると、
スプレッドシートに表示されのは下記のような表となる。

 rank | company_name | href | url 
 --- | --- | --- | --- 
 1 | ユアマイスター株式会社 | /organizations/yourmystar | https://qiita.com/organizations/yourmystar/activities 
 2 | 株式会社グロービス | /organizations/globis | https://qiita.com/organizations/globis/activities 
 3 | Quipper, Ltd. | /organizations/quipper | https://qiita.com/organizations/quipper/activities 
 4 | ランサーズ株式会社 | /organizations/lancers | https://qiita.com/organizations/lancers/activities 
 5 | ハンズラボ株式会社 | /organizations/hands-lab | https://qiita.com/organizations/hands-lab/activities 
 6 | TIS株式会社 | /organizations/tis | https://qiita.com/organizations/tis/activities 
 7 | ヤフー株式会社 | /organizations/yahoo-japan-corp | https://qiita.com/organizations/yahoo-japan-corp/activities 
 8 | リコーITソリューションズ株式会社 | /organizations/ayudante | https://qiita.com/organizations/ayudante/activities 
 9 | アユダンテ株式会社 | /organizations/jrits | https://qiita.com/organizations/jrits/activities 
 10 | 株式会社オープンロジ | /organizations/shouldbee | https://qiita.com/organizations/shouldbee/activities 
 11 | ShouldBee | /organizations/leverages | https://qiita.com/organizations/leverages/activities 
 12 | レバレジーズ株式会社 | /organizations/gamewith | https://qiita.com/organizations/gamewith/activities 
 13 | 株式会社GameWith | /organizations/zlab | https://qiita.com/organizations/zlab/activities 
 14 | ゼットラボ株式会社 | /organizations/miraito-inc | https://qiita.com/organizations/miraito-inc/activities 
 15 | 株式会社ミライトデザイン | /organizations/kronos-jp | https://qiita.com/organizations/kronos-jp/activities 
 16 | 株式会社クロノス | /organizations/yumemi | https://qiita.com/organizations/yumemi/activities 
 17 | 株式会社ゆめみ | /organizations/primebrains | https://qiita.com/organizations/primebrains/activities 
 18 | 株式会社プライム・ブレインズ | /organizations/rarejob | https://qiita.com/organizations/rarejob/activities 
 19 | 株式会社 レアジョブ | /organizations/openlogi | https://qiita.com/organizations/openlogi/activities 
 20 | 株式会社ヴァル研究所 | /organizations/digitalcubeinc | https://qiita.com/organizations/digitalcubeinc/activities 

# そして、Googleスプレッドシートの内容を、Slackに通知

1. Incoming WebHooksを有効にする
https://slack.com/services/new/incoming-webhook

2. Webhook URLをコピーしておく

3. スプレッドシートの「ツール」＞「スクリプトエディタ」を開く
4. スクリプトエディタにソースコードを記載する＆トリガーを設定する

```javascript

var slackUrl = "https://hooks.slack.com/services/aaaaaaaa/bbbbbbbb/xxxxxxxxxxxxxxxxxxxxx"; // 手順2でコピーしたURL
var username = 'Qiita Organization一覧'; // Slack通知のユーザー名を上書き
var icon = ':qiita:'; // Slack通知のアイコン画像を上書き

function postSlack(payload){

  var options = {
    'contentType' : 'application/json',
    'method': 'POST',
    'payload': JSON.stringify(payload),
    'muteHttpExceptions' : true
  };

  var response = UrlFetchApp.fetch(slackUrl, options);

  return response;
}

function reportOrganization() {
  var ssId = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"; // スプレッドシートのURLに含まれてるID
  var spreadsheet = SpreadsheetApp.openById(ssId);
  var sheet = spreadsheet.getSheetByName("organization");
  
  var range = sheet.getRange(2, 1, sheet.getLastRow() - 1, 4);
  var values = range.getValues();

  var line = '';

  // values[i] は 1行目
  // values[i][0] は 1列目
  // values[i][1] は 2列目
  // values[i][2] は 3列目
  // values[i][3] は 4列目
  
  for(var i = 0;i<values.length;i++){
    values[i].splice(2, 1);
    line += values[i].join(" ") + "\n";    
  }

  var body = {
    "text" : line,
    "username" : username,
    "icon_emoji" : icon
  };

  var postSlackResponse = postSlack(body);
}
```

# 最後にGASを自動実行するトリガーを設定する

1. 毎朝「時間主導型タイマー」を使って実行を設定

![2018-04-06_15h48_40.png](https://qiita-image-store.s3.amazonaws.com/0/154018/d7032c4c-06fd-dec6-fde8-510bf6cbeac9.png)


以上で完了です。
時間が来たら、自動的にSlackに通知が入ります！

![2018-04-06_15h45_00.png](https://qiita-image-store.s3.amazonaws.com/0/154018/d23c3977-6d69-f904-282a-f7f2062766d4.png)

毎日、20位以内に入るようにみんな更新してくれるかな～

エンジニアのみんなが楽しみながら、知識の定着や新領域の挑戦がしやすい環境を求めて、これからも色々試してみたいと思います！！