携帯端末向けのジェネレーター制作の続きです。前回は任意の文字を合成するところまで紹介しました。今回は、入力された文字を合成する方法について解説しましょう。なお、解説と言っても書いている本人がPHP暦2ヵ月弱の若輩者なので、ミスやもっといい方法があるかもしれません。そんなときはやさしくご指摘いただけると幸いですww

まずは以下のソースをご覧ください。基本部分は前回のソースとあまり変わっていません。ですが、入力フォーム用のHTMLタグが加えられています。

------------------------------------------------
<?php

    $txt = $_POST['txt'];
    $txt = mb_convert_encoding($txt, "UTF-8", "auto");

if($_POST['submit']){
    header("content-type: image/jpeg");
    $img = imagecreatefromjpeg("test01.jpg");
    $font = "VL-Gothic-Regular.ttf";
    $black = imagecolorallocate($img, 0, 0, 0);
    $fontSize = 20;
    $x = 13;
    $y = 50;
    imagettftext($img, $fontSize, 0, $x, $y, $black, $font, $txt);
    imagejpeg($img);
    imagedestroy($img);

} else {
?>
<form action="generator.php" method="POST">
  <input type="text" name="txt" size="30" value="文字を入力"><br>
  <input type="submit" name="submit" value="投稿">
</form>
<?php
}
?>
------------------------------------------------

formタグで囲まれた部分が入力インターフェースの部分です。入力用のテキストボックス(txt)と投稿用のボタン(submit)を用意しています。これらが操作されれば、「generator.php」が呼び出され、それぞれの内容がPHPプログラムにPOSTされるわけです。

POSTされたデータは$_POSTで扱えます。「$txt = $_POST['txt'];」は、POSTされたtxt(テキストボックス)のデータを変数$txtに代入するという意味です。このデータの文字コードを変換することで、文字化けすることなく扱えるようにしています。

「if($_POST['submit'])」は、submitの値が真、つまりボタンが押されていれば「{}」の中の命令を実行する、という意味です。この部分の処理は前回と変わりません。文字列の指定がifの外に出ているだけで、そのほかの処理はまったく同じです。

このプログラムを実行すると、以下のような結果が得られます。


表示したばかりの状態


文字を入力して「投稿」をクリック


入力した文字が合成されました

ここでポイントをふたつほど。まずelseの部分で「?>」と記述して、一度PHP部分から抜けています。これは、subitが押されていないならフォームを表示する、という意味です。

また、テキストボックスのvalueにあらかじめ表示する文字を設定していますが、これはボタンの文字化けを防止するためです。この部分を入力しておかないと、ボタンが文字化けすることがあります。事前にmetaタグなどで文字コードを指定してもいいのですが、こちらのほうが手軽です。

ちょっと短いのですが、今回の解説はここまで。次回は入力フォームを常時表示しておく方法について紹介します。

携帯サイトの大喜利コーナーにハマっているのですが、そのサイトでは最近大喜利に力を入れだしたようです。お題がたくさんあるのはいいのですが、そのぶん自分のネタの精度も上がったり下がったりしてしまいがちです。

ということで、自分なりに推敲するために、いちど記事にしてみます。
そこで面白かったものを投稿してみようかな、というワケです。

今回のお題はコチラ

満面の笑みの理由は?

とりあえず、以下が思いついたネタです。

・ノドに引っかかっていた魚の骨が取れた

・自分がアンタッチャブル柴田似であることに気が付いた

・3回目のチェンジにして、ようやく当たりのお姉ちゃんが来た

・ドラえもんの声優陣が元に戻った

・胃がんだとおもったら胃潰瘍だった

・ズボンのポケットに500円玉が入っていた

・ムカつくカメラマンの「もっと笑って!」という注文にヤケクソになった

江原啓之に「前世はアニメーターです」と言われ、リアクションに困った挙句の笑顔

・つぶやきシローが再評価され出したから

・表情の固い日本人に自らお手本を示した

・便秘が4日目にしてようやく解消されたから

・「森の熊さん」をそらで歌えるようになった

・「お客さん、大きいね」というお世辞を本気で受け取った

・5回目のチャレンジで英検4級に合格した

・自分が日本人でないことに気が付き、積年の疑問が解決したから

・深夜3時を回ったから

う~ん、どうでしょうか。
サムイのはそっとしておいてください(涙)

