技術メモのかけら

内容はもとより調べたことすら忘れてしまうので個人的なメモです。とにかく短く、結論だけ書いていきます。

Webkitで罫線が正しく表示されない

Chrome Webkit Safari

border-collapse:collapse;とcolspanを組み合わせると罫線がおかしくなるバグがあるようです。
自分が出くわした事象はtableの４辺に罫線を指定しているのに、colspanした直後のcolspanしていない行のborder-rightが表示されていないというものでした。
separateにして、border-spacingと古いIE対策？(試してない)でcellspacingに0を指定したら直りました。

border-collapse: separate;
border-spacing: 0;
cellspacing: 0;

すごいシンプルなテーブルだと再現しないですね。何か他にも条件があるみたい。

あああ
あいう
かきく

参考

http://memopad.noor.jp/html-css/post-617/
https://bugs.webkit.org/buglist.cgi?quicksearch=border-collapse+span
http://www.haikararou.com/lab/?p=1124
https://productforums.google.com/forum/#!topic/chrome-ja/_0CB5LJmwCQ

placeholderについてのTIPS

css

サポートしているタグ

input(type=text, password, search, url, tel, email), textareaで使える。
DOCTYPEはHTML5じゃなくても問題ない。

サポートしているブラウザ

主要なブラウザは問題なく使えるが、IEは10からサポートされた。

スタイルを指定しないときの見た目

文字が黒いと、どのブラウザでも以下の感じで薄いグレーで表示される。

ブラウザによる違い

FireFoxは単純に薄いグレーの文字を設定しているのではなく、colorで指定した色をopacity:0.4して表示するようで、黒以外の文字でも薄く表示されます。
Chromeは文字色に関係なく、常に薄いグレーの文字を表示している様子。
IEはIE11で試したところ、color が黒以外の場合は、薄くならずそのままの色でプレースホルダーが表示された。入力した文字なのかプレースホルダーなのか見分けは付かない感じ。

スタイルの変更方法

標準のセレクタは存在しないため、ベンダーごとにスタイルを指定しないといけないのでとても面倒くさい。
Operaはスタイルを指定できないみたい。

/*Webkit*/
::-webkit-input-placeholder{
  color: #ccc;
}
 
/*Firefox 18以前（古い書き方なので使っちゃダメ） */
:-moz-placeholder {
  color: #ccc;
}

/*Firefox 19以降*/
::-moz-placeholder {
  color: #ccc;
  opacity: 1;
}
  
/*IE10以降*/
/* http://msdn.microsoft.com/en-us/library/ie/hh772745(v=vs.85).aspx */
:-ms-input-placeholder {
  color: #ccc;
}

FireFox19以降はコロン1つから2つに変更されているので要注意です。 ネット検索するとコロン１つの情報の方が多数ヒットするので惑わされないように。
あと、前述したとおりFireFoxはopacity:0.4されてしまうので、opacity:1で明示的に戻してやらないと字が薄くなりすぎます。

ちなみに、カンマ区切りでグループ化するとなぜか有効にならないようです。

::-webkit-input-placeholder, 
::-moz-placeholder,
:-ms-input-placeholder,
:-moz-placeholder {
  color: yellow;
}

文字色以外のスタイルは効く？

font-size、font-weight、text-shadow、line-heightなど、テキスト装飾系は大抵効くようです。

::-webkit-input-placeholder{
    color: #f00;
    font-size: 50%;
    font-family: serif, 'Helvetica', 'Arial', 'メイリオ', 'Meiryo', 'MS PGothic', sans-serif;
    font-weight: bold;
    font-style: italic;
    text-decoration: underline;
    text-transform: uppercase;
    letter-spacing: 0.5em;
}
::-moz-placeholder{
    color: #0f0;
    font-size: 50%;
    font-family: serif, 'Helvetica', 'Arial', 'メイリオ', 'Meiryo', 'MS PGothic', sans-serif;
    font-weight: bold;
    font-style: italic;
    text-decoration: underline;
    text-transform: uppercase;
    letter-spacing: 0.5em;    
}
:-ms-input-placeholder{
    color: #00f;
    font-size: 50%;
    font-family: serif, 'Helvetica', 'Arial', 'メイリオ', 'Meiryo', 'MS PGothic', sans-serif;
    font-weight: bold;
    font-style: italic;
    text-decoration: underline;
    text-transform: uppercase;
    letter-spacing: 0.5em;    
}

