心地よいユーザインターフェイス

なんだか西海岸では、Google 祭りをやっているようだ。祭り囃子や群衆のざわめきが、はるかかなたからケーブルに乗って伝わってくる。ユニバーサル検索か。ネーミングの陳腐さはさておき、単純にいくつかの検索サービスにクエリ投げて、帰ってきた検索結果をごちゃっとまぜるようなかっこわるいものなどではなさそう。

そんなざわめきのひとつの CNET の記事の片隅にこんなことが書いてあった。

また、ユーザーは「Google Labs」で、同社が実験中の「Google Experimental」の機能を試すことができる。そのなかの例としては、左利き用検索ナビゲーション、検索結果の上部に時系列表示を追加する機能、検索結果に地図画面を追加するものなどがある。
http://japan.cnet.com/news/media/story/0,2000056023,20348967-3,00.htm

控えめな記事ながら、なんとなく気になった。「Lab」（研究室）の中の「Experimental」（実験）というなんとも……。その記事にも語られていなかったひとつのユーザインターフェイス案が、「キーボードショートカット」。

• 検索結果ページの第一候補に「>」のマークがついている
• 「j」のキーを打つと、「>」は第二候補に移動する
• もう一度「j」のキーを打つと、「>」は第三候補に移動する
• 「k」のキーを打つと、「>」は逆に第二候補にもどる
• 「j」を連打して第十候補まで来たときに、さらに「j」のキーを打つと、次ページに遷移する
• 検索結果のいずれかに「>」がついているときに「o」のキーを打つと、その検索結果ページが開く。「enter」キーも同様
• 「/」のキーを打つと、検索窓にカーソルが移動して、入力文字列が選択される（つまり次の検索語をすぐに入力できる！　絞り込み検索をしたい人には、ちょっと……）
• 「esc」のキーを打つと、検索窓のカーソルが解除されて、直前に「>」のついていた検索結果にもどる

……という内容。なんかこれ見たことあるなあ……と思ったら、Bloglines（有名なウェブベースの RSS リーダー）のユーザインターフェイスもこのタイプ。たまったフィードをざくざくチェックするときに使ってた。なので、コードは違うにしてもユーザインターフェイス的にはさほど新しいものではない。

でも、これすごく便利。ずらっと並んだ検索結果を眺めているとときどきいま見ているのがどこだったかわからなくなって、ブラウザ上で意味なくカーソルで追っかけていることってある。このユーザインターフェイスだったら、「>」が先頭に表示されるので、一目瞭然。バックグラウンドに薄いハイライトがかかったり、大きめの文字で表示されたりするなんていうオプションもありだと思う。検索結果チェックが効率よくなりそう。

……なんてことを言うと、某社のエンジニアくんは、「j とか k なんて敷居が高いですよ」とか「それはやっぱり vi ※に慣れた人の発想ですよ」などと言う。そうかなあ……。じゃあ、「j」とか「k」でなくてもいい。「↑」や「↓」でもいい……などと話をしているうちに思ったんだけど、ホットスポット※※をマウス操作でクリックしたり、Ajax な地図サービスのマップをぐりぐり動かしたり、ブラウザ操作はどうもマウスに支配されすぎている気がする※※※。確かにマウスでなければできないこともたくさんあるし、マウスの方が便利なこともたくさんあるんだけど、検索結果の閲覧など作業の連続性がある程度予測されるようなサービスでは作業効率の向上を目的としたキー操作をもう少しフィーチャーしてもいいんじゃないだろうか。Excel なんかだと、上下キーとか普通に使うと思うんだけどな。

Ajax を利用して画面遷移回数を低減するのも、ユーザインターフェイスの向上に一役買っている。Google マップで「マイマップ」を作るときのスポット登録のインターフェイスもかなり心地よい。作業の連続性が分断されないインターフェイス。スポットを思いつく限りどんどん登録できる。先日、AdSense の申し込みのときもおもしろいユーザインターフェイスを目にした。あるページに誘導されたのだが、そのページには質問がひとつ掲載されているだけ。その質問に答えると、次の質問が表示される……というもの。質問の多いページだと、山のようにフォームが表示されて、それを見るだけで萎えてしまうということが多々ある。でも、この質問票にはそんな圧迫感はなかった。その質問票の続きに郵便番号を入力する欄があったのだが、ここにもいい工夫があった。「123-0001」のように「半角数字3桁＋半角ハイフン＋半角数字4桁」という形式で入力するように促すための工夫。入力フォームの脇に注意書きを掲載することもできるのだが、それだとフォームの周囲にテキストが増えて、鬱陶しくなる。フォームの脇に小さな「？」アイコンを設置して、それをクリックしてもらって、ヘルプメッセージを表示することもできるだろう。ここで、Google がやっていた工夫というのは、これ。郵便番号を入力しようとしたとき（郵便番号記入用欄が選択されたとき）に、脇に吹き出しで注意書きを表示するというもの。画面に「ぽっ」と表示されるので、視線が自然に移動する。で、注意書きを読む。入力が完了（別の項目の記入欄に移動）すると、吹き出しは消える。スマートなユーザインターフェイスだ。

別に驚くような工夫がなくてもいい。ユーザが快適に作業できるという心地よさの提供が大事。

※ UNIX に標準でインストールされているエディタ。「j」とか「k」とかキーを打つと、エディタ上のカーソルが上下移動する。あまりにシンプルなユーザインターフェイスで、初心者には敷居が高いけど、慣れると心地よい（やっぱり慣れると心地いいんじゃないか！）
※※あんまりこんな言い方しなくなったけど、ウェブブラウザ上の画面でクリックできるリンクのこと。
※※※だいたいのブラウザは、ホットスポットやフォームの移動に「tab」キーが使えたり、フォーム送信に「enter」が使えたりするけど。

