2010年10月25日

64GBのSSDを購入

Electri6ity を買って以来、ただでさえそんなに速くはなかったプロジェクトの読み込みや音色の読み込みが更に遅くなり DAW を開くのさえ面倒になってきていたので、思い切って CSSD-SM64WJ3 を買った(注文当時 Amazon に在庫がなかったのでツクモで注文したけど今はある模様)。
3.5インチベイ取り付け用の金具を買っていないので PC ケースが開けっ放しな上に SSD を PC の上に置きっぱなしという中途半端な状態ながら早速使用開始。

フォーマットにあたっては遅いと思われる GPT + NTFS を先に試してみた。
そもそも作曲用の音源を入れっぱなしにするために買ったのでジャーナリングなどは必要ないはずなのだが、取りあえず CrysitalDiskMark で 512K ランダムリードだけテストして、すぐ MBR + exFAT でフォーマットしなおした。
GPT + NTFS で 170 前後、MBR + exFAT で 190 前後のスコアを出していたのでまあまあ予想通りな感じ。

フォーマットが済んだので入れるデータを選ぶのだが、Electri6ity を入れてもまだ余裕があるので、KOMPLETE7 についてきた音源のうち使用頻度が高そうで HDD への負担が高そうなものを選んでコピーした。

Electri6ity 26.2GB
Abbey Road 60s Drums Library 6.32GB
Scarbee MM-Bass 2.96GB
New York Concert Grand 2.70GB
Vienna Concert Grand 3.12GB
Berlin Concert Grand 2.77GB
Upright Piano 2.55GB

ここまでで残り容量が約 13GB ぐらいになっていたので、ついでに Battery3 のライブラリのデータも 12GB 弱ぐらいなので入れようと思ったら Battery3 はサンプルごとにファイルが分かれていてコピーに恐ろしく時間が掛かるようなので結局諦めた。
本当は KONTAKT4 のライブラリも入れたかったけどこれは容量オーバーになるので諦め。

準備も終わったので DAW を立ち上げて以前作りかけで投げ出していたプロジェクトを開いてみたら速い速い。しかも今までは Electri6ity を使ってるプロジェクトは読み込み終わったあとも何度か再生しないと発音が安定しなかったのに、その問題も解決した。

まあいくら道具がよくなっても使う人間がレベルアップしないと意味がない。でも SSD オススメです。
Clip to Evernote

2010年10月6日

非同期タイプの埋め込みタグ

少し前に GoogleAnalytics でのアクセス集計用のタグとして </head> の直前に挿入するタイプの非同期型埋め込みタグが導入された。
それまでのタグは </body> の直前に挿入してページの読み込みをブロッキングしないようにしましょう、という方針だったものの、それなりにいるはずの「開いてみたけど読み込み遅いからやっぱ止めよう」みたいな諦めるのが早いユーザを知るためには若干遅いのではないか、という手法だった。

新しい方法では外部 JavaScript ファイルを読むための script タグを直接 HTML には書かずに JavaScript から挿入するように変わった。この読み込み方法はブロッキングしないように読み込む方法として最近ではわりと有名な方法だとは思うが、読み込んだファイルが持つメソッドを呼び出す方法が面白くていいなあと思った。
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'アカウントID']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
実際の内部での動作を見たわけではないので推測だけど、_gaq が未定義だったらまず配列として初期化して、メソッド呼び出しの代わりにメソッド名とパラメータを配列で渡す。
その後で script タグを動的に生成して、オブジェクトの準備ができ次第 _gaq は push() メソッドを持つ独自のオブジェクトに摩り替わって、今までの _gaq に溜まっていた配列のデータをメソッドを呼び出して消化する。
オブジェクトの準備が整ってからは _gaq.push() が呼ばれるとそのままメソッド呼び出しに変換される、という仕組みになっているはず。
つまり読み込みが完了するまでの間は _gaq はシンプルなキューになっていて、script タグの生成と読み込み完了を待たなくてもメソッド呼び出しが貯めこんでいける。
async = true とか、appendChild じゃなくて insertBefore とかもさり気ない技だけど今回は省く。

自分でも外部の JavaScript ファイルを動的に読むために script タグを JavaScript から挿入する手法で実現したことがある。ただ、読み込み完了を待つために script タグの onload イベントとか onreadystatechange を拾ったりしててブラウザ間の互換性が心配だなあと思っていたりはしていた(一般的なサイトで使うわけではなかったので真面目にチェックしなかったけど、一般的なライブラリでもその方法で読み込んでいることがあるので多分大丈夫だったんだろうとは思う)。
setInterval で読み込み完了したのか待つのも定期的に無駄な処理が入るわけで美しくないし、複雑な動作をさせようと思うと読み込み完了するまでの間の呼び出しを正しい順番で覚えておかないと厄介な目に合うので何かもっと綺麗な解決策がないかなあとモヤモヤとしていたところでこの方法を知ったのでウホウホ付いていくことに。

