PHOTO STOCKERに似た色が使われている画像が簡単に検索できる機能を実装してみました!

フリー写真素材配布サイトのPHOTO STOCERに、似た色が使われている画像が簡単に検索できる機能を実装してみました。
画像からキーカラーを自動的に取得し、さらにそのキーカラー同士で画像データを結びつけて似た色の画像を検索する、というものです♪

最近、PHPで画像をいじることを勉強中のYUKIです。

壁紙カレンダーを作るときにimage関数をいろいろ使って処理を作ったので最近よくドキュメントをよく見ていたのです。
画像の色を自動的に取得するってなにか特殊なものがいるのかと思っていたのですが、よく考えたらimage関数を使って指定のpixelの色を取得することが出来るんですよね…!!

それを集計とかしたら…ごにょごにょ。

いろいろ出来るんじゃなかろうか…!!!

…ということで、早速実験。

これで似た色画像検索機能が作れるんじゃないか?と思い立ち
PHOTO STOCKERのサイトで さっそく実装してみました♪

で。

こんなかんじになりました!

画像の下に出ている色のところをクリックすると、絞り込み検索します。

処理の流れは以下。

  1. 記事1つにつき、1枚添付画像をもっているので、その添付画像のURLを取得。
  2. その画像をimage関数を使ってそれぞれキーカラーを抽出。
  3. よく使われている色、上位10色を選定、それをWordPressのカスタムフィールドにセット。
  4. WordPressの検索範囲をカスタムフィールドにまで広げる。
  5. 検索ワードにカラーコードをセット(画像の下の色をクリックすると、そのカラーコードを検索ワードとしてURLに渡している)
  6. 同じ色を含む写真を検索して一覧表示

以上です。

1-3の手順は、簡易なプラグイン化してみました。
4は既存のプラグインSearch Everythingを利用してカスタムフィールドの値までを検索対象としました。
5-6はテーマ側で対応。

すんなりできるかと思いきや、画像から10色を選び出す処理のところが、いい感じに色を選ぶっていうのが以外と難しくて…いろいろと詰まったところがあったのでメモ。

※私もまだ勉強中なので、認識まちがっているところがいろいろあるかもしれません。
ここは違うよ!というところがあればご指摘いただけるとうれしいです!

さて、プラグインを作るにあたってまずはテストです。

いい感じに10色をチョイスする実験をしていきます。

今回実験に使ったのはこの画像↓

この画像からいい感じに10色、色をとりたい。

理想は

大体こんな感じでしょうか。

このようなパレットが自動で抽出できるプログラムを作りたいの…!

はじめは普通に全ピクセル順番に抽出して配列に入れて使用頻度の高い色の順に並べ替え、と書いてみました。

が、近似値をまとめていなかったので上位に同じような色ばかりが出てしまい…。

あぅ…水色だらけ。

失敗。

次に思いついたのは画像を分割してブロック分けし
そのブロックごとにPHPで色を取得して集計、ブロック内で一番使用頻度の高い色1色を抽出、
それをさらに配列に入れて、すべてのブロック分繰り返し、
それまた多い順に並べ替えて使用頻度の高い色上位10色を抽出してみました。

えっと…説明下手ですみません。

図で書いてみました。

モザイクパターンみたいにして色を集計しようという作戦。

これで再度集計。。。。

おぉ!俄然いい感じになりました!!!

これで抽出した上位10色のカラーパレットをカスタムフィールドにセットする、という簡易なプラグインを作って、サイトに組み込んでみました!

…が。

またしても問題発生。

近似値をまとめていないので、色の種類が
R 256* G 256* B 256 = 16777216

こんなにあっては、「青っぽい色」だけでも何百種類…!
ほとんど同じように見える色でも色コードが異なってしまうので、
なかなか同じ色を利用した画像がでてきません…!><

今回の機能の目的としては、色味の近い画像を紐づけることなので
検索の際に近似値検索をして、近いカラーコードのデータがあればそれも表示させるように作ろうかとも考えたのですが、
近似値の計算がやや複雑なので、毎回の検索に時間がかかってしまう…。

なので、データ格納時に似た色はある程度まとめ、
減色した状態でデータを格納して、同じ色が出やすくなるようにすることにしました。

