月別アーカイブ: 2013年2月

jQuery mobileのgridの幅を調整する

スマホっぽいUIのサイトを手軽に作れるjQuery mobileだが、グリッドの幅を調整できないのが不満だった。

<div style="width: 10em;"></div>

などとしても無視されてしまう。
どうやらこういう仕様であるようだ。
20130228-222645.jpg

解決方法は、考えてみれば単純なものだった。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <style type="text/css">
<!--
.mygrid-main .ui-block-a{
    width:6em;
}
.mygrid-main .ui-block-b{
    min-width:12em;
}
-->
    </style>
</head>
<body>
<div data-role="page" id="main" data-theme="b">
    <div data-role="content">
        <div>
            <div><a href="http://localhost/" data-role="button">1</a></div>
            <div><a href="http://localhost/" data-role="button">2</a></div>
        </div>
    </div>
</div>
</body>
</html>

20130228-223735.jpg
できた。

PerlのImagerライブラリで「キャラクターなんとか機」のマネをしてみる(2)

前回の課題の解決に挑戦。

Cent OS 6サーバ上でCGIとして動作させる

画像生成の部品として使用しているキャラクターなんとか機のパーツは、ファイル名がそのまま表示名になる仕様であり、日本語になっている。
FTPソフトで転送した際に文字化けを起こしていたので、Cent OS 6のファイルシステムに合わせてUTF-8に変更して転送する設定にした。
また、スクリプトから日本語でファイル名を直接指定しているので、スクリプト自体も文字コードをUTF-8にして保存する。
これであっさりとサーバ上で動作した。
せっかくなので、実行するとHTTPヘッダと画像データのバイナリを標準出力に書き込む動作に変更し、昔のアクセスカウンターのようにimgタグで呼び出す仕様にしてみた。

色をランダムに選択

これに関してはこれができることを意識してもともとスクリプトを書いていたので、簡単に終了。

スクリプト全文


