React・Fluxまわりをひと通り触ってみたので所感を徒然。 isomorphicなアプリを書く そこまで大した話ではない。 isomorphicなライブラリをnpmで入れる。 isomorphicなコードを書く。 node.js(io.js)ではそのまま動作。 ブラウザ用にはbrowserify。 所感: bo…

非同期処理のスマートな書き方の1つの解として注目を集めているPromise。Deferredとか呼ばれたり、実装によってメソッド名とか仕組みとかが微妙に違ったり、しょうがないことですが言語仕様次第で実装方法が変わったりと、今ひとつ安定しないデザパタですが…

公式のトラブルシューティングに書いてありましたが無駄にハマったのでメモ。 According to your Font Awesome version, please add to your stylesheets: /* FA 4.0.0 and newer */ .reveal .fa { font-family: 'FontAwesome'; } /* FA 3.2.1 and older */ …

JavaScriptでString型か判定する方法って色々あるけどどうするのがベストなんだっけなー、Underscore.jsでも参考にするかー、と思って調べてみたところ、こんな実装がされていました。 // eachは_.eachと同じ each(['Arguments', 'Function', 'String', 'Num…

// 一般的なスタイル function linear(t, b, c, d) { return c * t / d + b; } // jQueryスタイル function linear(x, t, b, c, d) { return x; } // x = t / d, b = 0, c = 1 なので x == t/d == c * t / d + b // つまり上も下もやっていることは同じ。 x:…

条件付きコメントを使えばいいという話でもありますが、ここでは、ちょっとした時に便利なJavaScriptのIE限定条件付きコンパイル/*@cc_on .. @*/をCoffeeScriptで使う方法を検討してみます。といっても大層な話ではなくEmbedded JavaScriptを使うだけです*1…

three.jsでは、射影行列（ProjectionMatrix）がTHREE.Cameraとして抽象化されており、透視投影であるTHREE.PerspectiveCameraと、平行投影であるTHREE.OrthographicCameraの2つが標準で用意されています。一方、OpenGL*1には透視投影の射影行列APIとしてglFr…

ローダを使わずに自力でテクスチャを生成する時は、needsUpdateをtrueにすることを忘れずに。 texture = new THREE.Texture(img); // img要素 or canvas要素 texture.needsUpdate = true; 内部的にどうなっているかというと、最終的にrenderer.setTextureが…

Webブラウザ向けの3DCGライブラリであるthree.jsで、3D描画に2D描画*1を織り交ぜる方法を紹介します。これにより、前景と背景に自由に2D画像を描画できるようになり、ゲームのHUD表示などが可能になります。 基本的な考え方 three.jsに限った話ではありませ…

ちょっとした小ネタです。Cでswapをするには、マクロやポインタを使えば出来ます。 // int値の交換 #include <stdio.h> void swap(int* a, int* b) { int t = *a; *a = *b; *b = t; } int main(void) { int a = 0, b = 1; printf("%d, %d\n", a, b); swap(&a, &b); pr</stdio.h>…

Jadeで取得したHTMLを、underscore#template()で扱おうとした時に、ハマったのでメモを残しておきます。 問題 例えば、 a(href="<%= url %>") <%= name %>というJadeスクリプトがあった時、出力は <a href="&lt;%= url %gt;"><%= name %></a> となります。そのため、Jadeの属性値にundersco…

dragoverイベントをキャンセルしないと、dropイベントが発生しません！*1以上。 おまけ この仕様ですが、このサイトでいかにクソかについて語られているので、一読をおすすめします。こういうお話も含んだ、ちゃんとした実装の仕方は「ドラッグ＆ドロップ－H…

Railsでは、app/assets/以下に各種JavaScriptやCSSなどを配置しますが、巷のJavaScriptライブラリには、JavaScriptとCSSと画像がセットになっているケースがしばしばあります。この時、特に厄介なのがCSSと画像です。CSS内で背景画像が相対URLで指定されてい…

とりま今の理解。ちゃんと調べてないので間違ってる可能性大。 Blobオブジェクトはバイナリデータを抽象化したもの。 Blobの実データはArrayBufferなどに変換して得られる。 ArrayBuffer内のデータから値を抽出するときはTyped Arrays(Float32Array、Int16Ar…

ここしばらく、Node.jsを使った開発で忙しくて、ようやく一段落つきました。ということで随分とNodeを使ってきたつもりだったのですが、肝心のexportsの辺りの理解が浅かったことに気づいたので、少しまとめます。 exportsとmodule.exports exportsとmodule.…

題材として、以下のフィボナッチ数の計算関数を利用します。効率が悪いのはご愛嬌。 fib = (n) -> return 1 if n is 1 or n is 2 (fib n-1) + (fib n-2) alert fib 10 ここで「fib(10)の結果を取得したいが、これ以上fibを使わないため、出来ればfibを消すか…

Node.jsのrequireの動作についてのメモです。 requireの大原則 一番重要なのは「requireされたファイルはキャッシュされ、２度ロードされることはない。*1」ということです。 モジュールは初めて読み込まれたときにキャッシュされます。 すなわち（他のキャ…

最近、backbone.js(+underscore.js)とKnockout.jsの練習をしており、その一環で作成したものです。jsdo.itが貼れるかどうかのテストも兼ねてます。 MVVMなかなかいい 最初はdata-bindになかなか慣れなかったのですが、一度慣れてしまうとbackboneのめんどく…

_.bindAllは、第一引数に指定したオブジェクトAがあった時、Aがもつ関数プロパティのthisをAにしてしまう関数です。 hoge = { val: "hoge", print: function() { console.log(this.val); }, set: function(v) { this.val = v; }, get: function() { return t…

Node.jsで利用できるSequelize » A multi-dialect Object-Relational-Mapper for Node.JSという（現時点で唯一の？）ORMがあります。使い方にはクセがありますが、色々いじっていれば1日ほどで使えるようになるぐらいの難しさだと思います。v1.5.0時点で対応…

意外と根が深すぎて、ビビりました。数時間を費やしてしまいました。 環境 Google Chrome 20.0.1132.57 CoffeeScript 1.3.3 結論 まず一番重要なのは、「constructorではオブジェクトをreturnすべきでない」ということです。この記事を書いてからしばらく立…

今更ながらJavaScriptの継承について再考してみました。JavaScriptの継承については、だいぶ前から何度も考えているのですが、個人的にコレといった決定版がない感じ。 最近、個人的によく使っている継承パターンですした。 var extend = function(obj, func…

と大々的に言うようなほどのことは全くないのですが、せっかく作ったので。 まぁ20行もないんですが…（笑）https://github.com/s-shin/jquery.processing.js バージョンアップしました（v1.1.0） あまりに味気なかったので、簡単なシーン管理機能を追加しま…

今更ながら、WebRTCというHTML5の新規格を先日知りまして、思わず作ってしまいました。 見切り発車気味ですが公開します。 Photo Booth on the Web PhotoBoothはMacやiOSにデフォルトで入っているアプリで、カメラからの映像にリアルタイムでエフェクトを掛…