RGBそれぞれの段階を以下のように落とすと

256段階→32段階=32768色
256段階→16段階=4096色
256段階→8段階=512色

こんな感じで減色できそうです。

さてどのあたりまで減らすか…

ということで実験した一覧がこちら↓

(クリックで拡大します)

他にもいろんな画像を試して、
今回は、309000ドット程度の画像を縦横60分割して3600ブロックに、4096色に 減色が一番ベストそうだったので、こちらを採用しています。

ということで、まとめます。

  • 判別する色数が多過ぎると、トップ10が近似値だらけになってしまう。ほどよくいろんな色を拾わせる工夫が必要。(今回は画像を分割してモザイクパターンのようにして色を取得してみた)
  • 色数が多いと、類似色の判定が大変。だけど、減色しすぎると元の色からかけ離れたパレットセットが出来てしまう。個人的には4090色ぐらいがベストかな。
  • 元の画像が小さ過ぎるとリサイズするときに色が落ちているのでチョイスする色がくすみがちになったり、撮れなかったりする。画面のスクリーンショットなら等倍がいいかも?ただ、写真の場合だと、大き過ぎるとノイズ?の色を拾ってしまうので大き過ぎてもダメ。こちらの場合は、ほどほどに縮小したもので判定するのがよいかも。

これは上手く使えばいろいろ楽しく便利に使えそうです…!!
減色の方法も、もうちょっと研究せねば…

RBGよりHSVで考えた方がいいのかな?

PHOTO STOCKERのひそかな新機能
似た色検索、ぜひお試しくださいね♪

PHOTO STOCKER -高解像度のロイヤリティーフリー写真素材-

この画像、チョイスしてる色が変だよーとか、ありましたら、改修の参考にしたいと思いますので
twitterやらコメント欄やらでいろいろご指摘いただけるとうれしいです^^

ポートフォリオサイトのデザインを新しくしてみました♪

jQueryをゴリゴリ使って
まるでFLASHにのような動きをつけたサイトを作ってみたくなり…。
勉強もかねて、週末ポートフォリオサイトのテーマを作り替えてみました♪

ここ最近、サイトの使いやすさを高めるため、
jQueryを便利に使っております。

が。
ある日突然、jQueryを多用したまるでFLASHにのような動きをつけたサイトを作ってみたくなり…。
いえ、普通に普通にFLASHでやればいいんですけど、あえてjQueryでやってみたくなっちゃったんです…!!!

ということで思い立ったら吉日。
ポートフォリオサイトで実験してみましたー!

*YUKI YAMAGUCHI Design Portfolio* -作ったものをまとめておくところ-

ちなみにこのサイトもベースはWordPressですよー☆
いろいろぐりんぐりんと動く仕掛けになっております。

IEでも一通り(6、7、8)確認したので
すこしおかしな部分があるかもですが、大体大丈夫なはず!です。

試してみたかったjQueryでできるデザイン表現を
使えるだけガンガン使ってみました♪

制作にあたっては、
それぞれ、以下のサイトなどを参考に、
プラグインを使用・カスタマイズなどさせていただきました♪

背景のスクロール部分

http://www.devirtuoso.com/2009/07/how-to-build-an-animated-header-in-jquery/

トップのメニューのアニメーション部分

http://jqueryglobe.com/article/animated-menu

各ページのメニューのアニメーション・アイコンのアニメーション部分

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-mootools-homepage-inspired-navigation-effect-using-jquery/

Portfolioページの、異なる高さの要素の可変並べ替えの処理

Portfolioページでブラウザのサイズを変えてみてください)
http://desandro.com/resources/jquery-masonry/

スムーズスクロール

(フッターのPAGE TOPをクリックしてみてください)
http://hisasann.com/housetect/2009/03/jquerysmoothscroll.html

その他に、画像にマウスカーソルをあわせたときの
パチンとウインクする動きなんかもjQueryです。

業務でやることはないだろうけど、楽しかったです♪

よろしければぜひ見てみてくださいー♪

*YUKI YAMAGUCHI Design Portfolio* -作ったものをまとめておくところ-

