Smartphoneすぎゃーんメモ2011-02-22node.js+socket.ioを使ったライブコーディングwebアプリを作ってるNode.jsかれこれ2ヶ月くらい、ちまちまと作り続けていたのがようやく動くようになったかなーという状態になったので公開してみる。Firefoxでは動いていた。ソースはGithubに。https://github.com/sugyan/live-coder使い方Twitterでsignin。同じユーザのページを見ているユーザ同士でのテキストチャットが可能。あとSessionWebSocketはちゃんと動いてくれないのでこちらを。アプリは裏で3000番portで動かして、80番はnginxで受けて静的ファイルを配信しつつproxyしている。clientで使っているeditorを使用。google-diff-match-patchを使って編集されるごとに差分を抽出し、socket.ioでサーバに送信、viewerはbroadcastされてきた差分情報を元に表示を更新する。simpleTimeagoもちょっとだけ使ってます。あと普通にjQuery。昨年夏にYokohama.pmでライブコーディングをやらせていただいたのですが、これがまたすごく楽しかったわけです。#2に行ったときにid:Jxckさんのnode.jsの話を聞いてデモを見て、「node.jsすげー!」「socket.ioすげー!」と思ったわけで。ついて発表してきました。Codesというわけで、自分が作りたいと思ったのはとにかくWebブラウザを使ってライブコーディングできるもの。node.jsに強いこだわりがあったわけではないのだけどsocket.ioはブラウザ互換とかあまり考える必要なくclient側もserver側も同じように書けて楽しかったので、結局全部node.jsで作ってみることにした。ある程度socket.ioでの通信内容が固定できてブラウザ互換も気にしなくても良いようになってくればPerlなど得意なものでserver側を書いても良いのでは、とは思っている。webエディタについてもこだわりが無く、「編集/カーソル移動のイベントが取れて処理を挟める」「viewerとしてreadonlyにできてJavaScriptから内容を変更できる」くらいの機能があれば何でも良いと思っている。highlightの処理がうまく調整できなくて試行錯誤してるところにちょうどorionのニュースが流れてきたので興味本位で触ってみたという程度。今後の展望こんな機能を入れたら面白いものが出来上がるんじゃないかなーと思っている。ローカル環境での任意のエディタから編集情報を送信してwebにリアルタイム反映させる仕組み毎回serverで受け取る編集情報をstorageに保存し、あとで録画再生するようにライブコーディングを見られるようにする仕組みリアルタイム性を追求するならば同じ時間に同じ場所(URL)にアクセスしている必要があるので、そのためのユーザへの通知の仕組みなども考える必要があるなぁ、とは思っている(現状、edit画面にてviewerが増減したときにchromeのnotificationが動くようにはしている)。すぎ...2011-05-20livecoder進捗node.js+socket.ioを使ったライブコーディングwebアプリを作っ...2011-04-23ドメイン取得、移転、アップデート初めて、自分用のドメインというものを取得してみた。