ブラウザ上で、JavaScript を使って HTML のソースから HTML 文書を生成するのに、どんな方法があるのか調べました。なお、以下のスクリプトは HTML 文書上で実行することが前提です。 表の見方 XSLT の HTML 出力 createHTMLDocument メソッド createDocument メソッド createDocument メソッドと名前空間の指定 createDocument メソッドと文書型宣言の指定 createDocument メソッドと文書型宣言及び名前空間の指定 cloneNode メソッド iframe 要素 ActiveXObject CID からの作成 まとめ 表の見方 以下の表において、各項目の意味は次の通りです。 doc HTML 文書を作成できれば○、XML 文書を作成できれば△、それ以外なら×です。HTML 文書かどうかは、cre
Kanasan.JS Jetpack ワークショップに行ってきました。Jetpack は Firefox 用の簡易拡張プラットフォーム。私としては通常の拡張機能のほうが高い自由度を持てて好きなのですが、Firefox を広く一般に使ってもらうには、簡単なものを簡単に作れるようにするという点が重要なのでしょう。 最初に mollifier さんによる Jetpack 入門があった後、二人組になり各グループで Jetpack フィーチャーを作っていくという流れ。私は satyr さんとペアになったのですが、さすが satyr さん、ゴルファーだけあって見慣れぬ記法を次々と使ってきます。 var { href } = location; 上のコードは分割代入の省略形式で、 var { href: href } = location; の略、さらには、 var href = location.hr
オンライン勉強会の Jetpack 入門に参加して Jetpack のソースコードを読んでいたら、Iterator を関数として呼び出したときとコンストラクタとして呼び出したときとでは挙動が違うということを知りました。 Iterator の動作 オブジェクト o に対して for-in 文、for-each-in 文を実行したとき、及び Iterator 関数、Iterator コンストラクタを呼び出したときの (SpiderMonkey の) 動作は、それぞれ次のようになります。 コード o が __iterator__ メソッドを持つとき o が __iterator__ メソッドを持たないとき for (... in o)
すっかり記事を書くのが遅れてしまいましたが、Kanasan.JS JSDeferred コードリーディングへ行ってきました (参加者ブログ記事一覧)。JSDeferred は cho45 さん作の、非同期処理を簡単に記述するためのライブラリです。簡単なリファレンスもありますが、実際に動かせるサンプルのほうがどんなものか感覚をつかめると思います。 Deferred オブジェクト JSDeferred では、ひとつの処理をひとつの Deferred オブジェクトとして表現し、処理の流れは Deferred オブジェクトを順につなげた Deferred チェーンで表します。Deferred オブジェクトは三つのプロパティを持ちます。 callback.ok プロパティ (正常) 処理の本体を表す関数。 callback.ng プロパティ 例外処理の本体を表す関数。 _next プロパティ Def
John Resig 氏による A Web Developer's Responsibility という記事が素晴しかったので、著者の許可を得てここに日本語訳を掲載します。 Web 開発者の最大の負担は、ブラウザのバグと非互換性への対応に膨大な時間を費やすことであるといって間違いないでしょう。それゆえに、それらへの対応に不満をいうのは、Web 開発者全員の常となっていました。ブラウザのバグは迷惑でいらだたしく、仕事を大幅に難しくします。 ブラウザのバグはとてもいらだたしく、通常の開発における最大の負担です。ですから、開発対象のブラウザが、自身のバグを見つけ修正できるようにしてやるのは、すべての Web 開発者にとっての責任です。自分が見つけたバグに対して責任を持ち、「ほかの誰かがこれを見つけるだろう」とは思わないことで、ブラウザの進歩の速度は加速していくでしょう。 ブラウザを支援する解決策
Kanasan.JS JavaScript 第 5 版読書会 #7 に行ってきました (当日のチャットログ)。範囲は前回に引き続き CSS の操作、そしてイベント周りと、一般に「JavaScript」といったとき話題になりやすい部分です。参加者のブログ記事は「JavaScriptでCSSとイベントを扱う from Kanasan.JS | Blog.37to.net」のほか読書会のページからたどれます。 display: inline-block; サイ本では解説されていませんが、CSS の display プロパティの値 inline-block に関して話が盛り上がりました。inline-block 及びそれがどのようなレイアウトに使えるかについては以下で解説されています。 書籍などに紹介されていない display : inline-block について (ヨモツネット) inlin
ちょうど 1 ヶ月前、2 月 22 日に開催された Kanasan.JS Greasemonkey チュートリアル読書会 (参加者ブログ一覧) に私も参加していました。時間がたちすぎて自分のメモからも情報を読み出せなくなりかけているのですが、何とかここに再現してまとめたいと思います。全体のまとめは「Firebugで作るGreasemonkeyスクリプト～入門と実践(From Kanasan.JS) | Blog.37to.net」に詳しいので、自分の気になった点に関してだけです。 HTML の解析 Greasemonkey スクリプトを書くには対象サイトの HTML を解析する必要があります。多くの人は Firebug を使っているようですが、私が使っているのは DOM Inspector です。これは単に昔から DOM Inspector を使っていたという慣れの問題ですが、一応 Fir
1 行でブラウザ判別を行うスクリプト (IE 用の日本語紹介記事、Firefox、Safari 用の日本語紹介記事) が注目を集めています。それによると Firefox の判別は次の 15 文字で行えるそうです。 //Firefox detector 2/3 by DoctorDan FF=/a/[-1]=='a' いったいなぜこれで Firefox が判別できるのか、少し探ってみました。 何を判別しているのか SpiderMonkey のソースコードを探る より短い SpiderMonkey の判別法 「ブラウザ判別」としての不備 まとめ 参考文献 何を判別しているのか 実際に探っていく前にひとつ注意しなければいけないことがあります。それは、上記のコードが Firefox を判別するものではないということです。このコードには Web ブラウザ固有のオブジェクトモデルに関する情報が含まれて
すでにニュースでも伝えられている通り、12 月 1 日に第 7 回アルゴリズムイントロダクション輪講会がありました。今回の担当は私だったので、その発表資料を公開します。 中央値と順序統計量 (その 1) 予定 順序統計量とは 選択問題とは 最小値と最大値 平均線形時間選択アルゴリズム 中央値と順序統計量 (その 2) 最悪線形時間選択アルゴリズム 3 つずつのグループに分割した場合 7 つずつのグループに分割した場合 参考文献 中央値と順序統計量 (補足) 4 つずつのグループに分割した場合 6 つずつのグループに分割した場合 Lazy-Select Randomized-Partition スタッフロール 「どうせ後から Web で公開するんだから、PDF とか見るのに手間がかかるものは使ってられないよね。やっぱ時代は XML 複合文書でしょ!」と、数式を表現するのに MathML を使
Kanasan.JS JavaScript 第 5 版読書会 #6 に行ってきました (当日のチャットログ、参加者のブログ一覧)。今回は 14 章「ブラウザウィンドウの制御」から 16 章「CSS とダイナミック HTML」の途中まで読み進めました。 タイマーの仕様 (14.1、p. 282) setTimeout などのタイマーはブラウザが独自に実装したもので、標準化された仕様は存在しません。HTML 5 の草案には一応含まれているものの、独立した仕様に移すことが示唆されています。かといって、その場合の受け皿となるであろう W3C WebApps WG にもはっきりとした動きは見られず (Apple の人から高精度タイマーの提案が出ていましたが)、タイマーの標準化がどうなるのかよくわかりません。 Navigator オブジェクト (14.3.3, p. 289) Navigator オブ
Web ページの選択範囲に含まれるリンクを取得する方法として、Piro さんによる DOM 2 Range の compareBoundaryPoints メソッドを使ったやり方があります。これはリンクを探すのに DOM Core の機能を使って文書ツリーをたどっていますが、今現在ノードを探すといわれて真っ先に思いつくのは XPath でしょう。そこで、XPath を使って選択範囲のリンクを取得する方法を考えてみました。もちろん、選択範囲を扱う以上 DOM 2 Range も利用します。 基本的な考え方 Range オブジェクトの取得 選択範囲の始点より前にあるリンクの数の取得 選択範囲の終点より前にあるリンクの取得 選択されているようには見えないリンクの除外 まとめ 基本的な考え方 基本的なアイデアは、選択範囲の終点より前にあるリンクで、選択範囲の始点より前にはないものが求めるリンクとい
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 属性を指定しないのと同じ効果を持つはずなのですが。 フォーカスと選択範囲
アニオタが非オタの彼女にアニメ世界を軽く紹介するための 10 本が流行っているようで (◯◯オタが非オタの彼女に◯◯世界を紹介するための 10 本まとめ)。えっ、もうブームは去った? まあそんなこと気にせず勝手にいっちゃいます。 軽く紹介するための 10 本 まあ、どのくらいの数の JS オタがそういう彼女をゲットできるかは別にして、「オタではまったくないんだが、しかし自分のオタ趣味を肯定的に黙認してくれて、その上で全く知らない JavaScript の世界とはなんなのか、ちょっとだけ好奇心持ってる」ような、ヲタの都合のいい妄想の中に出てきそうな彼女に、JavaScript のことを紹介するために見せるべき 10 実装を選んでみたいのだけれど。(要は「脱オタクファッションガイド」の正反対版だな。彼女に JavaScript を布教するのではなく相互のコミュニケーションの入口として) あくま
Kanasan.JS JavaScript 第 5 版読書会 #5 に行ってきました (当日のチャットログ、参加者のブログ記事一覧)。今回からはいよいよ第 2 部、クライアントサイドスクリプトということで、13 章全体を読みました。 控えめな JavaScript JavaScript をどのように使うかの指針として、「控えめな JavaScript (unobtrusive JavaScript)」(WaSP DOM Scripting Task Force の声明文) というキーワードが挙げられています。 HTML マークアップと JavaScript コードを分離する。 正常に機能を停止する。ブラウザがある機能を持たない、もしくは JavaScript 自体が動作しない場合であっても、コンテンツが利用可能であるようにする。 アクセシビリティを低下させるのではなく、向上させる。 これは
オープンソースカンファレンス 2008 Kansai 内のセッション、Shibuya.js in Kyoto に発表者として参加させていただいたので、資料を公開します。 取説 正規表現 内容は JavaScript での正規表現の基本的な扱い方です。正規表現パターンの解説はよく見かけるのですが、それを実際にどう使うかという情報が不足していると感じたので、一部だけですが取り上げてみました。こちらの練習不足でぎこちないプレゼントなってしまい申し訳なかったです。 補足ですが、if ((match = re.exec(str)))、while ((match = re.exec(str))) のように条件式を丸括弧でくくっているのは、それが代入式であることを強調するためです。SpiderMonkey では if (match = re.exec(str)) などと書くと、「等値比較 (==) を代
「Greasemonkeyスクリプトとウインドウ間で安全に通信する」にて、DOM イベントを用いた Web ページと Greasemonkey スクリプトとの通信について述べられています。そちらでは dispatchEvent メソッドの返り値による 1 bit 通信に触れていますが、やはりもっと自由にデータをやり取りしたいもの。そのためにはどのような方法があるでしょうか。 独自プロパティ 真っ先に思いつくのは、Web ページ側でイベントオブジェクトを作成した際、独自プロパティを追加する方法ですが、これはだめです。Greasemonkey スクリプト側ではイベントオブジェクトの独自プロパティを取得できません。event.wrappedJSObject.myProperty のように wrappedJSObject を介せば取得できますが、せっかく安全のため Firefox 側でラッパーに包
Kanasan.JS の Prototype.js CodeReading #5 に行ってきました (当日のチャットログ、参加者のブログ記事一覧)。対象は Prototype.js 1.6.0.2 です。ちなみに私は前回お休みしたので、前日にその分をざっとさらえての参加でした。 Element.Methods.Simulated.hasAttribute (2521 行目) IE 7 は DOM 2 Core の Element#hasAttribute を実装してないので、その代替です。 Element.addMethods (2583 行目) 可変引数の処理を、引数の値が新かどうかで判断したり、arguments.length を見たりと一貫性がありません。増改築を繰り返してきた結果でしょうか? findDOMClass (2625 行目) Firefox などでは DOM HTML
Kanasan.JS の JavaScript 第 5 版 (サイ本) 読書会 #4 に行ってきました (参加者のブログ記事一覧、当日のチャットログ)。 会場、設営 開始 15 分ほど前に会場に着いたのですが人気なし。特に名前のない貸し会議室とのことで、本当にここであってるのか Twitter で他者の動向を探ろうとするも、運悪く Twitter がダウン中。携帯から必死に地図を探していたところにほかの人が到着して一安心となりました。 開始時点で Windows マシン使用者が私を含めて 2 人という脅威のMac率でした。無線 LAN の共有も Mac 機を主体に行われ、そのせいか Windows 機では無線 LAN が利用できず。私は結局 Kanasan さんの EMOBILE 端末を借りてネットに接続しました。 クラス JavaScript にクラスベースオブジェクト指向言語でいうとこ
行数を数えているのですが、コメント欄他の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
「前のエントリで書き忘れてた - 最速チュパカブラ研究会」にて、Narcissus で使われている正規表現が参考になるという話が出ています。 文字列リテラル /^"(?:\\.|[^"])*"|^'(?:[^']|\\.)*'/ 正規表現リテラル /^\/((?:\\.|[^\/])+)\/([gimy]*)/ コメント /^\/(?:\*(?:.|\n)*?\*\/|\/.*)/ 一流の人が書いたものを使いましょうというのに異を唱えるつもりはありませんが、そのままコピー & ペーストしていては意味がありません。ここはやはり一文字一文字心をこめて写経しましょう……ではなく、どうしてその書き方でうまくいくのかをきちんと考えた上で使いましょう。 文字列リテラルにマッチする正規表現 上記の文字列リテラルを表す正規表現から、一重引用符でくくられた文字列にマッチする部分だけを抜き出すと '(?:[^
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