どうでしょうか、ちょっと重いでしょうか…いかがですか??
あまり多用しすぎると重くなりますよね…。
みなさんの環境ではいかがですか?

こんなに一度に1つのサイトに多用する事はないにしても
ナビゲーション部分などにはこれからもjQueryを
上手くデザインのポイントとしても使っていきたいです。

ちょっとした動きでも、
あればサイトのいいアクセントになりますよね☆

ほかにもいろいろ実際に試して使い勝手がよく、
よさげなアニメーション等があるので後日またご紹介しますね♪

夏の WordPress 勉強会 2010 in Fukuokaが開催されました♪

日曜日に夏の WordPress 勉強会 2010 in Fukuokaが開催され、参加してきました♪

今回の勉強会は、WordPress 3.0 の新機能をコードを追いかけながら、どういうものか理解していくというものでした!

日曜日に夏の WordPress 勉強会 2010 in Fukuokaが開催され
参加してきました♪
今回もAipカフェでの開催です。いつもありがとうございます!

今回の勉強会は、
WordPress 3.0 の新機能

  • カスタム投稿タイプ
  • マルチサイト
  • Twenty Ten テーマ
  • カスタムメニュー

をコードを追いかけながら、どういうものか理解していくという
いつもよりぐーーーーんとハードルの高い勉強会でした。。。ぜぇぜぇ。

それぞれ見ていくのに思ったより時間がかかって、
Twenty Ten テーマ、カスタムメニューの2点については次回に持ち越しとなりました。

以下、私の当日のメモです。

完全に私的メモな感じでスミマセン。

メモしたまんまなので読みにくいor意味が分かりにくいかも。。。

こちらに詳しくまとめて下さっていますのでそちらもぜひどうぞ♪

——————————————————————————–

カスタム投稿タイプのコードリーディング

post type
wp_postsテーブルが3.0からかわってるよ
・wp_postsテーブル
post_type
・post
・page
・attachment
・revision
——————-
・nav_menu_item

ポストタイプを追加する関数
・register_post_type()
http://codex.wordpress.org/Function_Reference/register_post_type
→wp_include/post.php内に定義されている

wordpress trac

これ自体は前からあった
→カスタムポストタイプを作ると自動的にインターフェースを作るようになった。

・register_post_type()を読み解く

配列で自由な設定を渡す

testというポストタイプを追加してみる
add_action(‘init’,’test’,’register_post_type’);

追加したときのURL
http://hogehoge.com/test/テストのテスト/
↑ポストタイプ名

post_type

☆ポイント☆
publicの設定
ページとして表示させたいときはtrueに

これがfalseになっていると
not foundになる=ページ上でデータが取得できない

■not publicが有効に使える例
ページとしては表示させたくないが、データソースとして利用したい場合など

カスタムポストタイプ、何が便利?

カスタムポストタイプを利用する事によって
たとえば

店舗情報など
住所
電話番号
名前
などなど
のカスタムフィールドをプリセットしたポストタイプを作っておく事ができる
→入力作業が大幅に楽になる

※MTのカテゴリーごとにカスタムフィールドを制御するということと同じような事ができる


register_post_type実行時にコールバック関数を指定
コールバック関数のfunction内でメタボックスを追加する関数を実行

http://wpxtreme.jp/how-to-use-custom-post-types-in-wordpress-3-0-beta1

マルチドメイン サブドメイン形式による複数サイト構築

サブドメイン形式による複数サイト構築

ローカル環境に新規インストールしたWPをマルチドメイン対応していく、をみんなで実践。
参考にしたサイト↓
http://mage8.com/multiple-blogs-on-wordpress.html

WPをマルチドメイン形式で運営するメリット・デメリットの再確認

メリット

  • 管理画面を集約できる。更新が楽に

デメリット

  • データベースの負荷の問題
    (単一DBに負荷がかかる事になる。サイトの規模によってはサーバ側での対応が必要。
    ただ、逆にサーバー側で対応できる人にとってはひとつのDBを最適化すればよくなるので楽になる?)
  • 以外と設定が大変。古いバージョンからの移行はかなり苦労しそう。

