ハブろぐ - havelog.ayumusato.com

SlimでIE条件付コメント的なHTML要素を出力

あほむ — Wed, 25 Jan 2012 09:42:22 +0900

Rubyしてます！

SlimはRubyのテンプレートエンジンです．

Padrinoが対応していたので使ってみている．RubyMineが対応していないのが惜しいので，add slim templating support : RUBY-6967にvoteしておいた．

んで，冒頭のタイトル通りIE条件付コメントなHTMLを，なんとか出力できたのでスニペットのシェアを兼ねてメモエントリ．以下の例示はHTMLの冒頭部分のみです．

Slimテンプレート

以下のようにSlimテンプレートに記述しました．

doctype 5 /![if lt IE 7]>

素直にSlimのhtml-conditional-commentsを使うと，その場でhtml要素が閉じられてしまうので，普通のhtmlコメントの記法を利用しています．

出力の結果

こうやって出力されました．

なんか気持ち悪いけどできた〜．

もうちょっとスマートに書ければいいのだけど難しそう．

JavaScriptの初見で読みづらいシンタックス＆パターン9種

あほむ — Tue, 10 Jan 2012 11:36:17 +0900

JavaScriptの暗部を感じるカオス

JavaScriptのライブラリを読み解いていると，「お前は何を言っているんだ状態」に陥ることがよくあります．難解なコードを通り越して黒魔術になるとついていけません…．

そんなコードリーディングをする中で，初見では意味が分からなかったり，分かりづらかったりした記法をまとめてみます．コードリーディングの一助になりますれば幸い．

eachな感じのループ×2

比較的簡単な類ですが，定石パターンなので一応．色々あると思いますが，自分がよく使う2パターンだけ紹介します．

var elms = [1, 2, 3],
    e,
    i = 0, 

while (e = elms[i++]) {
    // おぅふ
    // i -> 1
}

単純に配列から1個ずつ取り出すだけなら上記のような感じです．

var elms = [1, 2, 3],
    e,
    i = 0,
    iz = elms.length;

for (; i＜iz; i++) {
    e = elms[i];
    // おぅふおぅふ
    // i -> 0
}

iが大事ならforを使います．whileの例だと，ループ回るたびにすぐにiがインクリメントされますが，forの例ならブロック内のiはインクリメントされずに残るので．

たとえばi++と++iを使い分け始めると，それだけでも結構カオスですよね．基本的にはバッドパターンかもしれんのですが，自分しか手を入れないブツなら使ってしまう感じ．

文字列で呼び出すメソッド・プロパティを指定

これは結構，知った当初は目から鱗でした．理解するとまあ確かにというトコですが．

PHPだと$this->$method()とかやるようなアレと同じですね．

var obj = {};
obj.someFunc = function() { alert('func!'); };

var method = 'someFunc';
obj[method](); // 'func!'

プロパティなら後ろの () を無くすだけです．

この例でメソッド・プロパティという呼び方が常に正しい感じはしませんが，便宜上で．

AND的に〜〜であれば，〜〜する

制御構文使わない分，ちょっとは速いのかな？

var ok = true,
    obj = {};

ok && (obj.prop = 'okらしいから代入するね');

OR的に〜〜でなければ，〜〜する

個人的にはコレのほうがよく使うかも．あるプロパティが未定義であれば，ホニャララを入れるよ，とか．

var obj = {};

obj.prop || (obj.prop = 'undefinedっぽいから代入するね');

「JavaScriptの初見で読みづらいシンタックス＆パターン9種」の続きを読む

2012年あけましておめでとうひつまぶし

あほむ — Sun, 08 Jan 2012 23:37:01 +0900

あけましておめでとうございます

あけましておめでとうござますということで，初詣とひつまぶし初めの写真をば．

どうでもよいですが，新年初のショックは，DefferedとDeferredのスペルを間違えていたことでした．後者が正解... lol

Deferredについては，Promises/AとかjQuery.Deferredって何 - Takazudo hamalogとかを見ていたのですが，実装と期待される動作を整理するので結構四苦八苦してるところです

熱田神宮

名古屋在住ですので，熱田神宮です．わりと毎年行ってるんですが，たびたびすげー人混みを並んで五円玉を投げ込むんですよね....

あー，すごい人･･･

なんだろうこの建物？

ひつまぶし初め

