WebスライドにリアルタイムでリアクションできるChrome拡張「Recho」をリリースした【開発編】

こんにちは、ぽこひでです。

先日公開した「Recho」というChrome拡張の開発編。

pokohide.hatenablog.com

「Recho」はWebスライドにTwitterハッシュタグを指定して起動すると、そのハッシュタグを含むツイートをニコニコ動画のようにスライドに流すChrome拡張です。また、Recho内のQRコードからスマホで操作可能なスライド操作ページに移動でき、そこからスライドの操作を行えます。

技術

今回開発したRechoは主に「Recho API」と「Recho Extension」の2つから構成されています。

f:id:pokohide:20170905143812p:plain

Recho API

Recho APIChrome拡張として埋め込むフロント部分のRecho ExtensionとWebSocketでの接続を行ったり、Twitterのツイートのストリーミング配信などを行うAPIです。このAPIは以下の技術で構成されています。

  • Node.js
  • Heroku
  • socket.io

特に難しいことはやっておらず、フロントからWebSocketの接続を受け付けて、Rechoを起動するとtwitというモジュールを使用して指定したハッシュタグを含むタイムラインをストリームで取得します。

const Twit = require('twit')
const twit = new Twit({
  consumer_key   : process.env.TWITTER_CONSUMER_KEY,
  consumer_secret: process.env.TWITTER_CONSUMER_SECRET,
  access_token   : process.env.TWITTER_ACCESS_TOKEN,
  access_token_secret: process.env.TWITTER_ACCESS_TOKEN_SECRET,
})

let stream = twit.stream('statuses/filter', { track: '#hogehoge' })

// ツイートイベント検知
stream.on('tweet', (tweet) => {
  if ('retweeted_status' in tweet) console.log('Retweet')
  console.log(tweet)
})

// いいねイベント検知
stream.on('favorite', (event) => {
  console.log(event)
})

ただし、このストリームは必要なくなった時に、止めておかないとどんどん受信してしまうので、注意が必要です。

strem.stop() // ストリーミングを中止

参考:https://github.com/ttezel/twit

Recho Extension

Chrome拡張として利用者にインストールしていただくフロント部分です。ちなみに「Recho」は以下のリンクからインストールできます。

Recho Extension - Chrome Web Store

使った技術は以下の通り。

Chrome拡張をes6を用いて開発したかったのですが、自分で準備するのは面倒だったので調べてみると「generator-chrome-extension-kickstart」というものがあったのでそれを使用しました。

qiita.com

それでChrome拡張の雛形を作ると、そこから適当に作っていきました。このフロント部分は公開しているので、汚いコードですが、Chrome拡張を作ろうと思っている方は参考にしていただけると嬉しいです。

GitHub - hyde2able/Recho-extension: Rechoはスライド上にリアルタイムにリアクションを流すChrome拡張

また、今回のメイン機能でもあるツイートをニコニコ動画のように流す部分は「Flowly-js」という名前でnpmパッケージとして公開しました。

GitHub - hyde2able/Flowly-js: JavaScript library to stream text, image

https://github.com/hyde2able/Flowly-js/raw/media/flowly-js.gif

スライド操作機能について

スライド管理機能とは「Recho」上のQRコードを読み取ることで行けるスマホサイズのページで、ここから同期しているWebスライドのページ操作やコメントの表示の有無などを操作できます。

これを実現するのにWebSocketのroom機能を用いています。スライド管理ページにアクセスすると、Webスライドと同じページルームIDでWebSocketに接続するためこのルームIDを用いてRecho APIを経由することで、スライド管理ページとWebスライド(RechoExtension)とのフロント同士を同期させています。

これによって、スライドの操作を可能にしています。

さいごに

この「Recho」を使って世の中のLTに新しい文化が加わればなと思っています。みなさんLTする機会があるときは使ってみてください\(^o^)/

ハンズオン中とかでもいいですね。