IE で a 要素を使って相対 URL からスキームを得る: Days on the Moon
この「いくつかのブラウザ」とは IE のことを指していると思われますが、href プロパティに絶対 URL を設定しなおすことで、URL のスキーム部分を取得できるようになります。 // http://www.example.org/ 上で実行しているものとする。 var elm = document.createElement('a'); elm.href = '/foo?bar#baz'; // IE 6 / 7 で絶対 URL を設定。 // elm.href = elm.cloneNode(false).href でもよい。 elm.href = elm.getAttribute('href', 4); // IE (少なくとも 8 ～ 11) で絶対 URL を設定。 elm.href += ''; elm.protocol // => "http:" elm.hostname
IE 6/7 で文書間通信を実現するための一案: Days on the Moon
HTML5-WEST.jp 飲み会 UST というのがあるそうで、「参戦希望者募集」とお誘いを受けたのですが、「参戦」というからには何かしら戦の準備を整えねばなるまいと、以前から考えていたことを夜なべして実装しました。 文書間通信をより広範囲な環境で動作させるための考察 IE 6/7 を含む各種ブラウザで動作する、異なるドメイン間での通信のデモ いわゆる HTML5 の文書間通信、window.postMessage() を IE 6/7 でどう再現するかという話で、about:blank を指す隠しフレームを二つ用い、window.name を介することで双方向の通信を実現しています。 どうも IE での about:blank は、その空白ページを読み込ませた文書の生成元を継承するらしく、たとえば http://example.org/ から location.href = 'abou
勝手に添削: Selection内のHTML Textをいい感じに取得する: Days on the Moon
というわけでやってまいりましたこのコーナー! 本日のお題は「Selection内のHTML Textをいい感じに取得する - 枕を欹てて聴く」でございます。選択範囲のHTMLソースを抜き出すというやつですね。では早速いってみましょう! if(src.focusNode){ // selection まずは HTML5 テキスト選択 API の Selection オブジェクトが登場! 以後これに対する操作が続きます。しかしこの Slection オブジェクト、getRangeAt メソッドを使うとなんと選択範囲に対応する DOM 2 Traversal and Range の Range オブジェクトが取れちゃうんです! // common parent node search (以下 21 行省略) それ Range#commonAncestorContainer で取れるよ! // c
WEB+DB PRESS Vol.49 WAI-ARIA: Days on the Moon
現在発売中の WEB+DB PRESS Vol. 49 にて Accessible Rich Internet Applications (WAI-ARIA) に関する記事を書かせていただきました。2009 年は Web アクセシビリティの年になるという噂をどこからともなく聞きつけてこのテーマにしたのですが、ちょうど WAI-ARIA 1.0 の最終草案も公開されよいタイミングになったのではと勝手に思っています。 WAI-ARIA とは何なのか、詳しいことは雑誌記事を参照していただくとして、簡単に言えば JavaScript で構築した RIA を機械的に認識するための仕様です。たとえば JavaScript でこったボタンを作ったとしましょう。利用者がどうやって「それがボタンである」ということを認識するかといえば、「周りから浮き出ていてマウスカーソルを乗せると色が変わる」といった感覚によ
Web 開発者の責任 (翻訳): Days on the Moon
John Resig 氏による A Web Developer's Responsibility という記事が素晴しかったので、著者の許可を得てここに日本語訳を掲載します。 Web 開発者の最大の負担は、ブラウザのバグと非互換性への対応に膨大な時間を費やすことであるといって間違いないでしょう。それゆえに、それらへの対応に不満をいうのは、Web 開発者全員の常となっていました。ブラウザのバグは迷惑でいらだたしく、仕事を大幅に難しくします。 ブラウザのバグはとてもいらだたしく、通常の開発における最大の負担です。ですから、開発対象のブラウザが、自身のバグを見つけ修正できるようにしてやるのは、すべての Web 開発者にとっての責任です。自分が見つけたバグに対して責任を持ち、「ほかの誰かがこれを見つけるだろう」とは思わないことで、ブラウザの進歩の速度は加速していくでしょう。 ブラウザを支援する解決策
JavaScript でのたらいまわしいろいろ: Days on the Moon
「IT戦記 - JavaScript で遅延評価」より。遅延評価といえばたらいまわし関数と相場が決まっている、ような気がする。 function tak(x, y, z) { return (x <= y) ? y : tak(tak(x - 1, y, z), tak(y - 1, z, x), tak(z - 1, x, y)); } これを元記事に従って書き直すとこうなる。 // from http://d.hatena.ne.jp/amachang/20061204/1165180769 Function.prototype.lazy = function () { return { valueOf: this }; }; function takL(x, y, z) { return (x <= y) ? y : takL(takL(x - 1, y, z), takL(y -
改名します: Days on the Moon
私は普段テキストエディタに Emacs (正確には Meadow) を使っているのですが、nanto_vi という名前のせいか vi 使いに間違えられることが多く、先日も人に挨拶しようと思ったら「僕は Emacs 派なんで」と握手を拒否されてしまいました。ただ静かにエディタを使っていたいだけなのに、このようないわれなき差別を受けるのはもうこりごりです。争いのない平和な世界のためにいいエディタはないかと探していたところ、TeraPad というエディタの存在を思い出しました。 TeraPad は何よりもアイコンが優れており、今でこそやや古さを感じさせるものの、Windows 2000 のころには一番 Windows にマッチするアイコンのエディタといっても過言ではありませんでした。GUI アプリケーションにとってアートワークは命であり、アイコンが漢字一文字だったりした日にはどれだけ機能に秀でて
HTML と XHTML で同じ XPath を使う: Days on the Moon
通常、XPath を書くときは //p のようにすることが多いと思いますが、これには名前空間の指定が含まれていないため、XHTML 文書 (MIME タイプが application/xhtml+xml で提供されている文書) では使えません。これに対するアプローチとしては、//h:p のようにあらかじめ XPath 式に名前空間の指定を含めておき、リゾルバによる名前空間接頭辞の解決時に HTML と XHTML とで処理を分けるというのが一般的でした。「XPathNSResolver のクロスブラウザとか」や「document.contentType == "application/xhtml+xml"なページでの$X」で扱っている方法です。 とはいえ、いちいち名前空間接頭辞を指定するのは面倒くさいですし、同じ名前空間に対する接頭辞が人によって違うのも不便です。XPath 式の中で要素名
選択範囲のリンクを取得する: Days on the Moon
Web ページの選択範囲に含まれるリンクを取得する方法として、Piro さんによる DOM 2 Range の compareBoundaryPoints メソッドを使ったやり方があります。これはリンクを探すのに DOM Core の機能を使って文書ツリーをたどっていますが、今現在ノードを探すといわれて真っ先に思いつくのは XPath でしょう。そこで、XPath を使って選択範囲のリンクを取得する方法を考えてみました。もちろん、選択範囲を扱う以上 DOM 2 Range も利用します。 基本的な考え方 Range オブジェクトの取得 選択範囲の始点より前にあるリンクの数の取得 選択範囲の終点より前にあるリンクの取得 選択されているようには見えないリンクの除外 まとめ 基本的な考え方 基本的なアイデアは、選択範囲の終点より前にあるリンクで、選択範囲の始点より前にはないものが求めるリンクとい
Kanasan.JS Prototype.js CodeReading #6: Days on the Moon
Kanasan.JS Prototype.js CodeReading #6 に行ってきました (当日のチャットログ、参加者のブログ記事一覧)。今回は Prototype.js 1.6.0.2 の 3375 行目、フォームに関する部分から最後まで読みきりました。 Form.Methods.findFirstElement (3449 行目) フォームコントロールを取得するメソッドですが、tabindex 属性でタブ移動順が指定されていた場合は、その順序がもっとも早いコントロールを返そうとしているようです。しかしその際、tabindex 属性の値が 0 のものを値が 1 のものより優先しているようで、実際のタブ移動順と得られる結果が一致しません。HTML 4 では tabindex 属性の値 0 は、tabindex 属性を指定しないのと同じ効果を持つはずなのですが。 フォーカスと選択範囲
JavaScript でカリー化、再び: Days on the Moon
以前、「JavaScript で引数束縛」において関数のカリー化を試みました。しかし、そこでカリー化された関数は、そのままでは一度しか部分適用ができず、また、最初の関数呼び出しは必ず部分適用として扱われていました。 function mean3(a, b, c) { return (a + b + c) / 3; } // 「JavaScript で引数束縛」における curry 関数。 var curriedMean3 = curry(mean3); curriedMean3(1)(2, 3); // => 2 curriedMean3(1)(2)(3); // => TypeError: curriedMean3(1)(2) is not a function // そのままでは部分適用を 2 回以上行えない。 // curry(curriedMean3(1))(2)(3) なら大丈夫
Shibuya.js in Kyoto 発表資料「取説 正規表現」: Days on the Moon
オープンソースカンファレンス 2008 Kansai 内のセッション、Shibuya.js in Kyoto に発表者として参加させていただいたので、資料を公開します。 取説 正規表現 内容は JavaScript での正規表現の基本的な扱い方です。正規表現パターンの解説はよく見かけるのですが、それを実際にどう使うかという情報が不足していると感じたので、一部だけですが取り上げてみました。こちらの練習不足でぎこちないプレゼントなってしまい申し訳なかったです。 補足ですが、if ((match = re.exec(str)))、while ((match = re.exec(str))) のように条件式を丸括弧でくくっているのは、それが代入式であることを強調するためです。SpiderMonkey では if (match = re.exec(str)) などと書くと、「等値比較 (==) を代
ゆの in JavaScript 1.8: Days on the Moon
ゆの in Ruby - 冬通りに消え行く制服ガールは、夢物語にリアルを求めない。 - subtech ゆの in Squeak Smalltalk - sumim’s smalltalking-tos アニメひだまりスケッチを 2 話で切ってしまった私が通りますよ。 String.prototype .\u306F\u3088\u3044\u4F5C\u54C1\u3067\u3057\u305F = function () this.substring(0, 4); var o = 0; var X = { valueOf: function () { var _ = arguments.callee.caller; _._ += "スケッチブック ～full color's～".はよい作品でした (o^_^o); _._ += _.arguments[0]; return (this
tabindex とフォーカス: Days on the Moon
レイアウトを動的に変更する際にはアニメーションをつけたほうがいいかもしれないけど面倒くさいといっていたのだが、物は試しとつけてみた。JavaScript が有効ならば pre 要素の幅切り替えのサンプルや右に出ている「メニューを本文の右側に表示」チェックボックスでその効果を確認できる (IE 5.5 以前など古いブラウザでは表示されない) 。わかりやすくなったのかうっとうしくなったのか、はたまたそんな機能自体いらないと思われているのか。 ところで、こういったことを実現するにあたって問題になってくるのがクリック可能な、すなわち onclick にイベントハンドラが結び付けられた項目を HTML でどう表現するかだ。具体的にいうと a 要素を使って href 属性には無意味な値を設定するか、span 要素などその他の要素を使うかで、これに関しては「Googleがonclickにはhref="j
Greasemonkey スクリプトとイベントで通信: Days on the Moon
「Greasemonkeyスクリプトとウインドウ間で安全に通信する」にて、DOM イベントを用いた Web ページと Greasemonkey スクリプトとの通信について述べられています。そちらでは dispatchEvent メソッドの返り値による 1 bit 通信に触れていますが、やはりもっと自由にデータをやり取りしたいもの。そのためにはどのような方法があるでしょうか。 独自プロパティ 真っ先に思いつくのは、Web ページ側でイベントオブジェクトを作成した際、独自プロパティを追加する方法ですが、これはだめです。Greasemonkey スクリプト側ではイベントオブジェクトの独自プロパティを取得できません。event.wrappedJSObject.myProperty のように wrappedJSObject を介せば取得できますが、せっかく安全のため Firefox 側でラッパーに包
JavaScript 1.7 の新機能: Days on the Moon
Firefox 2 の新機能の一つに JavaScript 1.7 への対応がある。Firefox 2 Beta 2 のリリースも近づき JavaScript 1.7 の新機能もほとんどが実装されてきたのでここにまとめてみる。といっても New in JavaScript 1.7 に大体はまとまっているので補足的な部分など。 識別子の扱い ブロックスコープ 分割代入 イテレータ ジェネレータ 配列内包 参考 なお、ブラウザ上でスクリプトを実行する場合は、JavaScript のバージョンを明記しないと let 、yield がキーワードとして認識されない (Bug 351515) 。 <script type="text/javascript; version=1.7"> JavaScript shell を使う場合は起動時にバージョンを指定するか version 関数を使う。 $ js
Kanasan.JS JavaScript 第 5 版読書会 #4: Days on the Moon
Kanasan.JS の JavaScript 第 5 版 (サイ本) 読書会 #4 に行ってきました (参加者のブログ記事一覧、当日のチャットログ)。 会場、設営 開始 15 分ほど前に会場に着いたのですが人気なし。特に名前のない貸し会議室とのことで、本当にここであってるのか Twitter で他者の動向を探ろうとするも、運悪く Twitter がダウン中。携帯から必死に地図を探していたところにほかの人が到着して一安心となりました。 開始時点で Windows マシン使用者が私を含めて 2 人という脅威のMac率でした。無線 LAN の共有も Mac 機を主体に行われ、そのせいか Windows 機では無線 LAN が利用できず。私は結局 Kanasan さんの EMOBILE 端末を借りてネットに接続しました。 クラス JavaScript にクラスベースオブジェクト指向言語でいうとこ
行数の数え方: Days on the Moon
行数を数えているのですが、コメント欄他のstr.split(/\n/).lengthはかっこいいけどoverkill 404 Blog Not Found:javascript - String.prototype.tr() released 本当でしょうか? 実際に試してみましょう。変数 s が対象文字列を指しているものとします。 // charAt var lines = 1; for (var i = 0, n = s.length; i < n; i++) if (s.charAt(i) == "\n") lines++; // Array var lines = 1; var chars = s.split(""); for (var i = 0, n = chars.length; i < n; i++) if (chars[i] == "\n") lines++; // sp
「JavaScript の勉強」について個人的に: Days on the Moon
「JavaScript の『本気』な勉強 - daily dayflower」での質問に横から勝手に答えちゃいます。 初学者の入り口として既存のライブラリを使うのは どちらかというと望ましい。ブラウザのイベント周りの非互換性など、JavaScript と関係ない部分で悩まずにすむのは便利だと思います。 (初学者であれ) JavaScript の仕様に沿ったメカニズムについて 学習すべきである。いきなり ECMAScript 仕様を読めというつもりはありませんが、体系的な学習はしたほうがいいかと。 DOM 構築後のスクリプト実行についてどう教える? ライブラリを使うならそのライブラリの機能を使って、使わないなら body 要素の内容の終端に script 要素をおくか、もしくは load イベントのイベントリスナで。 自分で書く場合 自家製ライブラリを利用している。今度このブログのレイアウト
Narcissus の正規表現: Days on the Moon
「前のエントリで書き忘れてた - 最速チュパカブラ研究会」にて、Narcissus で使われている正規表現が参考になるという話が出ています。 文字列リテラル /^"(?:\\.|[^"])*"|^'(?:[^']|\\.)*'/ 正規表現リテラル /^\/((?:\\.|[^\/])+)\/([gimy]*)/ コメント /^\/(?:\*(?:.|\n)*?\*\/|\/.*)/ 一流の人が書いたものを使いましょうというのに異を唱えるつもりはありませんが、そのままコピー & ペーストしていては意味がありません。ここはやはり一文字一文字心をこめて写経しましょう……ではなく、どうしてその書き方でうまくいくのかをきちんと考えた上で使いましょう。 文字列リテラルにマッチする正規表現 上記の文字列リテラルを表す正規表現から、一重引用符でくくられた文字列にマッチする部分だけを抜き出すと '(?:[^
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
