漢字にマッチする JavaScript の正規表現パターン: Days on the Moon
たまに漢字にマッチする正規表現パターンを書きたいときがあります。Perl の正規表現だと Unicode のスクリプト名を使って \p{Han} で漢字にマッチさせられるのですが、JavaScript ではそうはいきません。JavaScript の正規表現には以下のふたつの問題があります。 Unicode スクリプト名の指定 (\p{...}) に対応していない。 そもそも Unicode の符号位置に対してマッチさせられない (UTF-16 における符号単位に対するマッチになる)。 BMP 外の文字にマッチさせたいときは、サロゲートペアの符号単位を記述する必要がある。 これに関しては ECMAScript 2015 で導入された /u フラグで解決する見込み。 とはいえ、解決不能な問題というわけでもないので、Perl の \p{Han} を JavaScript に移植してみましょう。\
呼ばれていないけど、私もコードゴルフしてみました: Days on the Moon
集え変態プログラマ！JavaScriptの最短コードに挑んだコードゴルフ大会 in Code 2013 | DX.univ 呼ばれてないけど、ボクもコードゴルフしてみたよ - latest log Code 2013 というイベントで出されたというコードゴルフのお題「JavaScript でデジタル時計」を見ているうちに、自分でもやりたくなったので挑戦してみました。 基本方針 出力が複数行にわたるなら 1 行ずつ処理していくのが素直な手ですが、このお題においてはそれだとひとつの文字に対する処理が細切れになってしまいます。 そこで、ある文字の出力処理をまとめてやってしまいましょう。行ごとにではなく列ごとに処理を進めていくのです。 20 分 方針が決まれば早速コーディング。以前、渋谷から 10 分のゴルフ場で似たようなお題「banner」に取り組んだときは三十六進数表記を使いましたが、とりあえ
2010-09-27: Days on the Moon
6 月のことになりますが、Kanasan.JS JavaScript 第 5 版読書会 #10 にて XPath に関する発表を行いました。内容は基本的な XPath の解説です。 発表資料: Excellent XPath Expressions (図、注釈付き) 図の元データ (OpenDocument Graphics 形式) 本番では図の準備が間に合わずホワイトボードに描きながら発表したのですが、逐次挙がる質問に対してもすぐ描き直して対応できたので、かえって理解を深めるのに役立ったのではないかと思います。資料中の注釈は口頭で説明したことなどを書き起こしたものです。 タイトルに excellent と入っていますが何か特に素晴しいということはなく、単に頭韻を踏みたかっただけです。(しかし excellent と expression では ex の発音が違うので踏めてないという……)
勝手に添削: 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
Firefox 3.6 での XPath による要素取得: Days on the Moon
Firefox 3.6 にしたら、動的に生成した文書からの XPath による要素取得ができなくなったという報告が挙がっています。 Firefox3.6でdirect_bookmark.jsとdirect_hb.jsのはてブのタグを取得できていない問題(未解決→解決) - ヴィンペラートル・オクタウィアヌス - vimperatorグループ subscldr.jsが動かなくなったのを直してみた - mountain_dewの日記 この原因は、Firefox 3.6 で HTML 要素の名前空間の扱いが変わったことにあります。Firefox 3.6 (Gecko 1.9.2) では、HTML5 に従い、HTML 要素が (XML 文書中でなくても) XHTML の名前空間 (HTML5 でいうところの「HTML の名前空間」) http://www.w3.org/1999/xhtml に属す
Firefox Developers Conference 2009: Days on the Moon
11 月 8 日に行われた Firefox Developers Conference 2009 にて、secondlife さんとともにはてなブックマーク Firefox 拡張に関する発表を行いました。発表資料は次の通りです。 Firefox Developers Conference 2009 発表資料 - 川o・-・）＜2nd life (secondlife さん発表分) はてなブックマーク Firefox 拡張 実装の舞台裏 資料中に約 3500 行の XML とありますが、この中には XBL 内に直接書かれた JavaScript コードの行数も含まれていると思います。XBL は、特定の機能を持つ要素が複数存在する場合に威力を発揮します。Mozilla のウィジェット (ボタンやメニューなど) のソースを読むためには XBL のあらましを知っておく必要があると思うのですが、意外
HTMLDocument の動的な作成: Days on the Moon
ブラウザ上で、JavaScript を使って HTML のソースから HTML 文書を生成するのに、どんな方法があるのか調べました。なお、以下のスクリプトは HTML 文書上で実行することが前提です。 表の見方 XSLT の HTML 出力 createHTMLDocument メソッド createDocument メソッド createDocument メソッドと名前空間の指定 createDocument メソッドと文書型宣言の指定 createDocument メソッドと文書型宣言及び名前空間の指定 cloneNode メソッド iframe 要素 ActiveXObject CID からの作成 まとめ 表の見方 以下の表において、各項目の意味は次の通りです。 doc HTML 文書を作成できれば○、XML 文書を作成できれば△、それ以外なら×です。HTML 文書かどうかは、cre
JavaScript の Iterator、関数とコンストラクタ: Days on the Moon
オンライン勉強会の Jetpack 入門に参加して Jetpack のソースコードを読んでいたら、Iterator を関数として呼び出したときとコンストラクタとして呼び出したときとでは挙動が違うということを知りました。 Iterator の動作 オブジェクト o に対して for-in 文、for-each-in 文を実行したとき、及び Iterator 関数、Iterator コンストラクタを呼び出したときの (SpiderMonkey の) 動作は、それぞれ次のようになります。 コード o が __iterator__ メソッドを持つとき o が __iterator__ メソッドを持たないとき for (... in o)
Web 開発者の責任 (翻訳): Days on the Moon
John Resig 氏による A Web Developer's Responsibility という記事が素晴しかったので、著者の許可を得てここに日本語訳を掲載します。 Web 開発者の最大の負担は、ブラウザのバグと非互換性への対応に膨大な時間を費やすことであるといって間違いないでしょう。それゆえに、それらへの対応に不満をいうのは、Web 開発者全員の常となっていました。ブラウザのバグは迷惑でいらだたしく、仕事を大幅に難しくします。 ブラウザのバグはとてもいらだたしく、通常の開発における最大の負担です。ですから、開発対象のブラウザが、自身のバグを見つけ修正できるようにしてやるのは、すべての Web 開発者にとっての責任です。自分が見つけたバグに対して責任を持ち、「ほかの誰かがこれを見つけるだろう」とは思わないことで、ブラウザの進歩の速度は加速していくでしょう。 ブラウザを支援する解決策
Kanasan.JS JavaScript 第 5 版読書会 #7: Days on the Moon
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
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 でこったボタンを作ったとしましょう。利用者がどうやって「それがボタンである」ということを認識するかといえば、「周りから浮き出ていてマウスカーソルを乗せると色が変わる」といった感覚によ
Fizz-Buzz in JavaScript: Days on the Moon
一部で Fizz-Buzz 問題がはやってるみたいで。私が anarchy golf の FizzBuzz 用に JavaScript で書いたのは以下の 58 バイト。ここにいたるまでには 2 分どころではない時間がかかってるけど。 for(i=0;i++<100;)print((i%3?"":"Fizz")+(i%5?"":"Buzz")||i) 今のところ JavaScript の最短は 56 バイト。どうすれば縮められるのかさっぱり思いつかない。 ちなみに、anarchy golf をやるときには大体以下のような変換をしていた。 変換前 変換後 差
SpiderMonkey の判別とブラウザ判別: Days on the Moon
1 行でブラウザ判別を行うスクリプト (IE 用の日本語紹介記事、Firefox、Safari 用の日本語紹介記事) が注目を集めています。それによると Firefox の判別は次の 15 文字で行えるそうです。 //Firefox detector 2/3 by DoctorDan FF=/a/[-1]=='a' いったいなぜこれで Firefox が判別できるのか、少し探ってみました。 何を判別しているのか SpiderMonkey のソースコードを探る より短い SpiderMonkey の判別法 「ブラウザ判別」としての不備 まとめ 参考文献 何を判別しているのか 実際に探っていく前にひとつ注意しなければいけないことがあります。それは、上記のコードが Firefox を判別するものではないということです。このコードには Web ブラウザ固有のオブジェクトモデルに関する情報が含まれて
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 式の中で要素名
関数的っポイ!? JavaScript: Days on the Moon
関数型プログラミング言語を触ったことがないのでこれが関数的かどうかは知らないが、いちいち function とか return とか書くのは面倒くさいと思ったのと「関数の変形」や beyond.js 、boost::bind に影響を受けて、関数の変形を行うライブラリを作った。 まずは引数の束縛、及び入れ替え。「関数の変形」及び boost::bind にならって後々入力される引数を _n であらわすことにする。 function concat(a, b) { return "" + a + b; } concat.bind(_1, "a")("b"); // "ba" concat.bind("a", _1)("b"); // "ab" concat.bind(_2, _1)("a", "b"); // "ba" concat.bind(_1, _1)("a"); // "aa" 次に関
Kanasan.JS JavaScript 第 5 版読書会 #5: Days on the Moon
Kanasan.JS JavaScript 第 5 版読書会 #5 に行ってきました (当日のチャットログ、参加者のブログ記事一覧)。今回からはいよいよ第 2 部、クライアントサイドスクリプトということで、13 章全体を読みました。 控えめな JavaScript JavaScript をどのように使うかの指針として、「控えめな JavaScript (unobtrusive JavaScript)」(WaSP DOM Scripting Task Force の声明文) というキーワードが挙げられています。 HTML マークアップと JavaScript コードを分離する。 正常に機能を停止する。ブラウザがある機能を持たない、もしくは JavaScript 自体が動作しない場合であっても、コンテンツが利用可能であるようにする。 アクセシビリティを低下させるのではなく、向上させる。 これは
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)) などと書くと、「等値比較 (==) を代
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) なら大丈夫
Kanasan.JS CodeReading #3: Days on the Moon
Kanasan.JS の Prototype.js CodeReading #3 (参加者のブログ記事一覧) に行ってきた。今回は告知が開催間際だったせいか人数はやや少なめだったけど、内容的にはこれまでと変わらぬ濃さ。範囲としては Prototype.js 1.6.0.2 の 1352 行目から 1650 行目付近まで。 コードリーディング 無線ネットワークが提供されているはずが私のマシンでは利用できず。LAN ケーブルをお借りして有線で接続。それにしても私がこれまでに参加した Kanasan.JS でネットワーク関係の不備に陥ること 4 回中 4 回。何か呪いでもかけられているのかと疑いたくなる。 例外処理の有無 Ajax.Response#getStatusText などは try 文による例外処理を行っているのに、Ajax.Response#getResponseHeader および
ソート高速化を試みる: Days on the Moon
JavaScript の Array#sort は、比較関数を渡さない場合、各要素は文字列として比較され、並び替えられます。これに関して、IE などで用いられている JScript では、文字列化を一度しか行わず結果をキャッシュしている、すなわち内部的にシュワルツ変換 (Schwartzian transform) を行っているようで、配列要素の toString メソッドを適宜調整することによりソートを高速化できるというのが IT 戦記で触れられていました。 これはつまり、通常次のようにするところを、 // 比較関数 function C(order) { this.order = order; } array.sort(function (a, b) { return a.order - b.order; }); 次のようにすると JScript で高速化が図れるというものです。 //
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