蓬莱軒行ったら，2時間半待ちという耐えがたい屈辱を味わったので諦めて，駅前の他のお店に流れました．十分おいしゅうございました．

同居人の分まで奢ることになっておりましたが，思わず特上ひつまぶし二人前という漢らしいオーダーを通してしまいました．

肝吸いまでついてます

特上ひつまぶしの輝き

ひつまぶしは，そのまま食べたり，薬味をあえたり，だし茶漬けにしたり，色々な食べ方をします．特上ひつまぶしはノーマルの1.5倍量のうなぎが乗っています．だからこそ，一杯一杯を贅沢にうなぎが乗った状態で頂けて幸せです．

贅沢するときはケチっちゃだめ

本年もよろしくお願い致します

今年はGitHubを充実させていきたい気もしつつ，よろしくお願い致しまする．去年の暮れからJS機運を高まらせまくったので，次はRubyしたい欲･･･．

年末年始でセレクタエンジンHayate.jsを書いてみた

あほむ — Thu, 05 Jan 2012 11:43:56 +0900

年末年始の課題

年末年始の合間を縫いつつセレクタエンジンを書いてみました．・・・なんか大仰な響きだけはしますね．例によってコンセプトの足りてない習作系の再発明品です．

いくつかのpseudoについて真剣に解決が見つからなかったり，サボったりしていますが，とりあえずSlickSpeed Selectors Testのデフォルトセットは通るようにしている（はず）です．

Hayate.js

バンダイチャンネルで某アニメを見ながら書き始めたので，こんな名前がついていますが，より多く作業中に見たアニメは僕は友達が少ないでした．ついついラノベ原作のほうも買ってしまいましたよHAHAHA...

振り返ると

学びとしては...

CSSでも普段つかっていなかったセレクタを振り返れた
だってCSS3のセレクタとかあんまり使いませんよね...
処理速度のシビアなチューニングを垣間見た
やり方ひとつで，1msになったり300msになったりおもしろい
正規表現のコストと向き合えた
ブラウザ間のCSSセレクタのサポート差違を調べられた
高速化を突き詰める深淵クラスタすごいと思えた

ぱっと見で，他の国産ライブラリと比べても精度・対応範囲に対してコード全体の行数がかさんでしまっているので，実用性についてはアレな感じですね．速度面で極端に劣ることはないようにしているつもり．

あとは，Sizzleみたいに独自pseudoとか，Selectors Level 4に対応したら面白いかな〜と思いつつコツコツ手を入れていく予定です．

大変なモンですね...

セレクタエンジンの再発明とか，暇人も甚だしい上に，このロジックの勘所を押さえたところで，滅び行く技術＆レガシーIEも消え去る運命っちゃ運命ですが...なかなか勉強になったとおもいます．

年末年始を楽しみつつですね

伊勢エビ惨殺したりとか

年を越すための必死そば

お取り寄せ系のおせち

海老をむさぼったり，そばをすすったり，おせち食べたり，雑煮つくったり，色々する中の時間で書いてました．

つきましては，明けましておめでとうございました m(_ _)m

車輪の再発明について〜オレオレライブラリとかフレームワークとか

あほむ — Tue, 27 Dec 2011 13:32:43 +0900

今年をしめくくる勢い

個人的に，今年はオレオレPHPフレームワークとオレオレJSライブラリの年として終わりそうなので，（たぶん）本年最後のブログとして少々つらつらと．

再発明の目的は？
仕事で使うの？
趣味で使うの？
実用に耐えるの？

とか色々と，オレオレと車輪の再発明については諸々の議論もありますし，個々のポリシーもあると思います．そのへんはさておき，今回は主に自分自身が感じたメリットなんかを振り返ってみます．

仕入れた知識を蓄積できる

実はこれが一番大きくて，思わぬ効用だったのですが．

初めて知った仕様を試しに実装してみてノウハウを定着させたり，一般的問題のスマートな解決法を仕入れたらそれを反映させたり，今までの経験と知識のコレクションとして役割を果たしてくれました．（そういう視点で見られちゃうとむしろ恥ずかしいんですが）

以前は新しい情報もブックマークするぐらいで，手を動かす動作にはなかなか繋がりませんでしたが，オレオレプロダクトが実践のハケ口になってくれるようになってからは，実際のコードに落とし込む機会が増えました．

色々しらべるキッカケになる

オレオレとは言えども，フレームワークやライブラリの体裁を成してみようと思うと，余所のプロダクトの設計・実装は気になるものです．

これが普段なかなか触れる機会(気合)のなかった，他のプロダクトのコードリーディングに繋がります．コードリーディングの重要性は余所でも説かれていますが，ここでは読めば何かしら勉強になるよね，という端的なメリットとして挙げます．

他のプロダクトを理解しやすくなる

前項からつながる話ですが，色々な実装やら一般的問題について検証する過程と，実際に自分なりに考えてみる過程で，いろいろな経験を得られます．

この経験があると，他のプロダクトを使ったときにも実装の意図を読みやすくなるので，使いこなしレベルが幾らか向上します．少なくともブラックボックス状態（ハマったらハマりっぱなし状態）を脱することは容易になるでしょう．

インプットとアウトプットのサイクル

総じて，オレオレライブラリとかフレームワークというのが，自分にとってはインプットとアウトプットの軸になってくれました．

実業務で使ったり，自作サービスを作ったりをしていないので，実用性については机上のなんちゃら系ではありますが，一定の学習効果は得られたのかなぁと思います．

サービス考えるより，オレオレのおもちゃを地味にいじくり回すのが好きという性癖に依るところもあるので向き不向きもですね．

とはいえ，来年は他のプロダクト使ったりして，何か形になるものを作る気運を高めたいな〜と考えてます．

Ah

MVCになれなかった，オレオレフレームワークの発端．

ahomu/Ah - GitHub

世間のMVCなフレームワークを（いまだに）マトモに使ったことがないから，自分で習作してみようという変な試みから生まれて，結局MVCでないナニカになりました．

すべてのActionをWebAPIみたいに，リクエストパス・メソッド・パラメーターの3セットを伴ってやり取りする設計です．Actionは処理単位と考えてもらったらOKです．詳しくはGitHubのほうへ．

データプロバイダーとして，リクエストを受けてデータを返すことを専業にするつもりで作られています．フロントエンド側で画面遷移とかビューを制御して，データだけサーバーに取りに行く感じ．

全体としては，単純なリクエスト制御（ルーティングというほど賢くないかも）と処理単位の設計を提供してるだけなので，フレームワークというには随分ゆるい．データベースやテンプレートエンジン周りのドライバ，セッション機構などは用意してないので，かなり薄っぺらい作りです．

というか，そこまで手を回す前に熱が引いてしまっただけなんですが…PHPTALのドライバと薄っぺらいPDOラッパーでも書けばいいかなと思ってます．

Clayworks

jQueryしか書けなかったので，オレオレライブラリでJS覚えよう作戦．

ahomu/Clayworks - GitHub

特にユースケースを考えずにつくってしまった無鉄砲なライブラリですが，目標は世間のライブラリが平然とやっていることを自分で実装して勉強してみることです．

で，現状は一般的な機能のクロスブラウザ実装と，jQueryっぽくなるかならないかの境界で迷走していて特に特徴づけされていません．強いて言うなら「黒魔術感がないと思うのでJavaScript詳しくないひとでも幾らかコードリーディングしやすいんじゃないかな〜？」というぐらい．

今後は前述のAhとの兼ね合いを考えて，Clayworks側にウィジェット（画面構成物）単位のテンプレート管理だとかサーバーコミュニケーションの機構を充実させていけたらなぁ，とかぼんやりと考えています．

AhとClayworksの2つを組み合わせることでWebアプリ向けソリューションになる…かもしれない．まあ，きっと1人だと完成しないんですけどｗ　何かない限りは今後も一人遊びです．

あと，サブパッケージでCSS4(!)までの対応を目標に，セレクタエンジンを再発明してみようかな…とか．

そんなかんじで

今年を振り返ってみるとこんな感じですね．jQueryMobile特需が...笑

1〜3月: 開発全般への熱が高まる・Ahを作り始めた頃
4〜6月: Node, Titanium熱が高まる・ブログが元気
7〜9月: jQueryMobile・ブログ更新頻度が減退（業務量と反比例）
10〜12月: 続jQueryMobile・続ブログ減退・Clayworksに手を付けたところ

年度末にはいつぞや立てた言語別学習方針の振り返りでもしてみましょうかね．

とりま，来年もよろしくお願いします．

Firefox3.6あたりで取得したinnerHTMLにxmlnsが付いてきた

あほむ — Tue, 27 Dec 2011 13:18:38 +0900

サンプル

