すぎゃーんメモ Twitter

2011-02-22

node.js+socket.ioを使ったライブコーディングwebアプリを作ってる

かれこれ2ヶ月くらい、ちまちまと作り続けていたのがようやく動くようになったかなーという状態になったので公開してみる。

http://www1216u.sakura.ne.jp/livecoder/

手元のMacChrome, Safari, Firefoxでは動いていた。IEは知らない。

ソースGithubに。 https://github.com/sugyan/live-coder


使い方

Twitterでsignin。 /edit のエディタ上でテキストを編集すると、 /view/<screen_name> でリアルタイムに編集が反映される(こちらはread only)。

同じユーザのページを見ているユーザ同士でのテキストチャットが可能。


構成


背景

昨年夏にYokohama.pmでライブコーディングをやらせていただいたのですが、これがまたすごく楽しかったわけです。

第6回 yokohama.pm & Perl Casual でライブコーディングに挑戦してみた - すぎゃーんメモ

で、昨年秋にjstudy #2に行ったときid:Jxckさんのnode.jsの話を聞いてデモを見て、「node.jsすげー!」「socket.ioすげー!」と思ったわけで。

jstudy#2を開催しました - Webtech Walker

#jstudy2 で node.js について発表してきました。 - Block Rockin’ Codes

というわけで、自分が作りたいと思ったのはとにかくWebブラウザを使ってライブコーディングできるもの。node.jsに強いこだわりがあったわけではないのだけどsocket.ioはブラウザ互換とかあまり考える必要なくclient側もserver側も同じように書けて楽しかったので、結局全部node.jsで作ってみることにした。ある程度socket.ioでの通信内容が固定できてブラウザ互換も気にしなくても良いようになってくればPerlなど得意なものでserver側を書いても良いのでは、とは思っている。

webエディタについてもこだわりが無く、「編集/カーソル移動のイベントが取れて処理を挟める」「viewerとしてreadonlyにできてJavaScriptから内容を変更できる」くらいの機能があれば何でも良いと思っている。最初はCodeMirrorを使っていたのだけど後者の処理とsyntax highlightの処理がうまく調整できなくて試行錯誤してるところにちょうどorionニュースが流れてきたので興味本位で触ってみたという程度。


今後の展望

こんな機能を入れたら面白いものが出来上がるんじゃないかなーと思っている。

  • ローカル環境での任意のエディタから編集情報を送信してwebにリアルタイム反映させる仕組み
  • 毎回serverで受け取る編集情報をstorageに保存し、あとで録画再生するようにライブコーディングを見られるようにする仕組み

リアルタイム性を追求するならば同じ時間に同じ場所(URL)にアクセスしている必要があるので、そのためのユーザへの通知の仕組みなども考える必要があるなぁ、とは思っている(現状、edit画面にてviewerが増減したときchromeのnotificationが動くようにはしている)。

suztomosuztomo 2011/02/22 15:32 さくさく動く面白いサイトですね.
http://partty.org/ っていうのもありますよ.
これはターミナルの出力を見れます.

sugyansugyan 2011/02/23 08:38 suztomoさん ありがとうございます!
pattyも面白いですねー こういうワクワク感のあるものを作りたいです!

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証