http://tanaka.sakura.ad.jp とある櫻花の画像生成(ジェネレーター) - さくらインターネット創業日記

とある櫻花の画像生成(ジェネレーター)

| コメント(18) | トラックバック(1)

いろんな人たちから「何やってんだ(笑)」と言われつつも、とある櫻花の画像生成が完成しました。


http://to-a.ru


元ネタは言わなくてもお分かりいただけるでしょうが、某禁書目録や某超電磁砲のタイトル風画像を作れるだけのサイトです。
ちなみに、「とある画像の自動生成」というサイトが既にあるのですが、Silverlightベースなのでクライアントのインストールが必要ですし、そのほかにも改良したいところが多かったので、自分で作りました。

改良したところ

  • サーバでの生成方式に変えた
  • グラデーションの粒度を細かくした
  • すべての文字にアンチエイリアスをかけた
  • フォントを極太明朝に変えた(HG明朝E)
  • サーバへの保存機能を設けた
  • とある???で、3文字入力を可能にした→ ex. とあるラジオの超電磁砲

今回は、PHP+GDで書いたのですが、文字に斜めの滑らかなグラデーションをかけるのは意外と難しく、文字データとグラデーションを別個で作って、独自のルーチンで合成するということをしました。
ImageMagickのレイヤーを使えば簡単だと言う情報をさまざまな人から寄せられたのですが、「プログラマたるもの制約の中で最高のアウトプットを出さんとあかん」ということで、GDのままです。(といいつつ、「ここまで作ったしGDでいいや」ってのが本音ですww)

まず、グラデーションを生成するコード。

# サイズの指定
$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 );

作成できた画像
20091223-gra.gif

グレースケール書かれた文字と、上記のグラデーションを合成する

$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);
	}
}

作成された画像
20091223-gra2.gif


ちなみに、本サイトを作るにあたってMS Officeに付属するHG明朝Eが一番グッときたのですが、色々調べてみるとサーバにコピーして利用してはいけないようです。
Office付属のフォントは、インストールしたPCに対するライセンスなので、自分のPCにあるフォントをサーバにコピーした時点で、複数台へのインストールとみなされますし、そもそも目的外利用になるそうです。
さまざまなサイトで、Windowsから取り出したフォントをGDで利用していますが、本当はダメなので、要注意です。
ということでHGフォントを調べたのですが、Microsoftは「うちは関与しない」というスタンスであり、作成元のリコーにてライセンス処理が行えるとのことらしいので、A方式と呼ばれるライセンスをリコーから購入しました。
そこそこ値段はしますが、オンラインで手続き出来るので便利です。


というわけで、お粗末さまでした。


どうでもいいですが、先日の日曜日に一日で作ったので名実ともに日曜プログラミングです。

2009/12/25 2:00追記
上記のとおり、今回はHG明朝Eを使いましたが、オリジナル作品ではAdobeの小塚明朝が使われているとの情報を皆様よりお寄せ頂きました。
一応、個人所有のAdobe製品に同フォントが付属していたのですが、サーバで利用するためのライセンスがわからないので、利用するのは控えたいと思います。(使えるとの情報もありましたが、信憑性がないので・・・)
その上で、InDesign Server CS4を購入する以外の方法で、同フォントを利用する方法をご存知の方がおられれば、ぜひともコメント頂ければ幸いです。

トラックバック(1)

トラックバックURL: http://tanaka.sakura.ad.jp/mt/mt-tb.cgi/999

biac の それさえもおそらくは幸せな日々#アニメ・コミック - とある会社の四月馬鹿 (2010年4月 2日 08:16)

不景気なのに、 ますます熱くなってくエイプリルフール。 いや、 不景気だからこそ、 なのか。今年は、 円谷プロの 「円谷ッター(ツブッター)」 http:... 続きを読む

コメント(18)

http://d.hatena.ne.jp/pha/20081127/p1
「Adobeの小塚フォントはウェブアプリなどで動的に画像を生成するのにも無償で商用利用できます」
http://www.adobe.com/jp/type/browser/legal/embeddingeula.html
「編集可能のフォント埋め込みが許可されているフォント」
ということで、大丈夫ではないかと思います。

