Yahoo!画像検索流 iPhone用ページの作成方法

こんにちは。Yahoo!検索Project、画像検索の開発担当、宇輪島です。

Yahoo!画像検索流というと大げさですが、画像検索作成の際に利用した iUI というライブラリと、簡単なページの作り方について紹介します。

iPhone UIライブラリ、iUIの紹介

Yahoo!画像検索ではiPhone版のページ作成にあたり、非常に便利なiUIというライブラリを使っています。
iUI自体はオープンソースで公開されていてgoogle codeにてオープンソース公開されています。
iPhoneが米国で発売された後ぐらいに話題になっていたライブラリなのでご存知の方も多いかもしれません。

iUIプロジェクトホームページ
http://code.google.com/p/iui/

iUIの特徴

iUIはどういう特徴があるかを以下にまとめてみました。

iPhone用のツールバーや画像、リンクやフォームパーツなど、基本的なパーツ/画像を提供
検索ボックスなどのパーツも標準で提供
jsファイルを読込後、簡単なHTMLを記述するだけでiPhone用のページが作成可能
画面の縦横の検地
ブラウザ、スクロール位置の自動調整機能
ページ遷移の際のアニメーション機能
遷移先がAjaxであっても同一ページで表示する機能
戻るボタンの自動設定(履歴管理を行ってくれる)
クロージャ内で機能が定義されているので、他で同名の関数を定義してもエラーとならない

という感じで、iPhoneページ作成に必要な機能は殆どそろっています。
ダウンロードパッケージには豊富にサンプルが含まれていて、数行編集するだけで専用のiPhoneページを作れるはずです。

iPhoneの画面を作ってみよう

例えば、以下の画像のような画面を作るとします。

トップ画面サンプル

実際に記述するbody内のコードは以下のように書くだけでＯＫで、非常に楽チンです。

<!-- ツールバー部分 -->
<div class="toolbar">
    <h1 id="pageTitle"></h1>
    <a id="backButton" class="button" href="#"></a>
</div>
<!-- メインページ -->
<ul id="home" title="Yahoo!検索チーム" selected="true">
    <li><a href="#web">ウェブ検索へ</a></li>
    <li><a href="#image">画像検索へ</a></li>
    <li>検索、使ってね！</li>
</ul>
<!-- ウェブ検索結果ページ -->
<ul id="web" title="ウェブ検索">
    <li class="group">ウェブとの一致</li>
    <li><a href="http://www.yahoo.co.jp/">Yahoo!</a></li>
    <li><a href="http://search.yahoo.co.jp/">Yahoo!検索</a></li>
    <li class="group">カテゴリとの一致</li>
    <li><a href="http://dir.yahoo.co.jp/">Yahoo!カテゴリ</a></li>
</ul>

画面内の[ウェブ検索へ]をクリックすると以下の画面に移動します。

ウェブ検索画面サンプル

このように、iUIを使ったページでは、複数のページを１枚のHTML内におさめておいて、高速なページ遷移を可能にすることができます。
もちろん、iUIでは複数ページを複数のHTMLに分けて開発することも可能ですが、画像検索では高速な画面切り替えを行うため１枚のＨＴＭＬに複数ページをおさめています。

HTMLコードの説明

簡単に上述のＨＴＭＬコードについて説明しておきます。

<ul>タグのtitle属性の値がページのタイトルとなります
<ul>タグのid属性がページのIDになります
<ul>タグが画面内での１ページになります
<ul>タグのselected属性の値がtrueのものがアクティブなページになり、画面に実際に表示するページになります。selectedが付いていないページは画面に表示されません
<a>タグのhref属性で#webのようにリンクすると、<ul id="web"> のページにリンクを貼ることができます
<ul>タグ以下に<a>を定義すれば、自動的に矢印アイコンが付与され、リンクとして分かりやすく表示されます
<ul>タグ以下の<li>タグのclass属性にgroupを指定すればグループのヘッダー画面が表示されます
<a>タグで外部にリンクを行う際はtarget属性に _self を指定します

慣れるまでは通常のWEBサイト作成形式と違うため、違和感を感じるかもしれませんが、慣れれば非常に便利に使うことができます。
iUIを使うことで、Yahoo!画像検索iPhone版のプロトタイプは１日程度で作成することが出来ています。

iPhone用Safariの仕様

iUIを使う上で覚えておきたい、iPhone用Safariの仕様についても以下にまとめておきます。

ブラウザ: Safari2.x ベース
画面解像度(縦): 320x356px (幅320px、高さは上80pxと下44px分を除いた356px(480-124)が利用可能)
仮面解像度(横): 480x208px (幅480px、高さは上80pxと下32px分を除いた208px(320-112)が利用可能)

さあ、はじめよう

まずは、iUIをダウンロード後、解凍して samples ディレクトリ以下のサンプルをいじってみてその便利さを感じてください。
音楽検索やdiggページ閲覧ページなどのサンプルが含まれていて、少しいじるだけでiPhone用のページを作ることができるでしょう。

今後、日本でiPhoneが発売されることで必要になるかもしれない、iPhoneページ作成の作業を圧倒的に効率化することができるはずです。