iPhoneはモバイルデバイスにおけるユーザインタフェイスの発展可能性を感じさせるデバイスではありますが、疑問に思うところもあります。

まず、結論から言えばiPhoneの弱点はケータイウェブが見られないことです。この時のケータイウェブというのはNTTDoCoMo・au・Softbankモバイルの携帯電話における内蔵ブラウザで見ることができるインターネットのことですが、これがiPhoneのリアルなインターネットよりも使い勝手がよいんではないかと思う点を何点か上げておきます。

必要な情報がすぐに得られる

去年、まだ僕が就活していたときに、あるモバイル向けコンテンツ会社の説明会で「フルブラウザなどのリッチクライアントが普及していくと、オープンなウェブの中で戦いを迫られることになるから苦しくなるんじゃないか」と質問したら、「我々にはケータイ利用者がパッと情報を得られるよう、画面を最適化するノウハウがあり、それが強みである。」とお答えいただいたんですね。で、なるほどこれはケータイウェブの便利なところだと思うのです。

天気予報にしろ、乗り換え案内にしろ、あるいはGoogleのメールにしろカレンダーにしろ、既存のケータイウェブの資産はもうかなりあって、それらは携帯電話上で読みやすいよう数画面で必要な情報が得られるように最適化されていて、またUIの要素数自体があまりないのでPCウェブのようにどこで検索すれば迷うことも比較的少ないでしょう（TSUTAYA Onlineのように企業側の販促情報でできているようなところもありますけど）。

もちろん、iPhoneも技術的にはXHTML+CSSの知識があれば、最適化した画面設計をすることはできますが、大半のサイトはPCと同じ画面で見ることを要求されるので、自分の求めている情報がどこにあるのか、目を点にしながら画面を逐一探さないといけないという手間がかかります。HTML5など情報の意味がブラウザ側でより明確になれば、閲覧者の求めに応じた情報提供も可能になってくるでしょうけど、まぁまだまだ先の話でしょう。

ウェブブラウザが安定していて、信頼できる

ブラウザが勝手に終了しない（落ちない）という点です。iPhoneの場合、ブラウザが落ちるとそれだけで再起動に十数秒のロスになります（加えて直前に見たページもなくなっていたのなら、その再検索にさらに何分か必要でしょう）。乗り換え案内や天気情報などその特性上モバイルには即時性を必要とするコンテンツが多くあり、時間的なロスはデスクトップのそれよりか致命的なものとなりやすいでしょう。

僕がiPod touchを使っている時には（個人的に使い出によるでしょうけど）、だいたい3-4のタスク（ブログの閲覧だとか、はてなブックマークのリンク先を読んだりとか）に一回は落ちるんですが、こうやって勝手に終了されると、一回のタスクで下手にPCを使うことの何倍もの時間がかかることもあり、それならPCサイトブラウザで十分だよなぁと思うことが何度もあります（PCサイトブラウザを恒常的に使わないので、どこまで実用的なのかわからないところはあるんですが）

想定反論に対する再反論

ケータイウェブはお金がかかる

ちなみに、PCでは大体の情報が無料で入手できるのに対して、ケータイウェブはお金がかかる（パケット料金や課金コンテンツなど）との意見もあるかと思います。

パケット料金と課金コンテンツの話は分けて話すべきですが、まず前者に関しては「んー、そりゃiPhoneにも、むしろ携帯のそれよりお金かかってるんでないかい」でいいでしょう。後者に関しても、私はお金が必要だとは必ずしも思いません。ここでそう思うかどうかの差はおそらく情報に対して求めている水準の差なのだと思います。

つまり、GPSで目的地までナビゲーションしてもらったり、乗り換え案内で次の電車はどれくらいにくるのか調べようと思ったら、お金をサービス会社に払ってそれを得ることになります。ただ、普通に電車を乗り換えたり、一週間後の天気を見るようなよくある水準の情報に対しては無料で済ますことができます（ニュースの全文を読みたいならお金払え的な新聞各社はちょっと時代錯誤感がありますが）

さらにいえば、Yahoo!やGoogleなど広告でお金を得ていたりするモバイルコンテンツプロバイダもいますから、欲しい情報に対して必ず値札がついているという状況ではないかと思います。

ケータイウェブは簡単な情報しか出てこない

これは確かにある面ではその通りだと思います。あるコンテンツ（天気など）に対して8割が求める情報と2割が求める情報があって、欲しいのは2割の情報なのに、携帯では割愛されているなんて状況は、まだまだあります。

ですが、これは適材適所なのだと思います。狭い画面で誰でも彼でものニーズを満たそうと思って情報量をむやみに増やせば、それは回り回って8割の人の情報行動を妨げる結果にもなります。

ですから、この時はPCサイトブラウザやPCサイト変換プロキシ提供サイトなどを用いて、アクセスすればよいでしょう。もし、こうした情報しか必要ないのであれば、それはケータイウェブは適していないと言うだけのことです。

補足

いつものように補足ですが、別にiPod touch/iPhoneでのモバイルインターネットを全否定しているわけではありません。基本的なタスクがネイティブアプリケーションの充実により、快適に行えるようになれば状況も変わってくるでしょうし、それは却ってケータイウェブより使いやすく、より多くの人が求める情報行動をカバーできるようになるかもしれないですし、それはウェブ制作者として僕も望むところです。

ただ、ユーザビリティの指標における効果・効率・満足度のいずれも、ケータイウェブのそれに及ばない¹現段階では少なくとも今ケータイを持っているマジョリティに勧められるところではないと思います。

1. 満足度については意義もある人もいるかと思いますが、それはまず効果が満たせてからでしょう。人で言うなら会話が成立してからその会話が面白いのかどうか評価できるのと同じこと

MobileMeというサービスは、この「環境は似通ってきているのに情報は分断されてしまっている³ 」という状況に対するAppleなりの解決策だろうと思います（だからMobileMeは非力なデバイスには情報を同期させることはないでしょう）。「すべての情報を、いつでもアップデート」というコピーからも伺えるようにMobileMeは情報を同期することによっていつでもどこからでも最新の情報が見られるようにするために出てきたわけですが、もう少し踏み込んだ言い方をするなら機器毎の環境の違いを小さくするために出てきたともいえるのではないかと思うのです。