トラブル

  • MAMPの.htaccess
    80がついてるとダメ。うまく動かなかった
  • それぞれ設定でちょいちょいつまずく。下手に失敗すると管理画面にすらアクセス不能になったり…
    慎重に作業が必要。

——————————————————————————–

メモおしまい。

近いうちに『勉強会の成果をより幅広い層に対して提供する目的で、50〜100人程度参加のセミナーを定期的に開催する』という予定があるようなので、みなさまもぜひご参加くださいね!!

まずはwordBenchに、そして福岡グループにぜひご参加ください♪

簡単に言うとWordPressを愛する人たちのただの集まりです。
好き過ぎてみんなで勉強会とかしてるんです。
なんの怖い事もないのでぜひぜひ!!(適当に説明するな!と怒られそうな書き方ですが…そんな感じです!)

小規模勉強会のときの女子の勉強会参加者がとにかく少ないので(というか、現在大体私だけです…)
誰か!!私を助けると思って!!!!!!><

みなさまのご参加をこころよりお待ちしておりまーす♪

17 歳の女子高生がWEBデザイナーになるわ!と夢を見るまでの5年間と、夢を現実にするまでの5年間と、夢を現実にしてからの5年間の特になんのサクセスさもない話 3

特にオチも用意しておりませんが、
完結編です。

前回の続きです。やっと完結編。

転職活動開始

転職先が決まるより先に会社を辞める事になり、
退社を1ヶ月後に控え、就職活動をはじめました。

1ヶ月の間で受けた会社は…1社。
…今思えば、おいおい勇気あるなぁって感じです。

一応理由があって、実はいろいろ引き継ぎやらなんやらで、いてもらわないと困る!といわれ(ありがたい話です)当初予定していた通りに有給がとれず、結局退社日の前日と前々日ぐらいと、面接にいった1日しか休みが取れず。

転職活動も思うようにできず、だったのです。

その1社も、

「なんでデザイナーになりたいの?うちでプログラマやらない???」
なんていわれたりして、(それぐらいWEBデザインへたくそだったんですよ、ホントにw)
あえなく撃沈。

まぁたしかに持っていった作品集のクオリティーの低さったら…。
仕方のない話です。

結局この不合格の結果が出たのが退社日直前で、
あーもう、完全に辞めてから探そう…と
退社日を迎えました。

「経験者」の壁。

そして6月1日。

忘れもしない無職生活スタート!!!!!!

しばらくゆっくりするつもりだったのですが、
楽しい無職生活も、根が心配性なもので3日ぐらいたったら無職なことがものすごく不安になって…。

いろいろ求人情報を探しはじめました。(ネットで)

でも希望するような職種は経験者募集ばかりで、
たいしたサイトも作った事のなかった私は
あー、実務経験ないしーとあきらめる日々が続いていました。

福岡でのWEBデザイナーの求人はどれもこれも経験者募集が多いんですよね。

この業界に入ってみて思ったのですが、
福岡の制作会社はわりと小規模のところが多いので
即戦力になってくれる人じゃないと、一から育てている体力と時間はないんですよね。

忙しい!できるひと誰か今すぐ手伝ってー!って状態で
求人を出すようなパターンが多いように思います。

なので、絶対に実務経験がある人!!というより、
ある程度基礎知識があって、サイトの保守やら更新やらはすんなり出来る、
「即戦力」になれる人募集という意味で、わかりやすく「経験者」募集という
表現になっているのかな?と思います。

なので経験者じゃない人もあきらめないでー!!!
見せられる作品があれば道は開けます!!!!!!!

さて、当時はWEB業界未経験の私。そんなことは知る由もありません。
経験した事ない人はどうやってWEBデザイナーになったらいいんだ…と、
ひたすらもやもやと過ごす日々。

せめて休みで時間あるんだから、もうすこし作品を作っておけば、
実務経験はまだありませんが、この程度のサイトが作れます!って面接ぐらい受けられただろうに…。

なんかもうちょっとでも自分に該当しない条件が書いてあると
どうせだめだろうなーーーとすぐにあきらめちゃう当時の私。

そんなどうしようもない日々が10日ほどつづいて、

ようやく、勇気を出して応募のメールを送ろう!と決意し、何社かにメールを送りました。
返事がないorもう募集を閉め切りました…ぐすん。

