BackChannelingによるお手軽お仕事用チャット

More than 3 years have passed since last update.

syobochimメディアでBackChannelingを紹介していただきました。

http://syobochim.hatenablog.com/entry/2015/09/03/214050

logo.png

BackChannelingは、HipChatやSlackで感じてた不満を解消するために作りはじめたチャットです。HipChatやSlackはどうしても話題が流れていってしまうので、仕事では使いにくい面があります。そこでBackChannelingは話題ごとにスレッドを立てれるようにしました。なので実はチャットというよりはリアルタイムBBSという位置づけのつもりです。

特長として、


  • スレッドフローティング型

  • マルチタブ

  • Markdownでコメントが書ける

  • 音声コメント

  • コメントのキュレーションができる

  • ボットアカウントを作れる

などがあります。音声はストリーミングでなく、クライアントサイドでogg圧縮してサーバに送るので、社内ネットワークのような帯域専有に気をつけなきゃいけないような環境でも使うことができます!


動かしてみる



  1. https://github.com/kawasima/back-channeling/releases からzipファイルをダウンロードします。

  2. zipを展開し、bin/back_channelingを実行します。

…以上です。簡単ですね!

ただこれはインメモリにデータ持っちゃうので、永続化する場合は

% bin/transactor

% DATOMIC_URL=datomic:free://localhost:4334/bc bin/back_channeling

と先にDatomicを起動します。何れにせよ簡単ですね!

サインアップしてログインすると、2ちゃんねるビューワみたいなページが開きます。

範囲を選択_020.png

スレッドを選択すると、タブでスレッドを開きます。

Markdownでコードを書くとちゃんとシンタックスハイライトもされます。それから2ちゃんねるのようにスレ番へのリンクも可能です。

範囲を選択_021.png

Previewみながらコメントも書けるのでMarkdownでもらくらくです。Ctrl+Enterで投稿できます。

範囲を選択_022.png

コメントフォーマットを「Voice」にするとRecordボタンがでます。押せば録音が始まります。音声もPreviewで確認して投稿できるので、噛んじゃっても大丈夫です!

範囲を選択_024.png

スレッドはキュレーションが可能です。スレを選んで並び替えや追記ができ、Markdownボタンを押すとクリップボードにキュレーション結果がコピーされますので、議事録として保管が可能です。

範囲を選択_023.png


アーキテクチャ

サーバサイド、HTML、Javascript、CSS、SQL(的なもの)にいたる全てがClojure(Clojurescript)のコードになっています。

DB4X9FpK.png

データはDatomicに格納されます。フロントエンドはReactラッパーのomを使ってsecretaryでルーティングしています。

Voiceはffmpeg-asm.js (18MBのJavascript!)を使ってクライアントサイドでエンコードします。


さいごに

BackChannelingは簡単に構築できて、仕事で使えるよう工夫してあるつもりです。チームコミュニケーションでお悩みのみなさん是非試してみて下さい!

https://github.com/kawasima/back-channeling