JavaScript

Webサービスの自動テストをどう行うか?

RailsやNode.jsを利用したWebサービスの自動テストをどのように行うかの現状の調査分まとめ。 随時更新。 Webサービスのテスト対象 [クライアントアプリ] Android/iPadなどのWebサービスを利用するアプリ。クライアントアプリがブラウザの場合はアプリ自体は…

iPhoneのブラウザ上で30FPS以上でヌルヌル動く3Dゲームを作ってみた

iPhoneでのCSS 3D Transforms利用の可能性を探るために、CSS 3D Transformsを使って3Dゲームを作ってみました。 javascriptによる3DゲームですがiPhoneのブラウザで結構スムーズに動きます。 デモページ http://ndruger.lolipop.jp/hatena/20110705/css_3d_g…

iPhoneでヌルヌルキャラクターが動くゲームを作る方法

iPhoneのキャラクターがヌルヌル動いて、それらのキャラクターにタップ・フリックでいろいろ出来るアクションゲームの作成方法 canvasを使ったり、left, topをいじるとキャラクターのスムーズでないため、css animations + css transformsのtranslate()でキ…

iPhoneのブラウザでのアニメーション手法を比較

基本 拡大・縮小を避ける 下記の指定 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"> iPhone4の解像度はiPhone3Gより縦・横に倍大きいが、width=device-widthを指定してもiPhone3Gと同じ320pxが返り、表示時に2倍に拡大されて描画される。style指定で見かけ上の拡大を避けれなくはないが、今回はしない。 </meta>…

javascriptを使わず、html + cssだけでクリックシューティングゲームを作ってみた

CSSで描かれたぐぬぬ画像などを見てたら、ふとhtml + CSSだけでアクションゲームが作れないかと思ったので作ってみました。 ページ移動すればいくらでも可能ですが、それだとつまらないので、1ページ内で作るという縛りもつけてます。 デモページ http://ndr…

Documentに繋がってないDOMツリーから要素を探す場合querySelector()を使う

正確にはDocumentのroot elementが属するツリーのサブツリーでないDOMツリーから要素を探す場合。下記のようなケース。 htmlの塊をテンプレートとして使いたいので、Documentに繋がってない要素にinnerHTMLでhtmlの塊を挿入する そのhtmlの塊の中に、属性の…

javascriptのInt32Arrayのパフォーマンス: 書き込みはArrayより5〜8倍速いが、読み込みは変わらない?

