grunt自体がNode.jsで動いてるんでややこしいですが、Node.jsでアプリケーションを開発している時、foreverとかnode-devを使って、更新ファイルがあれば再起動してブラウザをリロードして確認すると思います。gruntがあるならサーバーの再起動もブラウザのオートリロードもできるやろ！と思って作りました。 Qiitaにも投稿しました。 はじめに Node.jsをExpressで作る際に、app.js, routes, jade, stylus, publicの中にあるファイルなどを更新した際に、serverがrestartしてブラウザもreloadされる。ようなGruntfileを作りました。まぁまぁ開発が早くなるんちゃうかと思います。 環境 Node.js v0.10.26 Express v3.0.0 node-supervisor テンプレートはJadeを使ってます。 CSSは、stylusからCSSを書き出してます。その際に、ベンダープレフィックスを追加するautoprefixerが動いてます。 JavaScriptファイルは全てcoffeeで書きます。 vendorsフォルダーは、distにコピーしているだけです。 Nodeプロセス node-supervisorを使って起動しますので、npm install -g node-supervisor してください。 ファイル構成 . ├── Gruntfile.coffee ├── app │ ├── app.coffee │ ├── bin │ │ └── www │ ├── public │ │ ├── images │ │ ├── javascripts │ │ └── stylesheets │ ├── routes │ │ ├── index.coffee │ │ └── user.coffee │ └── views │ ├── error.

続きを読む

あけましておめでとうございます。新年を迎えるたびに、ブログの継続を意気込むものの3日足らず3時間で挫折してしまいますが、今年も宜しくお願いいたします。 さて、昨年末にGruntファイルを1つ作ってみました。ぐぐればたくさんサンプルがありますが、jade、stylus、coffeeをビルドするgruntファイルが無かったので、自分で作りました。 良かったら使ってみてください。詳しくはQiitaに投稿しましたので、こちらを御覧ください。

続きを読む

スマフォのブラウザで遊ぶソーシャルゲームでは、Mobageは「ExGame」、GREEは「Reel」または「Theatrical」というSWF変換エンジンが提供されています。その場合は、Flash Lite 1.1でパブリッシュされたSWFファイルを変換してくれるので、JavaScriptを使ってcanvasでガリガリ演出を作るよりは、まだまだFlashが活躍している現状があります。今回は、Flash Lite 1.1で重複しないランダムを作る方法を紹介します。 Flash Lite 1.1では配列が使えません。 配列が使うことさえできれば、いろんな方法がありますが、Flash Lite 1.1はActionScript4相当なので、配列というのがありません。こういう場合は、set()関数とeval()関数を駆使して、重複しないランダムを扱う方法があります。最初に、set()関数とeval()関数のおさらいから。 js 1 2 3 4 5 6 // set()関数は変数を作って値を代入することができます。 set("hensu", "ほげほげ"); trace(hensu); //ほげほげ　と出ます。 // eval()関数は文字列で変数を呼び出すことができます。 trace(eval("hensu")); // ほげほげ　とでます。 重複しない乱数を作ってみましょう。 ０〜１９まで数字を２０個ランダムで作る例です。 js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

続きを読む

投稿が半年も抜けちゃいました・・・。いかんですね。皆さまお元気でしたでしょうか？ サイトのドメインを決める際に「www」をつけるかつけないか、少しは考えることがあると思います。今回は、Node.jsで「www」の有り無しで正しくリダイレクトさせる方法をご紹介します。 app.configureの直下に書きます。index.htmlにあたる、app.get ‘/‘以降に書いてしまうと、こちらが先に有効になってしまいますので、app.get群の一番最初に書きましょう。 wwwなしでアクセスがあった時に、wwwありにリダイレクトさせる方法 coffee 1 2 3 4 5 6 7 8 app.get '/*', (req, res, next) -> # req.headresの中にwwwが含まれていれば、 if req.headers.host.match(/^www/) is null # wwwをつけた状態でリダイレクトします。 res.redirect 'http://www.' + req.url else # それ以外は次へ進みます。 next() 記述自体はとても簡単です。よくあるWEBサーバーソフトウェアのApacheですと、.htaccsessに書いて、301リダイレクトしますが、Node.jsの場合は、res.redirectで自動的に301を返すようになっています。今度は逆に、wwwありでアクセスがあった場合に、wwwを取ってリダイレクトする方法です。 wwwありでアクセスがあった時に、wwwを取ってリダイレクトさせる方法 coffee 1 2 3 4 5 6 7 8 app.get '/*', (req, res, next) -> # req.

続きを読む

