WebSocket の動作確認に wscat が便利すぎる件

WebSocket を利用したアプリケーションを作る際に、動作確認が煩雑な場合があります。

サーバ側とクライアント側をどちらも実装する必要があって、「ちょっとこの部分だけ動かしてみたいなぁ」っていうときに、簡単に試す方法があると便利ですよね！

そんなときにおすすめなのが、 wscat です。

wscat は、コマンドラインで利用できる WebSocket のサーバ/クライアントで、ws に同梱されています。
ws とは、 Node.js 上で WebSocket を使うためのモジュールで、Socket.IO やengine.io の内部でも利用されている今注目のプロダクトです。

今回は、この wscat の使い方をご紹介します。

対象バージョン

• ws (0.4.7)

インストール

Node.js のモジュールなので、 npm でインストールするのが簡単です。

$ npm install -g ws

利用

完了したら、WebSocket サーバに接続します。
(localhost:3000 でサーバが起動している場合)

$ wscat -c ws://localhost:3000

と入力すると、localhost:3000 に接続した状態で wscat が起動します。

connected (press CTRL+C to quit)
>

この状態でメッセージを入力して Enter を押すと、入力した内容が接続先のサーバに送信されます。
また、サーバからクライアントへメッセージを送信した場合は、今開いているターミナルの標準出力にメッセージが表示されます。

サーバとして起動する場合はこちら
(3000 番ポートで listen する場合)

$ wscat -l 3000

クライアントから受け取ったメッセージを、そのまま標準出力に表示するようになっています。

手元に WebSocket のサーバもクライアントも無い場合でも、ターミナルを２つ開いて wscat をサーバとクライアントで動かせば、動作を確認できます。

ちょっとしたデバッグなどに手軽に利用できるので、 WebSocket アプリを開発する際にオススメにツールです:-)

ソースはこちら: https://github.com/einaros/ws

※ もちろん、何度も確認する必要があるならきちんとテストコードを書いた方が良いです

Ruby Sapporo Night vol.14 に参加してきました

Ruby Sapporo Night vol.14 に参加して発表してきました。

• Ruby札幌 | Ruby Sapporo Night vol. 14 『Ruby札幌 × Sapporo.js』
• Sapporo.js | Ruby Sapporo Night vol. 14 『Ruby札幌 × Sapporo.js』

@snoozer05 に声をかけていただいたので、喜んで参加しました。
そんな @snoozer05 の発表資料はこちら: Ruby Sapporo Night vol.14

で、ぼくの資料はこちらです。

Testable JavaScript

View more presentations from Ryunosuke SATO

クライアントサイドの MVC って、なんやろなぁ。
大事なことってなんだろう？

ってことについて、今の自分が考えていることをお話したつもりです。

また、今回の発表で使ったデモ(Task List)はこちらにあります。

• http://tasklist-demo.herokuapp.com
• ソース: Task List

このデモでは、クライアントサイドMVC に特化したフレームワークはあえて使わないで、どう設計すれば上手くいくかを試行しながら作ってみました。

結果としては Model にも View にもユニットテストが書けるような作りになっています。
これについては、「もっとこうしたら良いのでは」とか「テストをもっと良くできる」などある方がいれば、ぜひぜひ GitHub の方でコメント or issue or pull request いただければと思います。

Ruby札幌のみなさま、参加されたみなさま、ありがとうございました！

SaCSS vol.29 で JavaScript についてお話してきました

Clean JavaScript というタイトルで、 JavaScript の良いコードについてお話しました。

• SaCSS vol.29 : ATND

Clean Javascript

View more presentations from Ryunosuke SATO

JavaScript 自体の良い書き方というのは、ここ数年で体系が確立されてきたように思います。

良質な書籍が多数出版されていて、いくつかのパターンが見いだされてきているのではないでしょうか。

しかし、クライアントサイド、特にブラウザの中で DOM を扱う際の難しさについては、
まだこれといった決め手になる方法が定まってないように感じます。

そこで、ぼくが今考えている "良いコード" について、お話してきました。

今回自分がテーマにしていたのは、 DOM と JavaScript をいかに分離して管理するか、です。

それぞれの関係が疎になれば、DOM 構造の変更に強い、
もしくは JavaScript のリファクタリングが容易な設計になり、
これが良いコードと呼べるのではないかと思います。

また、良いコードを心がけると別の環境への移植も簡単になることを証明するために、
発表の最後にライブコーディングを行いました。

