リアルタイムWebを極める

第3回 node.jsを利用した開発とWebサイトへのデプロイ

この記事を読むのに必要な時間:およそ 3 分

クライアントを実装

今回はExpressとJadeテンプレートエンジンを利用しています。デフォルトでlayout.jadeとindex.jadeという2つのファイルが生成されていますが,layout.jadeはその名の通り基本的なレイアウトを定義しています。

まずはlayout.jadeに対してスクリプトの参照を追加します。

リスト jQuery,socket.io,チャット用ファイルの参照を追加

!!!
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js')
    script(src='/socket.io/socket.io.js')
    script(src='/javascripts/chat.js')
  body!= body

次にchat.jsファイルを作成しましょう。クライアントから参照可能にするためにはpublicディレクトリ以下に配置する必要がありますので,public\javascriptsディレクトリを右クリックしてchat.jsファイルを作成します。

図6 右クリックから新しいファイルを追加する

図6 右クリックから新しいファイルを追加する

ファイルが作成出来たらエディタで開き,以下のようにコードを追加します。

リスト chat.jsに追加するコード

$(function () {
    var socket = io.connect();
 
    socket.on("receiveMessage", function (data) {
        $("#chat").prepend("<li>" + data.time + ": " + data.message + "</li>");
    });
 
    $("#send").click(function () {
        var text = $("#message").val();
 
        $("#message").val("");
 
        socket.emit("sendMessage", text);
    });
});

サーバ側ではrequireを使ってsocket.ioを使いましたが,クライアント側ではio.connectメソッドを使って処理を行っていきます。しかし,その後のコードはサーバ側とほぼ同じようにonメソッドでイベントの登録,そしてemitメソッドでイベントの発行を行います。

最後にindex.jadeファイルを修正します。socket.ioに依存するコードなどはなく,簡単なフォームを出力するだけのコードとなります。

リスト index.jadeファイルを修正

h1 サンプルチャット
 
div
    input(type="text", id="message")
    input(type="button", value="send", id="send")
 
ul#chat

Jadeテンプレートエンジンを使っているので,ちょっと変わった書き方になっていますが,要素・属性名からどのようなHTMLが出力されるのかは想像がつくと思います。

これで1行チャットアプリケーションが完成しました。WebMatrixの実行ボタンをクリックすると,ローカルで動作を確認することが出来ます。

Windows Azure Webサイトを作成

WebMatrixとnode.jsを利用して開発したアプリケーションはWindows Azure Webサイトを使うと,特別な設定も必要なく,非常に簡単に公開することが可能です。

Windows Azureを利用するためには予め登録を済ませておく必要がありますが,今回は説明を行いませんので,以下のサイトを参考に登録を行ってください。

Windows Azure 無料評価版:Windows Azure を使ってみる | Azure 無料評価版
http://www.windowsazure.com/ja-jp/pricing/free-trial/

登録が完了している場合はWindows Azure管理ポータルへアクセスして,画面右下にある「+新規」ボタンをクリックし,⁠コンピューティング⁠⁠→⁠WEBサイト⁠⁠→⁠簡易作成」の順に選択します。

図7 Webサイトの新規作成ウィザード

図7 Webサイトの新規作成ウィザード

URLにはユニークな名前を,地域にはEast Asia(東アジア)を指定して,右下にあるボタンをクリックすると,数秒で新しいWebサイトが作成されます。

作成が完了したら,サイドバーから「WEBサイト」を選択して表示されたWebサイト一覧から,先程作成した名前をクリックします。するとダッシュボードが表示されるので,さらに右側にある「概要」セクションの「発行プロファイルをダウンロード」をクリックして,*publishsettingsファイルをダウンロードしておきます。

図8 ⁠概要」セクションから「発行プロファイルのダウンロード」を選ぶ

図8 「概要」セクションから「発行プロファイルのダウンロード」を選ぶ

これでアプリケーションのデプロイ準備が完了しました。

著者プロフィール

芝村達郎(しばむらたつろう)

PHPでの受託開発が中心の会社に勤めていたが,趣味で C# や ASP.NET 開発を行う。

2010年4月から Microsoft MVP - ASP.NET/IIS を受賞。
2012年6月にソーシャルグリッド株式会社 取締役に就任。

blog:http://shiba-yan.hatenablog.jp/
twitter:@shibayan