Flickdea!名古屋大学 情報科学研究科 工藤 智祥 @f_subal

写真で思考するWebアプリ

Flickdea!

Webデザインをやる時，あるいは絵や漫画を描くとき……

インターネットからどうやって

アイデアを探してきますか?

Flickdea!

Flickdea!

画像を検索する通常の方法:

・文字（検索ワード）で画像を見つける

・画像共有サイトのタグをたどる

・画像共有サイトのレコメンドを見る

など．

Q. もっと効率的に Inspiring な画像に出会うには どうすれば良いか?

“Search by Image”の盲点:

・1つの画像に関連のある画像を探すことはできる

（Googleの類似画像検索）．

!!!しかし，

複数の画像をqueryとして検索することはできない

! “Search by Image” → “Search by Images”

Flickdea!

文字検索における柔軟性:

・複数のqueryを論理式などで柔軟に組み合わせることができる．

・画像を用いた検索ではこれができない．

!e.g.

Flickdea!

“programming language” functional

programming OR language OR functional

programming language -functional

なぜそんなものが欲しいのか?: !アイデアを集める時に重要なのは……

・連想によって発想を広げること

・異質な要素同士を組み合わせること

→ どちらも普通の画像検索だとやりにくい．

!すると，欲しいソフトはこんなのだ:

・ある写真から別の写真を連想してくれて

・写真同士の組み合わせでサジェストが変わる

Flickdea!

flickr APIでやってみる．

（最初はPinterestのつもりだったんですけどAPIに利用制限があるようで断念）

!言語とライブラリ: jQuery + jQuery UI + PHP !!!

発想支援特化型 画像検索アプリ Flickdea!

flickr + idea = Flickdea!

Flickdea!

UIの設計 (jQuery + jQuery UI):

・「論理式で柔軟に組み合わせる」を画像でどうやる?

→ 画像をDrag & Dropして，重なり具合を見るというのはどうか．

! e.g.

Flickdea!

A=

(A∧B) ∨ (C∧D) ∨ E

B

C

D E ➘

画像による連想検索 (PHP ⇔ Flickr API):

!メタデータの積集合か和集合を取って，文字列検索を行う． （画像処理までは今回やってない．そこが本筋ではないですし．）

メタデータ: tags, title, description, owner-name

! e.g.

Flickdea!

Photo A: title: “got a PC” tag: “a”,“b”,“c”

Photo B: title: “its my PC” tag: “b”,“d”, “c”

+ → next query: b & c & PC

全体の流れ:

Flickdea!

1. まずは普通に 文字で写真を 検索する

2. 出てきた写真を キャンパス上で Drag & Drop

3. 写真の位置関係に 応じて検索結果が 更新される

1～3 を好きなだけ繰り返す

go on to the demonstration

Flickdea!

※ 読み込み中の時間を一部カットしております．

まとめ（達成できたこと）:

・アイデア集めのための画像検索は以下のように効率化できる！

! ・画像のメタデータを用いた連想検索の提案

・それを効率的に行うインタラクティブUIの実現

!

→ 画像を用いた新たな発想支援アプリの実現

Flickdea!

今後の課題:

・Full Search以外の検索（自分のfavsから検索など）をつける．

・できたアイデアをシェアする仕組みは必要か?

・つまり発想支援のみならず，アイデア共有SNSにもするべきか?

・するとしたらどういう形式がよいか?

!そしてあわよくば…

・連想検索の高度化（画像処理も追加……?）

Flickdea!

End.