Latest topics 近況報告

JavaScriptのスタックトレース - Jul 26, 2010

先日のブラウザー勉強会で吾郷さんにお会いした際に、JavaScriptには言語の仕様として「例外がどこから投げられたのか」を知る為の仕組みが無いので独自のフレームワークを作る時に困ったという話を伺った。オレ標準JavaScript勉強会で何話せばいいか困ってた所だったので、それをネタに発表させてもらう事にした。

改めてECMAScriptの仕様書を確認してみたけど、確かに3rd Editionと5th Editionでは、例外オブジェクトの機能としてはError.prototype.nameとError.prototype.messageしか定義されていなかった（あとはconstructorとかtoString()とかその程度）。Wikipedia（英語の方）のECMAScriptの記事によるとECMAScript 3rd EditionはJavaScript 1.5とJScript 5.5の共通部分を抜き出す形で策定されたようで、実装してない方のIEに合わせてこうなったのか？とも思ったけど、調べてみたらJavaScript 1.5の頃はMozillaもError.prototype.stackはサポートしてなかった。それ以降にMozillaが独自に拡張した箇所ということのようだ。でも今回調べた限りではOperaもChromeもError.prototype.stackをサポートしていた（Operaの場合はこれに加えて、少しフォーマットが違うスタックトレースをError.prototype.stacktraceでも取得できる、ということをedvakfさんに教えていただいた）。メジャーなJavaScript実行環境でこれに対応してないのはIE（IE9PP3を含む）くらいのようだ……と思ったらSafari（Windows版）もサポートしていなかった。

吾郷さんのそれやUxUのようにデバッグを支援するためのフレームワークでは、スタックトレースは欠かせない要素だ。将来のECMAScriptの仕様に取り込まれてくれればいいのになあ、と思う。

勉強会ではせがわようすけさんに突っ込まれたけど、セキュリティのためにはなるべくこういう情報は出さない方がいいものらしい。しかし自分はスタックトレースの何がまずいのかがよく分かっていない。会場では「例えばスタックトレースでスクリプトのURLの中にセッションIDが含まれていたらセッションハイジャックされてしまう危険性がある」という例を教えていただいたけれども、それでもまだピンと来ていなかった。

さらにツッコミを受けたことで「なるほど、クロスドメインの制約を突破されてしまう」という事が問題なのだと分かった。ただ、実際にそれが問題になるケースってほんとにあるのかな？　という疑問はまだ残っている。

分かりやすい話として、通常のXMLHttpRequestやiframeでは、別ドメインのドキュメントを読み込む事ができない・読み込んだとしてもその内容にスクリプトからアクセスすることはできない。

var iframe = document.createElement('iframe');
iframe.setAttribute('src', 'http://www.google.co.jp');
document.body.appendChild(iframe);
window.setTimeout(function() {
  try{
    alert(iframe.contentDocument.body);
  }
  catch(e){
    alert(e);
  }
}, 3000);

例えばこういうのは、Error: Permission denied for <http://piro.sakura.ne.jp> to get property HTMLDocument.body from <http://www.google.co.jp>.と言われてエラーになる。しかしスタックトレースにエラー行の詳細な情報が含まれていると、

try {
  document.write('<script type="text/javascript" src="http://www.google.co.jp/" async="false" defer="false"></script>');
}
catch(e) {
  var contentsFragment = e.stack;
}

とか

try {
  var script = document.createElement('script');
  script.setAttribute('type', 'text/javascript');
  script.setAttribute('src', 'http://www.google.co.jp/');
  script.setAttribute('async', 'false');
  script.setAttribute('defer', 'false');
  document.body.appendChild(script);
}
catch(e) {
  var contentsFragment = e.stack;
}

とか

// window.onerrorはECMAScriptの仕様にはない独自拡張
window.onerror = function(aMessage, aSource, aLineNumber) {
  // ここでaMessage, aSourceから情報を取れる可能性がある
}
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', 'http://www.google.co.jp/');
script.setAttribute('async', 'false');
script.setAttribute('defer', 'false');
document.body.appendChild(script);

という風にして、別ドメインのドキュメントの内容を部分的にとはいえ読み取れてしまう可能性がある、というわけだ。特に3番目のwindow.onerrorを使う例はMFSA 2010-47: エラーメッセージのスクリプトファイル名からのクロスサイトデータ漏えいで実際に脆弱性になっていたことが確認されていて、既に修正されている。

