JavaScript

isomorphic所感

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

ES6 Promiseのメモ

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

FontAwesome4.x with reveal.js

公式のトラブルシューティングに書いてありましたが無駄にハマったのでメモ。 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 */ …

グローバルのtoString

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

Easing関数についてのメモ

// 一般的なスタイル 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:…

CoffeeScriptで/*@cc_on@*/

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

three.jsでglFrustum

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

THREE.TextureのneedsUpdate

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

three.jsにおける2D描画方法

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

swap色々

ちょっとした小ネタです。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で属性をエスケープしない方法

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

HTML5のDrag & Dropの罠

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

RailsでJavaScriptライブラリの配置に迷う

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

ArrayBufferとBlobについてのメモ

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

Node.jsのmoduleとexports、そしてCoffeeScript

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

CoffeeScriptにおけるarguments.callee的な再帰の考察

題材として、以下のフィボナッチ数の計算関数を利用します。効率が悪いのはご愛嬌。 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のモジュールシステムとオブジェクトの参照

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

jQueryとKnockout.jsによるタブUIの実装テスト

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

_.bindAllについてのメモ

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

Sequelizeが怖くて使えない

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

CoffeeScriptで継承出来るようなJavaScriptのクラスの書き方

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

JavaScriptの継承関数を考える

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

jquery.processing.jsを作りました

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

Photo Booth on the Web

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