소개

Comment Screen 좋네요!
다만, slack의 투고도 제휴할 수 있으면 더욱 편리할 것 같았기 때문에, 만들어 보았습니다.

전제 조건

heroku 관련

node.js가 로컬에서 움직일 수 있습니다

앞으로 할 일

"slack 게시물을 받고 Comment Screen (서버)에 보내는 api"를 heroku에 생성 (무료)

'slack 게시물을 보낼 bot' 만들기

heroku로 api를 움직입니다.

Slack의 Bolt 프레임 워크 튜토리얼을 Heroku에서 실행
를 참고로 했습니다. (감사합니다^^)
대부분, 위 사이트의 흐름과 같기 때문에, 다른 부분만 기재하겠습니다.

api에 필요한 패키지는 다음 두 가지입니다.

npm install @slack/bolt
npm install socket.io-client

또한 메인 js 파일은 다음과 같습니다.

app.js

const { App } = require('@slack/bolt')
const io = require('socket.io-client')

// CommentScreenのサーバーと接続
let socket = new io.connect('https://commentscreen.com', {
  reconnection: true,
  reconnectionDelay: 1000,
  reconnectionDelayMax: 5000,
  reconnectionAttempts: 100
})

// slack botと接続する
// tokenの設定は以下のように(bot作成後)
//   heroku config:set SLACK_SIGNING_SECRET=xxxxx
const app = new App({
  token: process.env.SLACK_BOT_TOKEN,
  signingSecret: process.env.SLACK_SIGNING_SECRET
})

// タイムスタンプと部屋名のdic
let timestamp2room = {}

// 全ての投稿を取得
app.message('', ({ message, say }) => {
  let roomName = ''
  let text = message.text
  // 投稿内に[CS]が含まれていたらComment Screenの部屋名を宣言しているとする
  if (~text.indexOf('[CS]')) {
    // スペースはあってもなくてもいいように置換
    roomName = text.replace(/\s+/g, '').split('[CS]')[1]
    if (roomName !== '') {
      // 親メッセージのタイムスタンプは子スレッドのthread_tsと一致するらしい
      if (message.thread_ts === undefined) {
        // タイムラインから宣言した場合
        timestamp2room[message.ts] = roomName
      } else {
        // スレッドから宣言した場合
        timestamp2room[message.thread_ts] = roomName
      }
      sendMessage(roomName, text)
    }
  } else {
    // 部屋名が登録済みなら
    if (timestamp2room[message.thread_ts]) {
      roomName = timestamp2room[message.thread_ts]
      sendMessage(roomName, text)
    }
  }
})
;(async () => {
  // Start your app
  await app.start(process.env.PORT || 3000)
  console.log('⚡️ Bolt app is running!')
})()

function sendMessage(roomName, text) {
  // その都度、所定の部屋に参加する
  socket.emit('join', { room: roomName })
  let array = makeJson(text)
  let jsonStr = JSON.stringify(array)
  // 参加した部屋に投稿を送信する
  // （もしかしたら、joinとmessageの間にsleepとか入れた方がいいのかも）
  socket.emit('message', jsonStr)
}

// 以下、本家サイト(Comment Screen)からコピペ
function makeJson(text) {
  return {
    position: 'opt_ue',
    size: 'opt_small',
    color: '#190707',
    text: text,
    uuid: generateUuid(),
    date: new Date().getTime()
  }
}

function generateUuid() {
  // https://github.com/GoogleChrome/chrome-platform-analytics/blob/master/src/internal/identifier.js
  // const FORMAT: string = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx";
  let chars = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.split('')
  for (let i = 0, len = chars.length; i < len; i++) {
    switch (chars[i]) {
      case 'x':
        chars[i] = Math.floor(Math.random() * 16).toString(16)
        break
      case 'y':
        chars[i] = (Math.floor(Math.random() * 4) + 8).toString(16)
        break
    }
  }
  return chars.join('')
}

slack bot 만들기

위와 마찬가지로 Slack의 Bolt 프레임 워크 튜토리얼을 Heroku에서 실행
를 참고로 했습니다. (감사합니다^^)

필요한 것은
- Bot 만들기
- OAuth & Permissions -> Scopes -> Bot Token Scopes 더 channels:history를 add
- Event Subscriptions 에서 이벤트 URL 설정(위 사이트 참조).
- 게다가 Subscribe to bot events 보다 message.channels를 add한다 (이것에 의해, 필요한 OAuth & Permissions가 자동으로 추가되므로, 2행째 필요없을지도)
- 앱을 workspace에 설치.

사용법

미리 적용하려는 채널에 앱을 /invite 한다

호스트는 평소와 같이 Comment Screen을 시작하여 방 이름을 결정합니다

slack에서 Comment Screen의 방 등록하기 (ex. 테스트 스레드 [CS] Testdayo, [CS] Testdayo)

thread내에 투고하는 것으로, Comment Screen에도 반영!

본래의 Comment Screen의 웹 화면에도 자동으로 코멘트가 반영되는 것 같습니다. (럭키)

장점

사용자는 slack 화면에서만 완결할 수 있습니다

로그가 슬랙에 남아 있습니다

단점

익명성이 손실됨

결론

필자는 Comment Screen을 응원하고 있습니다!