INSPIRE TECH

inline-blockを並べた場合に発生する「隙間」を消去するCSS

IEを含めた最近のブラウザでは珍しくなくなったinline-block。
このinline-blockを利用する場合に発生する「隙間」を改善する方法です。

原因は改行コード

下記のようなHTMLを用意しました。
リストタグを使ったインラインブロックを実現しようとしています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>inline-block test</title>
</head>
<style>
.inline-block li {
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    line-height: 100px;
    text-align: center;
}
</style>
<body>
 
<ul class="inline-block">
<li>ボックスA</li>
<li>ボックスB</li>
<li>ボックスC</li>
</ul>
 
</body>
</html>

これを実際にブラウザで表示してみると。

期待していたのと違い、各リストタグの間に2px程度のマージンが空いてしまっています。
これはリストタグとリストタグの間に存在する改行が半角スペースとして表示されてしまっているからです。
その証拠に、下記のように<li>タグの間のスペースを除去してみます。

1
2
3
<ul class="inline-block">
<li>ボックスA</li><li>ボックスB</li><li>ボックスC</li>
</ul>

そうすると、期待通りの表示になりました。

CSSでなんとかなる

この改行コードの問題は、実に簡単なCSSで解決することができます。
インラインブロックを囲むタグ（この場合は<ul>）と、インラインブロックにとして設定するタグ（この場合は<li>）に、下記のようなCSSを適用します。

1
2
3
4
5
6
7
8
9
10
11
12
13
.inline-block {
    letter-spacing: -.40em; /* 文字間を詰めて隙間を削除する */
}
 
.inline-block li {
    display: inline-block;
    letter-spacing: normal; /* 文字間を通常に戻す */
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    line-height: 100px;
    text-align: center;
}

たったこれだけで、タグの間に改行があっても正しく表示できるようになります。
使い始めると便利なインラインブロック、無駄な隙間に悩んでいる方は是非お試しあれ。

CakePHPのデータベースを開発環境と本番環境で切り分ける方法

CakePHPには利用するデータベース定義を複数定義しておける機能がありますが、その使い分けに関するアイデアです。

よくある解決策

よく開発環境と本番環境で自動的にデータベース接続を切り替えられるように、以下のようにDATABASE_CONFIGクラスのコンストラクタを改良したり、AppModelクラスのコンストラクタに現在の環境を判別できるような設定を書いたりするアイデア多く見かけられます。

DATABASE_CONFIGクラスの改良

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
class DATABASE_CONFIG
{
    public $default = array();
 
    // 公開用
    public $production = array(
        'driver' => 'mysql',
        'persistent' => false,
        'host' => 'production.mysql.server',
        'login' => 'admin',
        'password' => '****',
        'database' => 'production_database',
        'prefix' => 'prefix_',
        'encoding' => 'utf8'
    );
 
    // 開発用
    public $development = array(
        'driver' => 'mysql',
        'persistent' => false,
        'host' => 'localhost',
        'login' => 'test',
        'password' => '****',
        'database' => 'development_database',
        'prefix' => 'prefix_',
        'encoding' => 'utf8'
    );
 
    public function __construct()
    {
        if (env('SERVER_ADDR') !== '127.0.0.1') {
            $this->default = $this->production;
 
        } else {
            $this->default = $this->development;
        }
    }
}

AppModelの改良

1
2
3
4
5
6
7
8
function __construct()
{
    if (env('SERVER_ADDR') == '127.0.0.1') {
        $this->useDbConfig = 'development';
    }  else {
        $this->useDbConfig = 'production';
    }
}

よくある解決策の問題点

よくある解決策では、httpから利用する場合には非常に便利で良いのですが、コンソールから利用する場合、この設定では不都合が発生します。

たとえばschemaコマンドを利用する場合です。
コンソールではREMOTE_ADDRやSERVER_ADDRなどの環境変数が利用できません。
そのため、コンソールで利用する場合はリモートで利用しているのかローカルで利用しているのかを環境変数から判別することができません。

であれば、schemaコマンドを実行する際に -connectionオプションで利用する接続を選択してやれば良いと考えてしまうのですが、CakePHPのコンソールから起動するｓchemaコマンドは、-connectionオプションで指定されたデータベース接続（指定されなければdefault）とModelのデータベース接続（Model::$useDbConfig）が一致しない場合、そのModelのスキーマを読み込んでくれません。

実行しているファイルのパスを見て判別するような荒技もありますが、実行ファイルのパスが被らない保証も無いので、こちらも確実とはいえません。

