slack流量計とは

サービス運営者コミュニティ「運営者ギルド」のslackの統計情報を可視化するアプリケーションです。

• ver2リリース記事

ver3で何が変わったの？

VPSに移設

これまでslackに統計情報を集計するbotアプリケーションとして運用していましたが、サーバをVPSに移設しました。

WEBアプリケーション化

貴重なslackのリソースを消費せずにWEBで閲覧できるようになりました。(要slackサインイン)

puppeteerでのスクリーンショットは廃止

使っている技術

• ReactJS
• NodeJS/Express/TypeScript
• passport
• node-cron
• chart.js
• slack/client

技術的な話

react-bootstrap-table2をbootstrap CSSを適用せずに作る

分析機能を作ることが多いので、表を多用するのですが、react-bootstrap-table2というコンポーネントを結構使っています。

これまではbootstrap CSSを適用した後にこれでもかというぐらいCSSを上書きしていたのですが、今回は自力でキャレットを実装できました。
ページネーションもlist-style-type: none;に気づいてサクサク実装。
CSSいじるの楽しい！

th{
    font-size: 12px;
    .dropdown>.caret{
        &::after{
          font-family: "Font Awesome 5 Free";
          content: "\f0d7";  
        }
    }
    .dropup>.caret{
      &::after{
        font-family: "Font Awesome 5 Free";
        content: "\f0d8";  
      }
    }
    .caret{
      &::after{
        font-family: "Font Awesome 5 Free";
        content: "\f0d7";  
      }
    }
  }

  ul.pagination{
  display: flex;
  list-style-type: none;
  text-align: center;
  li.page-item{
    >a.page-link{
      text-decoration: none;
      background-color: #555555;
      padding: 3px;
      margin-right: 3px;
      color: white;
    }
    &.active > a.page-link{
      text-decoration: none;
      background-color: #bfbfbf;
      padding: 3px;
      margin-right: 3px;
      color: #555555;
    }
  }
}

passportを使ったslackサインインの実装

これは前回twitterサインインの実装をしたのが役に立ちました。

以下ソース抜粋

import passportConfig from './passportConfig';
import * as session from 'express-session';
const MySQLStore = require('express-mysql-session')(session);
passportConfig();
const passport = require('passport');

app.use(passport.initialize());
app.use(passport.session()); 
app.use(
  session({
    secret: '＊＊＊＊＊＊',
    resave: false,
    store: new MySQLStore(dbConfig),
    saveUninitialized: false,
    cookie:{
      httpOnly: false,
      secure: false,
      maxage: 1000 * 60
    }
  })
);

passport-slackはシリアライズ/デシリアライズを使っていないようなので、
実装個所は変わりますが、認証が成功した際にセッションに情報を格納するといけました。

(req: Request, res) => {
        req.session.user = req.account;
        res.redirect(BACKEND);
      }