ただ、現状MobileMeで同期できるのは、ブラウザのブックマーク、メール、連絡先、カレンダーといったところ。これら情報の同期だけで環境の同質化といってしまうのは、少し物足りなさを感じざるを得ません。

環境を同質化するということは、同じ情報が見られるというだけではなく、同じタスクを機器を問わずシームレスに継続してこなせるというところまで踏み込む必要があるのではないかと思うのです。リッチなアプリケーションによって、そのハード的・ソフト的な制限が外れたのならば、次は「今○○している」という行動・状況を同期するところまで面倒を見てあげる必要があるのではないかと思うのです。

具体的な話にしましょう。例えば、私たちはPCを使ってAmazon.co.jpで買い物をします。例えば、私たちはPCを使ってブログを読みます。例えば、私たちはGoogle Mapを使って駅から目的地までの道のりを調べます。

しかし、その状況は同期されることはないのです。まぁ、iPhoneでAmazonにアクセスし直すことはあるでしょうし、ブログのタイトルでぐぐって改めて読み返したり、Google Mapで目的地を再度検索することはあるかもしれません。プリンタで出力する人もいるでしょう。が、それは単にユーザが再度その状況をiPhoneに設定し直しただけであって、共有あるいは同期したわけでないですよね。

では、どうなるのがよいのでしょうか。例えば、MacのSafariの同期ボタンを押すと、今見ているページがMobileMeのサーバに送信されて、iPhoneとセッションが同期され、買い物の続きができる。あるいはブログの続きが読める。また、iPhoneのマップアプリを開くと、PCで最近検索したルートや閲覧したマイマップの情報が格納されている⁴ 。ここまで踏み込んで始めて、PCとモバイルとの環境差異を無くしたといえるのではないでしょうか。

ですから、MobileMeには「PCの電源を落として、iPhoneの電源をつけた次の瞬間からさっきのPCの状況が共有される」という情報・状況同期サービスに発展してほしいのです。単なる妄想というわけではなく、その一端はiTunes Movie Rentalsというサービスで実現している⁵ わけですから、そう遠い話ではないと思いますが。

ちなみに、こうした考え方自体はUIEngineのパーベイシブ・アプリケーションという考え方とそう変わるところではないですから、特段目新しいというわけでもないでしょう。UIEngineと違ってどの機器でも対象にするというわけではなく、Apple製品と特別に戦略のためにお許しされたPCだけで状況が同期できるというのが最大の違いでしょうか。

あと高望みするなら、その同期対象はApple純正あるいは公認アプリだけではなく、サードパーティによるMacアプリとiPhoneアプリとが（自由に）同期できるようになるところまでiPhone API/Cocoa APIを広げて欲しいなと。少しは面白そうな未来が見えてきません？

B001CLDGX4,clear2,http://internet.watch.impress.co.jp/cda/static/image/2008/06/10/mobme1s.jpg

1. この表記方法はめんどくさいので、以後は単にPCと書きます
2. 現状、MobileSafariは結構異常終了することが多いので、そう簡単に結論できる状況ではないけどね
3. 然るべき手順を踏めば同期することは出来るが、面倒くさすぎて几帳面な人しかやらないという状況があると
4. どことなくNAVITIMEぽいな
5. PC/Mac/iPhone/AppleTVに視聴状況を同期することでいつでもどこでも映画を継続的に視聴できる

次いで、この負担料金を加えた月々の総負担料金は以下の通り。

ということで、購入から2年間は月々だいたい8,000円ちょいから11,300円あたりで利用できるようになりそうです。データ通信は使うけど通話にはあまり使わないという方で、ソフトバンクモバイルの相手にたまに電話する、またはSMSを結構使うようになりそうという方はホワイトプラン(i)、それ以外のキャリアを持っている方にもたまにすると言う方は割引適用後、900円で1,000円分の無料通話が付いてくるブループランSSバリュー(i)がオススメです。

で、問題はこれが安いかどうかという話かと思うので、ここでは無難にアメリカのAT&Tのそれと比べてみます。iPhone 3Gは月いくらで利用できる？ AT&Tがプランを発表を再び表にすると以下のようになります。

一見、ソフトバンクモバイルの通話なしと同等の料金のようにも思えますが、AT&Tの旧iPhone向けプランにおいて$59.9の最低料金のプランでも450分もの無料通話がありますから、新プランにも少なからず無料通話がついてくることが予想できます。これを考慮した上で比較するなら、よく通話する人にとっては割高に感じるでしょうね。

ただ、使いやすいフルブラウザ・フルメーラ、他にはないサードパーティのiPhone向けアプリといった環境は現状日本市場には出ていない² わけで、そういうまだ値段が付いていないところにあなたならどれくらいのお金が払えますかという問いが最終的な購入判断につながるのではないかと思います。

ちなみに、現在発売中のiPod touchも7月11日以降には、3G iPhoneと同じバージョンのOSが入って出荷されるわけですが、6月26日現在での最安価格（価格.comによる）は8GBで32,500円、16GBで38,800円で、2年割賦で考えると8GBで約1354円/月、16GBで約1617円/月になります。どこでも電話・ネットはいらないという方はこちらでもいいかも。

料金以外のポイント

料金以外で気になったところをまとめておくと、まず既存のメールアドレスが利用できない点。S! メール(i) というiPhone専用サービスでは、なぜか、好きな文字列@i.softbank.jp というちょっと変わったアドレスが割り当てられているようです。通信上のなんらかの問題でどうしようもなかったのかもしれませんが、現行のスマートフォンがS!メール対応になっているだけに、既存ユーザには迷惑な話です。また、専用U-SIMとなっているため、他の携帯電話とU-SIMカードを抜き差しして使い分けるという使い方は出来なくなっているようです。これも通信上の問題なのでしょうか。

オレンジ・ブルー両プランにバリュープランがないのも気になりましたが、これは3G iPhoneに販売奨励金が入っているためかと思います。


バリュープランも使えるようです（その他の料金プラン | SoftBank）