タイトルの通りです．Firefox3.6あたりで実行すると現象を確認できると思います．3.6あたりという曖昧な表現なのはそんな正確に調査してないからです．X-(

あるインライン要素の中に，テキストを伴うブロック要素をinnerHTMLで突っ込むと，テキスト部分が自動でxmlnsつきのインライン要素でラップされるみたい．

どうやらappendChildなら発生しないようなので，innerHTMLに値をセットしたときに処理が入ってるんでしょうかね．

今回確認した出力結果

それぞれ，インライン要素に対してブロック要素をinnerHTMLで足した場合と，appendChildで足した場合です．


インライン1号 innnerHTMLで足すの中にブロック要素を入れてみる


インライン2号 appendChildで足すappendChildしてみる

インライン要素といってもspan要素はセーフで，a要素とかstrong要素とかem要素は一通り再現したのでよく分からない感じ...ひとまず備忘録ということで．

JSでフォームの入力値をobjectにして取得するよ

あほむ — Mon, 26 Dec 2011 20:03:41 +0900

ちょっちメモ的に

軽い気持ちで書いてたら，思ったよりぐんにょりした仕様が多かったのでメモ的にエントリ．てきとーにgistで貼り付けてみたり．

form.elementsにINPUT[type='image']な要素が含まれない

HTMLFormElement#elementsにはtype="image"のinput要素は含まれない - rikubaの日記

oh…歴史的な理由て．

form.elementsにFIELDSET要素が含まれる

今回は判定しないので単純に無視してます．さらにfieldset.elementsにはFIELDSET要素以下の子要素が含まれます．まとめてコントロールするときには何か使えるかも．

multiple属性のついたSELECT要素の扱い

multiple属性が有効であっても，name属性がvars[]のようになっていなければ，一番最後のselectedな要素の値を送信します．

よって，他と同様にisAryのときだけmultipleとして扱って，子のOPTION要素を走査しています．

valueなしのOPTION要素の扱い

option要素にvalue属性が指定されていないとき，中のテキストがデータとして扱われるはず．


→ select.value === 'valueあり'


→ select.value === 'ないよ'

上記のような感じですね．しかし，IE6〜8ではselect.valueから値を取得できず，IE6〜7ではoption.valueでも取得できません．

と

これらの区別が付きづらそうだったので，とりあえず対応しないことにしてます．スマートに判別できるのかな…

おまけ.fieldset要素のdisabled属性

HTML5 - The fieldset element

上記を見ると，fieldsetのdisabled属性がtrueの場合に，中に入ったコントロール類はすべて無効になるとされていますが今回は仕様外としています．

有効: Firefox 8 (Mac), Opera 11.6 (Mac)
無効: InternetExplorer 9, Safari 5.1 (Mac), Chrome16 (Mac)

手元でさらっと見てみた感じだと，上記のような対応状況でした．

背景色をrgbaとrgbで2重指定するときのIE地雷

あほむ — Wed, 21 Dec 2011 11:21:06 +0900

はじめに結論

CSSで背景に透過色を指定する際に，本来のrgbaとIE6-8用のrgbを2重で書いたりしますが，うっかりハマるポイントがあるので紹介．

結論から言うと背景プロパティは，background-colorではなく，backgroundを利用しましょう，ということになります．

Goodパーツ

こう書くことを鉄の掟としておけば，特にハマることはないとおもいます．きっと．

.someClass {
  background: rgb(128,128,128); /* または background-color: rgb(128,128,128); */
  background: rgba(128,128,128,0.8);
}

両方ともbackground指定にしておけば覚えやすくて安全ですが，rgb側はbackground-colorでも大丈夫です．

Badパーツ

こうやるとIE6-8で背景色がうまく適用されずに撃沈します．

.someClass {
  background-color: rgb(128,128,128);
  background-color: rgba(128,128,128,0.8);
}

両方ともbackground-colorにすると，IE6-8で背景色が設定されていない状態になります．

IE6-8でrgbaが解釈できないときに，前のrgbの指定も壊してしまうんでしょうかね．とどのつまりお馴染みのIE地雷なので，そういうものだと割り切りましょう．

新発見でした

個人的にbackgroundプロパティばっか書いていたので，この細かいところは気づいてませんでした(;´-`)　今回は仕事案件でIEが悲鳴をあげていたので気づいた次第．

余談: この地雷がIE8では修正されてるというような情報もあったのですが，手元のWin7+IE8(v8.0.7601.17514)では同様の症状が再現されました．IE8にも影響すると思っておいたほうが安全そうです．

jasmine-jqueryというかloadFixturesが便利

あほむ — Fri, 16 Dec 2011 09:54:13 +0900

beforeEach内でDOMをちまちまやるのが面倒

なんですよ．例えばですが乱暴にゴチャゴチャと書くと...

describe('Some test case....', function() {
    var testDiv, testList, attrTest, insertTest;

    beforeEach(function() {
        testDiv = document.createElement('div');
        testDiv.innerHTML = 'test';
        document.body.appendChild(testDiv);

        testList = document.createElement('div');
        testList.innerHTML = 'BASELINE';
        document.body.appendChild(testList);
    });

    it("insertTest parent is testList", function() {
        expect(insertTest.parentNode).toBe(testList);
    });
});

こんな風にcreateElementとかして要素を作って下ごしらえすると，どうにも見栄えがよくなくなりがちです．というか整理しづらい...

たまたま見つけたjasmine-jquery

Railsの話だったのですが，たまたま見つけたページに，なんだかステキな記述を発見

Jasmine-jqueryは、名前が示す通りJasmineのjQuery用機能拡張です。これがfixtureサポートを提供しているので、シンプルなHTML句に対してJavaScriptをテストすることができます。#261 Testing JavaScript with Jasmine - RailsCasts

あらステキ．

velesin/jasmine-jquery - GitHub

ここから取得して組み込みます．Downloads for velesin's jasmine-jqueryから，jasmine-jquery-1.3.1.jsを取得，そしてjquery本体も1.6.4を取得しおいて，SpecRunner.htmlに読み込みます．

loadFixturesで，別途用意したHTMLを対象にできる

HTMLと･･･



  element.html



    test


    BASELINE

JSが･･･

describe('Some test case....', function() {
    var testDiv, testList, attrTest, insertTest;

    beforeEach(function() {
        loadFixtures('element.html');
        testDiv    = document.getElementById('testDiv');
        testList   = document.getElementById('testList');
    });

    it("insertTest parent is testList", function() {
        expect(insertTest.parentNode).toBe(testList);
    });
});

分離されます．やってみると当たり前な感じもする使い勝手です．

これだけ見ると，jQueryの必要すらあんまりない気もしますが，他にもmetchersが拡張されているので何かと便利な感じの拡張です．テスト対象のコードもjQueryを使ってるともっと相性いいのかも．

constructorのおなまえとprototype拡張でうっかり

あほむ — Fri, 16 Dec 2011 09:54:06 +0900

prototype拡張時のうっかり

今まであまり意識していなかったこともあり，最初？？？な挙動だったので念のためメモ．

なんでコイツはnewしたあとに，constructor.nameがObjectになってしまうのかしら，という疑問が発端．

protototypeに直接オブジェクトを代入していた

わりと自然にミスしてました．

function Hogehoge() {
    // some logic
}

Hogehoge.prototype = {
    prop      : 123,
    method : function() {}
};

console.log(new Hogehoge().constructor.name);
// -> Object

prototypeにObjectをガッツリ代入してました…prototypeがconstructorになるんですね．

実際はHogehoge.prototypeにObjectを代入してもHogehoge自体は元の関数なせいか，newできますし，その中のロジック＋prototypeに突っ込まれた分のメソッドも問題なく動作します．

パッと見で普通に動作してしまったので，constructorだけなぜObjectなのか気づくの遅れました･･･

正しくはこう

ですね．

function Hogehoge() {
    // some logic
}

Hogehoge.prototype.prop = 123;
Hogehoge.prototype.method : function() {};

console.log(new Hogehoge().constructor.name);
// -> Hogehoge

ばっちりです．

オブジェクト合成的なアレ

Hogehoge.prototype.XXX = YYYを繰り返すのは記述的にアレなので，下記のように消極的なオブジェクト合成的なアレを挟みます．

function fill(base, ext) {
    var k;
    for (k in ext) {
        if (ext.hasOwnProperty(k)) {
            k in base || (base[k] = ext[k]);
        }
    }
}

function Hogehoge() { }

fill(Hogehoge.prototype, {
    prop   : 123,
    method : function() {}
});

console.log(new Hogehoge().constructor.name);
// -> Hogehoge

見栄えもすっきり〜．