Nihitok BLOG: 8月 2011

2011年8月26日金曜日

Twitter bootstrapでmakeの際エラーが出たのでその原因をメモ。

エラー内容

/Users/user_name/.rvm/gems/ruby-1.9.2-p290/gems/less-2.0.6/lib/less/loader.rb:46:in `error': file 'reset.less' wasn't found. (Less::ParseError)

あれれ、、、reset.lessは存在するのになんでやろ。。。。と思って、makefileの中身を覗いたところ、どうやらmakefileはnode.jsのless用に書かれているようで自分の環境の場合rubyのlessが入ってるのが原因だと推測。。。

で、僕の環境だと

/Users/user_name/desktop/bootstrap% which lessc
/Users/user_name/.rvm/gems/ruby-1.9.2-p290/bin/lessc

ってなかんじで、lesscコマンドはrubyの方を参照していたので、makefileでnode.jsの方を参照するように書き直しました。

rubyのlessはアンインストールしようかとも思ったけど、sinatraとか依存してるみたいなので踏みとどまりました。

下記にmakefikeのコードも載せておきます。(node.jsのlessのパスは環境によって違ってくるかと思うので自分のパスを確認して下さい。)

DATE=$(shell DATE)
BOOTSTRAP = ./bootstrap-1.1.0.css
BOOTSTRAP_MIN = ./bootstrap-1.1.0.min.css
BOOTSTRAP_LESS = ./lib/bootstrap.less
LESS_COMPESSOR ?= `which lessc`
WATCHR ?= `which watchr`
#下記の1行を追加
LESS = /opt/local/lib/node_modules/less/bin/lessc

build:
  @@if test ! -z ${LESS_COMPESSOR}; then \
    sed 's/@DATE/'"${DATE}"'/' ${BOOTSTRAP_LESS} >${BOOTSTRAP_LESS}.tmp; \
　　#下記の2行を訂正した。
    $(LESS) ${BOOTSTRAP_LESS}.tmp > ${BOOTSTRAP}; \
    $(LESS) ${BOOTSTRAP_LESS}.tmp > ${BOOTSTRAP_MIN} --compress; \
    rm -f ${BOOTSTRAP_LESS}.tmp; \
    echo "Bootstrap successfully built! - `date`"; \
  else \
    echo "You must have the LESS compiler installed in order to build Bootstrap."; \
    echo "You can install it by running: npm install less -g"; \
  fi

watch:
  @@if test ! -z ${WATCHR}; then \
    echo "Watching less files..."; \
    watchr -e "watch('lib/.*\.less') { system 'make' }"; \
  else \
    echo "You must have the watchr installed in order to watch Bootstrap less files."; \
    echo "You can install it by running: gem install watchr"; \
  fi

.PHONY: build watch

これで問題なくmake出来るはず(*´∀｀*)ﾎﾟﾜﾜ

ふふふ、最近makefileの書き方を勉強し始めたのですが、早速活用の場が出来て、嬉しくなったので些細なことだけどブログに書いたよ(*´ω｀*)

Twitterのbootstrapいいですよね。フォークしたので色々カスタマイズしようと思います。

ではでは

2011年8月20日土曜日

rails3.1にだんだん慣れてきたのでどんな感じなのか自分なりに書いてみようと思います。

はじめに

特に意味もなく、なんとなく使ってみたいからと言う理由で下記のような環境でwebサイトを作っています。

rails3.1.0rc5
haml
CoffeeScript
sass(compass)
mongodb(mongo_mappaer)

月末には3.1の正式版が出るので、それぞれの技術がどんな風にキモいのか、そして便利なのか、はたまたただ、紛らわしいだけなのか、自分なりに書いていこうと思います

rails3.1の特徴

そもそもruby on railsは一体なんなのか。。。というと、webサイトを作成するための最新技術を集めたフレームワークです。一度インストールすれば

% rails new {your_webApp_name}

というコードだけを打てばそれだけでwebAppのほとんどの下地が出来てしまう大変便利なツールです。さらに

% rails generate scaffold Blog name:string body:text
% rake db:migrate
% rails server

と続けて打てば、タイトルとコンテンツ内容を投稿していける簡単なブログサイトがデータベースの設定も済んだ状態で使えるようになります。さらにhttp://localhost:3000にはサーバーもたってます。

ブログを作るなら「楽さ」でいうとPHPのwordpressとかの方が効率的かな〜と使ってみて思ったんですが、多数のユーザーが参加するようなwebAPPはrailsの方が向いていると思います。 python使ってる人ならGAEを使ったことがあると思いますが、だいたいそれと同じような感じです。

僕なりの感想だと、GAEはある程度技術がまとまっていて、そこが学習コストを少なくさせていいところだと思います。(Googleのdocumentが素晴らしい) railsは今回のupdateで0.1増えただけなのにだいぶ変化があります。(coffee-scriptとかsassの導入) そういう使い方がコロコロ変わっていくのが(最新の技術を追いかけていく設計思考らしい)嫌いでないなら、railsを好きになれると思います。

hamlについて

railsでは標準では、erbという技術を採用してます。しかし、ゴニョゴニョすることにより、hamlを使っていくことも可能です。どちらもテンプレート言語です。

erbはこんな感じ

<!DOCTYPE html>
<html>
<head>
  <title>TestPJT</title>
  <%= stylesheet_link_tag    "application" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

ご覧のとおり、htmlの中にrubyのコードを<% %>の間に書くことによってして内容を出力できます。phpとかpythonのDjangoと似てます。HTMLを知っていれば簡単に修得することが出来るのがメリットです。

しかし、僕はhamlを選びました。その理由は…..

Pic 2011 08 20 11 07 51

こんなのところや

Pic 2011 08 20 11 04 48

こんなのとかを許せない人間になってしまったんです。。。。。

この閉じタグやら、閉じカッコを詰めると、コードが見づらくなるし、、、、かといってしっかり書くと、行数が増えるし。。。。なにより見た目が綺麗ではない。。。。

そうです。僕はインデント派の人間なのです。w　だからもっとすっきり書くことが出来るhamlを選びました。下記はさっきのコードをhamlに変換したコードです。

hamlはこんな感じ

!!!
%html
  %head
    %title TestPJT
    = stylesheet_link_tag    "application"
    = javascript_include_tag "application"
    = csrf_meta_tags
  %body
    = yield

hamlは簡単にいうとcssのセレクタを書いてく要領ででエレメントを書いていくことが出来るテンプレート言語です。すっきりしてて素晴らしい。。。。かなり割愛して書いているので、もしhamlが気になった方がいたらググッて調べて下さい。(もしかしたらgoogle先生に"もしかしてhtmlの打ち間違い？？"って言われるかもしれませんw)

調べてないけど、pythonにもこういうインデント系テンプレート言語あるのかなぁ。。。ありそうなきがするけど。。。

CoffeeScriot

CoffeeScriptはpythonやrubyのように書いたコードをjavascriptに変換してくれるツールです。

これもhamlを選んだ理由と同じ理由で使ってます。僕は、javascriptをそのまま書いている時いつもその冗長なところに嫌気を感じていました。そんなことを感じている人はcoffeescriptがおすすめです。

違いは見比べてみるのが一番わかりやすいと思うので同じ内容のコードを書いてみます。

ただのjavascriptの場合(jQeryも入れてみる)

$(function(){
  $("#hoge").click(function(){
    console.log("hello")
  });
});

いつもいっつも、まず、$(function());を書いて、$("#hoge")をかいて、.click();をかいてその中にfunction(){}って書いて、その中にしたいことを書く。。。。ってなことをず〜〜と続けて居たんですが、そういう冗長な行動をなくすことが出来ます。思えば、どれだけネストすれば気が済むんじゃ？？ってかんじですよねw

CoffeeScriptだとこんな感じ

$ ->
  $("#hoge").click -> console.log "hello"

かなりすっきりします。まず$ ->で改行。これが$(function());です。そして、$("#hoge")は普通のと同じように書いて、その後ろに->を書きます。これはfunction(){}を意味します。そしてその横(もしくな開業してインデント)にしたいことを書く。。。ってかんじです。

慣れるまではコンパイルに失敗したり、独自の書き方に戸惑ったりするかもしれませんが、慣れたらかなり気持よくjavascriptを書いていけます。

sassについて

すいません。次回に持ち越しさせて下さいw 書くのに疲れちゃった〜〜wヽ(´ー｀)ノ sassもhamlやcoffeescriptと同じように大変便利なツールです。

また暇があったら書くかもしれませんが、もしかしたら書かないこともあるかもしれませんw

最後に

かな~~~~りかいつまんで書いてあるので、興味をもったら、Google先生にいろいろ聞いてみてください。また、なにかツッコミがあったら教えて下さい〜。

それではまた。

2011年8月4日木曜日

rubyのgem「em-websocket」を使ったらいとも簡単にwebsocketを導入できた。

とても簡単です。 10分もかからずに試せるのでよかったらどうぞ。

一応githubにソースも置いてますので、興味があるかたはそちらも見てみて下さい。(❍ʻ◡ʻ❍)

https://github.com/nihitok/Kantan-websocket

作るもの

websocketで動くチャット

最初に、gemでem-websocketをインストールします。em-websocketの詳細はこちら。https://github.com/igrigorik/em-websocket

$ gem install em-websocket

環境によっては依存するライブラリがなくて怒られたりするかもしれませんが、その場合はエラーメッセージでググッて見て下さい。

次に、適当なHTMLで「index.html」を作ります。

<html>
  <head>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
    <script src='main.js'></script>
  </head>
  <body>
    <input id="input" type="text" />
    <div id="msg"></div>
  </body>
</html>

そして、クライアント側の動きを実装するmain.jsファイルがこちら

$(function(){
    ws = new WebSocket("ws://localhost:51234");
    ws.onmessage = function(evt) {
        $("#msg").append("<p>"+evt.data+"</p>");
    };

    ws.onclose = function() {
        console.log("閉じたよ")
    };

    ws.onopen = function() {
        ws.send("繋がったよ！(❍ʻ◡ʻ❍) ");
    };

    $("#input").keypress(function(e){
        if(e.keyCode ==13){
            var val = $("#input").val()
            ws.send(val)
            $("#input").val("")
        }
    });
});

ここで注意点が一つ。localの環境で試す場合は"ws:localhost:{好きなポート番号}"で大丈夫ですが、VPSなどで試す場合は、localhostの部分をそのVPSのIPアドレスか、ホスト名に変えて下さい。よく考えれば分かることなんですが、僕はこれで1時間ほどハマりましたw

そして、気になるサーバーの動きを実装するserver.rbがこちら。

#coding:utf-8
require 'em-websocket'

Process.daemon(nochdir=true) if ARGV[0] == "-D"
connections = Array.new

EventMachine::WebSocket.start(:host => "0.0.0.0", :port => 51234) do |ws|
  ws.onopen {
    ws.send "繋がった〜(❍ʻ◡ʻ❍) "
    connections.push(ws) unless connections.index(ws)
  }
  ws.onmessage { |msg|
    puts "received "+msg
    ws.send msg #to myself
    connections.each {|con|
      #to other people
      con.send(msg) unless con == ws
    }
  }
  ws.onclose   { puts "閉じます〜" }
end

補足ですが、下記の部分はdaemonとして動かすために入れてます。rubyではたった１行加えるだけでそのスクリプトをdaemonにできるのですごく便利です。(daemon化するっていうのはバックグラウンドでずっと起動しぱなしにできるっていうことだよ(❍ʻ◡ʻ❍) )

Process.daemon(nochdir=true) if ARGV[0] == "-D"

これで、後はサーバーを起動するだけです。とりあえず、普通に起動します。(rubyのversionは1.9.2で試してます。多分、1.8.7とかだと動きません。)

$ cd {server.rbがあるディレクトリ}
$ ruby server.rb

index.htmlをブラウザで開いて、windowを２つ並べてこんな感じに動作すれば成功です。

daemonとして起動したい場合は下記のようにします。

$ ruby server.rb -D

プロセスを終了したい時はちょっと面倒ですが下記のようにしてください。

$ ps ax |grep ruby
74583   ??  S      0:00.10 ruby server.rb -D
76807 s003  R+     0:00.00 grep ruby

みたいな感じでpidが確認できるので、"ruby server.rb -D"とかいてある方のpidを確認して

$ kill -9 74583
$ ps ax |grep ruby
76807 s003  R+     0:00.00 grep ruby
↑プロセスがなくなってたらちゃんと終了してます。

websocketの動きなどは筆者も説明出来るほど理解できてないのですが、みたらなんとなくピンとくるようなシンプルな構成です。サーバー側もクライアント側も同じメソッド名なので分かりやすいですね。

あと、今、これを更にいじってゲームっぽいものも作ってます。公開できるようにがんばります〜〜。(いつも中途半端な状態で放り出すので期待するべからずw)では(❍ʻ◡ʻ❍)

登録: 投稿 (Atom)