小塚明朝の利用についてですが,ググったところ,このようなサイトに行き着きました.既にご覧になっているようであれば,続きは無視して下さい.

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のほうと契約
・ほとんどのユーザーは申請していないみたい

『サーバに利用しない』の点で,とある櫻花の画像生成には利用出来ないと思われます.

以上,ご参考まで.

オリジナルでは小塚明朝……の件ですが、あまりにも忠実に元ネタを再現してしまうと、それはそれでまた別の問題(意匠権、著作権)が出てきそうなので、お遊びでは済まなくなりそうに思います。
アスキー・メディアワークスとコラボするとかいう話になれば、案件を通せる印刷屋さんも出てくるかもしれませんね。

TrackBackが受け付けられなかったようですので、
コメント欄にて

印刷会社とコラボすればいい
http://blog.dtpwiki.jp/dtp/2009/12/post-7614.html


こんにちは。このジェネレータで楽しんでおります。

そこで気になったのですが、このジェネレータを使って
作ったロゴは、プレゼンテーションの発表などに
使用してもいいものなのでしょうか?

これからいろいろと使ってみたくて質問しました。
よろしくお願いします。

緑色がほしい

感想です。追記についてではなくすいません。

使わせていただきました!凄いですね!
文字のグラデーションや輪郭は綺麗だし、自由度も高くいろんな用途に使えますね。私はメッセの自画像に使わせていただいてます。

「何やってんだ(笑)」とツッコまれながら作ったそうですが、感謝してます。ありがとうございました。

偶然通りがかりました。
まさか、さくらインターネットの社長さんが
こんな茶目っ気のある方だったとはw

ニヤニヤしながら使わせてもらいますw

このジェネレーター面白くて楽しんでいます
 
私も色々と使いたいと思いました
よろしくお願いします

すいません「とある櫻花の画像生成」じゃなくて「がぞ☆つく」のことなのですが、
最近32bitPNGから64bitPNGに変更されたのでしょうか?
以前作成した画像を保存したものはmspaint.exeで開けました。
今日作成した画像をmspaint.exeで開こうとすると
「このファイルは読み取れません。
このビットマップ ファイルは無効であるか、または現在サポートされていない形式です。」
と表示されました。

通りすがりでこのジェネレータを利用させてもらっている者ですが、ひとつ要望があります。
縦表示で作成するときに、「ー」(ハイフン)が
左側に寄ってしまうのを真ん中にくるようにすることは可能でしょうか?

とある櫻花の画像生成
を使わせてもらったのですが文字化けしていまいます。
どうすれば直りますか?

文字がちゃんと表示されません

オリジナルのことをよく知らないのですが、
縦書きの長音「ー」が左に寄ってます。
縦書き用のフォントってありませんか?


こんにちわ・・・

8月18日に画像を投稿したものです。。。

削除ができません。。。

やり方を教えて下さい。。。

もしくは削除していただければ光栄です。。。

無理なお願いを申し訳ありません!

スマートフォンの待ち受けにしたいのですが1280×980には対応できませんか?

「の」を固定せずにそこも自由に入力できるようになったらさらにいいと思うのですが…;;

僕は貴方の後輩に当たる高専生です
このジェネレーターは通りすがりで見つけたのですが、まさかうちの卒業生が作ったということには驚きでした
僕は建設システムですが、貴方の話は最初の進路授業だったかな?で聞きました
違う学科ながら、尊敬しています!
ちなみに僕もとあるシリーズは大好きです

コメントする

自己紹介

本名:田中邦裕/1978年生まれ
1996年にさくらインターネットを創業しホスティングサービスを開始。 98年に有限会社インフォレスト(2000年に解散)設立後、翌年にさくらインターネット株式会社を設立して社長に就任。
05年に東証マザーズに上場
kunihirotanakaをフォローしましょう

このブログ記事について

このページは、田中邦裕が2009年12月23日 10:29に書いたブログ記事です。

ひとつ前のブログ記事は「さくらインターネットのサバ手ぬぐいが出来ました」です。

次のブログ記事は「あけましておめでとうございます」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

ウェブページ

Powered by Movable Type 5.2.10