IE9以前のバージョンでも使いたい

うちのシステムはIE7〜9もサポートしているため、ah-placeholderというjQueryプラグインを使わせてもらっています。
このプラグインではデフォルトの文字色がsilver(#C0C0C0)だが、placeholderColorオプションで色を変更可能。
デフォルトではtitle属性の値がプレースホルダーとして表示し、placeholder属性は使わず、このプラグインだけで全てのブラウザに対応可能。 placeholderAttrオプションでplaceholder属性を使うように変更すると、placeholderをサポートしていないブラウザの場合だけ動作するように変更できる。

Macだとフォーカス時の動きが違う

通常はテキストにカーソルを移動した時点でプレースホルダーが消えるのだが、Mac OSとかiOSとかAppleのOSではカーソルを置いただけでは消えず、文字入力した時点で消える。
ah-placeholderはlikeAppleオプションでどちらでも選択可能。

参考

http://css-tricks.com/almanac/selectors/p/placeholder/

データを16進でダンプする

PostgreSQL

trimで消えない謎のスペースがあって、何なのか16進で見たいのでやり方を調べた。

select encode(name::bytea, 'hex') from human;

これで調べたら, C2A0が入っていることが分かった。
HTMLで ってのはよく使うけど、これは文字コードのNBSP。
アプリのバグなんだろうが、どこで登録されたかは謎。。。
だったがhiddenに文字参照 を設定していて、それがサーバにpostされる過程でC2A0というコードに変換されたらしい。

シェル変数の文字列展開

Linux
  • パターンにマッチする文字を置換文字に置き換える
    書き方： ${変数/パターン/置換文字}
$ v="newItem"
$ echo ${v/new/old}
oldItem
  • 先頭から文字列にマッチした部分を取り除いて出力する
    書き方： ${変数#文字列}
$ v="newItem"
$ echo ${v#new}
Item
  • 末尾から文字列にマッチした部分を取り除いて出力する
    書き方： ${変数%文字列}
$ v="newItem"
$ echo ${v%Item}
new
  • 先頭文字位置から指定した長さの文字数だけ出力
    書き方： ${変数:先頭文字位置:長さ}
$ v="newItem"
$ echo ${v:1:4}
ewIt

ファイルの拡張子を置換する

Linux

ファイルが1つだけだったらmv test{.log,.txt}のようにシェルのブレース展開を利用して行える。
mv test.log test.txtって普通の書き方と比べて楽になっている訳じゃないが、スペルミスが減るところが良いかも。
あと、ファイルが沢山ある場合はLoopを回してながら同じことをすれば良い。

for f in *.log; do
  mv $f ${f/.log/.txt}
done

自分はシェルって書く機会って少なくって、「ループってどう書くんだっけ？」って毎度調べてるから普段からこういう書き方に親しんでおくと良いかも。

簡単なオブジェクトのディープコピー

Java

オブジェクトを楽にディープコピーするコード。
性能面の問題やSerializableなメンバーじゃないとコピーされないとか問題があるけどメモ。

private <T> T deepCopy(final T target) {
    final ByteArrayOutputStream bos = new ByteArrayOutputStream();
    final ObjectOutputStream oos = new ObjectOutputStream(bos);
    oos.writeObject(target);

    final ObjectInputStream ois = new ObjectInputStream(
        new ByteArrayInputStream(bos.toByteArray()));
    return (T) ois.readObject();
}