#!/usr/bin/perl
use Imager;
local $basedir = './data/default';
local @layers = (
'accessory_back',
'hair_back',
'hair_back_accessory',
'body_back',
'accessory_underwear',
'body_front',
'body_front_color',
'accessory_middle_back',
'head',
'accessory_middle_front',
'face_back',
'hair_front',
'hair_front_accessory',
'face_front',
'eye',
'accessory_front'
);
local %colorgloup = (
'head'				=> 'body',
'face_back'			=> '',
'face_front'			=> '',
'eye'				=> 'eye',
'hair_back'			=> 'hair',
'hair_front'			=> 'hair',
'hair_back_accessory'		=> '',
'hair_front_accessory'		=> '',
'body_back'			=> 'body',
'body_front'			=> '',
'body_front_color'		=> 'cloth',
'accessory_underwear'		=> '',
'accessory_middle_back'		=> '',
'accessory_middle_front'	=> '',
'accessory_back'		=> '',
'accessory_front'		=> ''
);
my %charaparts = (
'head'				=> '普通な顔1.png',
'face_back'			=> '素.png',
'face_front'			=> '素.png',
'eye'				=> '普通な目1.png',
'hair_back'			=> 'ロング.png',
'hair_front'			=> 'ナチュラル.png',
'hair_back_accessory'		=> 'ツインテール(長).png',
'hair_front_accessory'		=> '',
'body_back'			=> 'サマードレス1.png',
'body_front'			=> '',
'body_front_color'		=> 'サマードレス1.png',
'accessory_underwear'		=> '',
'accessory_middle_back'		=> '',
'accessory_middle_front'	=> '',
'accessory_back'		=> '',
'accessory_front'		=> ''
);
local %colormatrixorigin = (
'blue' =>   [	[ 1	, 0	, 0	, 0	],
		[ 1	, 0	, 0	, 0	],
		[ 0	, 0	, 1	, 0	],
		[ 0	, 0	, 0	, 1	], ],
'purple' => [	[ 0	, 0	, 1	, 0	],
		[ 1	, 0	, 0	, 0	],
		[ 0	, 0	, 1	, 0	],
		[ 0	, 0	, 0	, 1	], ],
'red' =>   [	[ 0	, 0	, 1	, 0	],
		[ 1	, 0	, 0	, 0	],
		[ 1	, 0	, 0	, 0	],
		[ 0	, 0	, 0	, 1	], ],
'yellow' => [	[ 0	, 0	, 1	, 0	],
		[ 0	, 0	, 1	, 0	],
		[ 1	, 0	, 0	, 0	],
		[ 0	, 0	, 0	, 1	], ],
'green' => [	[ 1	, 0	, 0	, 0	],
		[ 0	, 0	, 1	, 0	],
		[ 1	, 0	, 0	, 0	],
		[ 0	, 0	, 0	, 1	], ],
'water' => [	[ 1	, 0	, 0	, 0	],
		[ 0	, 0	, 1	, 0	],
		[ 0	, 0	, 1	, 0	],
		[ 0	, 0	, 0	, 1	], ],
'black' => [	[ 1	, 0	, 0	, 0	],
		[ 1	, 0	, 0	, 0	],
		[ 1	, 0	, 0	, 0	],
		[ 0	, 0	, 0	, 1	], ],
'white' => [	[ 0	, 0	, 1	, 0	],
		[ 0	, 0	, 1	, 0	],
		[ 0	, 0	, 1	, 0	],
		[ 0	, 0	, 0	, 1	], ],
'dummy' => [	[ 1	, 0	, 0	, 0	],
		[ 0	, 1	, 0	, 0	],
		[ 0	, 0	, 1	, 0	],
		[ 0	, 0	, 0	, 1	], ]
);
my @colorlist =  keys(%colormatrixorigin);
my %colormatrix = (
'eye'	=> $colormatrixorigin{$colorlist[int(rand(@colorlist))]},
'hair'	=> $colormatrixorigin{$colorlist[int(rand(@colorlist))]},
'cloth'	=> $colormatrixorigin{$colorlist[int(rand(@colorlist))]},
'body'	=> $colormatrixorigin{'dummy'},
);
my $imager = Imager->new(xsize => 300,ysize => 400, channels => 4);
$imager = &makechara($imager,\%charaparts,\%colormatrix);
my $data;
$imager->write(data => \$data, type => 'png') or die $imager->errstr;
binmode STDOUT;
print "Content-type: image/png\n";
print "Pragma: no-cache\n\n";
print $data;
sub makechara{
	(my $imager,my $charapartsref,my $colormatrixref) = @_;
	my $imagertmp = Imager->new(xsize => 300,ysize => 400, channels => 4);
	foreach(@layers){
		unless($charapartsref->{$_}){next;}
		$imagertmp->read( file => "$basedir/$_/$charapartsref->{$_}" ) or die $imagertmp->errstr;
		if($colormatrix{$colorgloup{$_}}){
			$imagertmp = $imagertmp->convert(matrix => $colormatrixref->{$colorgloup{$_}});
		}
		$imager->rubthrough( src => $imagertmp, tx => 0, ty =>0);
	}
	return $imager;
}

結果

↓リロードしたら色が変わるはず
imagertest

今後の課題

  • 本当はローカル(windows)とサーバ(linux)を同一スクリプトで動かしたい。スクリプト・ファイルシステム・テキストファイル内の文字コードを自動で判別して変換してくれるライブラリだかモジュールだかがあるんじゃないかと思ったが、ちょっと探したところ見つけられなかった。ローカルではShift-JISで動かして、サーバにFTPで転送する際にUTF-8に変換されるように設定するという方法もある…のか?
  • パーツのランダム選択機能はどうしようか。ディレクトリ内のファイルリストを作ってランダムで選ぶ or 別途パーツリストを作ってそこから選択で検討。後者を選ぶなら、ついでにパーツの名称とファイル名の変換テーブルも作ってファイルをリネームすればもう一つの問題も解決できるが、パーツフォルダはそのままで本家キャラクターなんとか機と互換する状態にしたいとも思う。
  • ところでこれって、ユーザがブラウザ上でパーツを選びべるようにして、Ajaxとかでプレビュー画像を随時更新すればWeb版キャラクターなんとか機になるんじゃないかと思ったら、すでにJavaScript版が公開されていた。当然この用途ならJavaScriptの方が効率的だよなぁ…あとFlashもアリか。

 

