HTML5 File API つかうとローカルファイルをブラウザに Drag したファイルをハンドリングして binary やら data スキームとして扱うことができ、Firefox 3.6 や Chrome 5 ですでに使えるというのを今さらながら知った*1ので、はてなフォトライフにローカルファイルをブラウザにドラッグするだけでアップロードできる UserScript を作ってみまんた。 http://gist.github.com/raw/406281/drag_drop_fotouploader.user.js WinXP + Firefox 3.6.3 で確認してますが OSX や Chrome5 などの環境で動くかは試してないので解りません。動作デモは以下の swf 動画を見てください。 http://rails2u.com/misc/fotolife_drag/ なんかすごい
JSのコメント削除って簡単に書けないかなあ。文字列リテラルとか正規表現リテラルまで考えるとなあ。 http://twitter.com/miya2000/status/11177757376 とつぶやいたところ、有志が実装を投げてくれました。 - まずわたし。最初は「正規表現一発でいけるんじゃない?」とか考えていたのですが早々にあきらめて頭からループすることに。この実装は後に述べる問題があります。 https://gist.github.com/346593/f1880d17e377b07b99944ed6c2a0ceb524d314c2 miya2000 (@miya2000) | Twitter id:Constellation さんはかなり構文解析の領域まで踏み込んでいます。コードを書くのが楽しくってしょうがないという感じでステキです。 http://gist.github.com/
単純な特定文字列の存在確認をするのに indexOf と正規表現でどれくらい差があるのかなと思って、次のようなコードを書きました。 (function(){ var a = [], n = 10000; for (var i = 0; i < n; i++) { a.push('item:' + i); } var str = a.join('\n'); var s = new Date(); for (var i = 0; i < 3000; i++) { //var m = str.indexOf('item:9999'); // (1) indexOf //var m = /item:9999/.exec(str); // (2) 静的な正規表現 //var m = new RegExp('item:9999').exec(str); // (3) 動的生成の正規表現 //var m
以前書いた「ラムダ計算基礎文法最速マスター」(以下「最速マスター」)は, 予想以上に多くの人に興味を持ってもらえたようですが, 同時に難しくてわからなかったという人も多かったようです. 反響から察するに, 構文を見慣れていない(と錯覚してしまう)ことが理解の妨げになっていたように思います. ラムダ計算の構文は, 実際には全く特殊なものではありません. このことがよくわかるように, 「最速マスター」のラムダ計算の簡約の例をすべてJavaScriptの構文で書いてみました. ......という内容になるはずでしたが, 気がついたらラムダ計算のインタプリタをJavaScriptで実装していました! 実際に動かせるものは下記URLにあります. https://tarao.github.io/LambdaJS/#js 動作確認と既知の問題 Firefox 3.6 Google Chrome 4.1
HTML5のhistory.pushState、history.replaceStateを試した。 HTML5 pushState/replaceState demoで動かせる。 Minefieldだと完全に意図した通りに動くがWebKitだとURLまわりがうまくいかない。 メインのソースコードは下記の通り。 canvasで適当に壁紙用画像を作るデモで、画像自体をクリックして何度も作り直せるようにした。 こういう物を作るときは、前の画像に戻れるよう履歴管理をすべきだが、今まではlocation.hashを使ったり(hashchangeイベントが入るまではタイマーが必要だった)iframeを使ったハックだったり(ブラウザ間の互換性やhistory.go(-2)をきちんと動かすのが難しい)、あるいはページを遷移する(必要ない部分まで毎回読み込まれる)必要があった。 pushState/repl
何が危ないのか img.onerror や img.onload は src 属性の内容が評価された段階で実行されるので、外部ソースに対して HTMLDocument を構築する際などで、意図していないタイミングでスクリプトが実行されるケースがある。 具体的には、以下のような場合。 var source = '<img src="not_found.jpg" onerror="alert(1)">'; var range = document.createRange(); range.createContextualFragment(source); // onerror が実行される var img = document.createElement('img'); img.setAttribute('onerror', 'alert(1)'); img.src = 'not_found.
blogめったに書いてない... 2.5年で110件... 前々からJSのScannerを読んだりするのが楽しかったのですが, id:miya2000 さんからの「commentを削除するprogram」という話が出たときに, 結局JSのlexerというものは単体では生成できずParserと密着している(主にRegExpとRegExpとRegExpのせいです)ということがわかり, 自分でも書きたいという考えが浮かんできてC++でずっと書いていました. AST構築までできて, jqueryなどをparse成功 + json形式のtreeにシリアライズする程度になったのですが, せっかくなのでLLVMへのbridgeとか検討しています. LLVMおもしろいー. Constellation/iv · GitHub で, Constellation's gist: 387832 — Gist くら
ブックマークレットをかんたんに作成・公開できるラボサービス、その名も Hatena::Let を作りました。 http://let.hatelabo.jp/ 未だにブックマークレットを作るときには、アドレスバーに javascritp:... を打ち込んで実行したり、 Firebug で実行して試しつつも外部の bookmarklet 化サービスを使って文字列削ったり、IE対策のため500ちょい文字を超えると gist にファイルを置きつつもおきまりの var script = document.createElement('scrit');... で JS のローダー書いたり、とやりたいことは同じなのにめんどくさい手順を毎回行っていたました。 ここらへんの手順を毎回繰り返すことなくさくっと作って公開したい!と思い id:cho45 と半年ぐらい前の開発合宿*1で作って眠らせていたのを、ち
aaencode - Encode any JavaScript program to Japanese style emoticons (^_^)
追記:canvasタグを8倍高速化する方法&FlashCanvasが4倍速くなった - yukobaのブログも合わせてご覧ください。 最近、canvasタグを利用したアプリの高速化に励んでいます。何か良いベンチマークはないかなと思い探していたら、「CanvasのdrawImageのベンチマーク - yukobaのブログ」からリンクを張ってあるベンチマークに行き当たり、最初、「へぇ〜こんなの作った人がいたんだ」とか思って、ドメインをよく見たら1年半前の自分でした orz というわけで、それの2010年バージョン。パワーアップします。 まず、最近、FlashCanvas Pro と uuCanvas.js というcanvasタグをFlash上で使えるようにする、非常に良いライブラリが出ました。古典的には、VML on IEを使ったライブラリが有名なのですが、スピードが遅い上、全てのAPIをサポ
Mozilla Labs » jetpack » Blog Archive » Announcing the Jetpack SDK: First Milestone Release http://mozillalabs.com/jetpack/2010/03/09/announcing-the-jetpack-sdk/ 環境は、MacOS 10.5.8、python2.5(macportsで入れたやつ、もとから入ってるのでもいいと思う) SDKをダウンロードして解凍 % wget https://ftp.mozilla.org/pub/mozilla.org/labs/jetpack/jetpack-sdk-0.1.tar.gz % tar zxvf jetpack-sdk-0.1.tar.gz % cd jetpack-sdk-0.1SDKの環境をロード % source bin/ac
Java変態文法最速マスター - プログラマーの脳みそをリスペクト。 JavaScriptの変態文法・技法一覧です。あんまり使わないけど、知ってるとXSSとか攻撃したいのにWAFに妨害されるなど、いろいろ制約があるという場合に便利。 文字列の生成 引用符を使わずにさくっと文字列を作る。fromCharCode とか使ってもいいけどめんどくさいので、正規表現やE4Xを利用。 alert( /string/.source ); alert( <>string</> ) 空白文字を使わず記述 文脈上、スペースを書きたいけれどいろいろ制約があって書けない場合にはコメントで代替。実行するコードを作り上げてevalしてもいいけど大袈裟なので。 var/**/x=1; */ を含むコードブロックをコメントアウト コードの塊りをコメントアウトしようと思って /* */ で囲むと、コード内に string.
JavaScriptによる自動生成迷路に置いた。 function rand(n) { return Math.floor(Math.random() * n); } const width = 33, height = 33; var wall = (1 << (width - 2)) - 1 << 1; var table = [1 << (width - 2)]; var stripe = 0; var i, j; for (i = 1; i < width; i += 2) { stripe |= 1 << i; } for (i = 1; i < height - 1; i++) { table[i] = i & 1 ? wall : stripe; } table[height - 1] = 2; const top = 0, right = 1, bottom = 2, le
The Game Of Lifeに置いた。FirefoxとOperaではfaviconを動的にセットできるが、Safariでは不可能。 単にhrefを変えれば良いというものではなく、appendChild等でDOMツリー上の位置を現在のfaviconより下?にしなければ認識されない。 <!DOCTYPE html> <html> <head> <title>The Game Of Life</title> <link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAEklEQVQ4jWNgGAWjYBSMAggAAAQQAAF/TXiOAAAAAElFTkSuQmCC"> <style> #canvas { display: none; } </style> <sc
obj.watch("prop", function (id, older, newer) { console.log(id, older, newer, arguments.callee.caller); return newer; });obj.propに値を代入してる関数を調べるテクニックの紹介。 下のスクリプトはFC2Blogではてな記法を使えるようにする(デバッグ前の動かない)スクリプトで、text-hatena.jsについては長いからここに載せるときに削った。 // ==UserScript== // @name FC2 Hatenation // @namespace http://oksoftware.blog52.fc2.com/ // @description Use Hatena syntax in FC2 Blog // @include http://blog*.
(注):以下、一部、推測で書いた部分が間違っていて、詳しくはコメント欄をご覧ください。詳細は、JaegerMonkey - MozillaWikiに書いてありました。 Mozillaのオフィシャルブログの記事、improving JavaScript performance with JägerMonkey – Mozilla Hacks – the Web developer blog、によると、Firefox のJavaScriptのエンジンをAppleのWebKitのJavaScriptのエンジンをベースに作り直すそうです。僕が英語を読み間違えていないことを強く祈ります。名称は、JägerMonkeyと言うそうです。 元々、JavaScriptのJITコンパイラによる高速化は、FirefoxのTraceMonkeyから始まりました。まず、インタープリタで走らせてから、型を推測し、JI
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く