それと気になるのが、既存のWindows Mobileのスマートフォン。このまま放置されると、毎月の基本料金がホワイトプラン＋パケットし放題 PCサイトダイレクトで2,009円～10,780円とネットを中心に使っている人にとっては、iPhoneプラント比較して高額になってしまいます。それとも実際は、iPhoneと違って全然ネットが使われていないから大丈夫だったりするんでしょうかね。

結局どうするか

個人的には行動範囲内に無線LANが配備されているため、当分は買わないと思います。GPSやBluetoothでの音楽視聴³ にはかなり惹かれますが、それにiPod touchを使ってみて思いましたが、本格的に音楽プレイヤーとして使うなら32GBは欲しいかなと。社会人になる来年春には持とうかなと思うので、それまでにはなんらかのモデルチェンジがあることを期待して待っておくことにします。

まぁ、私が買わなくともWeb技術に詳しい人はお求めになるだろうと思うので、そういう方と無料で通話できるようになるのは嬉しいですね。

iPod touch セカンドインプレッションもよろしければご覧ください

1. 1$=105円として計算
2. わからないというのもありますが
3. もっとも初代iPhoneはA2DPやAVRCPなどのプロトコルには対応していなかったわけですが、はてさて

ページの保存

時間ができた時読めるように、「読むリスト」にページを保存することが出来ます

オフラインモード

ページを保存しておいて機内や電車などどこでも読めるようにできます

RSSフィードの出力

あとで読むページを自動的にRSSフィードにして、どこにいてもリストが読めるようになります

コンピュータ間で同期

仕事用PC、家庭用PCなど何台のコンピュータとも読むリストを同期することが出来ます

ソーシャルブックマークに投稿

読んだ後はお好きなブックマークサービスにページをブックマークしておきましょう

クリック保存モード

面白そうなリンクをクリックするだけで、あっという間に読むリストの出来上がり

実際、使ってみた感想はネタフルさんにて取り上げ済みなので、ここでは割愛しますがなかなか良い感じです。とりあえずざっと見したいという人に向けてYoutubeでデモ動画も公開されています。

Read It Later Firefox Extension

今回はこのアドオンを勝手ながら日本語化させていただきました¹ 。単に日本語化するだけではなく、以下のソーシャルブックマークサービス・ミニブログサービスに投稿できるようにしてみました。文字化けも解消しています。

• はてなブックマーク
• livedoor クリップ
• Yahoo!ブックマーク
• @nifty クリップ
• Tumblr

ダウンロード・インストールは以下から。ちなみに、今バージョンはFirefox3以上でしか使用することが出来ません。

ダウンロード

Read It Later（あとで読む）日本版

ライセンス

著作権は制作者のNate Weiner氏に全て帰属します

スクリーンショット

「あとで読む」フォルダはブックマークツールバーのフォルダを指定できないですが、代替方法として「読むリスト」のRSSフィードをスマートブックマークとしてブックマークツールバーに置く方法があります。

しかし、RSSの日本語部分が変な感じにエンコードされちゃって、イマイチ使えないです。そこで、きちんと日本語へ変換するゲートウェイを用意しましたので、ご自由にどうぞ。RSSフィードのURLを以下の?url=の後に入れてご使用ください。

RSSフィードのアドレスの例

https://readitlaterlist.com/users/123abc/feed/unread

変換後のRSSフィードのアドレスの例

http://tech.openvista.jp/tmp/rss_unescape/?url=https://readitlaterlist.com/users/123abc/feed/unread

日本語タイトルはどうやら変換の途中で短くちょん切られるらしく全部入らないようです…。

1. ライセンスが明記されていないので、少しやましい感じがしますが

適用前

適用後

変更点は以下の通り。

• 横幅を40文字程度に設定
• 検索結果に番号を振った
• 検索フォームを右下に貼り付けるようにして、フォーカスがある場合以外は半透明状態にした
• 関連ページやメモを取るなどのリンクは削除
• 一部のサイトへアイコンを追加（Wikipedia, amazon.co.jp, .go.jp, .ac.jp）
• ファイルタイプが特殊な物にアイコンを追加(PDF, Microsoft Word）
• 検索行動にあまり関係のない情報を削除

なお、AutoPagerizeと併用すると、より快適になるかと思います。

適用方法

特定のサイトにCSSを適用するための@-moz-documentルールを使っているので、現時点ではMozilla FirefoxやFlockなどのブラウザ以外では使用できません。

適用についてはユーザスタイルシートの作成方法に沿って、以下の内容をuserContent.cssとしてプロファイルフォルダに保存してください。StylishというFirefox用アドオンは、ユーザCSSを一元管理できるのでとても便利です。

CSSソースコード

@namespace url(http://www.w3.org/1999/xhtml);
 
@-moz-document url-prefix("http://www.google.co.jp/search"),
url-prefix("http://www.google.com/search"){
 
div#tads, /* Ad */
table#mbEnd, /* Ad */
table#sft h1,
table#sft td.xsm,
span.xsm{
    display:none !important;
}
 
body {
    margin: 0px !important;
    padding: 7px 20px 0px 20px !important;
}
 
/* グローバルナビゲーションの枠線 */
 
body > div > div#gbar{
    padding-bottom: 15px !important;
}
 
body > div > div.gbh{
    border: none !important;
    padding-bottom: 10px !important; 
}
 
/* 検索ボックステーブル周りの調整 */
 
table#sft{
    width: 100% !important;
}
 
table#sft tr[valign="top"] > td + td{
    width: 450px !important;
}
 
table#sft tr[valign="top"] > td + td,
table#sft tr[valign="top"] > td + td table{
    padding: 0px !important;
    margin: 0px !important;
}
 
table#sft tr[valign="top"] > td + td{
    padding-bottom: 6px !important;
    position: fixed !important;
    bottom: 0px !important;
    right: 0px !important;
}
 
table#sft tr[valign="top"] > td + td table{
    padding-bottom: 6px !important;
}
 
table#sft tr[valign="top"] > td + td table tr{
    display: block !important;
    float: left !important;
    padding-top: 7px !important;
}
 
table#sft:hover tr[valign="top"] > td + td{
    background-color: white !important;
}
 
table#sft tr[valign="top"] > td + td input{
    font-size: 90% !important;
    opacity: 0.6 !important;
}
 