Twenty TwelveのhタグのCSSを編集

前から気になってたけど、よく見るアレはCSSを編集しないとできなかったのか。

参考サイト

ただしTwenty Twelveでは編集する場所が違う。


.entry-content h3,
.comment-content h3 {
    font-size: 16px;
    font-size: 1.142857143rem;
    line-height: 1.846153846;
    margin-bottom: 1em;
    padding: 5px 10px;
    border-bottom: solid 1px #C0C0C0;
    border-left: solid 10px #C0C0C0;
}
.entry-content h4,
.comment-content h4 {
    font-size: 14px;
    font-size: 1rem;
    line-height: 1.846153846;
    margin-bottom: 1em;
    padding: 2px 5px;
    border-bottom: solid 1px #C0C0C0;
    border-left: solid 5px #C0C0C0;
}

h3はこんな感じ

h4はこんな感じ

.entry-contentではなく.comment-contentで反応するのが納得いかない。

PerlのImagerライブラリで「キャラクターなんとか機」のマネをしてみる

Perlで画像処理をしたいと思った。

目標

  • キャラクターなんとか機の画像合成部分の動作をPerlで実装する(パーツの選択とかはスクリプト内で手打ちする)
  • Win7のStrawberry Perlx64版で動作する
  • Cent OS 6Webサーバ上でCGIとして動作する(本エントリ内では実現しない)

「キャラクターなんとか機」とは、素材として収録されている透過PNG画像を組み合わせ、さらに色の変更を行い、人物のいわゆる「立ち絵」を生成するプログラムである。

Perlでの画像処理ライブラリの有名どころはGD・ImageMagick・Imagerの3つのようだ。
StrawberryPerlにはGDとImagerがはじめから入っていたので、とりあえずImagerを使ってみることにした。
(StrawberryPerlにImageMagickインストールするのがうまくいかなかった。)

CentOS6にImagerをインストール

参考サイト
#yum list installed
してみると、
giflib.i686                                             4.1.6-3.1.el6
libjpeg.i686                                            6b-46.el6
libpng.i686                                             2:1.2.49-1.el6_2

なんだはいってるじゃん
ってことで
#cpan -i Imager
ずらずらーっと流れて結構時間かかって、
#perl -MImager -e 'print join ", ", sort keys %Imager::formats'
bmp, ifs, pnm, raw, tga

あれっ
あ、よく見てなかった。develがいるのか。
#yum install libjpeg-devel
#yum install libpng-devel
#yum install giflib-devel

で、
#cpan
cpan> force install Imager

#perl -MImager -e 'print join ", ", sort keys %Imager::formats'
bmp, gif, ifs, jpeg, png, pnm, raw, tga

よし、OK

追記。stringを使いたい場合


#yum install freetype-devel
#cpan
cpan> force install Imager

スクリプトを作成

スクリプト自体の参考

キャラクターなんとか機の動作の参考1

キャラクターなんとか機の動作の参考2

色の変更については、日本語の情報が見つけられなかったのでCPANで確認した。

げげ、行列の乗算なんて長らくやってない。どうやるんだったかな…


