2014-03-20

FastClick適用下でのチェックボックスにおける問題

javascript

業務でデザイナーから受け取ったツールキットを取り込んだ際に、チェックボックスが期待通りに動かないからもしかしてFastClickのせいかなと思って調べたまとめ。

そもそもFastClickとは

スマホではダブルタップを判定するためにタップしてからイベント発火するまで300msの待ちがある。 FastClickはその待ちを消してタップが早く反応するようにするもの。

問題

例として以下のようなHTMLがあるとする。

<label>
  <div>
    <input type="checkbox">
  </div>
</label>

上のHTMLはのエリアをタップするとチェックボックスが反応することが期待されてる。しかしiOSにおいて期待通りの動きにならず、以下の対応もしてみたがiOS5/6/7のうち6/7は改善が見られなかった。

もしかしたらと思い、FastClick.jsを使わないようにしてみたらiOSでも動いたのでFastClickを調べてみた。

原因

FastClick本家にもissueが上がっていた。このissueの内容を見てみると以下のような場合において正常に動作するよう対応がされたぽい。

<label><input type="checkbox">Checkbox</label>

もしくは

<label for="checkbox1">Checkbox</label>
<input type="checkbox" id="checkbox1">

でもこの対応だとlabelタグの外側にinputタグを配置するか、labelタグの中に含める場合でも 1階層下までにinputタグがないといけないらしく、前述したHTMLのようにlabelタグから深い階層にinputタグがあるとうまく動かなかった。

で新たなissueが作られてて

この中では「深い階層でもいけるようにできるか調べてみるぜ！」的なことが当初言われてたあとに、「cssいじったら動いたしこっちのがコスト低いからcssいじってちょ！」っていう結論に至ってました。でどうcssをいじればいいかというと

label > * { pointer-events: none; }

ためしに上記のcssを前述のHTMLを使ってる画面に反映させてみたところ、見事に動きました。

結論

FastClickを使うのをやめる (一番簡単だけどできればしたくない)
cssに上述のやつを追加する
inputタグがlabelタグの 2階層以上深くならないようにHTMLを変更する

2014-02-21

DateFormat.js

javascript oss

Javascriptで日付を整形するのめんどくさい人向けにライブラリ作りました。（俺得）

例えば “1989年8月25日” みたいな日付を取得するためには以下のような感じになるかと思います。

var d = new Date('1989/8/25');

var year = d.getFullYear();
var month = d.getMonth() + 1;
var date = d.getDate();

console.log(year + '年' + month + '月' + date + '日');

いちいち変数に入れて無駄に行数増やしてる感はありますが、getMonth()で+1するのとかよく忘れます、はい。

上の例は1989/8/25固定でやってるから微妙ですが、例えばサーバから取ってきたタイムスタンプを特定のフォーマットにして表示したい時とか。

ということで今回このような日付のフォーマットを簡単にできるライブラリを作ってみました。

github.com

PHPのdate()みたいにフランクにフォーマットできるのを目指してます。

完全独立なグローバル関数でいいかなーとか、jQueryのプラグインにしてみようかなーとか最初は思ったんですが、

JavaScriptで日付使う時はまあDateオブジェクトだし、Dateオブジェクトのprototpyeにぶっこんじゃえーって軽いノリで実装しました。

こんな感じで使えます。

var d = new Date(1388599445000);

d.format('Y-m-d H:i:s');  //=> "2014-01-02 03:04:05"

d.format('n/j h:i')  //=> "1/2 3:04"

これを使った場合、最初の例は下のような感じで書けるようになります。

var d = new Date('1989/8/25');
d.format('Y年m月d日');

やってることはものすごい簡単で特定の文字を正規表現でreplaceしてるだけですね。

githubにこういうの公開するの初めてなのでライセンスとか書くのちょっと恥ずかしかったですw

MITって書いとけばいいかなみたいなw

あとテストも書いたんで、travisとか使ってみました。

初めて使ってみたのですが、無料であそこまでできるのすごいすね。

ライブラリ自体は超たいしたことしてないし、他に同じようなの作ってる人たくさんいるだろうし、むしろこういう初めてやることができて良かったです。

と、今回は経験として誰得なライブラリを作ってしまいましたが、いづれは誰かの役に立つようなモノも作れたらいいですねー

[追記]

がっつりおんなじ思想で作られたライブラリを後日ふと見つけましたw

すばらしいです。拝承。

rewish.jp

tofucodes diary

にほんごのほう

FastClick適用下でのチェックボックスにおける問題

そもそもFastClickとは

問題

原因

結論

DateFormat.js