SyncFiddleリニューアルしました

半年前に作った SyncFiddle を新しくしました。
(過去記事: JavaScriptが実行できるリアルタイムオンラインエディタ作ってみました)

SyncFiddle は、複数人とリアルタイムでコードが共有できるオンラインエディタです。
HTML, CSS, JavaScript が実行でき、他の人のコードやカーソル位置、選択範囲が同期されます。

URL は http://syncfiddle.net/ になりました。

SyncFiddleは現在ベータテスト中で無料で使えます(無料機能は予告なしに変わる可能性があります)。

今回ほとんど作りなおしましたが、既存の機能は基本的にそのままです。

機能とか

• アクセスすると http://syncfiddle.net/xxxxxxxx のような新しい共有空間に飛ぶ
• 飛んだ先は URLを共有しない限り基本的にプライベート
• URLを共有して複数人で同時編集できる (Shareボタンから共有可能)
• オンライン中のユーザー数とユーザー一覧(名前と色)がわかる
• 自分の名前が編集可能
• コードとカーソル位置、選択範囲がわかる
• JavaScriptコンソールがある (コンソールは共有されない)
• その時のHTMLコードを .html で保存できる (Exportボタン)
• ブラウザで新しいウィンドウ開いて試してみるとわかりやすいかも

先日、リアルタイム・バックエンドサービスの Firebase を知って
これは SyncFiddle ぴったり！と思って作り直したくなってコツコツ進めていました。

技術的なこととか

もともと Backbone で作られていたので、そのまま引き継いで Backbone を使っています。
環境は webpack babel es6 で書いています。

バックエンド Firebase、エディタに CodeMirror の htmlmixed モードを使って、
Firepad という firebase が提供しているエディタを拡張して実装しています。

Firebase の Hacker Plan (FREE Plan) なので、最大接続数や容量がきついかもしれません。
Firebase にログインするとプランをアップグレードしろと真っ赤な表示で言われていますが、
一番安いプランでも個人で払えそうな額ではないので安くしてほしいです (Candle で月額 $49)。

SyncFiddle は JSFiddle などのサービス方向性からアイディアをもらっていますが、
音声通話などしながらリアルタイムに共有するにはきびしいのと、
そういったサービスが見つけられなかった (JavaScript の実行ができない) ので、
JavaScript が実行できる共有サービスとして作っています。

スクリプトの実行を自動的にやってしまうと どうかなと思い、
今のところユーザーの手で Run ボタンを押さない限り実行されないようになっています。

実行には iframe の sandbox 属性を使用しています。
origin を分けているので親 window は操作できないと思いますが、 もし問題あったら教えてください。

また、JSFiddle 等のサービスとはリアルタイム性として方向性が違い、
コードのログがいつまでも残ったところで意味はないのと、 容量スペースがあまりないので、
いまのところ ユーザー数 0 のまま一定時間経つと消えるようになっています。
(ベータテスト期間の状況で変わるかもしれません)
どちらかというとデザイン、レイアウトのほうがんばっていますが、
CSSはそこまで使いこなせてないです。作りながら調べつつ勉強になりました。
※ロゴ画像は poioq さんに作っていただきました、ありがとうございます。

おわりに

ちょっとしたツール的なものを作ることはよくありますが、
なかなか発展しなかったり止まってしまったりで、そういった継続力がほしいと思う日々です。
SyncFiddle はとても気に入っていて使える機会はあるので使いやすくしていきたいところ。
使ってみて不便な点とかアイディアとかありましたら教えてくれるとうれしいです。


Link: SyncFiddle