typeOf 'aki_mana'

陥没「地下鉄の延伸工事が原因」市が謝罪って、それはチョット違うだろ。

個人的に「都市部の地下水脈を誰も知りえなかった」てのが正論な気がするし、
誰かに責任を負わせる思考しかない現代社会の闇が最大の悪だと思った。
原因は、「認識されていなかった地下水脈の存在が確認された」事故だと思う。

菅官房長官が発したコメントは「延伸工事に際して出水した為、工事を中断した」とあるんだよね。
「都市という人口構造物内部で起こった自然災害が地下水の出水」でしょ。

なのに、「工事そのものに原因があった」ような報道とか…。

もうちょっと考えろ(呆れ


あえてリンクしたけど
原因究明や
謝罪してる暇があったら、
対策を示せや
と思った。


都市機能を回復させる順番として、素人でも思いつくのは、

とにかく、ガスを止めること
じゃね?


停電よりも先にしないとダメなのはスイッチ操作で発生しうるスパークが引火の原因になるから。
そういう意味では「停電していたのは都合がよかった」のでは?
ご老人が暗くて軽症を負ったという報道。不幸中の幸いでしょ。
電気が生きてたら、爆発で亡くなってるかもしれないのだから。
とにかく、更なる被害を防ぐためにも、引火原因のガスを止めるべき。

それから、電気の復旧、対策工事を進められるように
下水本管に流れるあらゆる施設の利用禁止とか。

報道されてヤバいのがわかってるのだから、常識的な国民は協力するにきまってるじゃんw
レガシーな報道機関もそういう意味では役に立ってると思うんだけど…。

ミスリードは要らねーからw




CSSセレクタの表記で要素を生成したい。

フォーマットはこんな感じ
<要素セレクタ><idセレクタ?><classセレクタ?><属性セレクタ?>

<要素セレクタ> : 要素名で必須
<idセレクタ> : # で始まる id属性値
<classセレクタ> : .class1.class2.class3 (複数持たせる場合はスペースを空けずに記述)
<属性セレクタ> : [attr1=val1][attr2=val2][attr3] (複数持たせる場合はスペースを空けずに記述)



var createElementBySelector = function( selector ){
	var m
	,	elm
	,	reTag = /^([\w\d]+)(\x23[^\s\x2e\x3a\x3e\x5b]+)?/i
	,	reClasses = /\x2e[^\s\x2e\x3a\x3e\x5b\x5d]+/ig
	,	reAttrs = /\x5b[^\s\x3a\x3e\x5b\x5d]+\x5d/ig
	;
	if( selector ){

		if( m = selector.match(reTag) ){
			m[1] && (elm = document.createElement(m[1]));
			m[2] && (elm.id = m[2].substr(1));
			if( m = selector.match(reClasses) ){
				elm.className = m.map(function(v){return v.substr(1)}).join(" ");
			}
			if( m = selector.match(reAttrs) ){
				m.forEach(function( attr ){
					var kv = attr.match(/^\x5b(.+)\x5d$/)[1].split("=")
					,	key = kv[0]
					,	val = kv.length==1?key:kv[1]
					;
					// unquoted
					val = (val.match(/^"([^"]+)"$/)||[0,val])[1];
					elm.setAttribute(key, val);
				})
			}
			return elm; /// jQuery なら $(elm)を返す
		}
	};
	throw "invalid create selector, " + selector;
};




createElementBySelector('tag#id.class1.class2.class3[attr1="val1"][attr2="val2"][attr3]');
↓
<tag id="id" class="class1 class2 class3" attr1="val1" attr2="val2" attr3="attr3">




こんな要素生成方法は公開されてなかったと思う。



アイコンフォントの何たるかは今更なので割愛。

jQuery で動的生成。
class 属性にチマチマと書くのに飽きたとき作ったもの。


// @see tmlib.js
var format = function(fmt, arg) {
        var args, replacer;
        if (typeof arg == "object") {
            replacer = function(m, k) { return arg[k] || "{"+k+"}" }
        }
        else {
            args = [].slice.call(arguments,1);
            replacer = function(m, k) { return args[ parseInt(k) ]; }
        }
        return fmt.replace( /\{(\w+)\}/g, replacer );
    }
,   $createFAIcon = function( opts ){
        var fa = function(str){
                var v=str.match(/^(?:fa\-)?(.*)/)[1];
                return v ? "fa-"+v : "";
            }
        ,   $stack = $('<span>').addClass("fa-stack")
        ,   fmtIcon = '<i class="fa {0}" aria-hidden="true">' 
        ;
               
        if( typeof opts === "string" ){
            return $stack.append( format(fmtIcon, fa(opts ) ) );
        }
        else {
            $.each( opts , function(i, v){
                var $icon, a;
                // case: $createFAIcon.argument[0] is object
                if( "string" === typeof i ){
                    $icon = $( format(fmtIcon, fa(i)) ).appendTo( $stack )
                    switch( typeof v ){
                    case "string":
                        v = v.split(" ");
                    case "array":
                        $.each(v, function(i, s){
                            "string"===typeof s && (s = s.trim()) && $icon.addClass( fa(s) );
                        });
                    }
                }
                // case: $createFAIcon.arguments[0] is Array
                if( typeof i === "number" ) ;  // not implemented
            });
        }
        return $stack;
    }

使い方:



    $createFAIcon({
        "square": "stack-2x"
    ,   "twitter": "stack-1x inverse"
    }).appendTo( selector );


    <span class="fa-stack">
        <i class="fa fa-square fa-stack-2x"></i>
        <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
    </span>


jQuery オブジェクトで返却するので appendTo() する。
フロントエンドのフレームワークって、jQuery 同等の機能を埋め込んだものが殆どなので
まだまだ使える小技かと。


このネタ、モダンな CSS 設計には「古いブラウザの呪縛がある」現状を考えるためのもの。

CSS3 の 属性セレクタは正規表現にまで対応したりと多様な解釈を可能にするので、カスタムdata属性にポン!と固有の情報を持たせてしまえる時代に、クラス属性に数えきれないほどの情報を持たせなければならない(呪縛)。
多くのプロダクトにCSS2.1時代の名残りが色濃く残ってる(商用&広報をターゲットにしてるから、古いブラウザを意識するのは仕方ないんだけど…)。

Font Awesome に限らず、
jQuery UI や、他のフレームワークもそうなんだけど、class属性の編集が面倒くささは半端ない。


本気でシングルページアプリケーションを作る場合、そもそもJavaScript必須だし、テンプレート部分以外のHTMLの手書きって、ありえないんだよね。
アイコン一つにしても、フロントエンドで動的生成する手法が求められると思う。



HTML内の文字入力関連のフォームフィールド(textarea や input[type=text] など)をインライン表示するときに、
colorbox のキーバインドの実装のため、フォーム内入力操作で重要な左右の矢印キーが死ぬ。

なので、appendBindings() 内の if 文を書き換える。

//	if (open && settings.get('arrowKey') && $related[1] && !e.altKey) {
	if (open && settings.get('arrowKey') && $related[1] && !e.altKey
		&& !e.target.nodeName.match(/input|textarea/i)
	){






JavaScript標準の機能ではあるんだけど、可読性が悪くなるので使われない方法。

  • 比較演算子(&&, ||)はレフトハンドで字句解析される。
  • && による比較対象ステートメントの列挙は  false(イディオム:!1)で列挙の終端に抜ける
  • || による比較対象ステートメントの列挙は  true(イディオム:!0)で列挙の終端に抜ける
  • ()カッコで コンマを使えば任意のステートメントを列挙できる。
  • ()カッコで囲った複数ステートメントを比較対象ステートメントにするとき、最後のステートメントを比較対象ステートメントの評価値とする。
※終端に抜ける機能を使って緻密な制御構文を書き上げることができるのが比較演算子。

たとえば、RGB色空間とHSV色空間の相互変換 Javascript版(2010-09-03) で紹介されたコードスニペットを
if else や switch case の制御構文を必要最小限にすると、こうなる。



function RGBtoHSV(r, g, b, coneModel){
	var h // 0..360
	,	s // 0..255
	,	v // 0..255
	,	max = Math.max(r, g, b)
	,	min = Math.min(r, g, b)
	,	roundAngle = function(angle){
			for(;angle<0;)angle+=360;
			return angle % 360;
		}
	;
	((max == min) && ((h= 0),                               !0)) ||
	((max ==   r) && ((h= 60 * (g - b) / (max - min) +   0),!0)) ||
	((max ==   g) && ((h= 60 * (b - r) / (max - min) + 120),!0)) ||
	                  (h= 60 * (r - g) / (max - min) + 240)
	;
	h = roundAngle(h);
	(coneModel&&(s = max - min,!0))||(s=max&&((max - min)/max*255)||0);
	//v = max;
	//return [h,s,v];
	return [h,s,max];
}


function HSVtoRGB(h, s, v){
	if (s == 0) return (v = Math.round(v)),[v,v,v]; 

	var rgb // 0..255
	,	roundAngle = function(angle){
			for(;angle<0;)angle+=360;
			return angle % 360;
		}
	,	i,f,p,q,t
	;

	h = roundAngle(h),
	s /= 255,
	
	i = Math.floor(h / 60) % 6,
	f = (h / 60) - i,
	p = v * (1 - s),
	//q = v * (1 - f * s),
	//t = v * (1 - (1 - f) * s);
	// ビット演算が増えるが、ビット演算よりコストの高い他の演算回数を抑制。
	i&1 ? (q = v * (1 - f * s)) : (t = v * (1 - (1 - f) * s));

	return (
	(i==0 && [v, t, p]) ||
	(i==1 && [q, v, p]) ||
	(i==2 && [p, v, t]) ||
	(i==3 && [p, q, v]) ||
	(i==4 && [t, p, v]) ||
	         [v, p, q]
	).map(Math.round);
}


可読性を保つためにブラケットや演算子の前後で整形してるけど、ワンライナーにするとセミコロン(;)の行数に収まることが分かると思う
  • RGBtoHSV ... 5行
  • HSVtoRGB ... 4行


手作業でminify するならこの方法がツカエル!!

イネーヨ。そんなやつww


ちなみに、この方法を一部で採用されているのが、H2MD.js です。
有償ライブラリってことで直接触れるわけにもいかなかったのだけど、
色変換のコードで丁度いい教材があったので紹介。

可読性が悪くなる=プロプライエタリなJavaScript製品を作るなら積極採用せよ!とも考えられるのです。

このページのトップヘ