なお、実際に現行バージョンのFirefox・Opera・Chromeで試してみたところ、1番目・2番目のtry-catchを使った例ではそもそも例外を例外として（そもそも、エラーが発生したのかどうかすら）捕捉できなかったので、今の所問題にはならない。ただ、今は問題にならなくても、今後登場するJavaScriptの実装ではこういう場合でも情報を取れるようになっている可能性はあるので、将来的に脆弱性の原因になるかもしれないという警告は確かにアリだとは思う。という所までは何とか理解できた。

ブラウザのレベルでは、クロスドメインやクロスオリジンになる時だけは例外を出さないとか詳細な情報を出さないとか、そういう対応の仕方はあるだろうけれども、「ECMAScript」の仕様でそこに言及するのは変だろうなあ。というややこしい事情を勘案すると、もう丸ごと全部仕様からドロップしてしまえという判断になるんかなあ。

携帯から送られたメールの中に含まれている絵文字を判別したかった - May 31, 2010

またRailsなんですけど。

携帯端末のメールで絵文字を入力した物を送信して、Railsアプリ（いわゆる勝手サイトにあたるもの）でそれを受信したら何か処理をしたい、っていう場面でどぉぉぉーもうまくいかなくて一日悩んでた。

ActionMailer::Baseを継承した独自のクラス（Mailmanとかそういう名前で定義してる）のMailman.receive()に渡ってきたメールの内容から、絵文字を検出したかった。

class Mailman < ActionMailer::Base
  def receive(mail)
    some_operation(mail.subject)
    some_operation(mail.body)
  end

  def some_operation(string)
    # ここで絵文字を検出したい
  end
end

jpmobileとかMbMailとかが利用できるのかなと思ったんだけど、うまくいかない。DoCoMoの端末から絵文字入りのメールを送っても、絵文字のコードにマッチするはずの正規表現に全然マッチしない。

んで、もっとよく調べてみたら、勝手サイトだからなのか何なのか、DoCoMoのメールサーバからメールが送られる時点で絵文字の情報は完璧に失われるんですね。絵文字は全部「〓」に変換されてしまってて、〓の文字コードは（Unicodeだと）0x3013だから、さっきのコード表から作った正規表現にはマッチするわけがない。

まあ、やりたかった事は「絵文字があったらエラーを返す」という事だったので、「〓」が有るか無いかだけ見るというソリューションでだいたい問題なかったんですけれども。（「〓」自体を送信できないという問題は残るけど、こんな文字は普段使わないからその問題は無視する）

1日まるまる無駄にしてしまった……

メールのヘッダに埋め込む用に文字列をBase64エンコードする - May 28, 2010

所用でRuby on Railsのテストケースを書いているのですが、メールを受信してあれこれする処理のテストのためのfixtureを用意するのにいちいちホントにメールを送信してそのソース文字列をコピペするとかそういう事をやってたら面倒すぎたので、Subjectとかのヘッダ部分を簡単に書き換える方法を探した所、Rubyでやるのが早いっぽい事が分かったのですが、忘れそうなのでメモしておきます。

irbを起動して

require "base64"
def encode( str )
  "=?iso-2022-jp?B?" + Base64.encode64( NKF.nkf( '-j --utf8-input', str ) ).chomp + "?="
end

を貼り付ける。後はencode("文字列")でその都度結果を見ればいい。

CSS Transitions（CSSだけで簡単なアニメーション）の使い方・覚え方のまとめ - May 02, 2010

いろんな人がいろんな解説を既に書いてるみたいだけど、ツリー型タブでタブのインデントや折り畳みのアニメーションをCSS Transitionsで書き直してみるにあたり、自分で書いてみるまでよく分からんかったので、理解している内容をまとめてみることにした。

CSS Transitionsのフルスペックの説明でもないし、「こんなことができるぜすげーだろ！」というデモでもない。現実的にどういう場面でどういう風に使う事ができるのか、という事を淡々と述べます。いろんな機能を詰め込んだよく分からんデモやスクリプトと組み合わせること前提の変なデモを見たせいで混乱してる僕みたいな人が、CSS Transitionsを理解するための手助けになれれば幸いです。

主な用途

マージンや色などの値を数値で表せるプロパティや、画像を表示する系のプロパティなどについて、スクリプトあるいは:hoverなどの疑似クラスによって動的に値が変化するようにしている場面で、元の状態と新しい状態の間をなめらかに変化させるようにする。