use Imager;
my @layers = (
'accessory_back',
'hair_back',
'hair_back_accessory',
'body_back',
'accessory_underwear',
'body_front',
'body_front_color',
'accessory_middle_back',
'head',
'accessory_middle_front',
'face_back',
'hair_front',
'hair_front_accessory',
'face_front',
'eye',
'accessory_front'
);
my %colorgloup = (
'head'				=> 'body',
'face_back'			=> '',
'face_front'			=> '',
'eye'				=> 'eye',
'hair_back'			=> 'hair',
'hair_front'			=> 'hair',
'hair_back_accessory'		=> '',
'hair_front_accessory'		=> '',
'body_back'			=> 'body',
'body_front'			=> '',
'body_front_color'		=> 'cloth',
'accessory_underwear'		=> '',
'accessory_middle_back'		=> '',
'accessory_middle_front'	=> '',
'accessory_back'		=> '',
'accessory_front'		=> ''
);
my %charaparts = (
'head'				=> '普通な顔1.png',
'face_back'			=> '素.png',
'face_front'			=> '素.png',
'eye'				=> '普通な目1.png',
'hair_back'			=> 'セミロング.png',
'hair_front'			=> 'ナチュラル.png',
'hair_back_accessory'		=> 'ツインテール(長).png',
'hair_front_accessory'		=> '',
'body_back'			=> 'セーラー服1.png',
'body_front'			=> 'セーラー服1.png',
'body_front_color'		=> 'セーラー服1.png',
'accessory_underwear'		=> '',
'accessory_middle_back'		=> '',
'accessory_middle_front'	=> '',
'accessory_back'		=> '',
'accessory_front'		=> ''
);
my %colormatrixorigin = (
'blue'	=> [	[ 1	, 0	, 0	, 0	],
		[ 1	, 0	, 0	, 0	],
		[ 0	, 0	, 1	, 0	],
		[ 0	, 0	, 0	, 1	], ],
'pur'	=> [	[ 0	, 0	, 1	, 0	],
		[ 1	, 0	, 0	, 0	],
		[ 0	, 0	, 1	, 0	],
		[ 0	, 0	, 0	, 1	], ],
'red'	=> [	[ 0	, 0	, 1	, 0	],
		[ 1	, 0	, 0	, 0	],
		[ 1	, 0	, 0	, 0	],
		[ 0	, 0	, 0	, 1	], ],
'yel'	=> [	[ 0	, 0	, 1	, 0	],
		[ 0	, 0	, 1	, 0	],
		[ 1	, 0	, 0	, 0	],
		[ 0	, 0	, 0	, 1	], ],
'grn'	=> [	[ 1	, 0	, 0	, 0	],
		[ 0	, 0	, 1	, 0	],
		[ 1	, 0	, 0	, 0	],
		[ 0	, 0	, 0	, 1	], ],
'wtr'	=> [	[ 1	, 0	, 0	, 0	],
		[ 0	, 0	, 1	, 0	],
		[ 0	, 0	, 1	, 0	],
		[ 0	, 0	, 0	, 1	], ],
'blk'	=> [	[ 1	, 0	, 0	, 0	],
		[ 1	, 0	, 0	, 0	],
		[ 1	, 0	, 0	, 0	],
		[ 0	, 0	, 0	, 1	], ],
'wht'	=> [	[ 0	, 0	, 1	, 0	],
		[ 0	, 0	, 1	, 0	],
		[ 0	, 0	, 1	, 0	],
		[ 0	, 0	, 0	, 1	], ],
'dummy'	=> [	[ 1	, 0	, 0	, 0	],
		[ 0	, 1	, 0	, 0	],
		[ 0	, 0	, 1	, 0	],
		[ 0	, 0	, 0	, 1	], ]
);
my %colormatrix = (
'eye'	=> $colormatrixorigin{'blk'},
'hair'	=> $colormatrixorigin{'red'},
'cloth'	=> $colormatrixorigin{'blue'},
'body'	=> $colormatrixorigin{'dummy'},
);
my $imager = Imager->new(xsize => 300,ysize => 400, channels => 4);
my $imagertmp = Imager->new(xsize => 300,ysize => 400, channels => 4);
my $counter = 0;
foreach(@layers){
	$counter++;
	unless($charaparts{$_}){next;}
	$imagertmp->read( file => "data/default/$_/$charaparts{$_}" ) or die $imagertmp->errstr;
	if($colormatrix{$colorgloup{$_}}){
		$imagertmp = $imagertmp->convert(matrix => $colormatrix{$colorgloup{$_}});
	}
	$imager->rubthrough( src => $imagertmp, tx => 0, ty =>0);
}
$imager->write( file => 'imagertest.png')or die $imager->errstr;

今のところは動作確認なので、もっとシンプルに書けるんじゃないか、なんてことは気にしない。

結果

なんかでた。

imagertest

今後の課題

  • 現状ではサーバ上で動作しない。パーツのファイル名が日本語であることが原因か。
  • パーツや色をランダムに選択して大量生成する機能がほしい