コード/テキストを共同で編集する

今回はブラウザ上で共同のコード/テキスト編集を可能にするオープンソースのFirepadを利用します。
https://github.com/firebase/firepad

導入

• FirepadはバックエンドでFirebaseを利用しますので、Firebaseのアカウントを取得します（お試しなのでとりあえずFreeで）。

• FirebaseでAPPを作成しURLを発行しておく。

• 以下のコードをhtmlのhead内に追記します。

<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>

<!-- CodeMirror -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.2.0/codemirror.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.2.0/codemirror.css"/>

<!-- Firepad -->
<link rel="stylesheet" href="https://cdn.firebase.com/libs/firepad/1.3.0/firepad.css" />
<script src="https://cdn.firebase.com/libs/firepad/1.3.0/firepad.min.js"></script>

<style>
  html { height: 100%; }
  body { margin: 0; height: 100%; position: relative; }
  #firepad {
    width: 100%;
    height: 100%;
  }
</style>

• 初期化設定をbody内に追記

<div id="firepad"></div>
<script>
  var firepadRef = new Firebase('<FIREBASE URL>');
  var codeMirror = CodeMirror(document.getElementById('firepad'), { lineWrapping: true });
  var firepad = Firepad.fromCodeMirror(firepadRef, codeMirror,
      { richTextShortcuts: true, richTextToolbar: true, defaultText: 'Hello, World!' });
</script>

※FIREBASE URLは取得したアカウントのアプリケーションのURLにかえてください。
※CodeMirrorはオープンソースのブラウザで動作するエディターですが、こちらは同じくACEでも代用できます。その場合は以下のようにします。

<div id="firepad"></div>
<script>
  var firepadRef = new Firebase('<FIREBASE URL>');
  var editor = ace.edit("firepad");
  editor.setTheme("ace/theme/textmate");
  var session = editor.getSession();
  session.setUseWrapMode(true);
  session.setUseWorker(false);
  session.setMode("ace/mode/html");
  var firepad = Firepad.fromACE(firepadRef, editor, {
    defaultText: "Hello, world"
  });
</script>

• このhtmlをブラウザで開く。今回はウィドウを２つ立ち上げて並べてみました。

まとめ

Firepadを使って共同のコード編集する方法を見てきました。Codemirror,ACEを利用しているので大概のプログラミング言語のシンタックスには対応できるかと思います。