例えば、こんな風に。

ul.menu li {
  transition: margin-left 0.25s ease-out;
}
ul.menu li:not(:hover) {
  margin-left: 0;
}
ul.menu li:hover {
  margin-left: 50px;
}

• メニュー項目の例1（hoverで右に動きます）
• メニュー項目の例2（hoverで右に動きます）
• メニュー項目の例3（hoverで右に動きます）

この例では、分かりやすくするために敢えて指定を分けて書いている。ここでは以下のようなことが起こっている。

• 何もしていない状態だと、margin-left: 0;が適用されている。
• :hoverの状態になると、margin-leftが50pxになるようにアニメーションが始まる。
• :hoverの状態が解除されると、margin-leftが0になるようにアニメーションが始まる。

何ができる？

• CSSだけでやれる範囲でいうと、上記のサンプルのように「:hoverになった時にぽわーんとなめらかに出てきて、:hoverが解除されたらぽわーんとなめらかに引っ込む」ようなGUI要素をスクリプト無しで書けるようになる、という所に意義がある。例を挙げると、以下のような物が該当するだろう。
  • :hoverの時だけ出っ張るメニュー項目が、なめらかに出っ張る/引っ込むようになる、とか。
  • :hoverすると色が変わるボタンが、「じわっ……」と色が変わるようになる、とか。
  • :hoverで影が付く時に、「じわっ……」と影が濃くなる、とか。
  • メニューが透明な状態から「じわっ……」と表示されていく、とか。
  • アイコンが90°回転する時に回転がなめらかになる、とか。
• スクリプトと組み合わせて使う場合、トゥイーンのための実装が要らなくなる（ネイティブ実装に任せてしまえる）というのが多分最大のメリット。
  • ポジショニングやマージンの調整で要素の表示位置を変える時、単に新しい値（＝アニメーションの終了時点の値）を設定するだけでトゥイーンしてくれる。
  • CSSで初期値とdurationとイージング関数を指定しておいて、スクリプトで終了値だけを動的に指定する、という使い方。
  • CSSのクラスセレクタであらかじめいくつかの終了値のセットを定義しておいて、スクリプトでclassNameを書き換えて終了値を間接的に指定する、という使い方。
  • タイマーの管理が不要になるので、複数のアニメーションを同時に走らせる場合、アニメーションが全体的に軽くなると思われる。
• 既に前のアニメーションが行われている間にまた値を変更した場合、現在の時点の値からの変化になる。
  • アニメーションの中断と再開のための面倒なコードは不要。
  • 例えば、margin-leftが0であったのを、20pxを設定してアニメーションが始まり、20pxに向けて変化していっている最中の10pxの時点でmargin-leftを0に再設定した場合、前のアニメーションが中断されて、新たに10pxから0に向けて変化するアニメーションが始まる事になる。
  • スクリプトでも動的疑似クラスでも。

「Windows Vista以降のAero Glass有効時のネイティブアプリのボタンみたいな物をWebに簡単に持ち込めるようにする」「GUIの端々にほんのちょっとだけ小粋なアニメーション効果を加えたい時に、スクリプトを書かなくてもよくなる」という話ですね。それ以上でもそれ以下でもないと思っておくと、CSS Transitionsを理解しやすいと思います。

何ができない？

• テレビアニメのような、長くて複雑なアニメーションは無理。滅茶苦茶頑張ればできるかもしれないけど、CSS Transitionsの仕事ではない。
• アニメーションと連動したスクリプトの複雑な制御。
  • アニメーション終了時にはDOM Level2 Eventsのイベントリスナで捕捉可能なtransitionendイベント（WebKitではwebKitTransitionEnd）が発行されるので、アニメーションの終了だけは検知できる。
  • それ以外のタイミングではイベントは発行されない（アニメーションが始まったかどうかも分からない）。
• 無限に繰り返すアニメーション。
  • ループするアニメーションのデモではスクリプトと組み合わせていて、transitionendイベントを使ってその都度新しい「アニメーション終了時点の値」を設定し直してやることで、アニメーションを繰り返している。CSS Transitionsだけではループはできない。
• どんなプロパティでもアニメーションできるわけではない。仕様書（のWorking Draft）にアニメーションできるプロパティの一覧がある。

書き方

transition:
    アニメーションさせたいプロパティの名前
    アニメーション終了までにかける時間（省略すると0）
    イージングの種類（省略するとease）
    アニメーションが始まるまでの遅延（省略すると0）;

