emacs + node.js でリアルタイムプレビューしながらweb開発

※無理やり実装してます；

node.jsでTCPサーバと、WebSocketサーバを建て、TCPサーバにemacsでデータを送信し、WebSocketでクライアントにブロードキャストすることでブラウザを更新する処理を実装しています。

■ 前提条件

emacs
node.js
socket.io(node.jsライブラリ)
reload-server.js(サーバ側：https://github.com/amekh/node-auto-reload)
node-auto-reload.el(emacsスクリプト：https://github.com/amekh/node-auto-reload)

赤文字以外の前提条件については、他サイトで豊富に解説されているため省略させていただきます。

■ サーバを建てる

node-auto-reload.elをロードパスが通った所に置く
[emacs]M-x shellで端末を呼び出す(windowsの場合はM-x eshell)
端末内で「node reload-server.js」でサーバを起動

■ emacsとサーバを接続する

[emacs] M-x tcp-connection とし、サーバと接続する。

■ ローカルのHTMLファイルを編集 -> ブラウザで開く

リアルタイムプレビューしたいhtmlの<head>中で、「M-x node-script-insert」とする。(サーバと通信するためのスクリプト文が挿入されます。)
htmlファイルを更新し、ブラウザで開く。

■ サーバにデータを送信して、ブラウザを更新する

[emacs] M-x tcp-send-data とし、ブラウザをemacsから更新する

以上で導入終了となります。
あとは、ファイルを更新するたびに M-x tcp-send-data とすると、ブラウザが更新されます。

■ 欠点と対処法?

今回、作成したスクリプト、サーバの欠点として、

nodeサーバが落ちると再度起動し、emacsと接続し直す必要がある。
htmlファイルにnodeサーバと通信するためのスクリプトを書く必要がある。
htmlファイルをブラウザで開いていない状態でemacsからデータを送信するとnodeサーバが落ちる。(エラー処理してないだけ)
nodeとかの導入がそもそも面倒。

などがあります。

対処法としては、

nodeサーバの起動をキーボードマクロに登録。
コマンドをキーバインドに登録
フック関数を登録
誰かが、emacs-lispでwebsocketサーバを作る
個人用で使おうと思ってたのでエラー処理してないです・・・。いつかします。

根本的な対処法にはなってませんが、マクロやキーバインドをすることで楽に操作できます。

ちなみに、「after-save-hock」関数に「tcp-send-data」関数を登録することでファイルを保存すると同時にブラウザが更新されます。

■ 一番のメリット

emacsからブラウザにフォーカスを移して「Ctrl+F5」などを押す手間を省くのも確かに良いとか感じましたが、

１番のメリットは１度の更新でクロスブラウザチェックができる

当然、１つのブラウザだけではなく、複数のブラウザを同時に立ち上げて、同じサーバと通信しているHTMLファイルを開いていれば、emacsから１度、「tcp-send-data」関数を実行するだけでHTMLファイルにアクセスしているすべてのブラウザが更新されます。今まで、ブラウザチェックにブラウザをまたいで「Ctrl+F5」などをやっていた方には大変便利だと思います！

最後に、ソースコードを見てもらえばわかると思いますが、結構、無理やり実装してます。作り直せる方は、「ああ、こういった使い方もあるんだ」ぐらいの感じで作り直しちゃってください！以上！

開発ぶろぐ

emacs + node.js でリアルタイムプレビューしながらweb開発

■ 前提条件

■ サーバを建てる

■ emacsとサーバを接続する

■ ローカルのHTMLファイルを編集 -> ブラウザで開く

■ サーバにデータを送信して、ブラウザを更新する

■ 一番のメリット

コメントを残すコメントをキャンセル

■ 前提条件

■ サーバを建てる

■ emacsとサーバを接続する

■ ローカルのHTMLファイルを編集 -> ブラウザで開く

■ サーバにデータを送信して、ブラウザを更新する

■ 一番のメリット

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル