『きものアソビ』ができるまでの話

和服ブームが再来し、和服のコーデをあれこれ考えられるツールが欲しくなり、作り始めた梅雨の開けない７月末。

とりあえず、形になった８月初めは、そろそろ梅雨が開けそうです。
ちなみにできたものは以下。

＊きものアソビ＊

まだまだ手直ししているので、もしかしたら突然動かなくなったり表示が変になるかもですが、それを踏まえて遊んでください。

以下本文。

最初はImage::Magickでつくるつもりでした

「和服コーデを試せるツールが欲しい」

ハマるとすぐなんか作ることで定評のある私。
今回も画像を組み合わせる系なので、いつものようにImage::Magickで作ろうかなって思ったんです。

着物は柄が繊細だし、SVGを組み合わせる方向で作りたいなと考えました。

調べてみればImage::MagickでSVGを組み合わせてPNGにできるという記事を発見。
サンプルコードもある。
じゃあ作ろう。

で、簡単なサンプルを書いて、ツールを置く予定のサーバーに置いたところ、動かない。
どうやらサーバーのImage::Magickのバージョンが低くて、SVGを画像化するコマンドが動かないみたいだった。

どうしたものかと考えていると、JavaScriptでSVGをPNG化し、保存する方法を発見。
サンプルコードを試すと、あっさりできた。

そこで今回は、JavaScript+PHP+SVG で作ることにした。

いつものように作ったものの？

パスで着物姿の女の子の絵を描いて、色を変えたいパーツ別に色つけできるようにフォームを作って、、、といつものように作って、ひとまずはできた。

しかし、なんか、ちがう。

というのも、１枚のSVGのパーツ別に色をつけたりなんだりしているだけなので、模様を変えたり小物を変えたりができないのだ。

これじゃあただのぬりえだね！

そこで、似たようなことができるサイトを見てみようと探してみると、服装の細かいパーツだけでなく、髪型から目の色まであれもこれも組み合わせを変えられるようになっている。

そうだ。
私がやりたいのはこれだ…！

パーツを組み合わせられる形に大幅変更

パーツ別にSVGを作成し、レイヤーのように重ねた状態で表示し、最終的には１枚のPNGにする。

これがなかなか難関だった。

SVGをPNGにしてサーバーに保存する仕組みは以下の通り。

objectで外部SVGの中身をブラウザに読み込む
↓
objectの中身をcanvasで描画
↓
canvasで描画した内容をimgタグに展開し、Base64エンコードした画像データにする
↓
画像データをPHPでうけとり、fileopenを使ってPNG化して保存

複数のobjectの中身をcanvasに描画するのまではできたけど、それだとSVGデータのエンコードデータなのでPNG化はできない。
一度imgでブラウザに描画させ、画像データ化する必要があるのだ。

最初はcanvasで描画した段階で重ね合わせようとしたのだけど、svgデータでの重ね合わせがよくわからず。。。

パーツ別の画像データをPHPに送り、PHP側で生成したpngを重ね合わせて１枚にして保存という、最終的にはGDに頼る結果になりました。

なんとか形になりました

いちおう着せ替えアソビができる程度にはなった。

が、使いづらい。
文字だけだとなんのパーツかわかりにくいし、どれを選択している状態なのかもよくわからない。

こうして形になると、UIって大事だなぁと気づきます。
PCでの使いやすさ、スマホでの使いやすさ、など。

こういうものを作ってみると、webサイトのデザインとはまた違う脳みそを使うので、webサイトデザインしかやってない人はツールデザインとかやったほうがいいと思う。

＊＊

まだまだUIは改善していく予定です。
パーツももっと増やしていきます。よかったら遊んでみてください。

＊きものアソビ＊