Ruby on Rails の開発に、TextMateを使っています。

一見バグがないように見えるのにどうしてもプログラムが動かない、よく調べてみたら、コードの中に全角スペースが入り込んでしまっていた、ということが良くあったので、それを TextMate 上で阻止する方法を調べてみました。

TextMate はデフォルトでは日本語が入力できないためだと思うのですが（日本語を入力できるようにする方法についてはTextMate を試してみた - yuum3のお仕事日記を参照）、日本人にユーザーが少なく、日本語のまとまった情報が少ない。

以下のエントリーで解説されている「改行前の無意味なスペースをハイライトする方法」を参考にして、全角スペースをハイライトできるようにしたのでその方法を紹介します。

» life.i.think: Trailing Whitespace in Textmate

TextMate のメニューから、Bundles > Bundle Editor > Edit Languages を選びます。

左メニューで Ruby を選択して、下のキャプチャのように適当な場所に invalid.zenkaku-whitespace を定義します。match の中身は全角スペース一個です。

次に、(このウィンドウがなかなかみつけられなかったのですが。。) TextMate > Preferences を選び、Fonts & Colors タブを選択します。

やや左下の方の + アイコンをクリックし、Element を追加、Zenkaku-Whitespace などと名付けたあと、Scope Selector で先ほど定義した invalid.zenkaku-whitespace を選びます。BG(バックグラウンドカラー)は適当に好みの色を選びます。

以上で設定完了。

以下のような感じで、全角スペースが紛れ込んでしまっても一目瞭然です。

TextMate は強力なエディターだという話は聞いていましたが、これまでこういった便利機能は駆使しておらず、普通のエディタとしてしか使っていませんでした。これを機会にもっと使いこなしてみたいと思います。

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) - 作ってたのしい遊んでたのしい画像クイズサイト

よろしければどうぞ。