いろんな人たちから「何やってんだ（笑）」と言われつつも、とある櫻花の画像生成が完成しました。
http://to-a.ru
元ネタは言わなくてもお分かりいただけるでしょうが、某禁書目録や某超電磁砲のタイトル風画像を作れるだけのサイトです。
ちなみに、「とある画像の自動生成」というサイトが既にあるのですが、Silverlightベースなのでクライアントのインストールが必要ですし、そのほかにも改良したいところが多かったので、自分で作りました。
改良したところ
- サーバでの生成方式に変えた
- グラデーションの粒度を細かくした
- すべての文字にアンチエイリアスをかけた
- フォントを極太明朝に変えた（HG明朝Ｅ）
- サーバへの保存機能を設けた
- とある???で、3文字入力を可能にした→ ex. とあるラジオの超電磁砲
今回は、ＰＨＰ＋ＧＤで書いたのですが、文字に斜めの滑らかなグラデーションをかけるのは意外と難しく、文字データとグラデーションを別個で作って、独自のルーチンで合成するということをしました。
ImageMagickのレイヤーを使えば簡単だと言う情報をさまざまな人から寄せられたのですが、「プログラマたるもの制約の中で最高のアウトプットを出さんとあかん」ということで、ＧＤのままです。（といいつつ、「ここまで作ったしＧＤでいいや」ってのが本音ですｗｗ）
まず、グラデーションを生成するコード。
# サイズの指定
$maxx = 640;
$maxy = 300;
$start = -200;
$end = 300;
# 色の初期化
$fg1 = array( 233, 19, 29 ); #開始色
$fg2 = array( 235, 115, 52 );
# グラデーションイメージの作成
$imggra = imagecreatetruecolor($maxx, $maxy);
# 開始色で塗りつぶし
$col = imagecolorallocate($imggra, $fg1[0], $fg1[1], $fg1[2]);
imagefill($imggra, 0, 0, $col);
# グラデーション作業の開始
for( $i=$start; $i<$end; $i++ ){
# グラデーションの色のステップ
$per = ($i-$start) / ($end-$start);
# 色の作成
$r = $fg1[0] + ($fg2[0] - $fg1[0]) * $per;
$g = $fg1[1] + ($fg2[1] - $fg1[1]) * $per;
$b = $fg1[2] + ($fg2[2] - $fg1[2]) * $per;
$col = imagecolorallocate($imggra, $r, $g, $b);
# グラデーションを描く
imageLine($imggra, $i, 0, $maxx-1, $maxx-$i, $col);
}
# 終了色で残りのエリアの塗りつぶし
$col = imagecolorallocate($imggra, $fg2[0], $fg2[1], $fg2[2]);
imagefill($imggra, $maxx-1, 0, $col );
作成できた画像
グレースケール書かれた文字と、上記のグラデーションを合成する
$font = "HGminchoE/HGRME.TTC"; # フォントを指定
# メインイメージの作成（グレースケールで文字を描く）
$im = imagecreatetruecolor($maxx, $maxy);
$black = imagecolorallocate($im, 0, 0, 0);
$white = imagecolorallocate($im, 255, 255, 255);
imagefill($im, 0, 0, $white );
ImageTTFText ($im, 100, 0, 100, 200, $black, $font, "とある");
# 合成する
for($x=0; $x<$maxx; $x++){
for($y=0; $y<$maxy; $y++){
# グラデーション色を取得
$rgb = imagecolorat($imggra, $x, $y);
$r = ($rgb >> 16) & 0xFF;
$g = ($rgb >> 8) & 0xFF;
$b = $rgb & 0xFF;
# 文字パターンの色を取得（グレースケール）
$mask = imagecolorat($im, $x, $y);
$alpha = $mask & 0xFF;
# 文字にグラデーション色を貼り付け
$r += $alpha; if($r>255) $r=255;
$g += $alpha; if($g>255) $g=255;
$b += $alpha; if($b>255) $b=255;
# 新しい色をセット
$col = imagecolorallocate($im, $r, $g, $b);
imagesetpixel($im, $x, $y, $col);
}
}
作成された画像
ちなみに、本サイトを作るにあたってMS Officeに付属するＨＧ明朝Ｅが一番グッときたのですが、色々調べてみるとサーバにコピーして利用してはいけないようです。
Office付属のフォントは、インストールしたＰＣに対するライセンスなので、自分のＰＣにあるフォントをサーバにコピーした時点で、複数台へのインストールとみなされますし、そもそも目的外利用になるそうです。
さまざまなサイトで、Windowsから取り出したフォントをＧＤで利用していますが、本当はダメなので、要注意です。
ということでＨＧフォントを調べたのですが、Microsoftは「うちは関与しない」というスタンスであり、作成元のリコーにてライセンス処理が行えるとのことらしいので、Ａ方式と呼ばれるライセンスをリコーから購入しました。
そこそこ値段はしますが、オンラインで手続き出来るので便利です。
というわけで、お粗末さまでした。
どうでもいいですが、先日の日曜日に一日で作ったので名実ともに日曜プログラミングです。
2009/12/25 2:00追記
上記のとおり、今回はHG明朝Eを使いましたが、オリジナル作品ではAdobeの小塚明朝が使われているとの情報を皆様よりお寄せ頂きました。
一応、個人所有のAdobe製品に同フォントが付属していたのですが、サーバで利用するためのライセンスがわからないので、利用するのは控えたいと思います。（使えるとの情報もありましたが、信憑性がないので・・・）
その上で、InDesign Server CS4を購入する以外の方法で、同フォントを利用する方法をご存知の方がおられれば、ぜひともコメント頂ければ幸いです。
| パーマリンク
コメント (9)
http://d.hatena.ne.jp/pha/20081127/p1
「Adobeの小塚フォントはウェブアプリなどで動的に画像を生成するのにも無償で商用利用できます」
http://www.adobe.com/jp/type/browser/legal/embeddingeula.html
「編集可能のフォント埋め込みが許可されているフォント」
ということで、大丈夫ではないかと思います。
Posted by: kichi | 2009年12月25日 10:40
日時: : 2009年12月25日 10:40
小塚明朝の利用についてですが，ググったところ，このようなサイトに行き着きました．既にご覧になっているようであれば，続きは無視して下さい．
http://note.openvista.jp/2007/japanese-fonts-for-free-commercial-use/#te1887b
こちらのサイトの下部にコメントの書き込みがあるのですが，#11と#13の内容によると，以下のようです．
・WEB利用の場合，ビットマップ画像(PNG，JPG，GIFなど)であること
・静止画(紙への印刷，WEBでの停止画像)限定
・文字の改変はしない(傾斜，長体，平体などNG)
・GIFアニメならびにFLASHはNG
・フォント自体のダウンロードをさせない
・サーバに利用しない
・AdobeJapanには専門の窓口もない状態(許諾料も申請の仕方も教えてもらえないが，とりあえずサポートで受け付ける)
・申請する場合はUSのほうと契約
・ほとんどのユーザーは申請していないみたい
『サーバに利用しない』の点で，とある櫻花の画像生成には利用出来ないと思われます．
以上，ご参考まで．
Posted by: taim | 2009年12月25日 15:04
日時: : 2009年12月25日 15:04
オリジナルでは小塚明朝……の件ですが、あまりにも忠実に元ネタを再現してしまうと、それはそれでまた別の問題（意匠権、著作権）が出てきそうなので、お遊びでは済まなくなりそうに思います。
アスキー・メディアワークスとコラボするとかいう話になれば、案件を通せる印刷屋さんも出てくるかもしれませんね。
Posted by: n-yuji | 2009年12月26日 15:58
日時: : 2009年12月26日 15:58
TrackBackが受け付けられなかったようですので、
コメント欄にて
印刷会社とコラボすればいい
http://blog.dtpwiki.jp/dtp/2009/12/post-7614.html
Posted by: CL | 2009年12月27日 11:09
日時: : 2009年12月27日 11:09
こんにちは。このジェネレータで楽しんでおります。
そこで気になったのですが、このジェネレータを使って
作ったロゴは、プレゼンテーションの発表などに
使用してもいいものなのでしょうか？
これからいろいろと使ってみたくて質問しました。
よろしくお願いします。
Posted by: とある寺院の修学旅行（スクールトリップ） | 2010年01月07日 15:44
日時: : 2010年01月07日 15:44
緑色がほしい
Posted by: 匿名 | 2010年01月11日 12:50
日時: : 2010年01月11日 12:50
感想です。追記についてではなくすいません。
使わせていただきました！凄いですね！
文字のグラデーションや輪郭は綺麗だし、自由度も高くいろんな用途に使えますね。私はメッセの自画像に使わせていただいてます。
「何やってんだ（笑）」とツッコまれながら作ったそうですが、感謝してます。ありがとうございました。
Posted by: 匿名 | 2010年01月12日 03:46
日時: : 2010年01月12日 03:46
偶然通りがかりました。
まさか、さくらインターネットの社長さんが
こんな茶目っ気のある方だったとはw
ニヤニヤしながら使わせてもらいますw
Posted by: 匿名 | 2010年01月16日 23:10
日時: : 2010年01月16日 23:10
すいません「とある櫻花の画像生成」じゃなくて「がぞ☆つく」のことなのですが、
最近32bitPNGから64bitPNGに変更されたのでしょうか？
以前作成した画像を保存したものはmspaint.exeで開けました。
今日作成した画像をmspaint.exeで開こうとすると
「このファイルは読み取れません。
このビットマップ ファイルは無効であるか、または現在サポートされていない形式です。」
と表示されました。
Posted by: ぬまぶくろう | 2010年06月23日 22:37
日時: : 2010年06月23日 22:37