JavaScript

node-webkitでデフォルトに設定しているブラウザでURLのウィンドウを開く術

こんにちは。柿ピーを食べました、きたけーす。 node-webkitでアプリをつくるときに単純にaタグをクリックさせると、node-webkitのアプリでそのURLを開いてしまうので、一工夫必要になります。 次のように書くと、デフォルトに設定されているブラウザでURLの…

bowerで入れるパッケージのバージョンが競合して依存解決できないとき

こんにちは。常夜鍋をたべました。きたけーです。 bowerで入れるパッケージのバージョンが競合して依存解決できないときに、please choose oneのようなメッセージが表示されて、どうやって解決するのか尋ねられます。 開発に携わっている各人が適当に解決方…

CreditCard.js のUIとJSの実装の説明がよかった

こんにちは。最後のそうめんをたべました。きたけーです。 creditcardjs というクレジットカードの入力フォームを提供してくれるJavaScriptライブラリがあるのですが、ライブラリのサイトに、 「カードの種類の識別をこういうふうにJavaScriptを書いたらいい…

JSON.stringifyで生成するJSONを読みやすくする

こんにちは。ピザを食べてビールを飲んで、ふらふらしています。きたけーです。 JSON.stringifyって、第二引数と第三引数を渡せるんですね... JSON.stringify(obj, null, 2); で、空白2つでインデントしてくれるので読みやすくなります。

esmorphでJSの関数の処理開始と終了時に処理を挟む

こんにちは。天下一品をたべました、きたけーです。 esmorphというライブラリをつかうと、既存のJSのコードの関数の処理の開始時と終了時をハンドリングして、自分のしたい処理を挟むことができます。こんなかんじです。 ここでは、関数の名前と定義開始・終…

JSのASTを扱うライブラリをつかって、不要なeval呼び出しを除くコードを書いてみた

こんばんは。寿司とサンドイッチとケーキをたべました、きたけーです。 今日は 東京Node学園祭2014 に参加しました。 個人的にt-wadaさんのセッションが面白くて( power-assert, mechanism and philosophy )、自分が思っていたよりもJSでASTを扱うことがカジ…

DOM要素のsubmitメソッドを呼んでも、onsubmitハンドラはトリガーされない

こんにちは。そうめん大好き、きたけーです。 DOM要素のsubmitメソッドを実行しても、onsubmitハンドラは呼ばれないんですね (一時間くらい潰しました...) コードで書くと、 document.forms["myform"].submit(); とかやっても、

画像データをブラウザのJavaScriptでbase64エンコードする術