table#sft tr[valign="top"] > td + td input[name="q"]{
    display: block !important;
    background-color: white !important;
    border: 1px inset #666 !important;
    float: left !important;
    width: 350px !important;
    padding: 4px 6px !important;
}
 
table#sft tr[valign="top"] > td + td input[name="q"]:focus{
    border: 1px solid #94bbdf !important;
    outline: 1px solid #b3cfe8 !important;
}
 
table#sft tr[valign="top"] > td + td input[name="q"]:focus,
table#sft tr[valign="top"] > td + td input[name="q"]:focus + input[name="btnG"],
table#sft tr[valign="top"] > td + td input[name="q"] + input[name="btnG"]:active{
    opacity: 1.0 !important;
}
 
table#sft tr[valign="top"] > td + td input[name="btnG"]{
    margin-left: 10px !important;
    padding: 3px !important;
}
 
/* 関連ページ、メモへのリンクを削除 */
 
a[href*="q=related"],
span.bl{
    display: none !important;
}
 
/* 検索結果の幅 */
 
div#res table{
    width: 100% !important;
    max-width: 40em !important;
}
 
/* 各検索結果を下げ */
 
.s{
    margin-top: 0.3em !important;
    margin-left: 2em !important;
}
 
/* カウンタを生成 */
 
div#res{
    counter-reset: head !important;
}
 
.g > .r:before{
    counter-increment: head !important;
    content: "#" counter(head) !important;
    font-size: 18px !important;
    font-weight: bold !important;
    margin-right: 5px !important;
    padding: 0px 4px !important;
    background: white url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAeCAMAAAAiq38CAAAAA3NCSVQICAjb4U/gAAAAYFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADu7u7v7+/w8PDx8fHy8vLz8/P09PT19fX29vb39/f4+Pj5+fn6+vr7+/v8/Pz9/f3+/v7///9uR0UGAAAAQUlEQVQYlXXGtwGAMAAEsZ8ATHIk7L+lK5+/QZX0QdYX3ge64W1Qq4PqbIE3QwneCF346QnvAe3wbpgNCtAK74IOWSsakaslG2kAAAAASUVORK5CYII=") left top !important;
    color: #bbb !important;
    border: 1px solid #bfbfbf !important;
    -moz-border-radius: 3px !important;
}
 
/* 関連検索 */
 
div.e,
div#res > div:first-child{
    border: 1px solid #4d7032 !important;
    padding: 0px !important;
}
 
div#res.med > div.med{
    border: none !important;
}
 
div.e table#brs{
    width: 100% !important;
    max-width: 100% !important;
    padding: 0px !important;
}
 
div#res > div:first-child td.nobr,
div.e table#brs caption{
    min-width: 100px !important;
    background-color: #6d9f52 !important;
    color: white !important;
    padding: 0px !important;
    vertical-align: middle !important;
    text-align: center !important;
    font-weight: bold !important;
}
 
div#res > div:first-child td,
div.e table#brs caption{
    padding: 10px !important;
}
 
div.e table#brs tr td{
    border: 1px solid #ccc !important;
    padding: 10px !important;
}
 
/* ファイルタイプ関連 */
 
.g > .r{
    font-size: 110% !important;
}
 
.g > .r > a.l[href*=".ac.jp/"]:before{
    content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAMAAADzapwJAAAAA3NCSVQICAjb4U/gAAAAYFBMVEUwMDAlTSZnaGcIoztLhlgBvEQ4qWA+uGskyWJUrXNetX0/znebnJxvu4l9wZidrqxx1ZGotLe1vL+N1qWb2q+w4r/X19u+6c7T5d7d6ejm7O3m9O7u9/b2+vj9/f3///89IAYcAAAA1ElEQVQYlWWR6Y6DMAyEXVhaoOEKR27m/d9yndBGbHb+2Bp9Go8SAnB+pP13B2UbGH70F6EM77OpxM2+Voz148h5mfa2ogklDccD1hU0zsBbVaHMdmHXJFBkny5shsw/mnMtHQWN4ELwD13QsLGJlH9p+JCmuEamLZLMhBvNEW7f1k2d8jqaaHiv5rZtmqb1Apnmcuv7He16PuLV+N7s+m1+vZ51lBLuQ8O4dej77smqx4Njrt/RUOPQd13XD6MyxK0SraVclom1LFJWpJPNEnST4JO/4bEva9NpKxAAAAAASUVORK5CYII=") !important;
    padding: 0px 4px !important;
}
 
.g > .r > a.l[href*=".go.jp/"]:before{
    content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAUCAMAAAC+oj0CAAAAA3NCSVQICAjb4U/gAAAAYFBMVEW8AAC2CQjNAAHsAAC7FhXIERHeCgi7KCjERkXsOjnZamrPfHvdgICvr6/gqai8vLzCwsLIyMjOzs7S1tbY29zg4OHz2tnk5ebp6enu7e3x8fHz9Pb39/f7+/v9/f3////j3z0zAAAAu0lEQVQYlbWQ3W6DMAxGoTC2FhZYSBY7/nv/t6wDVS+m3lWzIkX6dHT02Z29nO7fYxFRs/aYn7GoUsmF/FfCBngs6JBCDkuojhCdtGRAVgrTpf8Mpoh0SgCATZdh+hjH3ZhQj1hSqWJhmKaxv6nVpnGJ7Lmw1qvj/RcLI4p0xvATM4j9XodLN1eyyrVJKG7eTo3DbT58hkfv8h2Tt4S0pwRkVPncMq4Z07b6bNF5fSyv697wvzcRzG8d9g6wXC54DpXxzwAAAABJRU5ErkJggg==") !important;
    padding: 0px 4px !important;
}
 
