ブログ用のネタをあれこれと書き留めていたのですが、ボリュームが少なくて1つの記事に出来なない小ネタを一旦まとめてみます。このシリーズは今後も何度かやると思います。
1つでも皆さんの役に立てれば幸いです。
PHPでは無名関数を使用する機会は少な目ですが、代表的なのは正規表現置換の
preg_replace_callback("正規表現", function() {置換ルール}, 置換前の文字列);
でしょうか。しかしphp5.3以上が必須条件で、ローカルとサーバーのPHPバージョンが異なっている場合のエラー原因になることがあります。
知らなくて個人的には結構な衝撃でした。
idとfor属性を使用して
<input type="checkbox" id="checkbox_1" name="checkbox_1" value="1" /><label for="checkbox_1">チェック1</label>
と書くのを
<label><input type="checkbox" name="checkbox_1" value="1" />チェック1</label>
と省略できます。イベントもちゃんと伝搬します。
尚、画像を中に入れて
<label><input type="checkbox" name="checkbox_1" value="1" /><img src="画像パス" /></label>
とすることも可能ですが、IE8以下では画像をクリックしてもチェックされないため、ユーザビリティが下がることを注意しましょう(ただし、IE8以下でもチェックボックスを直接クリックすることは可能なので、致命的ではありません)。
これはPHPとJavascriptを両方使っている人向けです。他のサーバーサイド言語については良く分かりませんが、当てはまる言語もあると思います。
PHPでは、
$id = "aiueo";
$array = array(
$id=>"kakikukeko",
);
とやることが可能です。
しかし、Javascriptでは
var id = "aiueo";
var obj = {
id: "kakikukeko"
};
とやるとプロパティ名はidになります。
var obj = {};
obj[id] = "kakikukeko";
とすればOKです。
過去、何度か間違ったのでご紹介しますが、まったくの小ネタです。
2x2のシンプルなテーブルで、セルに
table.test td {
border: 5px solid #000;
}
のように5pxの罫線を付けた場合、jQueryからこのテーブルとセルのwidthを取得してみると、ブラウザ毎に全く異なる値が得られます。
IE11 | Chrome/Safari | Firefox | ||
セルのborder-width | top | 2.5px | 5px | 3px |
right | 2.5px | 5px | 3px | |
bottom | 2.5px | 5px | 3px | |
left | 2.5px | 5px | 2px | |
テーブルのborder-width | top | 2.5px | 0px | 3px |
right | 2.5px | 0px | 2px | |
bottom | 0px | 0px | 0px | |
left | 2.5px | 0px | 3px |
Webkit系(Chrome/Safari)は意図通りの値になっていると言えます。
IE11はより正確に半分の値を返しています。Firefoxは訳が分かりません。IE11とFirefoxでテーブルのbottomが0pxになっているのも良く分かりません。
以上から、jQueryのCSSを使ってテーブルのborder-widthを取得するのはやめましょう。
尚、border-collapse:separeteの場合は、全てのブラウザが同一の結果で、セルが四方5px、テーブルが四方0pxとなります。こちらは使えそうです。
非IEではgetComputedStyle、IEではcurrentStyleによって実際に適用されているCSSの値を取得しています。これが上記のようなバラバラな値になる原因と思われます。