JavaScriptが実行できるリアルタイムオンラインエディタ作ってみました

複数人で同期して編集できるWebエディタを探していたのですが、 見つからず・・・

jsfiddle や jsdo.it は同時編集できないため、ちょっと探してたのとは違って、
Scratchpad はリアルタイムで編集できてよいのですが、JavaScriptが実行できない。
CodePen は同期するのに PRO アカウントが必要らして、諦めて、仕方ないので作ってみました。

• SyncFiddle ←これ

追記:
SyncFiddle はリニューアルし、使用しているフレームワークの構成が変わりました。
URL は http://syncfiddle.net/ になりました。

仕様とか

• アクセスするとランダムにid振ったページ空間に飛ぶ
• そのURLを共有すると複数人で同時編集できる
• 相手のことがわかるのはidだけ
• コードとカーソル位置がわかる
• JavaScript コンソールがある
• その時のHTMLコードを .html で保存できる
• ページの破棄という機能はないですが、コードを空にしてユーザ数 0 になるとそのうち消える
• プライベートタブ(シークレットタブ)とか使ってみるとわかりやすいかも

レイアウト

• PHP フレームワーク PunyApp
• JavaScript Backbone + r.js
• エディタは CodeMirror の HTML5 mixed モード

こないだ公開したフレームワーク PunyApp のテストも兼ねて作ってみたのですが、 なにしろサーバが古くて大変。最初は WebSocketにしようと思ったけどフレームワークのテストにならないので pollingしてます。今更ですがサーバーから立て直したほうがよかったです。一応公開してますが、サーバが不安定になるかもしれないです。
Backbone.js と r.js (require.js)、前から触ってみたくて、今回はじめて使ってみました。
自由度が高くて、View周りとかちょっと道を外れると ぐしゃってしまうので注意が必要ですが、 自分にとっては使い心地がよかった。まだまだ勉強中です。

Peggyキーワード定義CRECのECMAScript5版「ac_javascript185.kwd」作成

なんかいまさら感がすごいですが、
Peggy/PeggyPad のキーワード/カラー定義 CREC の
「JavaScript 1.8.5 / ECMAScript 5」 用定義ファイルを公式うｐしました。

アンカーシステムズ のメニュー「ライブラリ」→
「CREC ユーザ定義ファイル、言語サポート DLL」 に 「ac_javascript185.kwd」 があるのでそれです。

Peggy インストールフォルダの 「share」 に突っ込むと認識されます。
そのへんは公式を参照ください。


カラー定義は適当に選んだので環境によっては変な色になるかもです。
わかる範囲はデフォルトの JavaScript の色と同じにしましたがもしかしたら違うかもです。

E4X は完全に定義できませんでした。単純なものだけ色分けされます。
(これがやりたくてはじめたのに…)

たぶん、CREC では無理なんだろうと思い込むことにしています。

DOM、E4X (XML)、CSS (CSSStyleDeclaration)、XMLHttpRequest、JSON 等を定義してるので、
プロパティ名などが かぶってるものがあります。

そういうものは優先度順で色分けされます。
問題あれば標準の JavaScript に戻すといいです。