2019-01-13に更新

slack流量計の新バージョンをリリースしました(1/13追記)

image
運営者ギルド」で使用している、どのチャンネルで活発に議論されているかを可視化するツール「slack流量計」を年末にバージョンアップした話を書こうかと思います。

運営者ギルドって?

Webサービスの運営に必要なあらゆる知見を共有できる場として、Webサービス運営者達によって作られたコミュニティです。主にslackを用いて情報交換をしています。

slack流量計とは?

slack APIから書き込みの履歴を取得して日別・チャンネル別に書き込みの数を集計してslackにグラフとテキストで投稿するアプリケーションです。
(ギルドでは呼称が変わりました。)

旧バージョンで使っていた技術

旧バージョンではSpringMVCのタスクスケジューラを使用してバッチでサーバサイドでグラフを生成していました。
- Java
- Spring MVCのタスクスケジューラ
- JFreeChart(グラフ生成ライブラリ)
- MySQL

新バージョンで使っている技術

毎日定時に実行するのにnode-cronを使っています。今回はExpressでAPIを用意してクライアントサイド(chart.js)でグラフを生成し、puppeteerを使ってスクリーンショットを撮って画像を投稿するという形をとっています。
- NodeJS
- Express
- TypeScript
- node-cron
- chart.js
- puppeteer
- slack/client

バージョンアップ

バージョンアップ作業

  • 製造期間:12/28~30
  • 運用・改修:12/31~
    Javaからの移行なのでロジックは変えていませんが、ロジック以外はゼロから作っています。

バージョンアップした理由

  • いくつかデプロイしているJavaアプリケーションからNodeJSアプリケーションに移行を終えたかった
  • slackに投稿する処理で文字数制限を超えて失敗するケースがあるので改修したかった

苦労した点

  • chart.jsのプラグインでカラーセットを使っているが、実際に生成すると見辛い色が存在した。
  • puppeteerの動作で描画待ちをしていなかったため、グラフ描画前にスクリーンショットを撮ってしまう現象が発生。

自動表彰機能追加しました(1/5追記)

あんどさんの「WEB表彰」をお借りして自動で週1回表彰する機能を組み込んでみました。
image

  • puppeteerのpage.type()でフォーム入力できるから簡単♪
    →入力直後にフォーカスを奪われて入力できなくなる
    →page.evaluate()でDOM要素に直接書き込み。
  • 環境によるが、DOM書き換えだけでは描画が走らないことが判明
    →要素にフォーカスしてからkeyupイベントを送ることで対処
await page.evaluate( (str)=>{
                 document.querySelector('input#receiver.input').setAttribute('value',str[0])
                 document.querySelector('#certificate_body.input').textContent = str[1]
                 document.querySelector('input#sender.input').setAttribute('value','運営者ギルド勢いランキング')
             },str)
await page.focus('#certificate_body.input')
await page.keyboard.up('Shift')
  • 1行22文字しか入力できないのでsubstring()

パンチカード実装しました(1/13追記)

image
折れ線グラフと同じようにAPIを用意してchart.jsで描画しています。

今後の展望

週1回、チャンネルごとではなくユーザごとの書き込み数で「表彰」したら面白そう?(実装済み)
- GitHubのコミット履歴に昔あったパンチカードのグラフを実装したい(実装済み)

ソース

GitHub


ckoshien

アプリケーションエンジニア。 ReactJS/NodeJS/ReactNative/Java

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント