2020-04-27に投稿

slack流量計ver3をリリースしました。

slack流量計とは

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

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);
      }
ツイッターでシェア
みんなに共有、忘れないようにメモ

ckoshien

個人開発4年目。普段はアプリケーションエンジニア。 ReactJS/NodeJS/ReactNative/Java

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

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

有料記事を販売できるようになりました!

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

関連記事

コメント