Monday, April 26, 2010

UnitTestしやすいクラスの作り方

以下の要約。
http://misko.hevery.com/2008/07/08/how-to-think-about-the-new-operator/

Unit Test しやすいクラスは、クラス間の依存グラフにおいて、 終端に位置するクラス(以下、leafクラス)である。 なぜなら、それだけを Unit Test することができるから。 例えば、以下のようなクラス。

 
class House {
  private boolean isLocked;

  private boolean isLocked() {
    return isLocked;
  }

  private boolean lock() {
    isLocked = true;
  }
}

しかし、以下のようなクラスでは、Kitchenクラスを生成せずに、 House クラスだけを生成できない。 理由は、House のロジック内に、Kitchen の new 演算子が 含まれているから。 そのため、House クラスのみを Unit Test することができない。

 
class House {
  private final Kitchen kitchen = new Kitchen();
  private boolean isLocked;

  private boolean isLocked() {
    return isLocked;
  }

  private boolean lock() {
    kitchen.lock();
    isLocked = true;
  }
}

Houseだけを個別に Unit Test するには、偽の Kitchen で、Houseを生成する必要がある。

 
class House {
  private final Kitchen kitchen;
  private boolean isLocked;

   public House(Kitchen kitchen) {
    this.kitchen = kitchen;
  }

  private boolean isLocked() {
    return isLocked;
  }

  private boolean lock() {
    kitchen.lock();
    isLocked = true;
  }
}

上のように、new演算子をロジックから取り除けば、 テストを簡単に行える。 Kitchen のモックを作れば、Houseだけを Unit Test できる。 これにより、leaf クラスでなくても、個別にテストを行える。

どこで、new演算子を使えばいいかというと、 以下のようにFactoryクラスを作ってやればよい。

 
class ApplicationBuilder {
  House build() {
    return new House(new Kitchen(
               new Sink(),
               new Dishwasher(),
               new Refrigerator())
           );
  }
}

Main メソッドでは、このFactoryを使ってオブジェクトの依存関係を 生成すればよい。

 
class Main {
  public static void main(String...args) {
    House house = new ApplicationBuilder().build();
    house.lock();
  }
}

コードがシンプルで多機能なlight box系js

コードがシンプルで多機能なlight box系js
http://colorpowered.com/colorbox/

サンプル

iframe なども画像と同じように表示できたり、動的に生成されるURLに対しても問題なく使える。 ソース読み込み以外で js を書いてるところをタグ内に完全に埋めれるようにしたり、コード内でべた書き class 名を使ってしまってるところをキレイにしたい。 あと、会社でYUIを使ってるのでYUIバージョンを作りたい。

Sunday, April 18, 2010

googleに学ぶ角丸の作り方(html、css)2

さっきの方法だと、背景色が透過しないので、以下のようにすると透過する
角丸の中の
テキスト

googleに学ぶ角丸の作り方(html、css)

グーグルがこの前始めた、最新検索では、 吹き出しのような表示がある。

そこの吹き出しから軽量な角丸の作り方を学ぶことができる。
一つ目の画像:
二つ目の画像:

グーグルが置いてる画像はこの二つだけ。
それに対し角丸を置いてるサイトの画像を見てみると、四角形の上部の辺を全て画像にしているサイトも多い。
グーグルの方法だと
・横幅を柔軟に変更できる
・画像サイズがもっとも軽量
という利点がある。

吹き出し部分の画像は特に必要ないので、それを取り除いて実際に角丸を作ってみた。

角丸の中の
テキスト

ここでは、2つの画像を使っている。

http://sikaku-chat.com/stt/circle/bg0.png
用途:角丸の角、四角形の左辺と右辺に対応

http://sikaku-chat.com/stt/circle/bg1.png
用途:四角形の上辺、下辺に対応

ソース部分のポイントは3つだけ
・background-position を指定し、円の画像からうまく角丸を作成
・全体的にtable を使用
・角丸部分には box のfloatを使用

こう見るとたいしたことはやっていない。
知らなかったのは、float container に table の要素が使えることだろうか。
float container ってtable使えばよかったのか?

Saturday, April 17, 2010

透過PNGをマルチブラウザで指定する方法

CSS で以下のように指定すればよい
 ・block 要素に background で画像を指定
 ・アンダースコアハックでIE6だけAlphaImageLoaderを使用 サンプル:

参考:http://developer.yahoo.com/yui/examples/button/btn_example11.html

Sunday, April 11, 2010

301 リダイレクトをchromeがキャッシュする

Cookieを使ってユーザの tracking をする場合、redirect に 301 を使うのは要注意。

Google が 301 リダイレクトを推奨しているように、301 を使うと search engine の score がリダイレクト先に移動するので、 サイトの引越しには 301 を使うと良い。

でも、アフィリエイトとかで Cookie を使って tracking している場合には、301 は使えない。 なぜなら、chrome がリダイレクト先をキャッシュするから。

以下の記事で書いてるとおり、最近のブラウザでは chrome のみキャッシュする。
http://bugsquash.blogspot.com/2008/12/google-chrome-caches-301-redirects.html

検証コードを書いてみた。
a.php
b.php
サンプル

a.php でクッキーを保存し、301リダイレクト
b.php でクッキーを参照&削除

chrome でアクセスすると、最初はクッキーに保存されるが、 2回目以降のアクセスでは、a.php にアクセスしなくなる。

IE8、Firefox3、Opera、Safari では、キャッシュしなかった。

もうちょっと調べると、2007年の記事で、MozillaとFirefox がキャッシュするという内容を見つけた。
http://www.webmasterworld.com/google/3229652.htm

RFC2616 では、 10.3.2 301 Moved Permanently のところで、

This response is cacheable unless indicated otherwise. 
となっているので、chrome の動作は悪くない。

ふと思い立って、Pragma: no-cache を付けてみることにした。

a.php

chrome でもリダイレクトしてくれた。

結論としては、Pragma: no-cache をつければ、chrome でもキャッシュしないが、 古いブラウザでもちゃんと動作するかは検証が必要。