チェックなどのパターン画像を作成する「pattern*maker」を制作、公開しました

出産のため実家に里帰り中、暇を持て余した妊婦ひつじさんです。
チェックやストライプなどのパターン画像をwebブラウザ上で作成出来るwebサービス「pattern*maker」を制作・公開したので、ご紹介したいと思います。

http://pt-make.ark-under.net

pattern*makerについて

チェックやストライプなど、あらかじめ用意されたパターン画像に好きな色を付けて、パターン画像を作成出来るwebサービスです。
パターンも３つまで重ねることができますので、組み合わせ次第で何通りものパターンを作る事が出来ます。

作成したパターンを「Gallery」に一時的に保存する事が出来ますので、素敵なパターンを作ったらぜひ登録してください。
Galleryは最新100件まで保存されます。

また、パターン作成の元となるパターン素材の白と黒を「Download」で配布しています。
ローカルのソフト（フォトショやFireworksなど）でパターンを使用したい方はご利用ください。

こんな感じで、みんなでパターンに色つけて遊んだり、パターン素材の配布も兼ねたwebサービスになっています。

作ったきっかけ

仕事でチェック柄のパターンを作る機会があった時に、ラインの色とか組み合わせをもっと手軽にやりたいなぁと思いまして。
また、今後仕事で使えるようにパターン素材を色々作っていたんですが、出産を控え、仕事もしばらく出来ないし、勿体無いから何かに使えないかな、と。
普通に素材として配布してもいいけど、それはそれでつまらないし…。
お仕事してる方々に使ってもらえるようなサービス作って、ついでに配布すればいいかな！と行き着いた結果が「pattern*maker」です。

制作について

製作期間は約４日

里帰り前にはこういうの作りたいなーっていうのが決まっていました。
あとは画像の色付け方法や必要なライブラリとか集めればできるだろう、という状態から始めて、実験開始からひとまずの公開まで４日くらいでした。
こういう思いつきサービスはスピード勝負ですね。自分のモチベーションが下がらないうちに公開してしまわないと、いつまで経っても公開に至らない。

GDライブラリを使いたかったけど…

普段から画像を扱うサービスを作っているんですが、いつもPerlMagickなので、今回は勉強も兼ねてPHPのGDライブラリに挑戦してみました。
しかし、ベースとなる画像に色を付けて描き出したりは出来るんですが、どうやらGDライブラリは透過PNGなどの透過部分を上手く処理できないらしく。
以下のリンク先などを参考に色々やってみたけど、GDライブラリでは結局難しいと判断_(:3 ｣∠ )_
しかしどうせならPHPでImageMagickを使ってみようと奮闘もしてみたんですが、なぜか上手くいきませんでした。

・http://q.hatena.ne.jp/1151447363http://jp.php.net/imagefilter
・http://www.penlabo.net/archives/341
・http://www.torounit.com/blog/2010/08/27/176/
・http://blog.c-production.com/archives/2006/07/phpgd.html

結局PerlMagickを使う事に

普段からPerlMagickで色々作っていたので、ちょっと試してみただけであっさり。
参考リンクは以下。

・http://d.hatena.ne.jp/gnjdg6457/20091203/1259869827
・http://d.hatena.ne.jp/n80/20080415/1208265508

XSS対策とか

以前はてブでみかけて、次になにかwebサービス作るときは気をつけよう…と思って、以下も参照

・http://d.hatena.ne.jp/Hamachiya2/20120215/php_security
・http://d.hatena.ne.jp/xlc/20070202/1170411537

カラーピッカーについて

色をつけるなら、やはりカラーピッカーがあった方が便利なのでこちらの記事で紹介されてたjQueryプラグインの「Colorpicker」をチョイス。
トリガーなしでピッカーを表示出来たり、痒いとこに手が届く感じのオプションも色々あって、なかなか使いやすかったです。

・http://www.eyecon.ro/colorpicker/
・http://www.yoheim.net/blog.php?q=20120211

zip圧縮について

パターン素材のダウンロードは、最初１枚ずつ右クリック保存してもらう感じで、画像を表示してただけなんですが、まとめて欲しい時はzip、それも選択した分だけzip圧縮とかできたらいいのになーと思ったので、zip圧縮ボタンを後から追加しました。
色々試してみたんですが「zip.lib.php」を使う方法が分かりやすかったので、以下を参考にその方法で。

・http://www.favorite-labo.org/view/299

ライセンスが分からなかったんで調べてたら、GNU GENERAL PUBLIC LICENSE らしい…です。

・http://www.scribd.com/doc/21644430/Ojt-Report

デザインについて

今回はカラフルな画像がいっぱい出来てくる、はず、なので極力シンプルに。
JSも色々使っているので、表示が重くならないようにほぼテキストベースです。

今後について

パターンが増えすぎたら画像作成の画面が長くなりすぎるので、なにか対策を考えないとなーという感じです。

とりあえずはパターン素材を思いつく限り作って、随時追加していければな、と。
チェックとストライプしかないので、次はドットとか、個人的趣味ですがレースっぽいのとかね。

リクエストがあれば、Twitter：mei331宛へのリプライとか、ハッシュタグ「#pattern_maker」でつぶやくとかでもいいので。
可能であれば対応させていただきます。

出産予定日まで１ヶ月きったので、のんびりしつつ準備を少しずつ進めています。
とはいえ、産後は色々出来なくなるだろうと予測しているので、やりたいことやっておくよー＠・ェ・＠

2012.8.27追記

pattern*maker バージョンアップしました

重ねる画像の透明度を設定出来るようにしました

テストの段階でこの機能を入れたかったんですが、コマンドがよく分からず。
さらに探していたらこちらの記事をみつけて狂喜乱舞！早速組み込みました。

透明度はスライドで設定

透明度はjQuery UIでスライダーを設置してドラッグして調整出来るようにしました。
読む込むファイルが多すぎて、うーん…となってたんですが、人気なだけあってやっぱり使いやすかったです。
http://jqueryui.com/demos/slider/

重ねられるパターン数を３から６に

上記の透明度設定に合わせて、重ねられるパターン数を増やしました。
さすがにページが長くなりすぎたので、それぞれのパターン設定は折り畳めるように変更。
透明度の設定次第でさらにバリエーションが増えますね！
パターン素材も今後は透過していないものを基準に作成していこうと思います。