一つのファイルでサーバーとHTMLファイルとコードを共有するやつ - 素人がプログラミングを勉強していたブログ
ちょっと説明がし難いがindex.htmlというファイルがあったとして、ファイルプロトコル経由で file://path/index.html などのように直接ブラウザで起動すると、プロトコルの関係でファイルが読み込めなかったり、エラーになったりすることがよくある。サーバーをたててlocalhostなどから読み込めばいいのだが、微妙にセットアップが面倒臭い。下記コードをindex.htmlとして保存すると node index.html とするだけでブラウザが立ち上がり、index.html自身をルートとしてそのディレクトリ以下のファイルを配信する簡易サーバーが立ち上がる。具体的には、 http://localhost:port/index.html のような形でアクセスできるようになる。コマンドを実行したディレクトリの絶対パスをもとにポートを自動生成しているので、すでにサーバーが起動済み
Google Chromeに入ったジェネレータとPromiseで非同期処理に革命が起きた - 素人がプログラミングを勉強していたブログ
Google Chrome Canary（正確にはV8）に、ついにGenerators（yield）が入った。これを上手に使うと、エラー処理を含む非同期コードを同期的に書くことができるようになり、見通しが極めて良くなるので、ここで紹介する。 ここで紹介するものはいずれNode.jsでも使用できるようになるので、Webとの互換性を気にする必要のないNode.jsでは近いうちに活用できるようになると思う。 下のコードを動かすためには、最新のGoogle Chrome Canaryで、chrome://flagsからexperimental javascriptを有効にしておく必要がある。 ES6 HarmonyのGenerator構文について functionではなくfunction*というキーワードを使うと、yieldキーワードが使えるようになる。 function* range(begin
GPS2点間距離を使用した住所特定の脆弱性 - 素人がプログラミングを勉強していたブログ
先日、非常に珍しい、GPSつかったチャットの脆弱性を発見したので、ここに注意もかねて書いておく。 簡単に言うと、WebSocketに生で自分でGPS座標を送り、相手との距離差を何度でも取得できる脆弱性で、離れてる、近いくらいしか分からないことを前提にGPS使用を許可してる時に〜町にいる、とわかってしまうという、聞いたことない感じの珍しい脆弱性である。websocketでイベント駆動にしてるとついうっかりステート管理があやふやになりがちである。 さて、下記は脆弱性の存在したchatpad.jpのサポートに送ったメールである。 Subject: GPSを使用した機能に関する脆弱性について 初めまして。いつも楽しくChatPad使わせて頂いております。 件名の通り、GPSに関する脆弱性を発見しました。これは相手の住所が相手の意図に反し 高精度（最大で市町村程度まで）特定できてしまうというもので、
高校生から、アメリカに行ってエンジニアリングを学びたい中学生への手紙 - 素人がプログラミングを勉強していたブログ
アメリカに行ってエンジニアリングを学びたい中学生 - Togetter 404 Blog Not Found:アメリカに行ってエンジニアリングを学ぶ前に用意しておくべきもの １４歳の、アメリカに行ってエンジニアリングを学びたい少年へ を読んで。 自己紹介 僕は18歳で、今年からオーストラリアの大学にコンピュータサイエンスを学びに行きます。16歳の頃に語学留学でオーストラリアに1年半行きそちらでの進学を決め、日本に帰国し渡航の準備中です。 若い世代として、思っている事を書きます。長いですが、なるべく正直に、思っている事を書いたつもりです。 僕はエンジニアではありませんが、ベンチャー企業でフロントエンドのプログラミングに関わっていた事があります。数千行以上あるプログラムを書いていたのはその一度だけです。普段は趣味で適当にプログラムを書いて遊んでいます（iPhoneを振り回して近くのパソコンに写
jQuery.fn.$each - 素人がプログラミングを勉強していたブログ
(function ($) { $.fn.$each = function (callback) { return this.each(function () { return callback.call($(this)); }); }; })(jQuery); こういうのを定義しておくと便利。 $("a").$each(function () { /\.jpg/.test(this.attr("href")) && window.open(this.attr("href")); }); こんな感じで使う。
.sort.call(null)の深淵 - 素人がプログラミングを勉強していたブログ
発端は javascript:alert([].sort.call(null)) これで window オブジェクト取れるのなんで? http://twitter.com/edvakf/status/9222713572 という投稿。 この不可解な挙動を説明することは案外難しい。 まず、ES5のstrict mode以前（つまり、今普通にJavaScriptを使う場合）では、 function fun() { return this; } alert(fun.call(null) === window); がtrueになる。 それから、 var a = [3, 2, 1]; alert(a.sort() === a); alert(a); // [1, 2, 3] sortは破壊的であり、thisを返す。 thisが配列以外の場合については、仕様では未定義であるが、どうなのか。id:nan
static - 素人がプログラミングを勉強していたブログ
これは便利。 var counter = function () { var static = /(^o^)/; return ('i' in static)? ++static.i: static.i = 0; }; console.log(counter()); // 0 console.log(counter()); // 1 console.log(counter()); // 2 console.log(counter()); // 3 正規表現リテラルは毎回解釈されるわけではなく、一度作られると同じオブジェクトが使われるのでstatic変数のような挙動をする。だから、RegExp#lastIndexとかを直接弄る時はよく気をつけないといけない。
JavaScriptでマルチスレッド(navigator.newWorkerPool) - 素人がプログラミングを勉強していたブログ
437152 – implement worker threadsを使ってみる。 var thread = navigator.newWorkerPool(); thread.createWorker(function(){ setTimeout( clearInterval, 1000, setInterval(postMessageToPool, 5, "thread1")); }.toSource() + "()"); thread.createWorker(function(){ setTimeout( clearInterval, 1000, setInterval(postMessageToPool, 5, "thread2")); }.toSource() + "()"); thread.messageListener = function(message){ console
setIntervalの便利版 - 素人がプログラミングを勉強していたブログ
setIntervalは、登録したcallback関数のthisがおかしくなったり、callback関数に値を渡すのが面倒臭かったり(値を渡すにはsetIntervalの第三引数を使えばいいけど、それだと引数が固定されちゃう)、タイマーのidが、setIntervalの戻り値にしか渡されないから、callback関数内でclearIntervalするためには変数に保持しなきゃいけなかったり、少し不便。 var timer = { loop: function(fn, ms, v) { var self = this, id = null; return id = setInterval(function(n) { v = fn.call(self, v, id, n); }, ms); }, one: function(fn, ms, v) { var self = this, id =
pre要素をダブルクリックで選択する - 素人がプログラミングを勉強していたブログ
// ==UserScript== // @name BetterDoubleClick // @namespace http://d.hatena.ne.jp/javascripter/ // @include http* // ==/UserScript== document.addEventListener("dblclick", function({target: elem}){ elem = document.evaluate( "ancestor-or-self::code|ancestor-or-self::pre", elem, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue; if(!elem) return; window.getSelection().selectAllChildren(
static変数 - 素人がプログラミングを勉強していたブログ
猫でもわかるC言語プログラミング、148ページまで読んだ。 #include <stdio.h> int counter(void){ static int i = 0; return i++; } int main(void){ int i; for(i = 0;i < 10;i++) printf("%d\n",counter()); // 0, 1, 2, 3, ..., 9 } static変数便利だ。 JavaScript的だとクロージャ使わなきゃいけないのに。 var counter; (function(){ var i = 0; counter = function(){ return i++; } })(); (function main(){ for(var i = 0;i < 10;i++) console.log(counter()); })();
DocumentFragmentとdisplay:none、documentに直接追加する場合の速度比較 - 素人がプログラミングを勉強していたブログ
追記：コメント欄で指摘されたように、下のコードではイベントリスナは削除されなかった。 DocumentFragmentに一旦ストックすると、登録したイベントリスナは削除される。cloneNode、innerHTMLなども同様。 つまり、下のようなコードを書いて、ドキュメントをクリックしても、"click!"とは表示さない。 document.body.addEventListener("click", function(){ (console.log||alert)("click!"); },false); var df=document.createDocumentFragment(); df.appendChild(document.body); document.documentElement.appendChild(df); 不特定のサイトで動作するGreasemonkeyスクリプ
NodeListやHTMLCollectionに直接アクセスするより、一旦静的な配列にしたほうが速い - 素人がプログラミングを勉強していたブログ
console.time('nodeList'); var elems = document.getElementsByTagName('*'); for(var i=0;i<1000;i++) for(var j=0;j<elems.length;j++) elems[j]; console.timeEnd('nodeList'); console.time('array'); var elems = Array.slice(document.getElementsByTagName('*')); for(var i=0;i<1000;i++) for(var j=0;j<elems.length;j++) elems[j]; console.timeEnd('array'); console.time('length'); var elems = document.getElement
文字列から要素を作りたいときはinnerHTMLではなくcreateContextualFragmentを使う - 素人がプログラミングを勉強していたブログ
追記：ベンチマークをコメントを元に修正 文字列から要素を作りたい場合、 var temp = document.createElement('div'); temp.innerHTML = '<span>foo bar fizz buzz!</span>'; とやることが多い。 だが、不要なdiv要素ができて気持ち悪いし、for文でchildNodesをひとつずつ処理する必要があって、不便。 divの中にhead要素を入れることはできないので、innerHTML=''としても、要素は作られない。 RangeのcreateContxtualFragmentを使うと、こういった問題を避けることができる。 例えば、上のコードをcreateContextualFragmentを使って書き直すと、 var range = document.createRange(); range.createCon
CodeReposのコミッタになりました！ - 素人がプログラミングを勉強していたブログ
とりあえずテストも兼ねて、autopageloader.user.jsをアップロードしました。 URLは /lang/javascript/userscripts/autopageloader.user.js – CodeRepos::Share – Trac 。 よろしくお願いします。
Google検索結果をフィルタリングするFilterinGoogleというGreasemonkeyスクリプトを作りました - 素人がプログラミングを勉強していたブログ
追記:バグの修正をしました。 最新のスクリプトは[FilterinGoogle] - 素人がプログラミングを勉強するブログからチェックしてください。 センスの無い名前ですが、作りました。 wedataの404 Not Foundかスクリプト本体に自由にフィルター規則を追加できます。 FilterinGoogle.user.js // ==UserScript== // @name FilterinGoogle // @namespace http://d.hatena.ne.jp/javascripter/ // @include http://www.google.co.jp/ // ==/UserScript== var ITEM_DELETE=false;//trueだと削除、falseだと半透明 var USER_RULES=[ 'http://swik.net/' ];//文字列
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
