Gunma.web LT 『コトバパレット』まとめ

 先日のGunma.web #4でやらせてもらったLTのまとめです。
 感想等はこちら参照。

 まずはじめに、とても重要な事を言います。
 今回LTで紹介させてもらった『コトバパレット』というWebサービスは、LTの中でも言いましたが、未だにクライアントでしか動作してなく、公開に至っていません。
 下記スライドの中にURLが登場しますが、アクセスしても無駄ですのでもう少し待っていてください。泣きながら調整しています。ちゃんと動いたらリリースエントリします。

 まとめ、と言いましたが、当日は5分に収めることに注力するあまり、うまく喋れていませんでした。重要な事とか飛んじゃってたと思います。
 このエントリで少し補填したいと思ってます。

 まず、このアプリを作成するきっかけとなったのが、PANTONE社が毎年発表しているCOLOR OF THE YEARで、2011年を”Honeysuckle”とした事です。この事はGigazineの記事で知りました。
 スライド内にもありますが、「じゃあコンテンツにこのピンク色使えば2011年的にイカすんじゃなかろうか」と思って、でも配色難しくて「プログラムに作らせよう」と。
 今からして思えば、この時点で既に方向性が狂っていたと言えます。言っている事がおかしいです。

 実は、画像からパレットを作るというアイデアは、ホントの事を言うと完全なオリジナルではありません。

『Colors Palette Generator』画像からカラーパレットを一発作成

 これは、約2年前(2009/02/25)のエントリで、アップロードした写真からカラーパレットを作るというWebサービスを紹介しています。
 『コトバパレット』の出力結果が Light / Medium / Darkと3段階となっているのもこのサービスが由来です。
 私がこの、写真からパレットを生成するというアイデアを気に入っているのは、『現実世界の配色』を採用することができるからです。現実世界の配色には当然ながら不自然さがありません。現実に存在するからあたりまえですね。

 さて次に『ヒューリスティック』について少し書きます。
 これは乱暴に言うと「だいたい合ってる解法」で、スパムフィルタやアンチウイルスソフトウェアにも採用されています。
 『コトバパレット』は、これといった解法を持たないまま開発を進め、その過程で色々工夫(ヒューリスティックを考え、採用する)しながら出力(カラーパレット)の精度を上げていきました。これが非常に楽しかった。
 言葉を英訳してから検索語として扱うというボツアイデアもありました。
 
<人間はどうやって答えを得ているのか>

 今回のヒューリスティックは全てこれです。
 写真の端を切り取るというアイデアはその最たるものでしょう。

 最後に、『コトバパレット』の内部処理をざっくり書いておしまいにします。

1.画像の検索
 ユーザが入力した”言葉”をGoogleのWebAPIに渡して検索します。検索結果には、オリジナル画像のURLとサムネイル画像のURLが含まれていますが、サムネイルしか使いません。大きい画像は処理が大変だし、何といってもサムネイルはその画像の特徴が縮小されているからです。ありがとうGoogle。

2.グルーピング
 開発当初から「複数の画像から共通する色を採用する」という考えがあったので、その「複数の画像」の質を高めるため、ふさわしくない画像(性的じゃない意味で)をより分けるグルーピングを行います。
 処理は単純で、各画像を単純なパターンに変換(今回は8色以下に減色する)し、同じパターン同士をグループ化します。
 この8色減色はこのグルーピングでしか使用しません。出力結果となるパレットは、改めてサムネイル画像を512色以下に減色した結果を元にします。
 ちなみに『パターン化』は顔認識処理等にも使用されている考え方です。

3.色の採用
 質の良い画像が集まったら、元画像を512色以下に減色し、たくさん使われていて(ピクセルの数)、かつ複数の画像で使われている色の上位8色を基本パレットとします。

4.パレット生成
 最後に基本パレット(Medium)の明度を上下させ、明るいパレット(Light)と暗いパレット(Dark)を作っておしまい。
 明度の調整は、単純にRGBを上下させれば良いかと思っていたのですが大きな間違いでした。

RGBとYCrCbの変換(明度と色差)

 質疑応答の時間で「結局イカしたサイトデザインはどうなったのか」という質問がありました。これは非常に嬉しかったですね。

 最初の思いつきはどうにもなっていません。

 最初に考えた物がそのまま出来たらLT的においしくないからです。

Related Posts

2 Comments.