これで1セットと考えると分かりやすい。複数のプロパティをアニメーションさせたい時は、

transition: margin-left 1s ease;
transition: margin-top 1s ease;

とは書けないので、カンマ区切りにして

transition: margin-left 1s ease,
            margin-top 1s ease;

と書く。

アニメーション終了までにかける時間はCSS3 Values and Unitsの時間の値で指定する。例えば250ミリ秒で完了させたい時は250ms（ミリ秒単位）または0.25s（秒単位）と書く。アニメーションが始まるまでの遅延も同様。

イージング関数（値の変化の仕方）には、以下のいずれかを指定できる。

linear

等速直線運動的な変化

ease-in

最初はゆっくり、最後にいくにつれて激しく変化

ease-out

最初は激しく、最後にいくにつれてゆっくり変化

ease

ゆっくり始まって、途中で最高速になり、最後はまたゆっくり変化

ease-in-out

easeをもう少しきびきびさせたような感じ

cubic-bezier()

ベジェ曲線でアニメーションの変化の仕方を指定

• linear
• ease-in
• ease-out
• ease
• ease-in-out
• cubic-bezier(0,1,1,0)
• cubic-bezier(0,0.2,1,0.5)

現状ではまだ仕様が固まっていなくてどのベンダも先行実装の段階なので、ベンダープレフィクス付きの指定を書いてやらないといけない。

-webkit-transition: SafariとGoogle Chrome用の指定;
-moz-transition: Firefox用の指定;
-o-transition: Opera用の指定;
transition: 仕様通りの指定;

CSS TransitionsがRecommendationになったら、ベンダープレフィクス無しの記述だけでいけるようになるはず。

独自の文書型宣言を含めつつエラーを出さない方法（XHTML 1.1でXMLとして他の名前空間の要素を組み合わせて使いたい人向けの話） - Mar 17, 2010

僕はXHTMLのルビ（小さな字で読み仮名をふったりするアレ）を使いたくてXHTML 1.1を選択してるんですが、過去にXHTML2で検討されてたl要素（パラグラフより細かい単位の「行」を示すための物）やiframeやなんかをどうしても埋め込みたくなって、しかしそのせいでバリデータでエラーが出てしまうのも嫌だったので、見よう見まねで頑張って独自の文書型宣言を書いてみたんですよ。いつやったのか忘れたけど、結構前に。

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" [
    <!ENTITY % XLINK.xmlns.attrib "xmlns:xhtml2 CDATA #FIXED 'http://www.w3.org/2002/06/xhtml2'">
    <!ENTITY % Inline.extra "| xhtml2:l | iframe">

    <!ELEMENT xhtml2:l (#PCDATA|br|span|em|strong|dfn|code|samp|kbd|var|cite|abbr|acronym|q|sub|sup|bdo|a|img|map|object|input|select|textarea|label|button|ruby|ins|del|script|noscript|xhtml2:l)*>
    <!ATTLIST xhtml2:l 
      id    ID    #IMPLIED
      class CDATA #IMPLIED
      style CDATA #IMPLIED
      title CDATA #IMPLIED>

    <!ELEMENT iframe (#PCDATA|br|span|em|strong|dfn|code|samp|kbd|var|cite|abbr|acronym|q|sub|sup|bdo|a|img|map|object|input|select|textarea|label|button|ruby|ins|del|script|noscript|xhtml2:l)*>
    <!ATTLIST iframe
      id    ID    #IMPLIED
      class CDATA #IMPLIED
      style CDATA #IMPLIED
      title CDATA #IMPLIED
      longdesc     CDATA               #IMPLIED
      src          CDATA               #IMPLIED
      frameborder  ( 1 | 0 )           '1'
      marginwidth  CDATA               #IMPLIED
      marginheight CDATA               #IMPLIED
      scrolling    ( yes | no | auto ) 'auto'
      height       CDATA               #IMPLIED
      width        CDATA               #IMPLIED
    >
]>

CGIを使ってIEにはこの文書型宣言を出さないようにしてますが、FirefoxとかChromeとかでトップページあたりを開いてソースを見れば、こういうのが頭にくっついてるのが分かると思います。

で、バリデータ的にはこれでvalidになったのでめでたしめでたしだったんですが、GeckoのDTDパーサ部分にバグがあるらしくて、この文書型宣言を正しく解釈してくれないんですよね。最後の]>ではなくその前の>の部分で文書型宣言が終わったものと見なされてしまうせいで、Firefoxでこのサイトのページを開くと、ページの頭に謎の]>という文字列がくっついてしまう状態になってたのです。表示が崩れるのが嫌だったので、この]>がテキストノードとしてページの頭に存在してる時は動的に削除するようなJavaScriptを書いて、長らくごまかしてました。

