bouzeTweetRequire.jsはActionScriptのimportのようにjsファイル同士の依存関係を崩さないよう非同期で読み込みつつ、多重読み込みなども防止してくれるライブラリ。Require.jsを使えば細かくjsファイルを分割してもBackboneやjQuery等のライブラリを依存関係を保ちつつ読み込んでみる。最小限のコードで挙動を確認してみる。World!」が出力される。Backboneに必要なUnderscoreとjQueryはBackboneより先に読み込まれている。MyModel()})@)今度はRequire.jsの機能のdefineを使ってモジュールを作ってみる。World!」が出力される。model})@)require.configのshimでライブラリの依存関係をあらかじめ設定してみる。model})@)今度はrequire.configのpathsを使ってライブラリのパスをあらかじめ定義しておく。こちらも実行結果は同様。model})@)今度はshimにもpathsで定義したパスを使ってみる。model})@)require.configでの設定は一度きりなのでこれを無視すると、メインのコードはだいぶスッキリした。bouzeTweetMacにはCodeKitっていうCoffeeScriptとかSassとかLessとかをコンパイルしてくれる便利なツールがあって最近までお世話になってた。自分はWindowsユーザーで、これだけのためにMacを起動するのも面倒くさいので、CodeKitでやってたことをWindowsでもできるようにとGruntをはじめてみた。Gruntそのものはコンパイラではなく、いろんなタスクを実行してくれるだけのツールなんだけど、プラグインを追加することでCoffeeScriptのコンパイルや、Sass/Lessのコンパイル、Uglifyを使ってjsのminifyなどができるようになる。これを使ってCodeKitでやってたことを再現してみた。インストールまずGruntを実行するのに必要なnode.jsをインストール。同時にnpm(node.js用のパッケージ管理ツール)もインストールされる。Files\nodejs\」を追加しておく。grunt」ではない環境変数PATHに「grunt」を追加しておく。プロジェクトの準備プロジェクトのルートフォルダにGruntfile.js(もしくはGruntfile.coffee)と、package.jsonというファイルを作る。Gruntfile.js(Gruntfile.coffee)はGruntに実行させるタスクを定義しておくファイル。package.jsonはプロジェクトに必要なGruntのプラグインのリスト。package.jsonpackage.jsonはこのように記述して、devDependenciesに必要なプラグイン(パッケージ)の名前とバージョンを羅列しておく。install」をコマンドプロンプト上で実行すると、devDependenciesに書かれたプラグインを順番にプロジェクトフォルダ直下のnode_modulesフォルダにダウンロードしてきてくれる。installと書かれた.batファイルを作っておくと良い。Gruntfile.js下記のようなラッパー関数を用意し、その中にタスクを書いていく。Script)で記述していく。//ここにGruntに実行させたいタスクを書いていく};coffeeファイルが入ったフォルダを監視してcoffeeファイルが更新されたらCoffeeScriptをコンパイルして、uglifyでminifyするGruntfile.coffee。["watch"]sassファイルが入ったフォルダを監視してsassファイルが更新されたらSassをコンパイルして、sprite画像も生成する。["watch"]これらをまとめつつ、JavaScriptテンプレートのコンパイル、htmlの更新監視にコンパイル後にLiveReloadを使ってブラウザをリロードするタスクを加えるとこうなる。["watch"]それぞれのタスクの設定はそれぞれのプラグインのページを参照のこと。bouzeTweetFlashから毎フレームExternalInterface.callでJSの関数を呼び出したりしている時に、そのJSの関数内でなにかしらのObjectをreturnしてるとその処理に手間がかかるのか、Flashのフレームレートがすごい落ちる。falseして回避しておく。top変えたり)をしてたりしても同様の現象が起こる。0)でくるんで非同期で処理してあげると回避できた。ExternalIfはXMLでFlashとデータのやり取りをしてるんだけど、データ量が多いとそのシリアライズなのかなんかが遅いよ。2013追記2:CoffeeScriptで行末returnしないようにするには「return」だけ書いとけばいいっぽい。bouzeTweet前回から毎週日記書こうと思ったのにいきなり頓挫してしまった。今回は日常の隙をついて、会社帰りに歩きながらiPhoneで書いてみる。一日中撮影ポイントを探しつつ都内をウロウロ。宿泊先の帝国ホテルのスウィートがすごかった。torne+nasneがいい感じ。torneは全ユーザーの視聴データや、録画予約のデータをもとに、各番組にミルネとトルネという独自のスコアをつけている。試しにこのスコアの高い番組をいろいろ録画してみた。このIT化を機にまたテレビを見る気が湧いてきた。去年の年末ぐらいに、社長から引き継いだコードを読んでて、モーションプログラムのコツみたいなのに気づいた瞬間があった。それを意識しだしてからなんとなく自分がイメージしたようにオブジェクトが動いてくれるようになってきた。コツと言ってもただ単にモノを動かす時に、x、yじゃなくて距離と角度を操作するってだけの話なんだけど。Author西村斉輝1984年兵庫県生まれ。2011年多摩美術大学グラフィックデザイン学科卒業。