Web Artisan Blog - ウェブ アルチザン ブログ

PHP:gif、png等の画像を動的に生成するには?:image関数(イメージ):グラフの作成

PHP

2004年12月10日

アフィリエイトから企業サイト分析まで。訪問者の動きがまるわかりのアクセス解析サービス「リサーチアルチザンプロ」

LINEやSkypeみたいなビデオ通話がブラウザだけでできる!オンライン通話サービス「EZ-Interview - イージーインタビュー」

当サイトの”XHTML1.1 VALID!!”といったミニバナー、
これは有名な下記サイトより画像を生成して、ローカルに保存、
それをサーバーにアップロードして使用してます。
>Button Maker :: Kalsey Consulting Group

このサイトを知ったのは、もう随分前ですが
「すごい便利だなー。。」という感想以前に、
「どないしてこんな事やってんねんっ!!」といった、PG・SEならではの疑問。
技術的にどうやって実現しているかを知りたい、、と強く思いました。

この当時は、PHPに関して知識が無く、
「画像という事で一時的にファイルに保存してるのか?」
「いや、そんな事したら直ぐにファイル削除したとしてもかなり負荷かかるぞ」
とか思ったりしてました。。。

しかし、そんな事してる訳ありません。
ってか、PHP使えばそんな事する必要が無い。
結論知って思う事は、つくづく「PHPってスゲっー」て事です。。
PHPの画像処理、これには”イメージ関数”を使用します。

PHP:XLII.イメージ関数(image)
PHPができることは、HTML出力を生成することだけではありません。PHPは、多くの異なるイメージ形式でイメージファイルを作成したり、操作したりすることもできます。このイメージ形式には、gif,png,jpg,wbmp,xpmが含まれます。さらに便利なことに、PHPはイメージストリームを直接ブラウザに出力することができます。これを動作されるには、イメージ関数のGDライブラリを指定してPHPをコンパイル必要があります。使用したいイメージ形式によっては、GDとPHPは他のライブラリも必要とする可能性があります。


まず、ここで基本的に押さえておかなければならない事。
それは、PHPはHTMLを出力できるだけでなく、画像自体を出力できます。
つまり、”〜.php”のリクエスト結果が、HTMLだけでなく、
gif、jpg、pngといった画像にもなり得るという事なのです。。

・・そっか、これが解れば”Button Maker”の仕組みも見えてきます。
”Button Maker”のHTMLソースを見ても解りますが、
imgタグのsrcにphpファイルを指定している訳です。

<img src = "〜.php" />




そしたら、実際やってみましょか?
・・っと、その前に環境確認。
イメージ関数を動作させるには、”GDライブラリ”が必要です。
PHPの動作するサーバーに”GDライブラリ”がインストールされてるか確認。
phpinfoで調べるわけですが、その辺はこの記事を参考に。
>PHP:各レンタルサーバーのPHP動作環境を調べるには


今回は、簡単な画像を新規で作成し、その画像の文字を動的に変えるといったもの。
ソースは以下の通り。

<?php
    //出力文字の取得
    $setstring = $_GET['setstring'];
    if ($setstring == '') {
      $setstring = $_POST['setstring'];
    }

    //画像の作成
    $img = imagecreate(100, 20);

    //色の作成(背景色)
    $backcol = imagecolorallocate($img, 160, 160, 160);
    //背景色を塗る
    imagefilledrectangle($img, 0, 0, 200, 80, $backcol);

    //色の作成(文字)
    $col = imagecolorallocate($img, 255, 255, 255);
    //文字を書く
    imagestring($img, 2, 10, 4, $setstring, $col);

    //画像出力
    header("Content-type: image/png");
    header("Cache-control: no-cache");
    imagepng($img);

    //画像の消去(メモリの解放)
    imagedestroy($img);
?>



まずは、このPHPをimgタグで呼び出すとどうなるか?
■ソース

<img src = "/weblog/media/1/imgtest.php?setstring=WEB%20Artisan"
 alt = "TEST" title="TEST" width="100" height="20" />


■結果
TEST


うん。いいぞ。。
これで動作もわかったし、後は動的に変えてみるか。。
■ソース

<form action="http://www.res-system.com/weblog/media/1/imgtest.php"
 method="post">
<p>
<input type="text" name="setstring" value="" />
<input type="submit" name="test" value="TEST" />
</p>
</form>


■結果

※文字を入力し、TESTボタンをクリックしてください
※日本語入力には対応してません。。


・・・ほー。
こんな感じです。
”Button Maker”では、これに色のコードなんかも渡してる訳です。

こんな事やりだすと色んな事出来そうですね。
動的グラフの生成なんかもできますし、
既にある画像を読みこんでの動的な編集も出来る。
環境によっては、他サイトの画像をURLから読みこんで編集も出来る。。。
デザイン系のサイトなんかは、こんな機能使って色々やってそうですね。


■動作テストのダウンロード
ダウンロードしたphpファイルをサーバーにアップロードしてください。
>>ダウンロード

Web面接に最適。ブラウザだけでビデオ/音声通話ができるオンライン通話サービス。「EZ-Interview - イージーインタビュー」
訪問者録画機能も付いたシンプルで高機能なリアルタイムアクセス解析「リサーチアルチザンプロ」