GitHubActionsでQiitaとSlackを繋いで、エンジニアにとっての良い習慣をつくる。(追記あり)

よりよい技術者を目指すための習慣

私が感銘を受けた佐藤太一さんの講演でエンジニアが身につけたい習慣についてのお話があります。

デブサミ2016レポート「今日の習慣が明日をつくる～よりよい技術者を目指して～」
この中で特に、そこまで敷居が高くなく毎日実践できそうなことが書かれていました。（スライドお借りします。）

惰性でトレンドを見る習慣をつけるのが大事

毎日5分Trending repositories on GitHub todayを見よう
どんな言語が流行り、開発者が注目されているかを見る
最初はリポジトリまで見なくてもいい。惰性でトレンドを見る習慣をつけるのが大事
言語を絞らずにトレンドに上がるリポジトリを見てみると、誰かが学習成果を公開しているリポジトリが多い
だれかがムリのないやり方で続けて、上手くいったものを、皆が見にいっていることがわかる

この方がおっしゃているのはGitHubでのことですが、私たちにはQiitaがというプラットホームもありQiitaのトレンドを毎日見ることにもあてはめれるのではないかと思い、最近学んだ自動化を活用してエンジニアにとっての良い習慣を身に着ける仕組みが作れないか考案してみました。

GitHubActionsを活用する。

今回考案したものはこのようなものです。
Qiitaのトレンドの情報を取得して、GithubActionsのScheduleで設定した時間にSlackに通知します。
イメージはこんな感じです。

トレンドをみたければQiitaにアクセスすれば済む話ですが、人間はいかんせん面倒くさがりです。
また、Qiitaからはメルマガが来ますが、私の知る範囲ではトレンド一覧だけの内容はなかった気がします。

なので通勤中や朝起きた瞬間にLINEなどでスマホをいじっているタイミングでSlackから通知があれば、ついつい読んでしまうんじゃないかという仮説をたてました。
それが毎日続けば、プロラグラムを書く人（エンジニアに限らず）がどんな技術に興味を持っているか知れたり、同僚の方と「今朝のトレンドみた？」などのコミュニケーションが生まれたりするのではないかと思いました。

実際に作ったもの

時刻になったらトレンド一覧のURLとタイトルがSlackの画面に通知されます。

GitHub Actionsを使って指定時間にQiitaのトレンド取得するスクリプトを実行→Slackに通知するデモ#protoout #githubactions #slack #qiita https://t.co/NaeoQopbN5 pic.twitter.com/L2xQv4bjuT

— ウーリズム (@Uh_rhythm) September 30, 2020

ですが、こちらは手動実行したものです。後述します。

Node.jsでQiitaの情報取得する。

トレンドを取得するAPIがなかったためスクレイピングしました。
1日に1回の定期実行なので迷惑はかけないと思うのですが、どうなんでしょうか・・・
またトレンドは1回で無理のない量がどれくらいかわからなかったのでひとまず上位１０件の取得にしました。

const rp = require('request-promise');
const cheerio = require('cheerio');
const request = require('request');

const options = {
  transform: (body) => {
    return cheerio.load(body);
  }
};

const urls = [
    'https://qiita.com/'
];

const promises = urls.map((url)=> {
  return (async () => {
    try {
      const $ = await rp.get(url, options);
      const elm = $('div[data-hyperapp-app="Trend"]')[0]['attribs']['data-hyperapp-props']
      return elm;
    } catch(error) {
      console.error('Error:', error);
    }
  })();
});
Promise.all(promises).then((result) => {
    const list = JSON.parse(result[0]);
    const nodeList = list.trend.edges;
    for (var i = 0; i < 10; i++) {
        var title = nodeList[i].node.title;
        var author = nodeList[i].node.author.urlName;
        var id = nodeList[i].node.uuid;
        var url = `https://qiita.com/${author}/items/${id}`;
        var message =
`----------------
タイトル:${title}
URL:${url}`;
       postToSlack(message)
    }
})

