どうも、まさとらん（@0310lan）です。
今回は、Webサイトやアプリなどへ複数人によるリアルタイムコラボレーション機能を、驚くほど簡単に実現してくれるJavaScriptライブラリのご紹介です！
このライブラリ自体は、数年前から存在しているので知っている方も多いと思いますが、まだ「知らないよ…」という方は、ぜひこの機会にトライしてみてください。
いまだに、ちょっとした「コラボ機能」を実装したい時に重宝する唯一のライブラリになっています！
【 TogetherJS 】
■「TogetherJS」の始め方！
それでは、実際にサンプルを作りながら「TogetherJS」がどのようなライブラリなのかを見ていきましょう！
まず最初に、「TogetherJS」を利用するのに必要となる本体ファイル「together.js」をGitHubからダウンロードするか「git clone」で取得します。
もしくは、「scriptタグ」に次のURLを記述して利用するのもOK！
<script src="https://togetherjs.com/togetherjs-min.js"></script>
基本的には、この「together.js」ファイルさえあれば、あとは何もいりません。
次に、簡単なサンプルデモを作成するために、「index.html」を用意しましょう。
<!-- index.html --> <body> <h1>TogetherJSサンプル</h1> <script src=”js/together.js”></script> </body>
「together.js」ファイルさえ読み込んでおけば、このようなシンプルなHTMLファイルで良いでしょう。
導入準備としては、これくらいしかやることはありません。簡単ですね…。
■基本的な使い方！
さて、リアルタイムコラボレーションを実現するための準備が完了したので、早速「TogetherJS」を使ってみましょう。
使い方はすごくシンプルで、1行のJavaScriptを書くだけでOK！
<script>
TogetherJS( this );
</script>
これで「index.html」ファイルをブラウザから開くと、「TogetherJS」が起動するので「I’m ready」ボタンをクリックします。
そして、表示されているURLをコピーしてシェアするだけで、同じ画面を複数人で共有できるコラボレーションが実現できます！
ただし、このままだとWebサイトを開いた瞬間に「TogetherJS」が起動してしまいます。
そこで、公式サイトにもあるように、ボタンなどをクリックすることで起動するように修正した方が良いでしょう。
<button onclick="TogetherJS(this); return false;">TogetherJSを起動！</button>
もちろん、「addEventListener()」などを使って外部ファイルとしてプログラミングしても問題ありません。
■「TogetherJS」の便利機能を紹介！
さて、ここまで来れば、1つの画面を複数人で共有しながらコラボレーションできるようになっています！
そこで、コラボ連携の便利なポイントをピックアップして見ていきましょう！
例えば「TogetherJS」は、リアルタイムにコラボレーションが可能なので、画面をシェアしている相手の「カーソル位置」まで同時に動いているのが分かります！
これは、Googleドキュメントを複数人で同時作業しているような感覚に近いでしょう。
同時進行が視覚的にも分かるようになっているので、ビジネス・教育・コミュニティなどのWebサイトやアプリなどで有効活用できるのではないでしょうか。
もちろん、チャット機能も搭載されているので、相互にコミュニケーションを取ることも可能です。
また、自分の「ニックネーム」を変更したり、「アバター画像」や「カラー」などをオプションから編集することも出来るので便利です！
スマホからでも最適化されて表示することができますよ！
■「TogetherJS」をカスタマイズしよう！
ココからは応用編として、もう少し踏み込んだ使い方を見ていきましょう！
「TogetherJS」はデフォルト状態でも快適に利用できるのですが、JavaScriptから設定を変えることで自分好みにもっとカスタマイズすることが可能です！
例えば、「TogetherJS」には音声によるボイスチャット機能があるのですが、ブラウザによって動作しない場合が多いのでこの機能をあらかじめ非表示にすることができるのです。
公式ドキュメントにも記載があるのですが、カスタマイズしたい機能を特定の「変数名」に値を代入することで実現できます。
ボイスチャットを非表示にするには、次のようなコードを1行書きます。
// 音声ボタン非表示 var TogetherJSConfig_disableWebRTC = true;
たったこれだけの記述で「非表示設定」が有効になります！
1つだけ注意点として、この設定の記述は「TogetherJS」の本体ファイルを読み込む前に書く必要があるので覚えておきましょう。（サンプルコード参照）
他にも、「TogetherJS」は起動すると、最初に「シェア用」のリンクを自動表示します。
これを最初に表示しないようにする設定もあります。
// 初動のポップアップを非表示 var TogetherJSConfig_suppressInvite = true;
これで、起動すると「ツールメニュー」だけの表示になります。
さらに、「シェア用リンク」を受け取った側の人は、最初に「接続する・しない」を確認するメッセージが表示されます。
ただし、場合によってはこの確認が面倒なこともあるので、メッセージを非表示にして自動的に接続する設定も可能です。
// 参加確認のポップアップを非表示にして自動接続 var TogetherJSConfig_suppressJoinConfirmation = true;
「TogetherJS」は、リアルタイムに複数人の「カーソル位置」が分かるようになっていますが、クリックした時に「サークル状」のエフェクトが表示されるようになっています。
このエフェクトが必要ない場合にも、設定から非表示にできます。
// クリックエフェクト非表示 var TogetherJSConfig_dontShowClicks = true;
これでOK！
このように、「TogetherJS」にはさまざまなカスタマイズ設定が用意されており、公式ドキュメントにも細かい設定方法が記載されています。ぜひ参考にしてみてください！
ちなみに、設定の変更だけでなく、いくつかイベント処理もJavaScriptからコントロールできるようになっています。
例えば、「TogetherJS」が起動した時に、何らかの操作がしたい場合には次のように書きます！
// 起動した時に何らかの処理をする TogetherJSConfig_on_ready = function () { // 実行したい処理を書く };
逆に、終了した時に何かさせたい場合は「TogetherJSConfig_on_close」に、関数を代入すればOK！
他にもさまざまなイベントが用意されているので、プログラミングに自信のある方は自分好みに拡張させて使ってもいいでしょう。
今回のサンプルソースコードは、以下のリンクからすべてチェックできるので、ぜひ参考にしてみてください！
■まとめ
「TogetherJS」はそのままで利用しても良いのですが、今回ご紹介したように自分好みにカスタマイズすることでさらに効果的な使い方ができるようになっています。
無料で利用できて導入も非常に簡単なうえ、遠く離れた人とリアルタイムにコラボレーションできます。このようなライブラリは珍しいので、まだ使ったことがない人はぜひトライしてみてください！
■JavaScript・HTML/CSS講座も好評公開中「paizaラーニング」
paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。
自分のスキルを磨いていきたいと考えている方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