.g > .r > a.l[href*="http://www.amazon.co.jp/"]:before{
    content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAATCAMAAACjpw26AAAAA3NCSVQICAjb4U/gAAAAYFBMVEUKCAYVEhEqKSc8OjlHRkVTUlFjYmJsbGt7e3qQj4+ZmZj7ji+trKz8nkL7o1O5uLj+rWP9tHHExMT8w479zJ/W1tb+1bDi4uL94Mfp6en95tH+7uLy8vL79/T9+vn///9mECSVAAAAtElEQVQYlW2RWRKEIAxEg4DgLi6AiOH+txxwprRk7K/Uo6sTEgivgqtCxD8cCfojxxi2VpaiWjO34ZBE1ycWQERbEhDPkIpLDFMBPMv261CLHIdNFlAUJMNHyp7a3B1T2Uv2ELHx4p4Qzh8bBoTSGE4q3J1L7j09TCWjrB64NFb1TcJaubSnzXhEjwGdVQnj0s37taNDKzt/W9qxGxfrnLNa9crZ5TdJtHRNUqc0ns3uMzz0AS8+JxP4ZhsWAAAAAElFTkSuQmCC") !important;
    padding: 0px 4px !important;
}
 
.g > .r > a.l[href*="wikipedia.org"]:before{
    content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAATCAMAAACjpw26AAAAA3NCSVQICAjb4U/gAAAAYFBMVEU/Pz9PT09aWlpnZ2dzc3N6enqCgoKKioqRkZGYmJicnJyjo6OoqKisrKywsLC2tra6urq+vr7CwsLHx8fLy8vQ0NDV1dXY2Njd3d3i4uLm5ubp6enu7u7y8vL4+Pj///9BAaonAAABB0lEQVQYlW3RSW7EIBAFUNO0zWDmYgbD/W8ZE2dahEUhHqikX2zz37U9G0V3cSVpTH55jNddrWIi6J198zWB3Ve79Dlax/f6cBz1bfEWp0/BGbvjxWPUub1exEHO0TgNBwrrdR+9FNRnrgETr7UmdDHA3aj2EMoVA4CUbF9sVZ2W0V5ct2CMUgwtTqO1nlrLJvgC2vATLy5XKqWnnE1O5L1bwd6LY66llVg6gKVSC85fi9U5Y6KYXB48WCn4vnqPFq/QsoesrVeGcYb0Z0odYoo1hCCtPfBB0BM+EJfDHQO0VVIS5L4mmAQkxqlRQvBjO3/m3c7TgbPipBjZP98ww8kpOY5DPccPrDciMXvSGh4AAAAASUVORK5CYII=") !important;
    padding: 0px 4px !important;
}
 
.g > .r > a.l[href$=".pdf"]:before{
    content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAA3NCSVQICAjb4U/gAAAAYFBMVEW5Gg7rBADAKBvpIwfCQSrsMB/JUDHsRi6zaWH4YB7iZEm6gXL5dDjgflq/mJDviWH9nWnUqqDAwMDGyMnwubDQ0tPrycHZ2Nfe3t7z29Xk5eXs7Ozx8fH19fX6+vv////F3ylvAAAANXRFWHRDb21tZW50AE9QVFBpWCB3ZWJEZXNpZ25lciAgaHR0cDovL3d3dy53ZWJ0ZWNoLmNvLmpwL/A4MtsAAAJKSURBVDiNdZSL1rIqEIZJBAo1JOUgh+H+7/IfrL6t5H5zUcseXmYGGFJ2QarKGaB8XpRGZB9TQCy+Vb99/CHfIP5xEvjQmn7AVOy6rtbabVfcnGvm/jnSG4oy8Rh3TbNO1443KqQUdBwfo5pnJFWJ+bD8AbSlzPj78cBhHNXkSgiXjpYWWgZSFHD+GKcJJwb/53l25GW6lWl33MGS44XjJjtWl+alFzWd53O4D0/XguzGye3Gh6F/6FHVlGTf855/k/8DBeu5rJrUpNS0S3Lea3cGQdpwlvdholpbD2dwgdgoRTFDDOEERnD1MITDE7OSsAoXGkeXWkMrrBI6+ivHE1gTiym1MTo8kCl+HhxAUzZDDgjCydHngyUe9k1Qjec+/DgieFSWdIKcsvmJ0cORhJmKkHM0r19H+M8tgWVUYYDLcgXm/LmKGTBAtiXzQjD7Zgt9yR8l5BgTbtnVgBHCFwSwUrKOv7kFWsdQIL8/SqyckLu5BKsj7JVdRb88Sfd/YCra4NFympP7YtCwgpiLcT8g7+/3nhCuEeg6BJfFuyXFNusiKenvg66r4cq4dMhxiSVk18ToViF8dBiZGRCksuQFr3ULJoglSRFrRqAowzpGg/ldONa3UgCSZawg07UOF461eySmqqWsHHnu9bp0hLKyDeuOG8g6Iiu42StHXFeoL8hwDraUFozwblyzwAAQ7HrBFF5GY6BxLAFvcIjbilemttz07ftgTuDbr9Ym7W0f+4RzxmBVX+EAQn4dhZuDjHEOu0rMnwb5Dw5GmV0/r+uEAAAAAElFTkSuQmCC") !important;
    padding: 0px 4px !important;
}
 
.g > .r > a.l[href$=".doc"]:before{
    content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAA3NCSVQICAjb4U/gAAAAYFBMVEUAR7sDYMYNcNSJYTtJdKQfgtwJkfKpcTk4kN2HiIE5pPNqmcNmq96UqLu3r4Jpxfy2t7jQwlfAv77HxsXh0mbLy8rR0NDC1ebu4mfY2Nje3t/m5ubs6+vy8vL4+Pj///+VSXRiAAAANXRFWHRDb21tZW50AE9QVFBpWCB3ZWJEZXNpZ25lciAgaHR0cDovL3d3dy53ZWJ0ZWNoLmNvLmpwL/A4MtsAAAItSURBVDiNdVSLsqowEFOkioDH2tr19P3/f3myi5e5Foy2zkjIblLYQxWULCil1C84yJ5jWpFTiiF9IW4uhPiV+FoQQohACD59IR6AYwecBWo0aY+Y67EbRqXUeB9HWcNcU95VHPA78HbGAnUONcZaNoogHnQ1+ONVjrcZiq9aY9hVPNxBPIJ4ltIvzi3tKdY6Tdh6rNuo5tvtep1uvlU8dtPUY7v151FPalT3oWfo3CpyPEp1RzUOnRqGbp4noNf+U7FMhOOLkdeCJXr9CuVDsbjsAz7kifx67nzfJzEV763W2hitXehXmJwaxUrWgGbAdhGmOsXoNIiNa09M4wVFNYzDxGHuKHpnHGs6Y8I0ztfL5TrfJ5MaIhSttayIbzydLoLraVcRPC5tKP48ns/fJ/BwKbeKwUuPGsLh5/eNh22JuUYSK5qMSz8rPIiN60CGYMY6lPYLyPvcEjMTxYxjT2yM79OUyjbHxbRjlhjj5WLZKPqVRkwFl5yllsg9MkGIvDvizfq2dF6IUtxqi+NcdOO2x8gSXh5HGSvLLKo7PTqutKTLo4rHVsklFt8qJkuo7TBMyJG0Cy+4syWGhICcE8PGOYezJ+ytIsdDMIFQ2K1jOZwRbYgcOC4ThyckSdI6xNMq4qHwS1HW5e483sMU86ZHyCBKQnM+0jpzdoj/LiGYZaJLpq1rlJaoF8b/Y7/QB/E9sotoiZI8kPxofJxMkZflDYmSEA3cxHXq/gEGTplX+MrHOQAAAABJRU5ErkJggg==") !important;
    padding: 0px 4px !important;
}
 