シンプルな解決策

ではどうすれば良いか、というと、Configureクラスを利用する方法が一番わかりやすくてベターです。
config/core.php もしくは config/bootstrap.php に下記のように設定します。

1
Configure::write('database', 'production');

そして、config/database.php のDATABASE_CONFIGクラスを下記のように記述します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
class DATABASE_CONFIG
{
    public $default = array();
 
    // 公開用
    public $production = array(
        'driver' => 'mysql',
        'persistent' => false,
        'host' => 'production.mysql.server',
        'login' => 'admin',
        'password' => '****',
        'database' => 'production_database',
        'prefix' => 'prefix_',
        'encoding' => 'utf8'
    );
 
    // 開発用
    public $development = array(
        'driver' => 'mysql',
        'persistent' => false,
        'host' => 'localhost',
        'login' => 'test',
        'password' => '****',
        'database' => 'development_database',
        'prefix' => 'prefix_',
        'encoding' => 'utf8'
    );
 
    public function __construct()
    {
        $connection = Configure::read('database');
         
        if (!empty($this->{$connection})) {
            $this->default = $this->{$connection};
        }
    }
}

この方法であれば、データベースを切り替えたいときはデバッグモードの切り替えのように設定値を変更するだけで済みますし、ローカルに依存するコードを記述する必要もなくなります。

さらに今後新しいデータベース接続を追加した場合にも、設定値を変更するだけで対応可能なので、今後の拡張性の面でも安心できます。

PHPでstatic宣言されていないクラスメソッドを静的に呼び出すと、$thisのスコープが呼び出し元のオブジェクトになる

CakePHP製のCMSである Croogo のソースを眺めていて気付いたんですが、クラス内でstatic修飾子を使っていないインスタンスメソッドを、::演算子を使って静的に呼び出すと、$thisのスコープが呼び出した側のオブジェクトになるという現象に気付きました。

具体的には下記のコードを実行すると、”Test 2″ が表示されます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
class Test1
{
    public function callName()
    {
        echo $this->name;
    }
}
 
class Test2
{
    public $name = 'Test 2';
     
    public function callMethod()
    {
        Test1::callName();
    }
}
 
$obj = new Test2();
$obj->callMethod();

ちなみにstatic修飾子を付けると、Fatal errorとなるので、本来であれば推奨されない使い方のような気もします。
これってPHP5の常識なんでしょうか？

printfのフォーマットから、変換指定子を抜き出す正規表現

そんなに用途は無いと思うんですが、PHPのpirntf構文やsprintf構文のフォーマットから変換指定子（%sや%d等）を抜き出す正規表現を書いてみました。

1
/(?:^|[^%])%(?:[0-9]+\$)?(?:[\+\-]?(?:0|\'[^%])?[\d]*?(?:\.\d+)?)?[bcdeEufFgGosxX]/u

preg_match_allなどで利用すれば、変換指定子が何個使用されているかなどを調べることができると思います。

用途

プログラム中でprintf構文に必要とされる引数の数を調べなくてはならなくなり、下記のような関数を作って利用しています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function _argAmount($pattern)
{
    preg_match_all(
        '/(?:^|[^%])%(?:([0-9]+)\$)?(?:[\+\-]?(?:0|\'[^%])?[\d]*?(?:\.\d+)?)?[bcdeEufFgGosxX]/',
        $pattern,
        $matches
    );
 
    $count = 0;
 
    if (!empty($matches[1])) {
        $filtered = array_filter($matches[1]);
        $max = max($filtered);
        $empty = count($matches[1]) - count($filtered);
        $count = ($max > $empty) ? $max : $empty;
    }
 
    return $count;
}

Gitをインストールしたらコマンドプロンプトのフォントがおかしくなった

各種WEBアプリのバージョン管理にWindows版のGitを利用しています。

しかしながら、このGitをインストールしてからというものの、コマンドプロンプトのフォントがMSゴシックからLucida consoleに変わってしまって、微妙に使いづらい。コマンドプロンプトのフォント設定を直しても、フォルダの右クリックして「Git bash here」を実行しても元に戻っている始末。

というわけで、レジストリをいじってフォント設定を変更しました。
当該のレジストリ、

1
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Console\TrueTypeFont

を開いて、内部にある

1
0   REG_SZ  Lucida Console

の値を削除。

これでめでたくコマンドプロンプトがMSゴシックで表示されるようになりました。

Git

http://code.google.com/p/msysgit/