slack のチャットボットフレームワークである botkit と
Nightmare というヘッドレスブラウザで自動テストなど書けるライブラリを使って
Webサイトのキャプチャーを撮ってslackに投稿してくれるchatbotを作ってみました。
デモ画像
使い方
リポジトリは以下
https://github.com/tamanugi/site-capture-bot
$ npm install
$ token=<your bot token> node bot.js
上記コマンドで botkit が起動します。
あとはslackで
@chatbot capture http://hoge.com
と話しかければ、指定されたURLのスクリーンショットを取得し、チャンネルに投稿します。
ちょっとハマったところ
botkit でURLを正規表現で抽出
URLを含むメッセージをbotkitで受け取るときURLは<>に囲まれて渡されるので
controller.heaers に書く正規表現は下記のようになる。
controller.hears(['capture <(https?://.*)>'],
これに気づかなくてなんでchatbotが反応してくれないのか
悩んでしまった。。。
botkitで画像をslackにアップロードする
以前はできなかったようで軽く調べても情報がでてこなかった。
botkitのissuesとか探してたら修正されているのに気づいた。
こちらは別の記事にも書きました。
Botkitで画像ファイルをslackにアップロードする
Nightmareでサイト全体のスクリーンショットを取る
Nightmare では以下のコードでスクリーンショットを取得できるのですが、
Nightmare();
.goto(url)
.screenshot('path/to/image.png')
これだとブラウザで見れる範囲しかスクリーンショットを取得できません。
そこでサイト全体をスクリーンショットする方法を探していたところ
以下のissueをみつけました。
こちらのissueを参考に body タグの幅と高さを取得し、
viewportに設定することでサイト全体のスクリーンショットを取得しています。
この方法をもうちょっと変えれば指定されたセレクタのみのスクリーンショットを取得することも
できそうです。