こんにちは。おなかが空きました、きたけーです。 ブラウザのJavaScriptで画像データをbase64エンコードする方法を調べてみました。(すんません、コードはCoffeeScriptです) Canvas Canvasを使う方法。こんなかんじ window.onload = -> source = $('#source'…

CoffeeScript で @ をクラス名とかメソッド名の頭につけたときの話

こんにちは。ジンギスカンキャラメルをたべました、きたけーです。 この前、読んでいたCoffeeScriptのコードで @ がクラス名とかメソッド名の頭についてて、普段あまり見かけないのでびっくりしてしまった。以下みたいなかんじ。 class @Foo @bar: -> consol…

Vue.jsのビューモデルのテストを書いてみた

こんにちは。明日はウルトラ花金です、きたけーです。 この前かいたVue.jsのコード(Vue.jsでページネーションを実装してみる - きたけーTechブログ, Vue.js で 複数のViewModelを連携させる - きたけーTechブログ)のテストをMocha+Chaiで書いてみた。 (微妙…

JavaScriptのエラーを検知したり、スタックトレースをいいかんじに表示する術

こんにちは。タブの開きすぎで、タブが増やせなくなりました、きたけーです。 JavaScriptのエラー検知 アプリケーション全体のエラーを検知するには、windowオブジェクトにonerrorハンドラを設定します。こんなかんじ。 window.onerror = function (message,…

気が触れて Chromium を ビルドするの巻

こんにちは。ガムを噛んでます。きたけーです。 今日の朝、夏の暑さと月初の忙しさで頭がやられて、突然Chromiumをビルドし始めました。 Chromium is なに Chrome の基になっているブラウザ。Chrome は Chromium にいくつか機能が足されたものです。 ビルド…

herokuでNodeアプリを公開するとき、ログまわりをどうしようか考えたときのメモ

こんにちは。ハウスダストで喉がやられたきたけーです。 herokuでNodeアプリを公開するとき、ログまわりをどうしようかあれこれ考えたときのメモです。 papertrail addon ログを管理するためにpapertrail addonを使います。 papertrailはログのアーカイブをS…

「はらへった」と検索したらピザ屋のメニューページを開くネタ拡張つくった

こんにちは.最近,Chromeのネタ拡張作りが趣味のきたけーです. 今日は天気もよくてお腹も減ったので,Googleで「はらへった」と検索したらピザ屋のメニューページを開くネタ拡張を作りました. harahe_pizza やってること やってることは簡単で 履歴の追加…

ChromeExtensionでブックマーク一覧を走査する

最近,ChromeExtensionの開発に手を出し始めたきたけーです. 素振りがてらブックマーク一覧の走査してみました.console.logするためにpopupに記述しましたが,ブックマーク情報の取得はbackgroundなどでも可能です. chrome.bookmarks.getTree(function (t…

JavaScriptの数値データからみるオブジェクトとプリミティブ

JavaScriptのデータは大きく分けてオブジェクトとプリミティブに分けられます. 厳密な定義はここを参考にしてもらいたいのですが,ややこしいのがプリミティブでもオブジェクトのように振る舞うケースがあることです.数値を例にみてみましょう. var a = 3…

JavaScriptで同じ文字がn個並んだ文字列を作る方法

こんにちは. プログラムでメッセージを出力するときに「###########...」とか書くときがありますよね. ありますよね! でも, ハードコーディングして print('###############################'); とか書くのって, 不恰好... こうしたらいいんじゃないかな! var …

on{X}で学校に「来た」「帰った」を勝手にツイートするレシピつくった

こんにちは! 先日, 紹介したon{X}ですが独自拡張が出始めてます. 熱い! ツイートする拡張 Tweet on{X} http://tweetonx.com/ Audio, Radio 痒いところに手が届く Set On{X} http://setonx.com/ どちらともアプリを入れたり, 認証が必要だったりしますが, そ…

jQueryでtapを定義してみた

こんにちは. jQueryといえば...メソッドチェーンですよね! いかに繋げて処理を書ききるかという妙な欲求が湧いてくる代物ですが, チェーンの途中でエラーが発生すると後ろの処理は実行されません(いわゆる「列車の脱線」).エラーが発生するとデバッグするのも…

on{X}で, すぐにプログラムを実行したいとき

on{X} はじめてみました. on{X}ってなに? この記事をみてください. ようはJavaScriptでタスクを自動化しちゃうツールですね. MS製なのに, Android上で動き, ログインはFacebookというなんともいえないかんじです. すぐに処理を実行するには そのon{X}ですが,…

JSONのコメント by Douglas Crockford

この記事はJavaScript界の権威Douglas CrockfordのGoogle+での投稿を翻訳したものです. JSONのコメント (Comments in JSON) 私はJSONからコメントを抜きました. なぜなら,(??? I saw people were using them to hold parsing directives, a practice which w…

SchemeのletとJSの即時関数実行パターンって同じだよね

こんにちは. この前, 部屋の掃除中, Schemeの本をみつけて,パラパラ読んでいました. 読んでいて気づいたんですけど, SchemeのletとJSの即時関数実行パターンって同じですよね?JSで (function (a, b) { return a*a + b*b; })(3, 4); とか書くじゃないですか? …

クロージャを使う意味がまったくないコード

すなわち,こんなコード. 隠蔽する理由がまったくない var hoge = (function () { var state = null; // ... return { // ... getState: function () { return state; }, setState: function (state_2) { state = state_2; } }; })(); こうしよう. var hoge =…

jQueryで配列をコピーする

こんにちは. jQueryで配列をコピーする方法をみつけたのでメモ. var old = [1, 2, 3]; var new = $.merge([], target); jQueryのmergeメソッドを使います. 第一引数の配列に第二引数の配列の要素が代入されます.

prototypeの汚染と, その対策

こんにちは. 昨日のエントリのコメントで「for-inで列挙されないようにすべき」とご指摘をいただきました. それについてのまとめ. 問題 以下のようにprototype拡張を行った場合, for-in文で列挙すると拡張をおこなったプロパティも表示される. プログラム Arra…

配列を空にするメソッドをprototype拡張した

こんにちは. 昨日書いたエントリを元にプログラムで配列を空にする処理を記述したんですが // ... ary.length = 0; // ... こんなのが突然書かれてても, 配列を空にしているようにはみえない... prototype拡張しました というわけで, prototype拡張しました.…

配列を空にする方法とそのプロファイリングを取ってみた

こんにちは. 研究でJSの配列を空にする必要があったので,そのメモ. 空にする方法 空にする方法を2つ考えることができた. lengthプロパティに0を代入する し,信じられないことにJSでは配列オブジェクトのlengthプロパティに0を代入すると配列が空になるのだ. …

リテラル, コンストラクタ, それぞれのオブジェクト生成方法のプロファイリングをやってみた

こんにちは. 今日, 研究室の女の子と「new Object()より{}のほうが早いし, new Array()より[]のほうが早いんだよ」みたいなことを喋っていた. たしか何かの本に実際に計測していた結果が載っていて, それを覚えていたのだと思う. 実際, 自分で手を動かして測っ…

new Date().getTime()と同じ結果

new Date().getTime(); と +new Date(); は同じ結果になる.だからどーしたぁ!

JavaScriptのデフォルト引数

最近,読んでるソースによくこんな記述が出てくる. function hoge(args) { args = $.extend({ id: '', actions: [] }, args); // ... } extendメソッドはjQueryのユーティリティ関数のひとつ.その名の通り,オブジェクトを拡張する.オブジェクトの継承とかコピ…