ちなみに、ほかのお題や投稿先は以下のサイトで見られますヨ

ドパミン
http://dopamin.tv/pc/?page_id=667

PHPの練習と言うことで、いまさらながらジェネレーターを作ることにしました。
今回作るのは、画像に文字を合成するジェネレーターです。

用意した画像

test01.jpg

画像のフキダシ部分に入力した文字を表示するというシンプルなものです。
今回は段階を追って説明します。

1:まずは画像を表示してみる
とりあえずは用意した画像を表示してみましょう。PHPで画像を表示するには、「GD」と呼ばれるグラフィックライブラリを使います。現在リリースされているPHPのバージョンではデフォルトになっているのですが、古いバージョンではオプションで用意されているとのこと。そこで、まずはGDが使えるかどうかをチェックします。

GDが使えるかどうかは、PHPの情報で確認できます。以下のソースを「info.php」というファイル名で保存し、ブラウザーで開いてみてください。

------------------------------------------------
<?php

phpinfo();

>
------------------------------------------------

「inof.php」を開くと、PHPの情報が表示されます。そのなかに「gd」という項目があり、「GD Support」が「enabled」になっていれば利用できます。まあいまどき使えない環境なんてないのかもしれませんが、後学のために確認してみました。



ではいよいよ画像を表示してみましょう。
つぎのソースを「generator.php」という名前で保存し、先ほどの画像ファイル「test01.jpg」と同じフォルダにアップします。

------------------------------------------------
<?php

header("content-type: image/jpeg");
$img = imagecreatefromjpeg("test01.jpg");

imagejpeg($img);
imagedestroy($img);

?>
------------------------------------------------

imagecreatefromjpeg()関数で変数imgに画像のリソースを代入します。つぎにimagejpeg()関数で画像を出力。最後に画像をメモリから解放して終了です。意外に簡単ですね。

ここで注意してほしいのが、「<?php」の前に何も書かないという点です。なにか文字が書かれていると画像が正常に表示されないので注意してください。

2:画像に文字を合成してみる

つぎに、画像に任意の文字列を合成します。先ほどの「generator.php」を次のように書き換えましょう。

------------------------------------------------
<?php

header("content-type: image/jpeg");
$img = imagecreatefromjpeg("test01.jpg");

$fontSize = 20;
$x = 13;
$y = 50;
$black = imagecolorallocate($img, 0, 0, 0);
$font = "VL-Gothic-Regular.ttf";
$txt = "オレももう歳だな";
$txt = mb_convert_encoding($txt, "UTF-8", "auto");

imagettftext($img, $fontSize, 0, $x, $y, $black, $font, $txt);

imagejpeg($img);
imagedestroy($img);

?>
------------------------------------------------

imagettftextは、画像のリソースにTrueTypeの文字を合成する関数です。
引数は以下のように設定します。

imagettftext (画像リソース, フォントサイズ, 角度, 文字を表示するX座標, 文字を表示するY座標, カラーインデックス, フォント名, 合成する文字列 )

画像リソースには、imagecreatefromjpegの値を代入した変数を指定。X、Y座標には文字の表示位置を指定します。カラーインデックスはimagecolorallocate関数で作成します。画像リソースとRGBを指定し変数に代入。ここでは色を変えることを考えて、変数名を$blackとしました。

フォント名の指定では、使用するTrueTypeフォントのファイル名を指定します。ここではフリーで使える「VLゴシックフォント」を使っています。

VLゴシックフォントファミリ
http://dicey.org/vlgothic/

$txtは、合成する文字列を表わします。この文字列を変えることで、好きな文字を表示することが可能です。そしてさらに、文字コードをmb_convert_encoding関数でUTF-8に変換しています。

PHPの文字コードは設定ファイルである「php.ini」を修正することで変えられますが、私の環境(レンタルサーバ)では、php.iniを変更できません。デフォルトの文字コードがUTF-8だったので、PHPで扱える文字コードに変換しています。携帯サイトの場合、かならずShift-JISで出力しないといけないので、phpファイルはShift-JISで保存し、文字コードは環境に合わせて適宜変更してください。

このソースを実行すると、以下のようになります。



文字列が画像に組み込まれていますね。これで第1段階は終了です。次回は、フォームを使って入力した文字を表示する方法について説明します。