WebGL系の情報を読んでるとInt32Array( https://developer.mozilla.org/en/JavaScript_typed_arrays/Uint32Array )という固定値配列を見つけて、滅茶苦茶速そうなので計測してみた。 Firefox4.0b8、Chrome10.0.612.3 devで動くことを確認。safari/opera/ieは…

最も単純なsetInterval()の指定回数実行

(function(){ var timer_id; var i = 0; timer_id = setInterval((function(){ console.log(i); i++; if (i == 10) { clearInterval(timer_id); } }), 1000); })(); 結論としては、ライブラリの物を使うのがいい。

javascriptを利用したWebサービス開発環境の一例

http://js-mind.appspot.com/を作成している環境。 ライブラリ JQuery とにかく簡単にコードが書ける。 jquery.json, jquery uiを利用。 エディタ Eclipse + Aptana Studio Plugin + zen-coding 入力候補の表示、文法チェック、アウトライン表示に慣れると、…

jqueryのdialogは、なかなか死なない

下記のダイアログを閉じると、bodyにdivが追加されて残ってしまうが、まあこれはいい。 var dialog = $("<div/>").dialog(); 問題は、下記の場合にダイアログを閉じると、bodyにdivが追加されて残ってしまう。(closeでdestroyをしていることが原因ではなく、外部か</div/>…

javascriptでのモーダルダイアログのあるべき挙動

以前、jqueryのdialogが求めているもとと違っていたことを書いた。 http://d.hatena.ne.jp/ndruger/20090512/1242167146ほしいのは下記。 要件 1. ユーザーのブラウザに対する操作(ショートカットキーでのタブの切り替えなど)は、制限してはならない prevent…

javascriptには参照をとる機能がない

perlにあるような奴 $a = "neko"; $b = \$a; # reference of $a $c = \$b; # reference of $b print ${${$c}}; # nekoまあ参照の参照なんて使いたいのは微妙なケース・・・でもないか、特定の4つほどのメンバ変数に対する処理関数が似通っている場合に、テン…

jQuery objectに包含関係の比較関数がないのはなぜ?

和集合: add 例) console.log($("div").add($("textarea"))); # $("textarea, div")と同義 差集合: not 例) console.log($("textarea, div").not($("textarea"))); # $("div")と同義 包含関係: なし こんなのがほしい) console.log($("textarea, div").canta…

要素に情報を覚えさせるときに、jQueryのdataを使うべきか?Node::setUserData()を使うべきか?

参考 Core/data - jQuery JavaScript Library http://docs.jquery.com/Core/data#namevalueNode#setUserData、Node#getUserDataの使い方(jQuery.dataみたいなもの) - 素人がプログラミングを勉強するブログ http://d.hatena.ne.jp/javascripter/20080903/122…

JavaScriptのbuilt-inメソッドのpreventDefaultを上書きする方法

複数のライブラリを利用してるときに、誰かがpreventDefault()をしているようで、mousedownのデフォルトアクションが実行されない。 preventDefault()を上書きをしてブレークポイントを貼って、スタックトレースでそいつを突き止めたい。 方法1: 単純にproto…

ui.dialog.jsのmodal dialogでブラウザのショートカットキーが効かなくなる問題

modal dialogのopen時にfocusがdialogに移る -> キーイベントがdialogで発火する -> ui.dialog.overlayのハンドラでfalseが返りpreventDefault()&&stopPropagation()される後ろにある要素のイベントをフィルタするmodal dialogの役割を考えるとしかたないか…

QUnitメモ

test()に渡した関数オブジェクトはすぐに実行されるわけではない windowのonloadが実行されてない場合、それまで遅延される。下記ファイルのsynchronize()関数がqueueするし、config.blockingはonload時にtrue->falseになる http://jqueryjs.googlecode.com/…

JSMindを修正

http://ndruger.lolipop.jp/wiki/index.php?JSMindTest JSLintのエラー修正 jsファイルを1つにする undo/redoの追加 consoleが内場合使わないようにする

"JavaScript: The Good Parts" 読了

amazon:The Good PartsJavaScript版のコーディング作法っぽいかんじ。 バグを少なくする書き方に関して書いているので、合わせて、パフォーマンスを考えた書き方も読むといいかも。 EfficientJavaScript - Dev.Opera - 効率的な JavaScript http://www.hyuki…

Eclipseのファイル囲い込みのうざい挙動の回避法

EclipseはVisualStudioと違って、プロジェクトにファイルを追加するときは、"新規に追加"と"Import"しかないっぽい。 つまり、既存のソースファイルをコピーせずに、そのファイルをEclipseの管理に追加できない。 ソースファイルは、馬鹿みたいにEclipseのプ…

JavaScriptが使えるIDEを比較してみた

これまでJavaScriptのソースエディタにはSourceInsightを使っていたが、JavaScriptの文法を認識してくれず、インデントがおかしくなったりするので、乗り換えることにした。 JSDT, JSEclipse, Aptana Studio, Spket IDEを試して、下記の3点の特徴で比較して…

JavaScriptで動くMindMapアプリ"JSMind"を開発中

http://ndruger.lolipop.jp/wiki/index.php?JSMindTest なぜか一回reloadしない表示されない。

可変長引数の関数のラップ

function DP(){ console.log.apply(console, arguments); // firebugのコンソールで neko と表示される console.log(arguments); // firebugのコンソールで ["neko"] と表示される } DP("neko"); console出力 neko ["neko"] applyを使わないと、1つ目の仮引…