JavaScript

HTML5のJavaScriptでバイナリファイルを扱う

HTML5のFile APIではデスクトップからファイルを取得して、その内容を読むことができます。テキストとしての読み込みはもちろん、生のバイト列も読めるので、バイナリファイルも解析できます。とりあえず手始めに16進ダンプしてみますか。http://nullpon.moe…

jQuery 1.6のpropメソッド

1.6で prop というメソッドが出来たそうだよ。John Resig - jQuery 1.6 and .attr()英語よく分からんが、http://api.jquery.com/prop/ 等も読んでみると、どうやらこういう事らしい。たとえば <input type="checkbox" id="a" checked="checked"> に対して $("#a").attr("checked") という操作が可能だが、この…

日本語のページを除外してGoogle検索するGreaseMonkeyのAjax検索対応版

Googleさん検索ページ変え過ぎです。日本語サイトを除外して検索するリンクを左サイドバーに追加するグリモンをAjaxによる検索に対応しました。https://github.com/paulownia/greasemonkey/blob/master/googleNotInJapanese.user.jsAjax検索するときにロケー…

Drag and DropとFile APIを試す

HTML5のDrag and Drop APIとFile APIを試してみました。Drag And Drop APIは HTML上の要素のドラッグアンドドロップをサポート File APIとの連携でデスクトップからのドラッグアンドドロップをサポート 1番はHTML5でなくてもjQuery等を用いれば実現可能です…

Web FontsをHTML Canvasで使う

といっても特に変わった事をする必要も無く、CSSでWeb Fontsを定義して、Canvasのfontプロパティに定義した名前をセットするだけ。 @font-face{ font-family: MadoMagi; src: url('./MadokaRunes.ttf') format("truetype"); } ctx.textAlign = "center"; ctx…

jQuery 1.5のDeferredって何?