今更ですがTitaniumでアプリを作ってみようかと思います。今までたくさん買ったObjective-CやXcodeの本たちンゴ・・・。 Titanium Studioというのでゴリゴリ書いていくのが普通かと思いますが、自分の場合は、エディタはEmacsがいい！Coffeeで書きたい！保存したら自動でビルドして！と思ったので色々調べると先人様達のお知恵がたくさんありました。特に自動でビルドしてくれる方法はありがたいです。 今回は、その自動でビルドしてくれるRubyのコードが、どうも自分の環境でうまく動かなかった。そして解決したので、同じ境遇の方でこの記事にたどり着いた方のお役に立てるよう、メモを残しておきます。 まずはこちらをご覧ください。 自分がたどりついたのはこちらの記事でした。 http://a-h.parfe.jp/einfach/archives/2011/0106224213.html ミソとしては、コマンドラインでbuild.rbというのを実行して、http://127.0.0.1:9090/runにアクセスすれば、iPhoneシュミレーターが起動する。というところです。そのbuild.rbはGitHubに公開されてまして、それを実行してみた結果、自分は下記のようなエラーになりました。 $ ruby build.rb [2013-02-20 11:16:46] INFO WEBrick 1.3.1 [2013-02-20 11:16:46] INFO ruby 1.9.3 (2012-04-20) [x86_64-darwin12.2.0] starting server at localhost:9090 [2013-02-20 11:16:46] INFO WEBrick::HTTPServer#start: pid=55265 port=9090 localhost - - [20/Feb/2013:11:16:58 JST] "GET /run HTTP/1.1" 200 2 - -> /run build.rb:25:in `exec': No such file or directory - /Library/Application Support/Titanium/mobilesdk/osx/1.5.1/iphone/builder.py (Errno::ENOENT) from build.rb:25:in `block (2 levels) in <main>' from build.rb:24:in `fork' from build.rb:24:in `block in <main>' from /Users/cotapon/.

続きを読む

明けましておめでとうございます！2013年最初の投稿です^^;　ちょっとだけサクッと近況報告で、年末年始は色々ありまして、2月に入ってから少し落ち着き、1月20日に入籍しました。 とまぁ、近況はこんなもんで。(´∀｀∩) Underscore.jsとは 簡単に言いますと、Underscore.jsというのは、JavaScriptのライブラリです。簡単すぎますが、つべこべ言わずに何がどう便利なのか、Underscore.jsのドキュメンに書かれている最初のメソッド、eachのサンプルを見てみましょう。 underscore.js eachの使い方 underscore.js ライブラリはこれで、読み込むと _ ←アンダースコアを定義します。これで連想配列をパースしてみましょう。 js 1 2 3 4 5 obj = {A: 'a', B: 'b'}; _.each(obj, function(v) { console.log(v); // a b と出力されます。 }); さて、もうお気づきかもしれませんが、連想配列などをパースする際には、for in やjQuery.eachなどを使っていました。キーとバリューを出力する際、必ずキーが必要でしたが、Underscore.jsのeachを使えば、最初にバリューが第一引数で戻ってきます。たったこれだけですが、わかりやすくていいですよね。 js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

続きを読む

あたしにゃ～そういう難しいことはわからないですがね(こん平風)、閲覧者に意図せず別のWebサイト上で掲示板への書き込みなどを行わせ、警察が誤認逮捕してしまった事件がありましたが、これがCSRF攻撃というから恐ろしいじゃないですか。Node.jsでもしっかり対策しなければなりませんが、Express version3.0以上で、少しはまったところがありましたのでメモします。 CSRFとは ググればいっぱい出てきます。CSRFをscrと打ち間違えそうになるほど自分はフロント側の人間なので、詳しいことは分かりませんが、下記のサイトが割りと分かりやすかったです。 リクエスト強要（CSRF）対策 http://www.ipa.go.jp/security/awareness/vendor/programmingv2/contents/301.html 単純に、Node.js express CSRFとかでググった先人様の知恵などでは、どうもexpressのバージョンが2とかの情報が多かったです。一番目にしたのは、「express-csrf」というモジュールです。これを使うと、下記のアラートが出てしまいます。 express-csrf is deprecated. Please use Connect’s csrf middleware instead express-csrfは推奨されません。代わりに、ConnectのCSRFミドルウェアを使用してください(直訳) express-csrfは非推奨 もうこのモジュールを使うのを推奨していないみたいでした。express verison3以降ではミドルフェアとして使えるみたいなので調べてみると、expressのconnectの中に、csrf.jsがちゃんとありました。あと、先人様の知恵情報では、dynamicHelpersを使う方法がありました。express version3以降では、このダイナミックヘルパーの使い方が変わりましたので、この辺りの使い方も変わってしまいました。いろんなサイトを探した結果、下記のサイトに使い方が載ってました。 Express 3 Tutorial: Contact Forms with CSRF http://dailyjs.com/2012/09/13/express-3-csrf-tutorial/ 要点をまとめると、 CSRF対策は専門の方から具体的な内容を聞いてください express-csrfは非推奨 参考サイトでdynamicHelperで書かれていたら、express version3以降ではコピペ出来ない チュートリアルが英語サイトだったので下記にまとめます js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 app.

続きを読む