運命の求人

そんな中、ふくおかWEBというサイトでたまたま見つけたひとつの求人。

求人内容を見るとなんかとてもおもしろそうな会社なのですが…

自社サイトがロゴのみ。

…………ホームページ作ってる会社だよね?

だだだだだいじょうぶかな?
とちょっぴりドキドキしましたが、よそのサイトつくるのに忙しくてきっと自社サイトにてがまわらないんだ!と前向きに考え直し、興味しんしんなその業務内容に心惹かれる。

求められている人材は
「数名の小さい会社なので一人でもプロジェクトを仕切れる方歓迎いたします」とかで
結構ハードル高かったのですが、

「実務経験は問いません」

!!!!

数少ない求人だったので 即 応 募 。(そこばっかり気にしてた)

すると…。

ひととのつながり

その会社から返事がくるより先に

…なぜか知人から電話がかかってきました。

「今○○って会社に応募しなかった?!」

「え??し、しましたけど…」

「いや、社長が知り合いでさ、やっと良さげな応募がきたよー!!って喜んでて、よくよく聞いてみたらYUKIちゃんだったからびっくりして!」

……………………。

えぇえぇぇ!?!?

その電話をかけてきてくれた知人というのが、
「前の会社の先輩達とテニスをしていて、そのときに一緒にテニスをした先輩の友達の会社の人で何回かゲーセンでご一緒した事がある人」
っていう繋がりの人で。
(当時ドラムマニアがすごく好きでたまにドラムたたきに友達とゲーセンに遊びにいったりしてました。すいませんすいません。)

遠いんだか、近いんだか。

…いや、もうね、人のつながりは本当に大事です。

そんなこんなで
翌日即面接となりました。

そしてついにWEB制作会社へ

「それじゃあ、どうぞよろしくお願いします!」

社長は、まだまだひよっこの私を

これも縁だからと、やとってくれました。

(最近わかったのですが、弊社の採用基準は「Webがめちゃくちゃ好きか」どうかだったようです。
確かにそれなら誰にも負けない!w)

これが、今の会社との運命の出会いです。

…これがなかったらいまごろ私どうしているかわかりません。

経験者じゃないしぃーってもじもじして
路頭に迷っていたかもしれません。

WEBデザイナーやってなかったかもしれません。

なんども繰り返しますが、会社に入るまではびっくりするぐらいWEBデザインへたくそでした
(もちろん、今もまだまだですが)

機会があれば昔のデザイン見せたいぐらいです…
恥ずかしさのあまり私が失神しそうですが。

あれから5年。

入社後の5年間は、

日々の更新業務をしながら、既存のサイトを見て、構成やらなんやら勉強させてもらい
(WEBオペレーター時代)

勉強会などに参加して出来る人の知識を学び、学んだ事をひたすら実践しながらサイトを作り
(駆け出しWEBデザイナー時代)

サイトを作り続け、気付けばひとりでまるっと1サイト任せてもらえるようになり
(とりあえず一人前WEBデザイナー時代)

WordPressやら、jQueryやら、前職のプログラマの知識を生かしてサイト構築できるようになり
(プログラムの書けるWEBデザイナー時代)

さらには今年は人前でお話しさせていただく機会までいただけるようになりました。
(イマココ)

ざっくり書くとこんな感じです。
この5年、年々ちゃんと成長できたかな、と思います。

スキルにあわせて評価してくれて仕事を与えてくれる会社と、
いつも暖かく見守ってくださるクライアントの方々には
いくら感謝しても足りないぐらいです。

本当にありがとうございます!!!!!

なんか、転職してからの5年が数行で終わっていますが、
実際は書ききれないぐらい濃いんです。

この辺はなんかまた書く機会があれば
それぞれ個別に書いてみたいと思います。

次の5年もこの調子で突っ走りますよーーー!!!

これからも一所懸命がんばりますので
温かく見守っていただけばうれしいです。

よろしくおねがいしまーーーーーーーす!!!!

※ちなみにロゴのみだった自社サイトですが、私が入社して数年後にちゃんと作りました!

…私がw

おしまい♪