画像からパーラービースの設計図を作成するWEBアプリを作成しました
こんにちわ！
画像からパーラービースの設計図を作成するWEBアプリを作成しました！
ビーズメイカーというサイトです。
何をするサイトか？
パーラービーズというおもちゃがあります。ビーズを置いていって、アイロンをかけて繋げて、楽しむものです。詳しくはカワダのサイトを見てください。
このパーラービーズを使って、画像から設計図を作るサイトになります。
これが。。。
こんな感じになったりします。(実際はもっと大きい画像で出力されます。)
各色ごとに番号が振られています。これはパーラービーズの商品番号に合わせています。
この番号通りに合わせてビーズを置いてあげると、大体似たような画像ができるというわけです。ファミコンなどのドット絵の変換などもできます。その際は画像の幅を同じ数値を指定してください。
このサイトを作った経緯
現在、自分がヒロハタという活動に参加しています。簡単に言うと広島でITを使って何かしよう！って感じの活動です。ひろしま発人材集積プロジェクトの略です。CSS Niteで有名な鷹野雅弘さんが指導をしてくれたりします。
何かをしようと考えた時に、娘がパーラービーズを使って遊んでいるのを見て思いつきました。パーラービーズを大人向けに遊ぶ方法があるんじゃない？と考えました。ナノブロックも大人向けに作ってるし、パーラービーズも大人向けに作るのもアリじゃないかなと。
初めはPhotoshopで作成してたのですが、自分以外の人にも使ってもらおうと思いまして、WEBアプリで作成をすることになりました。
それと数ヶ月前に仕事を退職してしまったので、転職活動の実績作りのために作りました。ただサイトができる前に内定が決まってしまいましたが。。。
開発方法とか
自分はWEBディレクターなのでプログラムはよくわかりません。ただPhotoshopの使い方に関してはかなり詳しい方だと思います。なのでPhotoshopで画像加工の方法を考えて、その方法をプログラマーにもわかるように落とし込み、それから開発をしようと考えました。
頭の中やPhotoshop上で考えると、なかなかアイディアが思い浮かばないです。なのでまずは紙にペンを用意して、ざっくりと画像加工の工程を考えます。
画像加工の工程を考えたら、次にパーラービーズのサイズを測ったり、どのような色が販売されているのか調べます。
次に色の情報を調べました。この色がRGBで変換すると、この色になるみたいなのです。幸いパーラービーズの色の情報をUPしている方がいたので、その色情報を使って変換する際に適用させました。
あとは、各色に番号を記入した画像を作成していきます。
サイズの確認や素材が揃ったら、次はアクションの作成をします。アクションはPhotoshopの行動を記録して再生する機能です。サーバー上でPhotoshopを動かすわけではないですが、自分の考え通りに画像加工ができるか確認するためです。最初に考える段階では紙とペンを使って考えます。ただこの時点ではだいたい頭の中ではアクションが出来上がってます。
かなりの長い行程をアクション化します。なので部分的にアクションを作成して、合わせてから一つのアクションにしてしまいます。このようにアクションを作成する方法をモジュール化と自分で言っています。モジュール化しておくと、他の作業でも使い回しが出来ることもあるので便利です。
アクション上で行動が確認できたら、次はプログラマーに行程を教えます。正直、ここをできる人に巡り合わなかったので、WEBアプリの作成に時間がかかりました。ちなみに参加してくれたプログラマーは友人です。
あとはプログラマーと連絡などをしながら細かい部分を調整していきます。
サイトの今後
今はまだ設計図を作るだけですが、色を指定する機能や、使った色をリスト化する機能などを作成していこうかと考えてます。サーバーが良いのが使えたら実寸サイズで印刷できる機能や、もっと限界の幅をもっと広げられたらとか色々と妄想しています。
作ってみて
実際のところ作ったのはプログラマーがほとんどです。ただ自分自身のアイディアが無ければ作れなかったので、まあ良しとしてもいいのではないかと思います。
WEBサービス作ってみた系の記事を見ていると、勉強しないと作るのは大変だなと感じていました。ただそれは色々ある中での一つの方法なので、もう少し柔らかい考えを持って行動するのも大事だなと感じました。自分で全部作ろうとやみくもに勉強することもありましたが、それはそれでいい経験になりました。その経験でプログラムでも画像処理ができると知りましたし。
もし何か作ろうと考えて悩んでいる人がいたら、少し客観的な目線になってみるのもいいと思います！そしたらもっといい考えが浮かぶかもしれません。
では失礼します。