内容は以下のような感じでした。

1. ブラウザ内で Canvas の画像を表示する
2. リファクタリングして、コードを良い状態に整える
3. 同じ JavaScript コードを利用し、Mac のターミナルに Canvas の画像を表示させる

利用したライブラリは、こちらです。

• visionmedia/term-canvas · GitHub

その時のコードはこちらにあげてあります。

• refactoring-demo for SaCSS vol.29

今回の発表で紹介した良いコードを書くためのポイントを、コミット単位で適用しています。

よろしければご参考くださいませ！

JavaScript 第5版

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス

JavaScriptパターン ―優れたアプリケーションのための作法

EnvjsがRuby1.9で動かない件

テスト用に capybara-envjs を使ってみようと思ったのですが、上手くインストールできませんでした。

js_land_proxy.h:11:18: error: node.h: No such file or directory

いろいろ調べたところ、githubに答えがありました。
https://github.com/smparkes/capybara-envjs/issues/48

ruby1.9はサポートしていないし、しばらくサポートの予定もないとのことでした。

rails3+envjsの組み合わせで、JSのテストをRubyで書きたい場合は、Ruby1.8.7しかないみたいです。
Ruby1.9でさくっとJSのテストを書きたいんだけど、うーん、何かよい方法はないものかなぁ。

Sapporo.coffee#1を開催しました

Sapporo.js-2011.05.08の裏企画としてSapporo.coffee#1を開催しました。

今話題の、CoffeeScriptの勉強会です。

勉強会と言ってもあまり固い感じではなく、コーヒーを飲みながらCoffeeScriptについて語らう感じで行いました。

きっかけは @mrkn のこのツイート。

@kaznum @tricknotes Sapporo.coffee やりましょう

2011-04-27 15:11:41 via earthquake.gem to @kaznum

今日の内容としては、CoffeeScriptが何かっていうところから始まって、インストール方法の解説、基本的な書き方やJavaScriptとの比較、CoffeeScript自体の簡略記法を紹介をしました。

本家サイトに載っているoverviewをざっくりと見ていったのですが、だいぶ楽にJavaScriptが書けて幸せです。

• CoffeeScript

CoffeeScriptはJavaScriptの邪悪なパーツを上手く隠蔽してくれていて、しかも簡単に書けるのでほんとにすばらしいです。
Rails3.1からはデフォルトでCoffeeScriptが導入されるという話もあるので、今後はもっと使われていくんじゃないかなと思います。

今回は多くの方にご参加いただき、ありがとうございました！

今後は、Sapporo.jsとは独立して開催していく予定なので、ご都合つく方はぜひぜひお越し下さい！

IE用のJavaScriptコンソール

IEでちょこちょこっと、JavaScriptの動作を確認したいときがあると思います。
そのためだけにアドオン入れるのも面倒だったので、簡単なJavaScriptコンソールを作ってみました。

ブックマークレット版はこちら

IEのお気に入りに登録して、試したいページでポチッとすればJavaScriptコンソールが表示されます。

[動作環境]

• IE6+

どうでもいいんですが、IEでブックマークレットを登録しようとすると、必ず以下のようなメッセージが表示されます。

プロトコル"javascript"には登録されたプログラムがありません。この対象を維持しますか？

毎回丁寧に質問してくれるなんて、さすがIEさんですね！

「JavaScriptパターン - 優れたアプリケーションのための作法」

日本語版の発売から1ヶ月ほど経ってしまいましたが、一通り読みました。

JavaScriptパターン ―優れたアプリケーションのための作法

ECMAScript5を意識した説明や、JSLintに準拠したコードなど、まさにこれからのJavaScriptに向けた本となっていてとても勉強になりました。

特に、6章:コードの再利用パターン、7章:デザインパターンは他の静的なクラスベースの言語を経験してきた人向けの解説になっていて、JavaScriptらしい良いコードを学ぶための良い本だと思いました。

もちろん、JavaScriptに馴染んでいるひとでも楽しく読めると思います。

「prototypeナニソレ？」とか、「え、クラスじゃないの？」といったところを積極的に説明してくれている本はあまり無いので、そういったところをもっと知りたい人に是非お勧めしたいです。

サイ本や蝶々本と併せて読みたい一冊ですね！

JavaScriptパターン ―優れたアプリケーションのための作法

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス

JavaScript 第5版