slowjet

is a part of a carburetor

JavaScript

複数人で開発するときに揃えたほうがいいところ: 機能の実装方法を揃える

例えば、ドラッグアンドドロップを実装するとして、一人はjQueryのプラグインを使って実装して、もう一人はHTML5のDrag & Drop APIを使って実装してしまわないように、その時にいる人たちで話して統一する。後から入った人には、その旨が分かるようにメモで…

大量にDOM操作(追加削除変更)をしていて、そのDOMのイベントを監視している場合は確実にイベントの監視を解除する

キの字だけど、最近イベントの監視を解除し忘れていたのが原因で、メモリリークを起こしてブラウザをクラッシュさせるという事案があったので。 View.render = function() { this.$someElem = $('<div class="someView"></div>'); this.$someElem.on('click', function() { ... }); this.…

複数人で開発するときに揃えたほうがいいところ: イベントの命名規則

イベントドリブンな持ち回しだと、よくあるイベント名を使いがち。例えば、クリックされたっていうのから、コントローラーとかへ渡す場合 // view _onClick: function(ev) { this.someController.trigger('click', @); } // controller _eventify: function(…

複数人で開発するときに揃えたほうがいいところ: コメントを出来る限り書く

コメントは出来るだけ、分かりやすく書いたほうがいい コードを読めば分かるけど、あっちへいったりこっちへいったり… コメントが適切に書かれていれば、このメソッドはどこでどう必要になっていて なぜこの引数が必要なのかなど、そういう情報が一目で分か…

複数人で開発するときに揃えたほうがいいところ: どのクラス/コンストラクタ/オブジェクトのメソッドを実行しているのかを明示する

気づいたところをメモしていくところ。今さら…とか恥ずかしがらずに書く。 どのクラス/コンストラクタ/オブジェクトのメソッドを実行しているのかを明示する 例えばSuperPagesと、これを継承するBasicPagesという二つのコレクションがあり、これらはどちらも…

$('<div class="hoge">')はIE8以下ではダメ

ふむ、知らなかった。IE8以下だとうまく要素が作れないので $('<div class="hoge"/>') または $('<div class="hoge"></div>') または $('<div>').addClass('hoge') とする。久しぶりにjQuery関連でハマってちょっとだけうれしい。 classがダメなんじゃなくて、属性関連も全部ダメ。単独じゃない場合は、閉じる</div></div>…

ここにGitHubを便利に使うUserScriptが2つあります

GitHubのIssueナンバーをタイトルに表示する GitHubのIssueページに検索ボックスをとても分かりやすい位置に置く 最初のやつはあれば便利っていう感じだけど、 画像がでかいな・・・ 二つめのやつなんか、ぱっとみどこにあるか分かりますかね。 ヘッダーにある・…

Backbone.jsでsetするときにvalidateが動かないじゃん

だまってvalidateオプションをtrueにするんだ model.set('hoge', 'fuga', { validate: true });

genymotionとADB(Android Debug Bridge)でAndroidのWebページデバッグ

長らくAndroid対応をしてなかったので浦島状態だったのだけど、Genymotioinっていうのを使うと、さくさく動いてデバッグしやすいというのを聞きまして。 結論から言うと、4.x系だけでした。2.3.x系以前のOSはなかったので、つまり実機か、バーチャルテスト端…

Backbone.jsでタッチイベント周りの処理

eventsの遅延評価で、イベント部分を分ける。対象メソッドは共通にしておく。メソッド内で必要になる位置関連のメソッドも用意しておいて、どちらであっても問題なく取得できるようにしておく。 タッチイベント周りと書いたけど、下記のコードはタッチで何ら…

CoffeeScriptではNamed functionが使えない

ふーむなるほどー使えないんですなー 検索したら出てきた笑ったやつ↓ Named function in CoffeeScript - Gists - GitHub こういうのどう書くんだろうと思ったら (function foo() { bar(); setTimeout(foo, 100); }()); CoffeeScriptだと、こうするようだ (fo…

jQueryのajaxError

気がつけば2ヶ月以上ブログを書いていなかった・・・ マメ男にはなれなさそうです ずっとバカの一つ覚えみたいに $('body').ajaxError(function() { foo(); }); としてましたけど、ajaxErrorが1.8系からdocumentにしか使えなくなっていた $(document).ajaxError…

コールスタックを辿って、関数が呼ばれた元の位置を知る

プロジェクトが長くなってくると、前に書いたはずのコードも忘れがちだよね… あれ、なんでこれ2回も呼ばれてるの、記憶にないんだけど(いやいや前に書いてる Chrome なら Error オブジェクトの stack で辿れる function hoge() { var err = new Error(); er…

BLOB とは何か

a[download] と Blob で任意のファイルを作ってダウンロードさせる で唐突に出てきた BLOB という物が何かという説明をちょっと。 32KB以上の大きなデータを扱う場合は、 Large Object(LOB) Data Types を利用する。 BLOB はこれのひとつで、Binary Large OB…

Backbone の collection 全てを destroy する

前書いたと思ってたけど書いてなかった。 destroy で DELETE も同時に行う。 collection.each(function(model) { model.destroy(); }); これだと、destroy 実行で collection から model が削除されて length が変わってしまうので、ダメ _.each(collection.…

a[download] と Blob で任意のファイルを作ってダウンロードさせる

これを JSON ファイルとして保存したい { hoge: 1, fuga: 2, piyo: 3 } インターフェース <a href="#" class="download disabled">ダウンロード</a> 1. Blob(*) を使ってバイナリデータを作る var a = document.querySelector('.download'); var obj = { hoge: 1, fuga: 2 , piyo: 3 }; var blob = new …

$.when には Deferred の配列を渡せない

どうも JS Deferred の癖が残っているようでいつもやってる気がする function hoge() { var dfrs = []; _.each(arr, function(obj) { var $dfr = $.Deferred(); dfrs.push($dfr); // 完了したら $dfr.resolve(); }); return $.when(dfrs); } これだとだめ。…

preventDefault()の位置に悩む

どこに書いても気持ち悪いなんとかしてください 気持ち的にはこれなんだけど $('a').click(function(e) { e.preventDefault(); var self = this; // hogehoge }); ちきしょう、varを先頭にまとめたいぜ・・・ かといって $('a').click(function(e) { var sel…

$.extend()とディープコピーを理解しよう

軽めのjQuery Advent Calendar 2012 16日目 Backbone.jsでattributesにオブジェクトを入れてハマった、っていうエントリーを書こうとしたら、ハマった僕を助けてくれたほかちゃんが先にBackbone.js Advent Calendarでエントリーを書きやがった書いてくれちゃ…

XHR2でデータをFormDataで送るときの構造の入れ子

なんしか受け取り側が { parent: { child1: 'value', child2: 'value' } } みたいになってるとき var formData = new FormData(); formData.append('parent[child1]', 'hogehoge'); formData.append('parent[child2]', 'fugafuga'); とすればOK 関連: http:…

エラーがあった場所を知りたい .stack

どんだけ更新してないのか・・・ //hogeoge .next(function(res) { // hogehogehogehoge }) .error(function(res) { console.log(res); }); resは正しいのでerrorになる。どこでエラーが出てるか分からない。 .error(function(res) { console.log(res.stack)…

iOS4.3以下だとEvent delegationでA要素を探せない

こんなコードがあって、アンカー部分をタップしてもiOS4.3以下ではA要素を捕捉できない。 document.addEventListener('click', function(ev) { var target = ev.target; // iOS5以上、Android2.2以上では大丈夫(2.1以下未確認 if ( target.nodeName === 'A'…

Backbone.jsのRouter

Backboneについて何か書こう書こうと思ってたけど、長くなってしまいがちで、長い文章は苦手なので下書きがたまるいっぽうだったんだけど、簡単なやつから書いていきましょうかなみたいな Routerを使うと、hashchangeを監視してroutesに記述したルールに沿っ…

JSでViewを管理するテンプレートエンジンはどれがいいんじゃ

最近はUnderscore.jsのテンプレート使ってるんだけど結局どれが使いやすさとかでいいんじゃろっていう。いくつか見たやつ挙げてみたけど、まだまだあるで jQuery Templates Underscore.js templates Mustache ICanHaz (including Mustache EJS Tempo Closure…

Google+の+1ボタンを任意のタイミングでレンダリングする

AjaxとかJSテンプレート使ってるときのやり方 https://developers.google.com/+/plugins/+1button/#example-explicit-load parsetags付きで読み込んでおく <script src="https://apis.google.com/js/plusone.js"> {"parsetags": "explicit"} </script> +1ボタンを置きたいところにソースを貼る <g:plusone></g:plusone> 任意のタイミングで実行する…

html(:root)にclassをふる

やったことなかった var doc_elm = document.documentElement; // document.html じゃないよ doc_elm.setAttribute('class', 'hoge');

CoffeeScriptで即時実行関数

Private variables - The Little Book on CoffeeScript - Common CoffeeScript idioms doキーワードで即時実行関数 do -> // here is private 引数渡すときは do (n) -> // hogehoge にすると (function(n) { // hogehoge })(n); になる

繰り返し処理を登録するClassみたいなの

funcで登録した関数をinterval毎に実行し続ける感じ ひとつの関数を登録するときはこう repeat = Repeat( interval: 100, func: -> console.log 'hoge' ) # 実行 repeat.run() # 止める repeat.stop() いくつも登録したいときはこう repeat = Repeat( interv…

FacebookのJS SDKをinitするようなやつ

これやっとけばOK。 function fb_init(app_id, abs_path, callback) { var body = document.body, fb_root = document.createElement('div'); fb_root.setAttribute('id', 'fb-root'); body.appendChild(fb_root); window.fbAsyncInit = function() { FB.ini…

iOSでDOMに直書きしたstyle属性を空にしたいときは setAttribute('style' ,'')

Chromeだと removeAttribute('style') とか style = '' でも大丈夫だったけど、iOSは setAttribute('style', '') ってしないとだめだった、詳しいことはまた今度

Facebook の Graph API (JS SDK) から取得する自分の名前を日本語にする

FB.api('/me')を叩いて取れるデータで名前があるのだけど(name, first_name, last_name)、デフォルト表記になっていて、デフォルトを英語で入れているユーザーのデータは常に英語になってしまう。せめて名前だけでも日本語にしたい。。 どうやらこういうこ…

iOSでsoundManagerを使うときの注意

soundManagerを使って音楽ファイルをロードしておいて、あとで再生したいときは load メソッドを使って曲をロードするが、load メソッドはクリックイベント内で実行する。 ※ autoLoad は iOS で disabled なので利用できないため、load メソッドが必要。以下…

Facebook API (JS SDK) からユーザーの情報を取得したいときのメモ

以下はすべてFacebook DeveloperのサイトからAppの登録を済ませて、App IDを取得した前提ですすめてます。 Home - Facebook Developers データ取得はだいたいFB.apiで取れる。FB.apiとか使う場合は、先にFB.init()実行して、そのあとFB.login()でAuthする必…

expressコマンドからjqtplを指定してアプリテンプレをつくる

こっちでやるほうがいいぽい? $ npm install express -g でグローバルにexpressをインストールしておく。 $ express -t jqtpl nodesample jqtplを両略するとjadeになる。nodesampleの部分はディレクトリ名になる省略するとカレントディレクトリ。これで $ c…

テンプレートエンジンにjqtplを使ってみる

出来たけど色々理解できてない。あと本家のjQuery Templatesは開発が終わってJsRenderになるらしい。でもjqtplは使いやすいし、フロントと書き方も同じにできるからとりあえずjqtplでいいかな的な。 jqtplの使い方の基礎 app.js ではapp.set('view engine', …

CSSやJSファイルを読み込めるようにする

CSSは /css/* に、JSは /js/* に置いていく前提で。 リクエストがあったときに該当するファイルが存在してれば fs.readFileでファイルを返すようにする。 返すときはres.writeHead(200, {'Content-Type': contentType});でContent-Typeをheadに含めて返す。 …

.get()したときのresの中身

express使ってる、指定ファイルは /css/styles.css にしてて、.get('/css/*file', function(req, res){}); { output: , outputEncodings: , writable: true, _last: false, chunkedEncoding: false, shouldKeepAlive: true, useChunkedEncodingByDefault: tr…

.get()したときのreqの中身

express使ってる、指定ファイルは /css/styles.css にしてて、.get('/css/*file', function(req, res){}); { socket: { bufferSize: 0, fd: 8, type: 'tcp4', allowHalfOpen: true, _readWatcher: { socket: [Circular], callback: [Function: onReadable] }…

sakuraのVPSにnode.jsをインストールしてHello worldする

超簡単だった。ちなみにUbuntuサーバーでgitはインストールした前提。 まずはnvmを使ってnode.jsをインストールする nvmのactivate $ git clone git://github.com/creationix/nvm.git ~/.nvm$ . ~/.nvm/nvm.sh node.jsのインストール とりあえず最新のv0.6.0…

getComputedStyleから値を抜き出せるタイミング

よくよく考えたら普通なんやけども、DOMツリーに追加していない時点ではComputedされないので、以下だと値が取れない var cps = getComputedStyle(elm); alert(cps["width"]); // 空 b.append(elm); DOMツリーに追加した時点でCSSの値が計算されて抜き出せる…

Mobile SafariのclientHeight(UI Viewの高さ)

document.documentElement.clientHeight だと表示したときのUI Viewの値で固定されるぽくて、スクロールするたびに更新とかしたいときは window.innerHeight で取れるぽい。ただし(UI Viewの高さ - 2)な様子。ってこんなん常識ですか、ですよね。それにし…

element.addEventListenerのメモリ消費

注意すべきなのは、この無名関数はそれを内包する環境にある<em>全ての</em>変数にアクセスすることができ、それらの変数が使用するメモリは、その無名関数が使われる可能性がある限りは (つまりイベントリスナが登録されている限りは) JavaScript エンジンによって解…

$("html").attr("clientHeight")と同じ値がほしい

document.documentElement.clientHeight で取れた

Element.prototype.hogeにメソッドをはやす

prototypeの勉強もかねてclassList APIをiOSで使えるようにやろうと思ったけどさっぱりだった・・・ はまったのは、Element.prototype.hoge.fugaみたいにprototypeで持ってるメソッドにさらにメソッドがはえる感じのやつで、 hugaでElementが取れなくてそこ…