最近はブックマークレットを実行するためのコードとしてこれを利用するようになりました。
ブートストラップとしてほぼ同じ形でブックマークレットのメイン処理を行うスクリプトを呼び出して、その中で Google の CDN にある jQuery を読み込んだりとか、ブックマークレットが行ないたい処理が実際に書いてあるスクリプトファイルを読み込んだりとか。
以前はブックマークレット呼び出しを連打すると読み込み中のスクリプトがあるせいで処理の順序がおかしくなってぶっ壊れることがしばしばあったものの、その辺の問題も解決。

「連打するな」で解決する問題だったので黙っていたものの、こういう問題が解決するのは気持ちイイ。
Clip to Evernote

2010年10月5日

jQuery に Templates Plugin と Data Link Plugin が追加

jQuery に Templates プラグイン(jquery-tmpl)と Data Link プラグイン(jquery-datalink)が追加された。
これらは普通のプラグインとは少し違っていて、jQuery オフィシャル。JavaScript を書いていると処理と HTML が綺麗に分離できなかったりすることがしばしばあるけど、これらのプラグインを使うとコードの整理がしやすくなるのではないかと思う。ありがとう Microsoft!

http://api.jquery.com/category/plugins/templates/
http://api.jquery.com/category/plugins/data-link/

ドキュメントも整っていて使い始めるのにもそんなに戸惑わずに済みそう。ただしまだリリースされていない jQuery1.4.3 に依存しているようなのでもうちょっと我慢。まだ触っていないものの、プロポーサルの時から目をつけていたのでちょっと説明も書いておく。
間違っているところがあるかも知れないのでその辺についてはごめんなさい。先に謝っておきます。

Data Link プラグイン

個人的には Data Link プラグインのほうが地味ながら重要な機能を担っていると思うのでこっちから紹介。
これはその名のとおりデータをリンクするプラグイン。データをサーバサイドと JavaScript サイドでシームレスに行き来させるのは地味に面倒くさいが、その辺の面倒な部分をある程度綺麗に書けるようにしてくれるので、構造が整理されて読みやすいソースになりそう。

最初に出てくる例がわかりやすいので2つを引用してみる。
var person = {};
$("form").link(person);
$("[name=firstName]").val("NewValue"); // Set firstName to a value.
person.firstName; // NewValue

// User types a value into the form field.
person.firstName; // firstName now contains the user-ented value.

// Set the object property.
$(person).data("firstName", "NewValue");
// The change is automatically pushed to the input element.
$("[name=firstName]").val(); // The value is now "NewValue"
person という空のオブジェクトを作って、それを form タグとリンクさせる。これだけで input に対しての変更が person からきちんと読み出せるし、person に対する変更が input に反映されるようになる。
非常に地味なのだが素晴らしい。

person に対するデータの割り当てが $(person).data() になるのが若干エレガントさに欠ける。取得だけの用途なら person.firstName と書けてスマートだけど、読み書きするなら読み出しも $(person).data('firstName') にしたほうが jQuery らしい気もする。

Templates プラグイン

HTMLをテンプレート化できるプラグイン。これも名前の通り。
PHP を知っていればコードと HTML が分離されていないソースのヤバさは知っていると思うけど、JavaScript にも同じような問題が付きまとう。

今までも JsTemplate とか json-template とか Smarty を使っている人なら使いたくなる Jarty とか、JavaScript でテンプレート機能を提供してくれるライブラリはいくつかあった。ただ JavaScript 特有の問題として複数行に渡る文字列を書くのが大変ということもあって、使うにしても若干ハードルが高くなりがちだった(JsTemplate はちょっと特殊だけど)。

ところが WebGL での shader の書き方のように、HTML 内に text/javascript ではないタイプで script タグを記述することで、画面上には表示されない複数行に渡るテキストデータを HTML に埋めこむことができる。
この辺の仕組みを上手く使ってサンプルが書かれている Templates プラグインはいい感じにテンプレート使用のハードルを引き下げてくれそうな気がする。テンプレート用のタグも each, if, else などの基本的なものや tmpl という別なテンプレートと融合させられるタグもあるので入り組んだ構造のテンプレートも作りやすそう。

テンプレートは JavaScript とサーバサイド側の言語と両方で使われる可能性があって、記述方法が全く違うと使う側が混乱する原因になる可能性がある(特に、テンプレートはプログラマだけが触るとは限らない)。
その辺の問題をある程度無効化できる Jarty や、必要最低限の機能に絞って特定の言語への依存を排除して、Python や golang でも使える json-template に比べると若干課題を抱えているようにも思える。Templates プラグインの書式に従ってテンプレート処理が出来るライブラリが他の言語にも出てくるともっと状況が好転するかな、とか思う。

2010-10-06 - 追記
http://blogs.msdn.com/b/chack/archive/2010/10/05/jquery-templates-data-link-globalization-accepted-as-official-jquery-plugins.aspx
とてもわかりやすく紹介してくれている記事がありました。流し読みしかしてなかったので気付いてなかったですがテンプレートは 1.5 で統合されるんですね。これは楽しみ。
Clip to Evernote

とうこうてすと

記事の表示を確認。
Clip to Evernote