そしたら先日、W3CのHTML5のルビに関する議論の中で紹介されてたXHTMLルビサポートのページを見たという方（Leif Halvard Silliさん）がメールを下さいまして、以下のようなハックを使えばページの頭に謎の]>が出てくる事を防げるよ、と教えてくれたんです。

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" [
    <!ENTITY % XLINK.xmlns.attrib "xmlns:xhtml2 CDATA #FIXED 'http://www.w3.org/2002/06/xhtml2'">
    <!ENTITY % Inline.extra "| xhtml2:l | iframe">

    <!ELEMENT xhtml2:l (#PCDATA|br|span|em|strong|dfn|code|samp|kbd|var|cite|abbr|acronym|q|sub|sup|bdo|a|img|map|object|input|select|textarea|label|button|ruby|ins|del|script|noscript|xhtml2:l)*>
    <!ATTLIST xhtml2:l 
      id    ID    #IMPLIED
      class CDATA #IMPLIED
      style CDATA #IMPLIED
      title CDATA #IMPLIED>

    <!ELEMENT iframe (#PCDATA|br|span|em|strong|dfn|code|samp|kbd|var|cite|abbr|acronym|q|sub|sup|bdo|a|img|map|object|input|select|textarea|label|button|ruby|ins|del|script|noscript|xhtml2:l)*>
    <!ATTLIST iframe
      id    ID    #IMPLIED
      class CDATA #IMPLIED
      style CDATA #IMPLIED
      title CDATA #IMPLIED
      longdesc     CDATA               #IMPLIED
      src          CDATA               #IMPLIED
      frameborder  ( 1 | 0 )           '1'
      marginwidth  CDATA               #IMPLIED
      marginheight CDATA               #IMPLIED
      scrolling    ( yes | no | auto ) 'auto'
      height       CDATA               #IMPLIED
      width        CDATA               #IMPLIED
    >
<?parser-hack ><!-- ?>
]>
<!--><?!-->

強調箇所がそのハック。処理命令（PHPのコード片を埋め込んだりするのに使うのと同じ奴）の記法でコメントとして解釈できる文字列を埋め込んで、問題の部分を無視させるという物のようです。バリデータに通しても、これでもvalidです。素晴らしいです。

同じような事をやってる酔狂な人がもしいたら役立てて欲しいと思ったので、氏に許可を得てエントリにさせて頂きました。Thanks a lot, Leif!

文法的な解釈

何故これがvalidなのかも考えてみよう。

<?parser-hack ><!-- ?>

• この行は、これ自体で1つの処理命令となる。
  • 処理命令は <?ターゲット名 任意のUnicode文字?> という書式なので、これはあくまで「><!-- という内容」を含んだ処理命令として解釈される。
• 文書型宣言の定義では、[から]までの間に登場しうる内容として処理命令も含まれている。そして、上記の箇所は一つの完結した処理命令である。よって、文書型宣言中に登場しても何ら問題ない。

<!--><?!-->

• この行は、「><?! という内容」を含んだコメントと解釈される。

という具合で文法的には何も問題ないので、W3Cのバリデータはこれをvalidと判断する。きちんとXMLパーサを実装しているブラウザ上でも同様です。

Geckoの解釈

一方、Geckoの解釈はどうか。これは「ソースを表示」での色分けを見るとよく分かる。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" [

Geckoはまず、この部分だけで完結した文書型宣言と認識する。「[」で終わりと判断したのではなくて、その次の <!ENTITY が来た時点で「あ、もう文書型宣言は終わってたのね」と見なしてるようだ。

<!ENTITY ～>

<!ELEMENT ～>

<!ATTLIST ～>

この辺はすべて、それぞれ別々の宣言として解釈されている。という事で、

]>

何もハックをしない場合はこの部分だけが取り残されてしまって、Gecko的にはこれが「XML的には不正だけどSGML的にはアリ」なテキストノードとして扱われて、ゴミとして表示されてしまうわけだ。

では、ハック有りの場合はどうなるか。

<?parser-hack ><!-- ?>
]>
<!--><?!-->

