1. ホーム
  2. Blog
  3. ipod touchでYahoo!検索を快適にするためのアプリサンプル

ipod touchでYahoo!検索を快適にするためのアプリサンプル

フナミ タカオ

フナミ タカオ

技術

IMG_0001_1_small.jpgフナミタカオです。
遅ればせながら、先週やっとこさ、ipod touchを購入し、いろいろ、試しています。レンダリングの美しさに日々感動しています。
さて、ipod touchのインターネットブラウザである、Safariには検索機能がついていて、エンジンとして、GoogleとYahoo！が選べるようになっています。（古いバージョンだと、この機能ないようですね。試しているipod touchのファームウエアは最新の1.1.4です。）
Googleの検索結果は、PCと同じ画面が表示されるのですが、Yahoo!の検索結果は、ipod touch用のレイアウトになっています。しかし、日本語を入れると文字化けが発生する場合が多いので、ipod touch検索結果が日本語で美しく表示されるYahoo!検索アプリを作ってみようと思いました。

ipod touchのSafariの検索

SafariのURL入力窓の左側にある、虫眼鏡アイコンをタップ。これで、検索画面が開く。検索エンジンは、GoolgeまたはYahoo!。どちらのエンジンを使うかは、設定＞Safari＞検索エンジンで選択可能。

WS000116.JPG　WS000118.JPG


検索エンジンがGoogleとYahoo!なのは、Wiiと一緒ですね。
それはさておき、ここから検索すると、Googleの場合はPCと同じ画面になり、Yahoo！の場合は、画像や、モバイルページを含む横断検索をしてくれて、レイアウトもioud touch向なっています。ただし、日本語は結構文字化けします。
IMG_0002_1.JPG

ということで、GoogleもYahoo!もちょっと使いづらいので、ipod touchに最適化した、検索アプリを作ってみようと思いました。

Yahoo!検索APIをソースに、RubyでCGIを作る

今回は、Yahoo!検索APIを使って、任意のキーワードの検索結果を表示します。できるだけシンプルにしてみたいので、以下の方針で作ってみました。
  • 入力したキーワードに対して30件の結果を返す
  • ipod touchで、見やすいスタイルにする
  • 検索ボタンをipod touch風にする
出来上がったのもはこんな感じです
IMG_0001_1.jpg

ipod touchの方は、以下のURLから、動作サンプルをご覧ください。
http://tatamilab.jp/~funami/i/


サンプルコード


なおサンプルはこちらの利用規約に同意のうえでご利用ください。

利用規約に同意の上、ipod touch 向けYahoo！検索アプリサンプルをダウンロード

・使い方
y_touch_search.tar.gzをcgiが動かせるところで解凍

・構成
y_touch_search
- index.cgi
- search.css
- images/header.png

・設定
このindex.cgiの35行目にご自身のYahoo!検索APIのapiidをセット

一行目を環境に合わせて、必要なら書き換えてください。
#!/usr/local/bin/ruby

あとは権限を確認してcgiを呼び出してください。

※さくらインターネットの環境では、１行目を#!/usr/local/bin/rubyに変えることで動作しました。


Yahoo!検索API

Yahoo!デベロッパーズのページには、リファレンスやサンプルコードがあるのですが、サンプルはJavaScript,PHP,PerlはあるのですがRubyがありません。
今回は、Perl版のサンプルコードを元に、Rubyで動くソースにしてみました。（クラスにはせずに、フラットに書いているという言い訳ですねえ）
テンプレート部分をERBを使って、少しは、わかりやすくなってるかなと思いますので、どうぞ、ソースのほうを見てみてください。

いくつかのポイント

iPod touch向けに最適化するにあたっての、ポイントをメモしておきます。 この程度でも、それなりのアプリになるので、参考にしてみてください。またYahoo！検索APIについてもいくつか気づいたことがあるので、メモしておきます。


metaタグでviewportをセットする

横幅をセットしておきます。
iPod touchの画面にあわせて幅を320pxにセットします。これで、等倍サイズで表示されます。
また、user-scalable=noとしておくことで、ユーザーによる、拡大縮小を禁止しています。ちょっとネィティブアプリな感じしませんか？


<meta name="viewport" content="width=320px, user-scalable=no" />

一覧はリストアイテムで
検索結果の一覧は、Tableタグにはせずに、ul,liのリストを使う。 ul,liにクラス名をつけて、スタイルシートで体裁を整えるのがよろしいようです。


overflow-x:hidden;をつけておく

今回は、一覧にURLを表示していますが、このURLが長すぎて幅があふれてしまう場合があります。通常の文章だと適当なところで改行してくれるのですが、URLだと、どうも、うまくいかないときがあるようです。この文字あふれ分を表示しようとして、倍率が変化してしまうとみにくい（かっこわるい）ので、それを抑制するために、ulにoverflow-x:hidden;をつけています。

IMG_0003_1.JPG　overflow-x:hiddenを指定しない場合

IMG_0004_1.JPG　overflow-x:hiddenを指定した場合

http://dir.yahoo.co.jp/Regional/Japanese_Regions/Kanto/Tokyo/

が問題になる。


ul {
font-size:14px;
font-family: Helvetica;
color:black;
margin: 0;
padding: 0;
overflow-x:hidden;
background-color: white;
}


入力用テキストボックスの角丸は変形できる

テキストボックスの角丸は、 -webkit-border-radius:によって、変更可能です。
検索ワードの入力ボックスは5pxにしてみました。
またborder-width: 0;としておくと、すっきりすると思います。

.query_text {
margin:0;
height: 23px;
font-size: 14px;
padding-top:6px;
padding-bottom:0px;
border-width: 0;
-webkit-border-radius: 5px;
}

buttonはちょっと？
buttonタグに関しては-webkit-border-radiusの効果が出ないようです。もうすこしiPod touchになじむデザインにしたいのですが、これは、宿題としておきます。
URLのデコード
Yahoo!検索APIから取得したXMLは、URLがURLエンコードされています。これは当然のことですが、表示するだけなら、URL中も文字列になったほうがみやすいし、URLも短くなるので、今回はデコードしました。

・XMLで取得したURL
http://ja.wikipedia.org/wiki/%E6%9D%B1%E4%BA%AC
・表示時のURL
http://ja.wikipedia.org/wiki/東京

またこのURLエンコード部分は、UTF８とは限らないので、Rubyでは、Kconvのtoutf8メソッドを使ってUTF8に変換しています。


HTMLのアンエスケープ

URLのデコードと似ているのですが、Yahoo!検索APIから取得したXMLのサマリーや、タイトルはHTMLエスケープされています。
&や>　が&amp;、&gt;等に変換されています。
これも、このまま出してしまうと。&amp;、&gt;がそのまま表示されてしまうので、今回は、CGI.unescapeHTMLメソッドを使って、アンエスケープしています。


もうすこし拡張してみたいところ


非常にシンプルなアプリですが、それなりのデザインにできて、いい感じかなとおもっています。
今後はページングとか、タイプの設定（画像、ブログ等）を行いたいと思います。
ボタン周りを、ネィティブアプリにあわすところとかはもう少し勉強です。
あとは、検索履歴お保持とか、ブックマーク連動とか、できそうですね。
それと、検索エンジンの切り替えもできるといいなあ....

近いうちに
http://www.apple.com/webapps/
で、公開できるように、したいです。

トップへ戻る