/* AutoPagerize使用者向け（使っていない人は要削除）*/
 
div + hr + p{
text-align: center;
font-size: 130%;
font-weight: bold;
}
 
div#bsf + p,
table#nav{
    display: none !important;
}
 
}

検索テキストボックスのフォーカスが外れちゃうと、選択している状態も外れてしまうのがすこし難点ですかね。

この問題を解消するために少し書き直しました。お困りの方は新しい方の記述に書き換えてください。

あと、当然と言えば当然ですがもう少し踏み込んだことをしようとすると、ユーザJS（Greasemonkey）に手を入れざるを得ませんね。各検索結果にfaviconつけるくらいはユーザCSSでやりたい感じもしますが¹ 。

謝辞

base64でエンコードしていますが、アイコンは以下のものを使用させていただきました。

• Mayosoft®Studios
• I’m not a Patriot Icons
• Medical Icons

1. Another side of Liner Note – CSSのattr(Attribute name)を変数的に使いたい

できるだけ、いつものGoogleと同じ表示に近づけたかったので、Googleさんが提供しているAPIは使用しませんでした。ちなみに2008年3月現在で、Google America(google.com)はGoogle Japan(google.co.jp)と違ってiPod touchに最適化されて検索がしやすいのですが、あいにく日本語検索ができません。そこで、自前でこしらえてみました。

Google Search for iPod touch

Googleで「Google」を検索（無意味）

Googleで「郵便」を検索

あと、ブックマークレットも用意しました。以下のリンクをブックマーク後、javascript:以前の文字列を手動で削除ください。

Google検索 for iPod touch ブックマークレット

ホームボタンとしてホーム画面に置いてもいいかもしれませんね。

ちなみに今回はFavicon APIを使いましたので、タイトルリンク部の左にファビコンが表示されていると思います。APIを提供くださっているhirotomo kunimatsuさん、ありがとうございます。

また、タイトルリンク部の右には別窓で開くリンクも用意していますので、ご利用ください。

どうも、タイトルと本文が合っていないケースがたまに出てくるようです。99% スクレイピングライブラリの問題なので暇なときに直します。

Google Japanでも対応されたようです、中の人お疲れ様でした。これでこのサービスもお役ご免かな。

僕も、W43S（au）→D904i（NTTドコモ）→815SH（ソフトバンクモバイル）といわゆるおサイフケータイを乗り継いできて、そのメリットもわかるので一応アプリも揃えてはいるんですが、実のところはあんまり（3-4ヶ月に一回くらい）使ってないですね。

で、なぜかって考えてみたんですが、以下の理由があると思います。

• 公共の場で使うのが恥ずかしい
• 「財布」としての信頼性に欠ける
• 「財布」として使うためのコストが高い

公共の場で使うのが恥ずかしい

おサイフケータイ機能って使うときに「シャリーン」やらなんやらの確認のための効果音がしますよね。単に自意識過剰なのかもしれませんが、僕はあの効果音が非常に苦手なんですよ。店内に響き渡るといえばオーバーですが、オレは特別な決済をしてるんだぞってのを全力でアピールしてる気がしてなりません¹

支払いの時にも「おサイフケータイでお願いします」なる呪文を店員に言わないといけないですし、クレジットカードで決済するようにもうちょっとシームレスにできないのかなと。これも、インフラとして認知される前の過渡期的処置だと思いたいものですが。

「財布」としての信頼性に欠ける

おサイフケータイの機種変更という記事でもご指摘されているとおり、Edyなんかは携帯電話を紛失した場合は面倒見ないよということになっているんですが、ちょっとそれはどうなのかなと。財布と違って完全に匿名なものではないのですから、携帯がネットワーク外にある場合は別として、例えばPCからネットワーク経由でEdyをロックして、一時的に残高をセンターに預けるという手も技術的にやろうと思えばできるんじゃないでしょうか（Edyをおサイフケータイ代表にするのは異論があるかもしれませんが、まぁ有名なアプリだと思うので）

あと、電池が切れると（正確にはFelicaチップを起動させるための電力も完全に消耗すると）使えなくなるわけで、いつでもそこにあるリアル財布の信頼性には代え難い物がありますね。といっても、これは解決しようがないんですが。

「財布」として使うためのコストが高い

いろいろな面倒くさいコストがあるのではないかな。例えば、

• チャージするのが面倒くさい
• アプリをインストールするのが面倒くさい
• ちゃんと決済できる状態か確かめるのが面倒くさい
  • Felicaロックされてないか
  • 残高はちゃんと足りているかどうか

私はたぶんアーリーアダプターかレイトマジョリティあたりだと思うのでそれほどコストだとは思いませんが、やっぱり一般の方はいくらおサイフケータイのメリットを強調されても、まず使うためのコストが大きかったら、そもそも使う気も起きないんじゃないでしょうか。

