れいぶろぐゲームをプレイしたり、作ったりしてる人、LABEのブログ『れいぶろぐ』。創作のこと、PCのこと、その他趣味のことを広く浅く。(3)このところ、WordPressのカスタムフィールドを活用した、プラグインも外部サービスも使わない「アクセスカウンター」を開発していた。このブログでは現在のところ、外部サービスのアクセスカウンターを利用しているが、それを自作してみようというわけだ。文字(数字)での表示でもいいけど、やっぱりアクセスカウンターといえば画像だよね。いうことで、1桁ずつの画像を並べて何桁かのアクセスカウンターを作る、というようなことをしていた。これでは桁数の分だけ画像を読み込むことになる。ある外部サービスみたいに、素材となる画像から、何桁かの数字を含む1枚の画像を生成することができれば......PHPでできるらしいので、やってみた。※この記事ではアクセスカウンターのカウント機能の作り方は扱わない。まとめ画像のための「ページ」を作成その都度ページ内にカウンターの画像を生成するのもいいけど、俺はカウンター画像にURLを与え、そのURLにアクセスすることで、カウンター画像をどこからでも呼び出せるようにした。URLを与えるには、固定ページを作り、スラッグを設定しなければならない。固定ページのテンプレートに画像を生成するPHPを書けばよい。「page-○○.php」という名前のファイルをテーマディレクトリに置けば、○○というスラッグをもつ固定ページにのみ、そのテンプレートを適用させることができる。俺の場合は、複数の固定ページに適用させられるように、テンプレートファイルを作成した。いった自動的に適用されるファイルではなく、固定ページの編集画面で選択して適用させるファイルのことである。同様のPHPファイルを新規作成し、その先頭に以下のような記述をしておく。※ファイル名はWordPress標準のファイル名とかぶらなければ何でもいい。<任意のテンプレート名>*/?>これで、固定ページの編集画面でそのテンプレートを選択できるようになる。このファイルに、これから説明するコードを書いていく。「GD」で画像を生成PHPにはGDという画像処理のためのモジュールがあり、最近のバージョンのPHPには標準で組み込まれているようだ。これを使って画像を生成・出力することができる。GDによる画像処理の手順は、まずキャンバスのような画像の土台を定義し、そこに素材となる画像を読み込んで貼り付けていき、最後に完成した画像を出力する、という流れになる。以下、俺がアクセスカウンターの画像を生成した手順を追って説明する。素材画像の情報を取得する素材となる画像は、ここではPNG形式のものをテーマディレクトリにアップロードして使用する。URLでもいいんだけど、その場合は画像をHTTPアクセスで取得することになるから、処理は遅くなる。テーマディレクトリ直下のフルパス(末尾のスラッシュは含まない)を取得できるので、ファイル名は以下のようになる。赤字部分は各自変更すること。'/img/counter.png';次に、素材画像のサイズなどの情報を取得しておく。(画像の幅)を÷10しているのは、素材が0から9までの画像を左から順に結合した画像であり、そのひとつひとつのサイズを取得するためだ。$image_size[1];キャンバスを作る次に、画像処理の土台となるキャンバスを設定する。アクセスカウンターに表示したい桁数を代入しておく。よりキャンバスを設定している。第1引数はキャンバスの幅、第2引数はキャンバスの高さとなる。このままではキャンバスの背景色が黒のままになる。よりその色を透過色に設定している。これにより、キャンバスの背景色が透明になる。素材画像を読み込む先ほどは素材画像の情報を取得したが、今度は画像データを読み込む。imagecreatefrompng($file_name);素材画像を貼り付けるいよいよ生成する画像を形作っていく工程だ。代入しておくが、形式は数字添字の配列とし、左の桁から順に配列の各要素に1桁ずつ格納されているものとする。「003176」なら以下のようになる。6;この配列の作り方は、以下の通り。あるが、引数が8つもあってややこしい。第1引数がキャンバス、第2引数が貼り付ける画像。第3引数は貼り付ける位置のx座標(左端が基準)、第4引数はy座標(上端が基準)となる。現在の貼り付け位置となる。素材はこの位置を左上として貼り付けられる。素材画像は任意の大きさにトリミングされて貼り付けられる。素材画像のトリミング範囲の左上のx座標が第5引数、y座標が第6引数となる。目的の数字の位置となるのだ。トリミング範囲の幅が第7引数、高さが第8引数だ。まとめると以下のような感じ。ループにより1桁ずつ位置をずらしながら貼り付けることにより、何桁のアクセスカウンターでも作ることができる。画像を出力する以上で画像は完成したので、あとはデータをリクエストに対して出力するだけだ。用意されているのでこれを使用する。)、第3引数はPNGの圧縮率(たぶん9でいい)。いう物騒な名前の関数で、キャンバスと素材画像のキャッシュを消去。は?そんなもの、いりません!......それらはWebページを表示させるのに使うもので、今回は画像だから、むしろそれらを使ってはならない。その他、何かを出力しかねないような余計なコードは一切不要。アクセスカウンターの数値を取得するなどの処理は別途、必要に応じて、ただし出力は一切しないように。HTTPヘッダーを変更さて、これで生成した画像を出力できるようになったが、このままでは作成した固定ページのURLにアクセスしても、画像を表示させることはできない。その固定ページはあくまで「ページ」、すなわちHTMLなWebページでしかないからだ。いや、データとしては画像だが、ユーザーエージェント(ブラウザ)がそれを画像として扱わないという意味だ。表示されるのは文字化けした謎のページ......この辺りはHTTPの仕組みの話になるが、ユーザーエージェントとWebサーバーがやり取りをするとき、ページ(または画像など)本体のデータを転送する前に、HTTPヘッダーという一連のデータを送信する。