Google AJAX Search API を使い、簡単に画像や写真を使ったクイズを作って楽しめるサービスを作りました。

» ピクイズ(Piquiz) - 作ってたのしい遊んでたのしい画像クイズサイト

元々同じコンセプトで四択.comというサービスを去年作ったのですが、すっかり放置状態となっていたのを、「もったいない、私がテコ入れしますよ」と声をかけてもらった有限会社三恵さんと共同で開発し直しました。

Google 画像検索では、キーワードを入力してそのキーワードに関連した画像を検索します。ピクイズは、逆に検索された画像や写真を見て、それがどのキーワードで検索された画像かを当てるクイズです。

四択.com では管理者の僕だけがクイズを作成できるようにしていたのですが、作っているうちに、「これって遊ぶのもたのしいけれど、作るほうも結構楽しいじゃないか」と思い、その楽しさを味わってもらおうと、ピクイズではユーザーの誰もがクイズを作成できるようにしました。

キーワードの組み合わせを工夫することにより、例えば都道府県当てクイズや幕末人物列伝のような雑学クイズができたり、おすぎ と ピーコやねこの名前を神業的にあてるクイズといったちょっとしたお遊びのネタ的なクイズを作ることができます。

ちなみに僕のお気に入りは、

» ピクイズ(Piquiz) - 印象派の画家たち

検索された画像がきれいにそろっていて美しい！

では、ピクイズのキモであるクイズの作り方をご紹介します。

まず、サイト左側の「ピクイズをつくる!!」をクリックします。ユーザー登録をしていなくてもとりあえず試しに作れるようになっています。

クイズのタイトルを決めます。

次にキーワードを入力していきます。このキーワードのひとつひとつが選択肢であり、正解の答えとなるキーワードでもあります。

今回技術面で一番工夫したところです。テキストエリアでカーソルを置いた行のキーワードを自動的に検出し、リアルタイムで画像検索の結果を右側に表示しています。この検索結果を見ながら、ちゃんと意図した画像が表示されるかを確かめるためです。

上のキャプチャのように、意図に反して、「apple」の検索結果としてコンピューターの apple の関連画像が表示されてしまいました。このようなときには検索の精度をあげるために、「apple fruit」のようにスペースのあとにキーワードを追加します。検索結果の精度をあげるのと同じ要領ですね。

各行の最初の単語だけが選択肢として表示されるので、「apple fruit」で検索していても選択肢として表示されるのは「apple」だけです。

あとは詳細やカテゴリ、タグ付けをご自由に。作成ボタンをボチッとクリックすればピクイズの出来上がりです。

楽しいクイズができたら、ブログにリンクを貼ったり、Twitter に発言したり、友達にメールを送ったりして一緒に遊んでもらいましょう。

最後にサイト名の由来を。。。といっても自明ですかね。

Picture(画像) の Pic と Quiz(クイズ) とを合わせて Piquiz です。企画面や文言・規約やレイアウトなどプログラマーが不得意とするすべての部分を担当していただいた共同開発者の佐藤さんの案で、とても気に入っています。

また、今回デザイン面でお手伝いいただいた Sasha さんには素敵なロゴを作っていただきました。

途中中だるみしたところに、このロゴが決まり、俄然やる気を取り戻すことができました。やっぱり見た目大事です。

ほかにも id:Kanta さんには開発当初から使ってもらってバグ出ししてもらったり、妻にはユーザビリティテストで協力してもらったりと、今回はたくさんの人の協力を得てひとつのサービスを作ってみました。

ひとりで作る Web サービスもいいけれど、チームで作りあげるのも楽しいなと感じました。

» ピクイズ(Piquiz) - 作ってたのしい遊んでたのしい画像クイズサイト

よろしければどうぞ。