インストールの手間はプリインストールアプリが増えることにより解消してきたかなという気もします。けれど、チャージや出所の分散化による手間はクレジットカードを多用する理由、EdyやSuicaをあまり使わない理由 – outsider reflexなんかでも触れられていますが、やはりPiTaPaなんかのポストペイ方式に比べるとリスクが大きいなという感じがします。

ただ、じゃあポストペイにすればそれでいいか、といえばそうではなくて、クレジットカード会社の会員獲得を目的として各サービス事業者とカード会社が結びつくことが往々にしてあって、これは結局のところユーザのお金の出所の分散化につながってしまいます² 。

もしカード会員を獲得したいのならば、どこのカードでも無料で使えるようにしておいて、プラスで特別ポイントをつけるなどのメリットを強調することで、かえっておサイフケータイの普及を促し（確率論的な意味で）カード会員の増加につながるのではないかなと思います。

まとめ

新しい物を使う場合には、メリットとデメリット・コストなどを天秤にかけた上でメリットが上回るようだったら使おうという話になるでしょう。例えば、おサイフケータイには「売買行動に伴う様々なステップを飛ばせる」とか「財布の中の現金やカードが減らせる」とかのメリットがあります。

でも、私の中ではまだ上に挙げたようなデメリットやコストの方が大きくて、「これなら財布でいいや」「これならクレカでいいや」というのが率直な感想です。

Felicaが普及して、近所のスーパーでおじいちゃん・おばあちゃんがFelicaでお買い物するくらいのインフラになるためには、こういうのを解決していく必要があるかなと思います。

はてなブックマークでみなさんいろいろコメントしてくれているので併読するとよいかも。

カイ氏伝の中の人からレスをいただきました。
カイ士伝：おサイフケータイ普及の壁

1. 決済完了の確認がその目的ならば、POSに表示したりするなどしてわざわざ音を出す必要性は必ずしもないはずです
2. 未だにView Suicaカードで年会費を取るモバイルSuicaや、VISAでは使えないQUIC PAYが好例

何かというと、レシピをサッと検索して見やすく表示するという用途に特化したサービス。データは料理レシピ検索ソフトのボブとアンジーから勝手に引っ張ってきてます。

特徴

• レシピを検索してサッと確認することができます
• 材料一覧には買い物の時に買い忘れをしないようにチェックボックスをつけています
• 検索結果やレシピはオフラインでも見られるように変換する機能をつけています。変換後のページをブックマークすれば、スーパーなどWi-Fiがない場所でもレシピを確認できます。

ボブとアンジー レシピビューア for iPod touch

デモ動画

レシピ検索デモ動画

iPod touchのユーザビリティ小考

iPod touchの新しい可能性を見た :Heartlogicという記事でも書かれてあることですが、iPod touchは「PCでは煩雑 or 大げさ、でも携帯よりは情報量が欲しいし、パケ代を気にしたくない」というちょっとしたタスクを済ませるデバイスとしては非常に優秀です（逆にちょっとこみいったタスクでは、キー入力性やハードウェア的な限界もあって、ええいPC使った方が早いわとなるので、あまり向いていないでしょう）

今回のレシピ検索というようなちょっとしたタスクなんかも気持ちよくこなせます。メールに書かれている住所をGoogle Mapsで確認したり、今から乗る電車だとどれくらいに目的地に着くのか調べたり、そういうタスクも向いているでしょう。Mac OS XのDashboardなんかはちょっとしたタスクの集合体ですね。

ですので、もしiPod touch向けにサービスを作るなら、できるだけオプションを少なくして、2-3ステップくらいでタスクが1巡するくらいが、iPod touchユーザにとってちょうどいい案配なんじゃないでしょうか（一応仮説なんで、具体的な数値とかについてはまた検証してみたいです）

アンチ・コンバージェンス論から言えば、PCはより複雑なタスクを、iPod touchはこういうステップの少ないタスクをそれぞれ得意にして分化していくんじゃないでしょうか。

それと、ユーザビリティの話はまた改めて書こうと思ってます。

権利的なお話

一応、このサービスはボブアンドアンジーさんのリソースを勝手に使ってます。なので、著作権的にはクロだと思います。その点は非常に心苦しいので、当初は公開しようかしまいか迷ったのですが、いつも重宝させていただいているサイトなので、もっと便利に使えるようにしていくことが、相手方のサイトにとっても結果的にはよいのではないかと思い、公開してみました（無論、広告入れるとかはありません）

このサービスに限らず、スクレイピングを使っているサービスは著作権とは切っても切り離せないですね。勝手にやるにしてもこちらと相手方とがWIN-WINの関係でやっていけるのがマストだというのはこの手の物を作っていてよく意識します。

参考にした記事

• Latest topics > CSS3セレクタとXPathでの表現の対応表 – outsider reflex
• PHPの正規表現のpreg_match()関数
• 目から鱗 w/SQLite » 正規表現でHTMLコメントを取り除くには
• iPod touch – めもちょう

Mobile Finderで十分だよという人もいると思うけど、ウェブ上だと動画や音声が直で開けて便利だしね。Mobile Finderほど多機能なものは要らないという人は便利かもしれない。

Safari上の動画視聴は便利ですね。アプリ版Movie Playerと違って、ちゃんとiPod touchを縦にすると縦に向いてくれますし。アプリ版より普通に便利なのだけど、ここらへんの不均衡はファームウェア1.1.3で直るのかな。

あ、ちなみに画像・動画にサムネイルを付けようと思ったんだけど、iPhone用PHPにはGDが入ってなかったので試せませんでした。残念。

ダウンロード

iPod touch ローカルファイル表示スクリプト

動画ファイルがある場合、正常に見られるように動画埋め込みHTMLを生成するようにしました。

フォルダ名やファイル名が長い場合はスクロールするようにした。これで動画のタイトルが途中で省略されてシリーズ物がどれがどれだか分からなくなる問題も解決か。

なお、スクロール部分はJavaScript Marqueeを使わせていただいています。著作権についてはもちろん留保します。勝手に再配布しちゃってますが、もし問題があればお手数ですがコメント・ご連絡をお願いいたします。

書き忘れていましたが、lighttpdの場合は別途設定ファイル内(/usr/local/etc/lighttpd.conf)にて設定が必要です。以下のように、cgi.assignを書き換えてください（参考：iPod touchでlighttpdの動的コンテンツ）。dir-listing.activateについても念のために追記しておいてください（設定を反映するには本体の再起動が必要です）

