Emacs Advent Calendar 2016 7日目のsylxです。Qiitaに記事を書くのは2回目で、以前に書いたのは2年前という人間です。どうぞよろしくお願いします。
ライブコーディングって？
プログラムを書く過程を人に見せて、あーだこーだ呟くという変態行為のことです。
最近はフレームワークのチュートリアルなんかをYoutubeでライブコーディングして見せるというのも流行りですね。高卒の私は英語でボソボソ呟かれても何もわかりませんが。
他にも音楽系言語をライブコーディングして、ライブなんてことをしている人もいます。
Quick Intro to Live Programming with Overtone
ライブコーディングの問題点
とりあえず、誰かに見せることを目的にライブコーディングしようとすると、Emacsに限らず以下の問題があります。
- プロジェクターなどでスクリーンをそのまま写すと、文字が見えにくい
- だからといって、エディタの文字を大きくすると、今度は書きにくい
- Emacsのカラーテーマやフォントなどをアレしていたりすると、見せるのが恥ずかしい。あまりカッコよくない
-
リモートで見せる方法がない
- skypeなどでスクリーンキャストするという手もありますが、肝心の文字が見えにくかったりします。
以上の問題を解決する方法として、Emacsの編集中バッファをwebsocketでnode製のWebサーバーにリアルタイムで転送し、ブラウザ上でEmacsの編集中バッファを見れるシステムを作りました。Emacs24以降用です。
ちなみにgithubにまともにpushしたのも初めてだったりします。
使い方
git clone https://github.com/sylx/livemirror.git
と、ソースをとってきます。ディレクトリに入って
npm i
で必要なライブラリをとってきて
npm run server
とすると、サーバーが11072ポート（数字に深い意味はありません）で動きます。
次にEmacsですが、websocketパッケージが必要なので、
M-x package-install websocket
とかして、入れておいてください。
あとは同梱されているlivemirror.elをload-fileするなり、load-pathにいれるなりして、読み込んだら、
M-x livemirror-start
で同期スタートです。ちなみにまともにelispパッケージ書くのは初めてだったりしますので、動かなかったらすまん。
なんとなくMessageなどで動いたっぽかったらブラウザで、
にアクセスすると、すごい中二っぽい感じの画面でバッファの中身が冒頭の画像の様に表示されます。例えば社内の自分のIPアドレスが、192.168.1.100だったら
にアクセスしてもらえば、自分のEmacsのバッファを上司にずっと見てもらうことも可能です。大声を張り上げながらペアプロしてください。
M-x livemirror-stop
で同期終了になります。
同期される操作
- バッファの切り替えに追随するので、同期中はうっかり恥ずかしいファイルを開かないようにしましょう。
- バッファを編集するとWebにも表示されます。すごい！
- カーソルを移動すると、Web上の画面のカーソルも動きます。すごい！
- C-SPACEなどで範囲選択すると、画面上で範囲選択されます。これでバグの位置を強調して、思いっきり糾弾できますね！すごい！
Emacsのhookをよくわからないまま怪しげな使い方をしまくってるので、バッファの切り替えに若干ラグがあったり、変な動きをすることがありますが、そのへんは許してください。というか、誰か一緒に続きやりませんか？
テクノロジー
Emacs側設定
接続先ホストはディフォルトでlocalhostになっていますが、それらはcustomize-valueになっているので、自由に変更できます。詳しくは
M-x customize-group livemirror
でどうぞ
URLにある"general"というのはチャットルーム名みたいなもので、同じサーバーに複数のEmacsを接続可能です。こちらもカスタマイズできるので、試してみてね！（実は全くデバッグしてないからちゃんと動くかは知らないよ！
サーバー
server.jsのみで動きます。express+node-WebSocketという構成です。wsとかexpress-wsのほうが楽そうだったんですが、なんか細かい制御ができそうじゃなかったので、やめた。
フロントエンド
CodeMirrorを魔改造しています。実はこのシステムの原型を作ったのは2年前なので、2年前のCodeMirrorです。シンタックスハイライトはCodeMirrorのものです。
テーマは出来る限りデジタルっぽくなるようにPixelMPlusを使用した、オリジナルになっています。グロー表現は2年前の投稿をご参照ください。
時間があったら、使用感などをyoutubeにでもアップします。
が、かなり面倒くさいので、反響なかったら何もしません！
私からは以上です。
明日は Mwroteさんの"Spacemacsが好きすぎるので投稿します。"です。お楽しみに。