jQuery1.5がいつの間にかリリースされていた。1.5ではAjax関係のコードが書き直され、コールバック関数をsuccessメソッドの引数として指定できるようになったらしい。 $.ajax({ url: "/test.txt", cache: false, dataType:"text" }).success(function(data){…

node.jsでServer-Sent Eventsを試す

HTML5のServer-Sent Eventsの仕様は、HTTP通信を使ってサーバサイドからのデータプッシュを行うCometを、JavaScriptのAPIを定義するなどして使いやすくまとめたものらしい。クライアント側のAPIはSafari5やChrome8では既に実装されているそうなので試してみ…

Function.prototype.bind

ECMAScript 5thでFunctionオブジェクトにbindというメソッドが追加されたそうだ。これは引数やスコープを束縛できるものらしい。引数を束縛して部分適用したり、クロージャに取り込まれた値を変えることが可能になる。最新版のChromeでは実装されている。Fir…

Array.prototype.sort

>>> [5,10,2,4,30].sort(); [10, 2, 30, 4, 5] えー、なにそれー compareFunction (比較関数) が与えられなかった場合、要素はそれぞれの文字列に変換したものを比較して辞書 (あるいは電話帳。数的でない) 順にソートされます。例えば、"80" は辞書順では "…

JettyとiPhoneでWebSocketを試す

iOS 4.2のSafariがWebSocketに対応したらしい。以前JettyとGoogle ChromeでWebSocketを試すために書いたプログラムを使って、iPhoneのWebSocketを試したみた。WebSocketのプロトコルに変更があったようで、以前のプログラムではiPhoneはおろか最新のGoogle C…

HTML Canvasを使って画像にエフェクトを加えるjQueryプラグイン

以前に作って遊んでいたHTML Canvasの画像処理をjQueryプラグインにまとめてみました。実用性は皆無ですよ。https://nullpon.moe/dev/sample/jquery/canvasFilter/test/使い方床面反射処理を加える $("img").canvasFilter(function(f){ f.reflect(); }) モノ…

JavaScriptのベストプラクティス?

http://togetter.com/li/59441ベストプラクティスというよりもバッドノウハウみたいの(==よりも===使えとか)含まれているけど…いくつか抜粋 default and guard operator:var foo = o || {};//init with empty obj if o is falsyvar bar = o && o.bar;//if …

HTML Canvasでほかし処理してみる

IE に Canvas きたー! URL2010-06-24 11:47:57 via webな、なんだってー(AA略「Internet Explorer 9 Preview 3」公開 Canvas要素、ハードウェアアクセラレーションに対応:CodeZineIE! IE! IE! マイクロソフト、本気です。IE9のcanvas要素の実装により、今…

はてなのサービス間を移動するグリモン

△のリンク、ダイアリーとブックマーク間を移動するのに便利だったので使ってたんだけど… ダイアリーに限らず、はてなサービス内で気になるユーザーを見つけたとき、そのユーザーが他のはてなサービスを使ってないかどうかを調べるのに地味に便利だったんです…

クロスドメイン画像はピクセル操作できない

HTML Canvasでクロスドメイン画像のピクセルを加工することはできない。クロスドメインの画像をdrawImageすることはできる。しかし、クロスドメイン画像をdrawImageしたcanvasからgetImageDataしようとするとエラーになる。 $("<img>").attr("src", "http://www.h…

jQueryでcanvasを扱うときは画像読み込みのタイミングに注意

jQueryの $(function(){ ... }) は、ページの load イベントではなく、DOMContentLoaded というイベントをトリガにして実行されます(Firefoxの場合)。このイベントはHTMLファイルがロードされDOMツリー構築が終了したときに実行されます。画像などの重いコ…

HTML Canvasでアンシャープマスク

最近、HTML5のCanvasの世界ではC言語で鳴らしたガチの画像処理の達人がコード書いてるらしく、恐ろしい最適化がされていてハッキリ言って付いていけませんwま、そんなガチムチマッチョな画像処理ウィザード野郎共はほっといて、HTML5のCanvasで画像処理して…

日本語のページを除外してGoogle検索するGreaseMonkeyの修正版

日本語のページを除外してGoogle検索するGreaseMonkeyスクリプトをGoogleの左サイドバーに対応させました。左サイドバーの「日本語のページを検索」の下に「日本語以外を検索」のリンクを追加します。https://github.com/paulownia/greasemonkey/blob/master…

JettyとGoogle ChromeでWebSocketを試す

JavaのサーブレットコンテナであるJetty 7には WebSocketServlet があり、HTML5 WebSocket アプリケーションのサーバサイドを簡単に実装できるようだ。試しにチャットの原型のようなプログラムを書いてみた。gitで公開しているのでcloneして試してみて。 git…

JavaScriptでSVGを書くライブラリ

なんだ、既にあるじゃないか…Raphaël―JavaScript Libraryラファエルと読むのかな?SVG対応ブラウザではSVGで、IEではVMLで書くらしい。jQuery SVG DemojQueryのSVG拡張もありますね…。

JavaScriptでSVGを書く

IE9はSVGをネイティブ実装するそうだ。SVGが主要なブラウザの標準機能になればWebアプリでもデータをグラフ化してビジュアル的に表示する、なんて要件も普通に求められるようになるだろうな。というわけで今のうちにちょっと触れておこう。SVGはXML形式のベ…

Twitter API JSONレスポンス確認ツール

Twitter APIのJSONレスポンスが見難いので、自動的に整形して確認できるようにと思って作ってみました。Firefox3.6で動作確認しています。https://nullpon.moe/dev/tool/twitter_api_test/index.htmlちょっと書き換えれば他のJSONP API用の確認ツールとして…

ソースをタブで開く

需要あるよ!開いているページのソースをタブに開く方法 - hogehogeview-source: というのを使うらしい。そういえば「新規タブで開く」オプションをオンにしてるならwindow.openでもタブに開くはず。 javascript:(function(){open("view-source:"+location.h…

オブジェクトとプリミティブ・追記

いいネタがあったので追記JavaScript奇妙なふるまいまとめサイト | エンタープライズ | マイコミジャーナルStringのオブジェクトとプリミティブの違いを理解していれば、 "string" instanceof String これがfalseとなる理由は自明です。オブジェクトではない…

オブジェクトとプリミティブ

前にJavaScriptのオブジェクトとプリミティブの話が出ていたので、もう1つ面白い話を。JavaScriptはオブジェクト毎にメソッドを設定したり上書きできるので…、 var obj = {}; alert(obj.toString()); // "[object Object]" と表示される obj.toString = func…

10.toString() と書けない理由

演算の高速化のために、Number型やString型などはプリミティブ値として保持されてる。だから、たとえば「10.times()」じゃなくて「(10).times()」ってやらないとダメ。Rubyとは違います。これは 以前に気になって調べた事があるのですが、オブジェクト・プリ…

今更カリー化

自分のメモ用のWikiに書いてあるJavaScriptのカリー化の説明が単なる部分適用だったり間違いが多いのに気付いたので書き直していたのだけど、その時、ふと汎用的なカリー化処理を実装できないかな?と思って色々試してみたのだが、なかなか上手くいかないの…

Geolocation API

次世代ブラウザアプリケーションの仕様で、位置情報を取得できるGeolocation APIというのがあるらしい。 javascript:(function(){navigator.geolocation.getCurrentPosition(function(p){ location.href="http://www.google.co.jp/maps?q=" + p.coords.latit…

Web Workersで気付いた事

Web Workersで遊んでみて、ちょっと嫌な感じの2つの点に気付いた。 複数ワーカを起動すると重い Windowsではそうでもないのだけど、Macは複数のワーカを立ち上げるとかなり重くなる。Windowsでは1スレッドを1コアで処理しているらしく、ワーカが1つだと1コ…

Web Workersで遊んでみた

HTML5を含む次世代Web規格の一環として、ページ描画・処理のバックグラウンドで処理を実行できるWeb Workersという仕様が策定されています。 Web Workers Using web workers - MDC 既にFirefox 3.5やSafari 4等では一部の機能が実装されているそうなので試し…