ソースコード

dir-listing.activate = "enable"

cgi.assign = (
	".pl"  => "/opt/iphone/bin/perl",
	".py" => "/opt/iphone/bin/python",
	".rb" => "/opt/iphone/bin/ruby",
	".php"  => "/opt/iphone/bin/php-cgi",
	".cgi" => "",
	".sh" => ""
)

Appleからはわりかししっかりしたドキュメントが提供されている¹ のですが、いざやろうとするとなにからやっていいのかという感じもします。

ビジュアルの調整は同ドキュメントの「ページを読みやすくするために最適化する」の章で説明されていますので、ここを中心にして調整していけばよいかと思います。

まず、どうやって最適化していくかについて。iPhone / iPod touchは特定のプロバイダを使っているわけではないので、UserAgent文字列から判断することになります。で、そもそもブラウザ判別が必要かと言われると、必ずしも必要ではないと思います。

iPhone / iPod touchはCSS3メディアクエリが使えますので、iPhone / iPod touchのみ適用するCSSが指定できるからです² 。ただ、それも現時点のみの話ですので、サーバーサイドで調整ができるのならば使っておくに越したことはないかと。

で、その際判別に使用するUserAgent文字列ですが、こんな感じになってます。

iPhone

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3

iPod touch

Mozilla/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/3A110a Safari/419.3

個々の環境や今後のバージョンアップを考えると、(iPhone; U; CPU like Mac OS X;と言う箇所で判断するのがよいかと思います。PHPですと、こんな感じで判定してます。

PHPソースコード

<?php } if (
    ereg("iPhone; U; CPU like Mac OS X;", $_SERVER['HTTP_USER_AGENT']) ||
    ereg("iPod; U; CPU like Mac OS X;", $_SERVER['HTTP_USER_AGENT'])
    ){ ?>
<!-- served for iPhone / iPod touch -->
<?php } ?>

view-portを設定する

ビューポートはmetaタグで設定するもので、Safariの初期状態での表示領域や表示スケールを設定することができます。私は以下のように設定しました。

HTMLソースコード

<meta name="viewport" content="width=320; initial-scale=1.0; minimum-scale=1.0; maximum-scale=2.0;" />

これは「初期状態の表示領域を幅320pxの縮尺1.0倍（つまりそのまま）で表示しておいて、ページの拡大・縮小は1.0-2.0倍の範囲内でやって下さい」という命令です。ご覧のようにプロパティ毎に;で区切って記述してください。

なお、ここでは書いていませんがheight=xxxという形で高さを指定できますし、user-scalable=noを追加すれば、拡大・縮小を禁止することができます。

補正CSSで調整する

で、このview-portタグを指定した時にサイトを読み込むと、こんな感じに表示されます。

ご覧の通り、単に表示領域がちっこくなっただけで本文領域はでかいままです。それとロゴが邪魔で検索ボックスがつかません。ので、以下のように補正CSSを指定してその中で本文領域の設定・ロゴの差し替えなどを行ってみます。

そこそこマシにはなりましたが、そのほかにも一例を挙げると以下のような問題がありました。

1. グローバルナビゲーション（ページの一番上の部分）がはみ出ていて使えない
2. ところどころの表示がボックス領域からはみ出ている
3. リストや定義リストのマージンが大きすぎて表示領域が狭くなっている

(1)のグローバルナビゲーションですが、iPod touchのようにあまり表示領域が広くないUAですと、セレクトボックスに格納して選択→移動するようなものが狭いスペースにおいてもある程度の利便性を備えていてよいかなと思ったのですけど、そうなるとマークアップを変更しないといけません³ 。

ここで安易にブラウザ判別をつけてマークアップをセレクトボックスに変えてしまうと、HTMLが複雑になって利用しにくくなってしまうので、このマークアップを維持したままで、画像で表示していたのを文字で表示するように変更することで手を打つようにしました。

(2)はpositionプロパティで絶対配置・相対配置による位置調整を乱用していたのが問題で、position: static;に変更し、padding/marginで調整するようにしました。

(3)はPC向けにマージンを大きめに取っていたのが災いしていたので、少なめに設定しておきました。

で、これらも含めていろいろとやってみたらこのような感じになりました。

詳しくは実際のCSSをご覧いただきたいですが、内容としては幅やpadding/margin・positionの調整が多かったですね。あと、フォントはVerdanaを指定しておくとより綺麗に表示されるように感じます。

それに、iPhone / iPod touchは対応できないので、フォントサイズ調整スライダなんかは今回消しています。ただ、これは単にjavascriptで値を変えればいいだけなので今後はラジオボックスでフォントサイズを選べるようにしていこうかと思っています。

方向を検出する

ご存じの通り、iPhoneは縦だと320px×356px⁴ 、横だと480px×196pxとデバイスを持つ方向によって幅が変わってしまいます。

コレに備えて、補正CSSは幅に依存しないように作っています（幅を % で指定するなど）が、場合によっては調整が必要かもしれません。

iPhone / iPod toucｈはjavascriptでデバイスの方向を検出できます（出典：Safari Web Content Guide for iPhone: Handling Orientation Events）ので、これを使って補正CSSを追加したりできるよう…なのですが、手元の環境で以下のサンプルを試した限りでは縦方向のwindows.orientationが-90と言われてしまいます。これって私の環境だけの問題なんでしょうかね。

JAVASCRIPTソースコード

<script type="text/javascript">
//<![CDATA[
window.onorientationchange = function () {
  if (window.orientation == 90){
    alert("現在、90です");
  } else if (window.orientation = -90){
    alert("現在、-90です");
  } else if (window.orientation = 0){
    alert("現在、0です");
  } else{
    alert("現在、その他です");
  }
}
//]]>
</script>

1. ちなみにApple Developper Connectionではビデオでのチュートリアルも公開されています、英語ですがわかりやすいです
2. 詳しくは「iPhoneスタイルシートを指定する」の項を参照
3. この部分は順不同リストでマークアップしていました
4. アドレスバーなどの領域を除いた表示領域