Mozilla Labsのリアルタイム・コラボレーション・ツール、TogetherJSをご紹介します。
TogetherJSには、これらの機能の一部が含まれています：
- 他の人がマウスやクリックしたものを見ることができます。
- スクロールする場所をチェックしてください。
- 誰かが閲覧したページを観察します。
- テキストチャット
- 通过WebRTC音声チャット
- フォームフィールドの同期
- 同步播放/一時停止/
- 同一サイト内の複数ページにまたがるセッションの継続。
統合の方法
TogetherJS を試すには、次のようにページに追加するだけです：
<script src="https://.com/.js"></script>
次に、TogetherJS を起動するためのボタンを作成します：
<button id="collaborate" type="button">Collaborate</button>
<script>
document.getElementById("collaborate")
.addEventListener("click", TogetherJS, false);
Togetherの機能の一部をご覧になりたい場合は、jsFiddleがTogetherJSを有効にしています：
コラボレーション」をクリックするだけで、TogetherJS が起動します。また、TogetherJS の使い方に慣れることもできます。
拡張アプリケーション
TogetherJS は DOM をブラウズすることである程度のことは解決できますが、JavaScript アプリケーションを同期することはできません。例えば、JavaScript で更新されるエントリーがアプリケーション内にある場合、それらは自動的に同期されません。自動更新を期待する人が時々いますが、ページ間で DOM を同期させるとしても、その下にある JavaScript オブジェクトを同期させることはまずないでしょう。Firebase や Google Drive リアルタイム API のようないくつかの製品とは異なり、TogetherJS はリアルタイムの永続性を提供しません。Web サイトの永続性のような機能を決定するのはあなた次第であり、単にブラウザーでセッションを同期するだけです。
簡単な描画アプリケーションを例として使用しました。この完全な例は、テンプレートとして公開されています。
とても小さなお絵かきアプリ
シンプルなキャンバスを使って、とてもシンプルな絵画プログラムを始めましょう：
<canvas id="sketch"
style="height: 400px; width: 400px; border: 1px solid #000">
</canvas>
それから、いくつかの設定があります：
// get the canvas element and its context
var canvas = document.querySelector('#sketch');
var context = canvas.getContext('2d');
// brush settings
context.lineWidth = 2;
context.lineJoin = 'round';
context.lineCap = 'round';
context.strokeStyle = '#000';
canvas のmousedownイベントとmouseupイベントを使用して、mousemoveイベントの move()ハンドラを登録します。
var lastMouse = {
x: 0,
y: 0
};
// attach the mousedown, mousemove, mouseup event listeners.
canvas.addEventListener('mousedown', function (e) {
lastMouse = {
x: e.pageX - this.offsetLeft,
y: e.pageY - this.offsetTop
};
canvas.addEventListener('mousemove', move, false);
}, false);
canvas.addEventListener('mouseup', function () {
canvas.removeEventListener('mousemove', move, false);
}, false);
move()関数は、次に描画する線を計算します：
function move(e) {
var mouse = {
x: e.pageX - this.offsetLeft,
y: e.pageY - this.offsetTop
};
draw(lastMouse, mouse);
lastMouse = mouse;
}
*** は線を引く関数です：
function draw(start, end) {
context.beginPath();
context.moveTo(start.x, start.y);
context.lineTo(end.x, end.y);
context.closePath();
context.stroke();
}
このコードによる単純な描画アプリケーションで十分です。この場合、TogetherJS を有効にすると、他の人のページが動き、その人のマウスが見えますが、絵は見えません。それを修正しましょう！
TogetherJS の追加
TogetherJS には、同じセッション内で互いのメッセージに返信するクリアリングハウスがあります。TogetherJS では、アプリケーションが独自のメッセージを送信することもできます：
TogetherJS.send({
type: "message-type",
...any other attributes you want to send...
})
そして、こう聞いてください：
TogetherJS.hub.on("message-type", function (msg) {
if (! msg.sameUrl) {
// Usually you'll test for this to discard messages that came
// from a user at a different page
return;
}
});
メッセージ・タイプは名前空間に基づいているため、アプリケーション・メッセージが誤って TogetherJS 独自のメッセージを上書きすることはありません。
絵の中に描かれた線を同期させ、他の人に送ることができます：
function move(e) {
var mouse = {
x: e.pageX - this.offsetLeft,
y: e.pageY - this.offsetTop
};
draw(lastMouse, mouse);
if (TogetherJS.running) {
TogetherJS.send({type: "draw", start: lastMouse end: mouse});
}
lastMouse = mouse;
}
送信する前に、TogetherJS が確かに動作していることを確認してください。送信されるメッセージは、一目瞭然でなければなりません。
以下、これらのメッセージをお聞きください：
TogetherJS.hub.on("draw", function (msg) {
if (! msg.sameUrl) {
return;
}
draw(msg.start, msg.end);
});
このリスナーを登録するとき、TogetherJS が実行中かどうかを気にする必要はありません。
これだけで、ドローイングがより鮮明になり、共同作業ができるようになります。しかし、1つだけ欠けていることがあります。私がイメージを描き始めてから、あなたが私に加わると、私が描いた新しい線が表示されるだけで、私がすでに描いたイメージは表示されません。
これを回避するには、各クライアント *** が新しいページにアクセスしたときに送信される togertherjs.hello メッセージをリッスンします。このメッセージをリッスンすると、canvas上のイメージが他のクライアントに送信されます。
TogetherJS.hub.on("togetherjs.hello", function (msg) {
if (! msg.sameUrl) {
return;
}
var image = canvas.toDataURL("image/png");
TogetherJS.send({
type: "init",
image: image
});
});
あとは新しい開始メッセージを聞きに行くだけです：
TogetherJS.hub.on("init", function (msg) {
if (! msg.sameUrl) {
return;
}
var image = new Image();
image.src = msg.image;
context.drawImage(image, 0, 0);
});
このコードだけで、TogetherJS は生き生きとした描画アプリケーションを作ることができます。もちろん、いくつかのコードもありますが、ここでは TogetherJS が処理するもののいくつかを紹介します：
セッションを開始するために他のユーザーと共有するURLをユーザーに提供します。
クライアント間のラウンドトリップ情報を提供する中央サーバーへのWebSocket接続を作成します。
他のユーザーも現在のセッションに参加していることを確認しながら、ユーザーに名前とアバターを設定させます。
誰がオンラインなのか、誰が不在なのか、誰が空いているのかを把握できます。
テキストチャットのようなシンプルで必要な機能
セッションの初期化とトラッキングは、TogetherJS によって処理されます。
この例ではできていないこともあります：
固定サイズのキャンバスを使用するため、異なるクライアントや異なる解像度を処理するのに苦労しませんでした。通常、TogetherJS は異なるタイプのクライアントを処理し、解像度に依存しない位置決めを使用します。このような場合、固定アスペクト比を保証し、アスペクトのパーセンテージを使用してペイントを配置することもできます。
楽しいペイントツールは使いませんでした！私が赤い筆ペンで描いているなら、同時に緑の筆ペンで描けない理由はありません。
しかし、キャンバスをクリアするようなことは同期されるべきです。
もっと知りたいですか？
TogetherJS のアーキテクチャに興味がありますか？技術概要をご覧ください。
jsFiddleでTogetherJSを試してみてください。
"Provide Live Help"（ライブ・ヘルプの提供）は、TogetherJS セッションの開始を要求します！
IRC の #togetherjs でご連絡ください。irc.mozilla.org
Githubでコードを調べたり、バグに遭遇したり、機能の要望があれば、issueで質問してください。恥ずかしがらないでください。アイデア、潜在的なユースケース、ドキュメントでは答えられないような質問など、とても興味深いフィードバックがたくさんあります。相乗効果が期待できるアプリケーションについても教えてください。
