たゆたうの魂: 8月 2011

2011年8月28日日曜日

grep + 正規表現 + Apache %D

こんにちは、hodori です。

Webサービス開発に置いてそれなりに使われるちょっとした合わせ技です。

まず基本になるのはApacheの設定で%Dを入れることで

アクセスログにリクエストを処理するのにかかった時間をマイクロ秒単位で出してくれます。

そのアクセスファイルをgrepで正規表現を使って指定時間以上かかったリクエストだけ表示できます。

grep '.* [2-9][0-9][0-9][0-9][0-9][0-9][0-9]' access.log　＜　2秒以上の場合

同じようにtailと一緒にgrep + 正規表現を使うことで時間がかかった処理だけ監視できます。

tail -f access.log | grep '.* [1-9][0-9][0-9][0-9][0-9][0-9][0-9]'　＜　１秒以上のリクエストを監視

知っている人には今更なものですが結構使いどころが多い物でもあるので紹介させていただきました。

2011年8月12日金曜日

PHPテンプレートエンジンTwig その２

こんにちは、Nakajinです。

今回は、Twigの変数の扱い方について簡単に書いていこうと思います。

まず、PHP側でテンプレートに表示する変数のセットは以下のようになります。

[php]

<?php

require_once 'Twig/Autoloader.php';

Twig_Autoloader::register();



// Twigの基本設定

$loader = new Twig_Loader_Filesystem('./');

$twig = new Twig_Environment($loader, array(

    'cache' => './cache',

));



// テンプレートの呼び出し

$template = $twig->loadTemplate('test.html');

// 変数をセットして出力

echo $template->render(array('test' => 'テスト'));

[twig]

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>テスト</title>

</head>

<body>

    {{ test }}

</body>

</html>

[表示]

テスト

test変数に「テスト」という文字列をセットしてTwig側で呼び出すことができました。

配列やオブジェクトを渡すこともできます。

[php]

$array = array(

    'hello' => 'こんにちは'

);

echo $template->render(array('test' => $array));

[twig]

{{ test.hello }}

のように、「.」を使って配列の要素を指定することができます。

[php]

class Test {

    public $hello = 'こんにちは';

}

$object = new Test();

echo $template->render(array('test' => $object));

[twig]

{{ test.hello }}

オブジェクトの場合も、「.」を使ってプロパティにアクセスすることができます。

[php]

class Test {

    public function hello() {

        return 'こんにちは';

    }

}

$object = new Test();

echo $template->render(array('test' => $object));

[twig]

{{ test.hello }}

オブジェクトの場合も、「.」を使ってプロパティにアクセスすることができます。

[php]

class Test {

    public function getHello() {

        return 'こんにちは';

    }

}

$object = new Test();

echo $template->render(array('test' => $object));

[twig]

{{ test.hello }}

また、オブジェクトのgetterメソッドにアクセスすることもできます。

次回は、Twigの構文について書いてみようと思います。

2011年8月2日火曜日

第2回HTML5のススメ

最近、通勤には自転車を使っています。痩せるといいな。KOYAです。

第2回はHTML5で追加された機能、「Web Storage」について話していこうと思います。

WebStorageってなに？っていうと、memcachedだったり、TokyoTyrantだったりと同様のKey-Value型のストレージ機能です。

ただし、WebStorageはクライアント側に保存することができるというところがかなり魅力的です。

WebStorageは大別すると2種類存在します。

sessionStorage…ブラウザを終了するとデータが失われる。

localStorage…ブラウザを閉じてもデータが残る。

今回は永続的に保存することが可能なlocalStorageの話をしていきます。

実はすごく簡単で以下の様に記述すればすぐに実装が可能です。

// "test"というKeyに"abcdefg"とい文字列を保存

localStorage.setItem("test", "abcdefg");

// "test"をアラートで表示。

alert(localStorage.getItem("test"));

通常WebStorageに保存する場合、setItemでデータを保存し、getItemで出力するという形になっています。

ですが、一々webStorageなのか違うのかなんて意識しないでも保存する方法があります。それが以下の記述の仕方です。

// "test"というKeyに"abcdefg"とい文字列を保存

localStorage.test = "abcdefg";

// "test"をアラートで表示。

alert(localStorage.test );

オブジェクトのプロパティに値を格納するかの如く保存できています。すごいですね、WebStorageは。

さぁ、そしてここからが本題です。

第1回でお話しした、画像表示ですが、画像自体をクライアント側に保持できないか？と思い挑戦しました。

実はこのWebStorage、1つ弱点があり、実は文字列しか格納することができません。

ですので、画像自体はバイナリデータなので保存することができません。

なので、一旦base64に変更してから保存するしかありませんでした。

※アプリケーションキャッシュを使うという手もありますが、それはまたの機会に。

以下ソースとなります。

window.onload = function () {

main();

}

function main() {

// ローカルストレージに画象がない場合

if (localStorage.imageData == null) {

// キャンバスの作成

var saveCanvas = document.createElement('canvas');

// コンテキストの取得

saveCtx = saveCanvas.getContext("2d");

// Imageオブジェクトの作成

var objectCaba = new Image();

objectCaba.src = "http://～～～～tayutau.png";

// 読み込み完了時

objectCaba.onload = function() {

saveCtx.drawImage(objectCaba, 0, 0);

// ローカルストレージに保存

localStorage.imageData = saveCanvas.toDataURL("image/png");

// ローカルストレージから描画する。

draw();

}

} else {

// ローカルストレージから描画する。

draw();

}

function draw() {

// キャンバスの取得

canvas = document.getElementById("test");

// コンテキストの取得

ctx = canvas.getContext("2d");

// Imageオブジェクトの作成

var objectCaba = new Image();

// ローカルストレージから画象の読み込み

objectCaba.src = localStorage.imageData;

// 読み込み完了時

objectCaba.onload = function() {

ctx.drawImage(objectCaba, 0, 0);

}

とこのような感じで書けば、画象を保存し表示することが可能です。

どのようにそれを実現しているかを説明します。

var saveCanvas = document.createElement('canvas');

という記述で、canvasを作成し、

localStorage.imageData = saveCanvas.toDataURL("image/png");

のtoDataURLで現在キャンバスに描かれているデータをbase64に変換し、ストレージに保存しています。

他の記述は前回と同様に単純に表示しているだけですので、割愛させて頂きます。

以外に簡単にできたように見えますが、当初作成していたときに実はjavascriptの構造上の落とし穴に引っかかりましたが

その話は次回に持ち越すことにします。

ということで、次回は、canvasを表示する際の"落とし穴"の話と、標準搭載ではなくなってしまったWebDataBaseの話をしていこうと思います。