Geckoはこれを3つのノードとして解釈している。

<?parser-hack >

まずGeckoは、これを1つの処理命令と判断する。XMLの仕様では ?> が来るまで処理命令の終わりにはならないんだけど、Geckoのパーサは > で処理命令が終わったものと見なしてしまう。

<!-- ?>
]>
<!-->

これは当然1つのコメントになる。

<?!-->

最後、これも <? から > までで1つの処理命令と見なされる。

という事で、ハック有りの時はどの文字もテキストノードとして取り残されずに済むので、画面上は何もゴミが表示されずに済む。

こんなのよく考えるなー、と、読み解いてみて改めて感心しました。

カード配り問題 - Dec 16, 2009

10分プログラミング - hogehogeを見て、10分でコーディング｜プログラミングに自信があるやつこい！！に挑戦してみました。

結果。コーディング（と検証）だけで6分くらいかかりました。しかもエレガントでもなんでもありません。

function Cards() {
}
Cards.prototype = {
  deal : function(aPlayers, aDeck)
  {
    var result = [];
    for (var i = 0; i < aPlayers; i++)
      result.push('');
    aDeck
      .split('')
      .slice(0, aDeck.length - (aDeck.length % aPlayers))
      .forEach(function(aCard, aIndex) {
        result[aIndex % aPlayers] += aCard;
      });
    return result;
  }
};

var c = new Cards();
alert(c.deal(4, "123123123"));

クラス名がどうとか書いてあったから馬鹿正直にそれに従ってしまったし。

追記。いかん、人数よりカード枚数が少ないときの考慮が足りてなかった。修正した。

parseTemplate() の引数で渡すオブジェクトのプロパティをテンプレート内のコード片で普通の変数として参照したい - May 20, 2009

前書き

PHPとかerbのようなテンプレートをJavaScriptで。という話に書いたやつの続き。

大切な事なので3回言います。
<% for (var i = 0; i < 3; i++) { %>
  今日は<%= today %>です。
<% } %>
オーケー？

こういう文字列をテンプレートとして解釈したい場面は多分よくあると思う。この例だと、todayという変数をどっか外部から与えて値を埋め込むことになる。で、この変数をどうやって渡したらええねん、と。

解1：グローバル変数を使う

グローバル変数をがんがんに使って構わないのであれば、先にグローバル変数としてtodayを定義しておけばいい。eval()で実行されるコードの中からも普通に参照できる。

しかしアドオンのコードのように、個々のグローバル関数やグローバル変数の寿命が長い事が予想されるスクリプトでは、この手は使えない。

解2：テンプレート内に書くコード片にthis.を付ける

parseTemplate()の仕様としてはあくまで「書かれたコード片は第2引数で渡されたオブジェクトをthisとして実行されます」という風にしておいて、テンプレート風に書かれている方の文字列内のJavaScriptコード片では必ずthis.todayという風に書くようにする、という方法もある。

しかしいちいちthis.を付けるのは面倒だし、そもそも僕がこのような記法を知ったきっかけであるERBでは、self.なんて書く必要がなかった。同じような物は同じように使えた方がいい。なのでこの方法も使いたくない。

解3：varで宣言し直す

先のエントリに当初書いていたコードでは、parseTemplate()の第2引数で渡したオブジェクト（ハッシュ）のプロパティを走査してそれをvarで変数として宣言し直す、ということをしてた。外の名前空間をなるべく汚さないための苦肉の策だ。

  if (aContext && typeof aContext == 'object') {
    for (var prop in aContext) {
      if (!aContext.hasOwnProperty(prop)) continue;
      __parseTemplate__codes.unshift('var '+prop+' = aContext.'+prop+';');
    }
  }

こんな感じ。

でも、これだとエラーになりそうな場合がけっこう考えられる。例えばハッシュのキーが01234という文字列だと、実行されるJavaScriptのコードはvar 01234 = aContext.01234;となってしまい、eval()にかけた時点でSyntaxError: missing variable nameと怒られてしまう。

なので、こういうエラーの元になる名前のプロパティを除外して、安全な物だけをvarで宣言する、ということをやりたかった。言い換えると、そのプロパティの名前を構成している文字列がJavaScriptの識別子として妥当かどうかを判別したかった。

ということでやっと、このエントリの本題に入る。

続きを表示する ...

PHPとかerbのようなテンプレートをJavaScriptで。 - May 19, 2009