Pipes でらくちんマッシュアップ♪〜その弐

Pipes のステップ2。（Pipes 第一弾は、こちら）

自分のかかわったプロジェクトがどんな風に世の中に受け入れられているのか気になるでしょ。そんなときどうする？Yahoo! JAPANや Google のウェブ検索でチェックしてみる？　でもちゃんと口コミを集められるかどうかはわかんないよね。口コミチェックならやっぱりブログ検索！　ブログ検索は、ウェブ検索と違って、いろんな会社が参入している。ウェブ検索の覇者、Google、Yahoo! JAPAN はもちろん、livedoor や goo などのポータルでも早期からサービスインしている。Technorati、Ask.jp なんかもある。NAMAAN というスタートアップも参入している。ウェブ検索が、Google と Yahoo! に席巻されていることを考えれば、ありえないほどの敷居の低さ。

まあ、それはさておき、こんどは検索窓を設置して。検索語を自由に受け付けるモデルを作ってみる。各社のブログ検索サービスに自分の気になるトピックを一気に問いあわせちゃおう……という Pipe。各社のブログ検索は、検索結果自体を RSS として配信している。それを使っちゃおうというわけ。普通の RSS は新着ニュースなんかを更新情報として流しているってのが多いけど、ブログ検索はキーワードに対する検索結果を RSS 配信しているって言うんだから、使わない手はない。

今回使うモジュールは、検索語を入力するインターフェイスモジュール、各社のブログ検索の検索結果にその検索語で問いあわせるモジュール、そこから RSS を取得するモジュール。あとは、前回同様、重複削除処理、時系列での並べ替えのモジュール。中核となる部分は、スクリーンショットを用意しているので、見てみてください。

検索語の入力モジュールは、「User Inputs」の「Text Input」を利用。このモジュールをキャンバスに持ってくると、いくつかのオプションが表示される。

• Name
• Prompt
• Position
• Default
• Debug
  

の5項目。わかるようなわからないような……。「Prompt」は、きっとユーザインターフェイスの検索窓の横に表示される説明書きなんじゃないかな。「Default」は、初期値。ここに「大泉洋」と記入しておけば、最初から検索窓に「大泉洋」って記入されて表示されるんだろうな。「Debug」。これは、ここに記入した文字列でうまくいくかどうかを試すことができるんだろう……と想像しながら、作業を進めていく。

次に必要なのは、各社のブログ検索の結果 RSS を引き出すための URL。例えば、Google で「温泉」と検索してみる（検索結果）。Google は他社のサービスと違って、関連度順にランキングされるのが初期設定なので、画面右上の「日付順に表示する」をクリック。それで得られた検索結果のURLは、以下のとおり（クリックして URL を参照のこと）。

• Google ブログ検索で「温泉」を新着順で検索した結果ページ
  

なんだかごちゃごちゃいろいろ文字の含まれている長い URL。検索結果画面の左カラムを見てほしい。ここに「フィードを取得　Atom | RSS」とある。「Atom」と「RSS」の違いは別の機会に譲るとして、「RSS」をクリック。すると、こんな URL（クリックして URL を参照のこと）。

• Google ブログ検索で「温泉」を新着順で検索した結果の RSS
  

これが今回の Pipe で使う素材のひとつになる。これを前回の「Fetch Feed」に入れることもできるけど、それでは毎回「温泉」の検索結果しか出てこない。それではダメなので、別のモジュールを使う。「URL」の「URL Builder」モジュール。これをキャンバスにもってくる。すると、

• Base
• Path Elements
• Parameters

といった入力項目が表示される。ここにさっきの RSS の URL を分解して入れていく。こういった URL は、特定のプログラムとパラメータの組み合わせでできていることが多い。Base や Parameter に下記の要素を放りこんでみる。

• Base：Google ブログ検索の検索結果 RSS を生成するプログラムの URL を指定（一般的には長い URL の「?」より前の部分）
  http://blogsearch.google.co.jp/blogsearch_feeds
• Parameters：上記のプログラムにどういう挙動をさせるかを決定するパラメータ（引数とか環境変数とか呼ばれる）
  • hl=ja（日本語のページってことかな。素直に入れておきましょう）
  • q=%E6%B8%A9%E6%B3%89（最重要アイテム！　検索語はコレ！）
  • lr=lang_ja（日本語のページってことかな。素直に入れておきましょう）
  • scoring=d（？　素直に入れておきましょう）
  • ie=utf-8（input encoding の略かな。入力文字コード。素直に入れておきましょう）
  • num=10（出力件数？　もしかしたら面白いことができるかも）
  • output=rss（出力フォーマット。素直に入れておきましょう）

Parameter の入力は、「hl=ja」だったら、左の箱に「hl」、右の箱に「ja」といった感じで。ここでいちばん大事なのは、「q」。これが検索文字列用の箱なので、ここの右の箱は空にしておく。で、この右の箱の脇にある「○」と、さっきの「Text Input」をパイプでつなげてやる。おまけで出力数を指示する「num」を受け付ける「User Inputs > Number Inputs」もくっつけてみた（初期値50件で）。

仕上げに、前回も登場した「Fetch Feed」モジュールの再登場。これを「URL Builder」モジュールとパイプで接続。あとは、重複処理、時系列並べ替えをして、ひととおりのフローは完成。

マッシュアップということで、その他各社の RSS を「URL Builder」で作り込んでいって、パイプでつなげて、完成〜♪　検索語を入力して、いろいろ試してみてください〜。

• ブログ横断検索パイプ：blogsearch_unfixed