Hatena::Groupbugrammer

蟲!虫!蟲!

Esehara Profile Site (by Heroku) / Github / bookable.jp (My Service)
過去の記事一覧はこちら

なにかあったら「えせはら あっと Gmail」まで送って頂ければ幸いです。
株式会社マリーチでは、Pythonやdjango、また自然言語処理を使ったお仕事を探しています

 | 

2011-10-16

[][]socket.io + Node.js + CoffeeScript + Heroku でお気楽リアルタイムウェブサイト作成 23:57

作りました

 Application Error

 相変わらずの説明のなさなんですけど、画面をクリックすると、他の人達も同期して、同じ音と文字が再生されるというミニマムアプリ。きっかけは、Skype音の発言音だけでも、誰かいるなという気もちになれるので、それだけを持ってきたらどうなるか、という実験の為です。ちょっとembedとかを使っているので、負荷がかかっているのかな。どうなんだろ。実際、Wavの転送がそれほどいいものじゃないので、結構負荷はかかっているみたい。

HerokuとかNode.jsとかなんなの?

 その辺に関しては既に偉い先人がいるよ。

 お探しのページは見つかりませんでした。 - はてなブログ

 これを見ていればだいだいのことはわかる。

Herokuの前にGitしろ!!

 Git 基礎最速マスター - ぐるぐる?

 を参考にインストール。取りあえず覚えておくべきコマンドは次の五つかなあ。

  git init
  git add . 
  git commit -m "hogehoge"
  git remote add heroku git@heroku.com:appname.git
  git push heroku master

 こんな感じ。

 各種は調べてもらうとして、取りあえずGitは使えるようになる。

Herokuを使わせろや

 Application Error

 を見よう。とりあえずは次のことを覚えておけばいいのではないかと。

heroku create appname --stack cedar #新しいアプリの公開先を作る。appnameを指定しなければ、適当な名前になる
heroku logs #エラーが起きたとき。自分の環境では動いているのに……というとき。
heroku open #デフォルトブラウザで簡単にURLに飛べる。

 自分の環境で動いているのに、Herokuでエラーが出るというときは、"package.json"で使っているモジュールを全部書いているかな、と調べる。自分の場合は"socket.io"が無かったので、それでエラーを吐いたりしていた。

nvmも準備。

 Node.js + npmは当然のことながら入れておくとして、下手に最新版とか使いたがる人は、nvmを入れておくと便利。基本的にはNode.jsのバージョン管理をお手軽にしてくれるような奴。プラグインはたまにバージョンに引っかかるときもあるので、念のため。

 Node.jsとnvmを初めてインストールするときのハマりポイントと対策 - mollifier delta blog

おい、CoffeeScript書くぞ!!

wise9 › 10分で作るnode.jsで動くリアルタイムwebチャット

 を参考にしながら作った。どちらかといえば、サーバーのほうが重要だったり。

 取りあえず、JavaScript -> CoffeeScriptを変更するコツは次のあたりだった。コメント行がCoffeeScriptだとどうなるのか、という例。

    hoge("fuga") 
    ; -> hoge "fuga"
    hoge = function(){return "fuga"} 
    ; -> hoge = () ->
    ;           "fuga"  #最後の行がリターンされる
    hoge = function(){print "fuga"}
    ; -> hoge = =>
                alert "fuga"  #あくまでも類似挙動。ちょっと自信はない。CoffeeScriptだとよごさないために、バインドして実行している?
    @hoge = "fuga"
    ; -> this.hoge = "fuga" #イベントリスナーなどを逃してあげるときに使う。

 だいたいこんな感じのことを覚えていれば、変換できるんじゃないかと。JavaScript to CoffeeScriptで簡単に書いたのはこんな感じ。

 さーばーさいとじゃばすくりぷと ? GitHub

 CoffeeScript経路だとなぜかexpressというモジュールが通らないときがあるので、下を見るといいのではないか。

 node.js向けフレームワークexpressでアプリケーションのひな形をつくる - 大人になったら肺呼吸

 ついでなので、クライアント側のCoffeeScriptも。

 くらいあんとがわこっふぃーすくりぷと ? GitHub

 詳しい話は、公式サイトを見るといいですよ。あるいは下とかね。

 CoffeeScript基礎文法最速マスター | 株式会社インフィニットループ技術ブログ

Jade?いやいや、hamlですよ。

 Node.jsフレームワークであるところのExpressはJadeというテンプレートエンジン(HTMLを吐き出す奴)を使っているんだけど、個人的にはもう少し簡潔に書けないかなー、例えばClojureの奴みたいに……と考えたら、hamlというのがあるっぽい。

Express のテンプレートエンジンとして haml + CoffeeScript を使う - tricknotesのぼうけんのしょ

 俺はテンションが上がったけど、他の人はどうかな。でも、俺は下みたいな書き方、大好きですよ。

%html
  %script{src: "http://code.jquery.com/jquery-latest.js"}
  %script{src: "http://view.jquery.com/trunk/plugins/sound/jquery.sound.js"}
  %script{src: "/socket.io/socket.io.js"}
  %script{src: "/javascripts/sample.js"}
  %title Tonton
  %body{style:"position:relative;"}
    != body

 これに美しさを感じるなら迷わずテンプレートエンジンはHaml!!

サーバーサイドをCoffeeScript -> JavaScriptで変換しなくていいよ!!

 StackOverflowを漁っていたら出てきた。Procfileを下のように書いてあげれば、Coffeeから直接引っ張ってきてくれる。

web: coffee app.coffee

 当然のことながら、"package.json"の"dependencies"(依存モジュールのこと?)に "coffee-script"の"1.1.2"を入れておくことも忘れずに。

作ってみての感想

 実際に使ってみると、リアルタイムに反映するようなサイトを作りたいなら、Node.js + socket.io + CoffeeScript で気軽に書けてしまうなー、というのが実感のところ。いろいろと考えなくちゃいけないところはまだ多いんだけど、小さなものを作るのならば、Node.jsを選んじゃうかもなーという感じです。

prajnaprajna2011/10/19 21:11知の限界は、オンラインで公開されています。(http://www.cs.auckland.ac.nz/CDMTCS/chaitin/unknowable/index.html)。日本語よりは読みやすいと思いますので、是非。

nisemono_sannisemono_san2011/10/26 01:54お返事送れましたー。うれしい情報をありがとうございます。
さっそく読んでみますね!

 |