UxU 0.5.11に入れ損ねた。次版で標準のヘルパーメソッドに入れるけど、割といいかげんな実装で、たいした規模じゃないから、テストケースの中に直接書いて使ってもいいと思う。

function parseTemplate(aCode, aContext) {
  var __parseTemplate__codes = [];
  aCode.split('%>').forEach(function(aPart) {
    var strPart, codePart;
    [strPart, codePart] = aPart.split('<%');
    __parseTemplate__codes.push('__parseTemplate__results.push('+
                                strPart.toSource()+
                                ');');
    if (!codePart) return;
    if (codePart.charAt(0) == '=') {
      __parseTemplate__codes.push('__parseTemplate__results.push(('+
                                  codePart.substring(1)+
                                  ') || "");');
    }
    else {
      __parseTemplate__codes.push(codePart);
    }
  });
  var __parseTemplate__results = [];
  with(aContext|| {}) {
    eval('(function() { '+__parseTemplate__codes.join('\n')+' }).call(aContext|| {})');
  }
  return __parseTemplate__results.join('');
}

var source = <![CDATA[
      大切な事なので3回言います。
      <% for (var i = 0; i < 3; i++) { %>
        今日は<%= today %>です。
      <% } %>
      オーケー？
    ]]>.toString();
var params = {
      today : (new Date()).toString()
    };
var result = parseTemplate(source, params);

レガシーだけどクロスブラウザな書き方だったら、こうか。

function parseTemplate(aCode, aContext) {
  var __parseTemplate__codes = [];
  aCode = aCode.split('%>');
  var strPart, codePart;
  for (var i in aCode) {
    aCode[i] = aCode[i].split('<%');
    strPart = aCode[i][0];
    codePart = aCode[i].length == 1 ? null : aCode[i][1] ;
    __parseTemplate__codes.push('__parseTemplate__results.push(unescape("'+
                                escape(strPart)+
                                '"));');
    if (!codePart) continue;
    if (codePart.charAt(0) == '=') {
      __parseTemplate__codes.push('__parseTemplate__results.push(('+
                                  codePart.substring(1)+
                                  ') || "");');
    }
    else {
      __parseTemplate__codes.push(codePart);
    }
  }
  var __parseTemplate__results = [];
  with(aContext|| {}) {
    eval('(function() { '+__parseTemplate__codes.join('\n')+' }).call(aContext|| {})');
  }
  return __parseTemplate__results.join('');
}

var source = '大切な事なので3回言います。\n'+
             '<% for (var i = 0; i < 3; i++) { %>\n'+
             '  今日は<%= today %>です。\n'+
             '<% } %>\n'+
             'オーケー？';
var params = {
      today : (new Date()).toString()
    };
var result = parseTemplate(source, params);

Adobe AIRでMigemo - Nov 25, 2008

AIRMigemoというライブラリがあることをリファラで知った。AIRアプリにMigemo検索機能を組み込むのに使えるということだろうか。でもライセンスが分からない……

肝心の正規表現の生成処理は、かなり真面目にやってるような印象。XUL/Migemoの現在の実装は長い文字列の一括置換と分割とソートによる擬似的な物なので、「短い入力で長い単語にマッチさせる」という元のMigemoの特徴の一つを損なうことなく持っていると考えられる。

MochiKitのテスト機能 - Jul 15, 2008

MochiKit見てみた。

これも基本はやっぱりユニットテストに特化した感じかなあ。少なくともGUIのテストは意識してないか……

仕事でFirefoxの拡張機能をやるという事になったときに最初に須藤さんに「拡張機能のテスト用フレームワークってあるの？」みたいな事を聞かれて、それでMozUnitに辿り着いたんだけど、その時の僕にはまだ自動テストとかテスト駆動開発という物がどういうものかよく分かってなかった（今もまだよく分かってないかもだけど）。今思うと、その時僕が思ってた「自動テストって、こういう事をしなきゃいけないのかな？」というのは、開発者世界の常識的には相当ワガママな要求をイメージしていたようで、普通は「自動テスト」「ユニットテスト」というともっと低レベルの、あくまで部品単位の品質を高める物という認識でよかったみたいだ。それを知らずに僕はSeleniumのGUIアプリ用版みたいなのをイメージしてたから、「そんなの無理ッスよ……」と勝手に諦めムードになってた。とはいえ、その勘違いが無ければここまで意地になってUxUに手を入れまくる事もなかっただろうしなあ。