function postToSlack(msg) {
  request({
      url: '{{ WebhookURL}}',
      method: 'POST',
      headers: {'Content-Type': 'application/json' },
      body: JSON.stringify({
      text: `@channel\n${msg}`,
      link_names: 1 // @がメンションと解釈されるためのフラグ
    })
  }, (error, response, body) => {
    if (error) {
      return console.error(error);
    }
  });
}

コードはこちらからお借りしました。
ありがとうございます。
Node.jsでスクレイピングするならこれが本命（たぶん）

GithubActionsで定期実行する

cronの設定はUTC（協定世界時）なので、人がスマホを眺めていそうな、通勤時間帯の日本時刻の朝8時にスクリプトを起動したかったので日本時間から9時間を引いた値を設定します。

on:
  schedule:
  - cron:  '00 23 * * *'
  # 日本時間で午前8時00分になる

こちらはcronの設定になるのですが下記のサイトを参考にしました。

日本時間の設定ありそうですが、どうなんでしょう。

タイムラグの謎

時間指定に関しては何度かテストをしたのですが、毎回五分前後のラグがありました。
21時に時間指定をして本番用の動画を撮ろうとしたのですが、スクリプトが起動したのは21時20分でした。
仕様なのか、理解が足りないのか調査が必要そうです。
また、リポジトリの設定をPublicにした状態でWebhookを載せたコードをGithubにあげてしまい、GithubとSlackの両方に怒られてしまいましたので、Privateを設定しましょう。

Slackに通知する

WebhookのURLを取得しますが、下記の記事を参考にさせていただきました。
ありがとうございます。

SlackのIncoming WebhooksでWebhook URLを取得する方法

画面にきちんとトレンド一覧が通知されています。

自動化と仲良くしてとにかく積み重ねて行こう

自動化をテーマにこの記事ともう一本記事を書きました。

IFTTTでTwitterのハッシュタグ投稿をSpreadSheetで管理する

記録や情報収集など能動的にやらなきゃいけないことも、システムにやってもらって
ストレスを減らせることがわかりました。
手間を減らして、インプットとアウトプットを積み重ねることでより良い自分を目指すことができそう。
さらにいろいろなシステムを組み合わせればより世界が広がることがわかりました。

とある識者の方も同意してくれました。

のびすけ校長に感謝

Qiitaに書くのが適切かはわかりませんが。
今回の制作は私がプロトアウトスタジオに入学するに至ったのびすけ校長の授業での課題でした。
憧れのエンジニアの方に教わった内容で自分の生活習慣を少し変えることができました。
これってすごくエポックな出来事です。
あらためて、ありがとうございました。

追記(2020年10月7日)

@yumetodo さんのからご指摘いただき非推奨のrequestの使用をやめaxiosに書き換えました
@dodonki1223 さんに情報をいただき、Qiitaのトレンド情報の取得方法が変わった変わったため書き換えました。

ありがとうございます！

'use strict'
const rp = require('request-promise');
const cheerio = require('cheerio');
const axios = require('axios');

const options = {
  transform: (body) => {
    return cheerio.load(body);
  }
};

const urls = [
    'https://qiita.com/'
];

const promises = urls.map((url)=> {
  return (async () => {
    try {
      const $ = await rp.get(url, options);
      const elm = $('script[data-component-name="HomeArticleTrendFeed"]')[0]['children']
      return elm;
    } catch(error) {
      console.error('Error:', error);
    }
  })();
});
Promise.all(promises).then((result) => {
  const list = JSON.parse(result[0][0].data);
  const nodeList = list.trend.edges;
  nodeList.map(function(item, index) {
    const title = item.node.title
    const url = item.node.linkUrl
    const message =
`----------------
タイトル:${title}
URL:${url}`;
    if (index < 10) {
      postToSlack({username: 'slack-bot',channel: '#qiita-trend-top10',text: `${message}`}).then(console.log);
    }
  });
})

async function postToSlack(payload) {
  const webhookUrl = '{{ WebhookURL }}'
  const res = await axios.post(webhookUrl, JSON.stringify(payload))
  return res.data
}