Travellers Tales

Tiger マシンが家に 1台あるのですが、この度、ようやく Mac OS X v.10.4.10 から 10.4.11 にアップデートしました。10.4.11 にしていなかったのは、ひとえに 10.4.11 により Safari 3 に移行すると、AcidSearch が使えなくなってしまうという理由によるものです¹。

Safari の組み込み検索フィールドを拡張する

AcidSearch のように Safari の検索ボックスを拡張するプラグインの代替としては以下のようなものがあります。

Safari の Google 検索窓ではなく、Firefox のスマートキーワードのようなアドレスバーからの検索なら、以下のようなプラグインがあります。

Google のサイト内検索を簡単にしたい

前置きが長くなりましたが、上記に紹介したような AcidSearch 代替プラグインでは、どうしてもできないことがあります。サイト検索です²。私はサイト内検索をすることが多いので、これができないとどうしても効率に不満が残ります。AcidSearch はサイト内検索ができたので、よかったのです。

いろいろ調べてみたのですが、現在、Safari のプラグインでこのサイト検索ができるものはなさそうです。Firefox や IE なら Google ツールバーを使う方法もあるのですが…。

サイト内検索をするブックマークレット

しかたないので、サイト内検索は Bookmarklet で実現することにしました。もう既に誰かが同様のものを作っていそうなきもしますが、以下で公開しておきます。

javascript:l=location.hostname;k='%22'+encodeURIComponent(window.getSelection())+'%22';window.location='http://www.google.com/search?as_q='+k+'&as_sitesearch='+l;

使い方は、下記のリンクをブックマークしておいて、必要なときに呼び出すだけです。選択した単語部分をそのとき開いているサイト内で Google のサイト検索を用いて検索結果を表示します。

• サイト検索

検索結果は同一ウインドウで開きますが、新規ウインドウで開きたい場合は、window.location の部分を window.open にすればいけると思います。

この Bookmarklet をブックマークバーの一番左に置いておけば、⌘1 (cmd+1) で一発でサイト内検索を行うこともできます³。

Safari の window.getSelection() の挙動

このブックマークレットを作るにあたって、ちょっとハマったのが、Safari の window.getSelection() の動作でした。

Safari では window.getSelection() はオブジェクトとして返ってくるのですが、それを例えば window.getSelection().toString() としても、テキストが得られないようなのです。

プロパティを調べると、toString:[function] が定義されていることもわかる（toStringしか定義されていないこともわかる）。しかし、s.toString()=undefined なのだ。alert(s) とすれば、選択された文字列が表示されるので、toString()は実装されているように思うのだが。。。

いろいろ調べてみたのですが、WebKit Bugzilla #4609⁴ なんかを見てみると、toString は Firefox と同様に動くようになったと書いてあります。ただ、上記の記事が 2007年 4月、#4609 の Fix は 2006年 1月なので、直っていてよさそうなものなのですが、Safari 3 になるまで修正が入らなかったのかもしれません。

この問題があったときに、回避策として window.getSelection() をテキストにする方法は、検索するといくつかでてきました。

• str=window.getSelection()+'';
• str=unescape(escape(window.getSelection()));

前者は、空のストリングを付加して、window.getSelection() の返すオブジェクトをテキストに変えているようです。

後者も似たようなものですが、私が公開している Title+URI+Text.scpt で使っている方法です⁵。

そんなわけで、以下のようなコードを書いてみました。

javascript:l=location.hostname;k=window.getSelection();k='%22'+k+'%22';window.location='http://www.google.com/search?as_q='+k+'&as_sitesearch='+l;

これでうまく動くような感じだったのですが、落とし穴がありました。このコードだと、取得した文字列が元のページの文字コードに依存する形になり、文字列を Google に渡したときに元のページの文字コードに基づいて URI エンコードした形で URL に検索クエリが入ってしまうのです。UTF-8、Shift_JIS のページでは問題なく動いたのですが、EUC-JP のページではクエリが文字化けしてしまうことが判明しました。

どうしたものかなーと思ったのですが、ページから取得した文字列を encodeURIComponent したところ、UTF-8 で URI エンコードされた文字列になったので、めでたく動くようになりました。

というわけで、簡単かと思いきや、意外に手数をかけてしまいました。

単に iPod としても価値がある

最近、うむらうすのハルさんも iPod touch を購入されたようですが、ほんと、iPod touch はお勧めです。

私は普通の iPod や iPod shuffle も持ってますが、最近は touch しか使わなくなってしまいました。使っていて楽しいのがその何よりの理由。

iPod touch というと、Mobile Safari や様々な付加機能が話題になることも多いですが¹、基本である Music Player としてだけ使っていても、かなりの魅力があります。

ちなみにそれらの魅力は店頭のデモ機に触ったくらいでは、まだまだ理解不十分です。やはり、自分自身の iPod touch で、自分の音楽アルバムや写真をマルチタッチしまくり、自分のメールを読んだり自分の好きなウェブコンテンツを見たりすることでその魅力がわかってきます。所有しないとわからない楽しさというのは、確実にあると思います。新しい Mac を買っただけでにんまりできますが、さらにその Mac を自分好みに使い倒す時のにんまり感、と言えば、多少は想像できるでしょうか。

日本での iPhone 発売が近々なのか、今年のずっと後半なのか、一般人にはなかなか見えないところですが²、iPhone が出たら買おうと思っているあなたの、iPhone 入手までの iPhone に触らない日々はもったいないと思います。

機能というのは楽しんでこそ、元手が回収できるもの。1日でも早く iPod touch を購入して、iPhone/iPod touch のマルチタッチの快感を楽しむべきと思います（もちろん資金に余裕があるなら）。

iPhone が発売された暁には、それまで使った iPod touch は、モバイル SUICA がないと困る等、既存の携帯電話が手放せない友人に譲ったらいいんじゃないでしょうか。

iPod touch の魅力

• 音楽再生
  • Cover Flow でのアルバム選択最高。思わず人に触らせたくなる。
  • 先日加わった歌詞表記機能。従来の iPod より見やすく、歌詞だけでなく、Podcasting での英語学習にも最適³
  • 画面ロック中でも（ロック中じゃなくても）、ホームボタン二度押しで曲の再生/停止やボリューム調節可能。時計も表示される⁴。
• 写真
  • フォトビューアとしても最高。回転させたり、拡大したり、極め付きはフリックでのスクロール⁵。単にこの機能にカメラ付けてデジカメとして売ってもいいんじゃないかと。（iPhone にはカメラ付いてるんだけども）
• マップ
  • 飲み会のお店なんかもこれで場所を調べて行く。無線 LAN 入らないこともあるけど、あらかじめ表示させとけば（その部分は）使える。
  • Wi-Fi 使えれば、近所の店調べるのにも便利。
• メール
  • 手軽にチェックできて読みやすい。パソコン開かなくていいので、家でもメールのチェックだけなら iPod touch だけで結構済ましてる。
  • 標準のメールだけでなく、iPhone/iPod touch に最適化されたインターフェイスの Gmail が何気に使いやすい。アーカイブ・ラベル付けも簡単。
• フィード (RSS/Atom リーダ)
  • デスクトップで NetNewsWire⁶ を使ってるけど、http://m.newsgator.com/iPhone.aspx で同期しながら同じフィードが読める。（要オンライン）
  • iPhone/iPod touch に最適化されたフィードリーダには、Google Reader、livedoor Reader lite なんかもあります。
• ウェブ
  • モバイル Safari でほぼウェブページの閲覧は問題なし。携帯電話のフルブラウザなんかでウェブを見る気が起こらない。
  • Gmail とか、フィードリーダーとか、お気に入りのウェブアプリケーションは、アイコンとして登録すると楽。
  • 画面最上部へ移動する（Mac で home 押した時の挙動）には、最上部のバー（時刻やバッテリ残量の表示エリア）にタッチする⁷。
  • リンクを長押しすると、リンク先の URL を表示する。

魅力（および Tips）はいろいろありますが、とりあえずこんなところでしょうか。

iPod touch キー入力の Tips

キーボードも長文打つのはともかく、慣れると入力は意外に楽です。各所で紹介されてますが慣れの他にコツもあって、例えば以下のようなもの。

• キーに触ってもすぐ指を離さない。間違って隣のキーに触った場合はそのまま指を正しいキーにスライドさせる
• 1文字の数字/記号入力は、キーボードを切り替えなくても 123 キーに触れた後、そのまま指を離さず目的の数字記号上で指を離せば OK⁸。
• 入力済みの文字上でのカーソル(キャレット)の移動は、画面を長押しすると、虫眼鏡様に拡大されてやりやすい。
• いっぺんに文字を削除する時は、del キーに触れたまま、指を左にスライドさせる

他にもあるかもしれませんが、これらは私がよく使っているものです。

Wi-Fi の認証で、アカウント名やパスワードを毎回入力するのが面倒な人は、下記のブックマークレットを活用すると幸せになれます。

iPod touch/iPhone 用ものぐさ入力 Bookmarklet

後、個人的に使っている原始的な(?)ブックマークレットもご紹介。

Safari で表示されている画面上のすべての入力欄⁹に account@gmail.com という文字を入力するというものです。account@gmail.com の部分は適宜書き換えてください。非常に雑なスクリプトですが、場面によっては使えるでしょう。ちょっと改造すればパスワード入力にも使えますが、ブックマークに平文でパスワードを格納するのはためらわれたので、自分では作っていません。

使い方としては、以下のリンクを Safari のブックマークに登録し、account@gmail.com の部分を編集して、自分の入力したい文字に置き換えた後に、iPod touch と iTunes で同期させて下さい。そして、iPod touch の Safari 上で入力したいなと思った時に、ブックマークを開いてクリック。そうすると、画面上の入力欄すべてがあなたの置き換えた文字で埋められるでしょう！

• account@gmail.comを入力

Amazon で iPod touch を見る

容量増量後の新モデル iPod touch

旧モデル iPod touch

※ 旧モデルはメールやマップなどの新機能を使うために、2,480円のソフトウェアアップグレードが必要と思われます。

急に Safari が起動後にクラッシュするようになってしまって、あれやこれや原因を追及していたのですが、AcidSearch¹ が原因だと言うことが判明しました。(SafariStand、ForgetMeNot も疑ってみたのですが、濡れ衣でした。)

結論から言うと、Library/Preferences にある com.pozytron.AcidSearch.plist という AcidSearch の設定ファイルが壊れていたのが直接の原因でした。com.pozytron.AcidSearch.plist を捨てて Safari を起動したところ、あっさり直りました。私が検索した限りではネット上で解決策が見つからなかったので、珍しい不具合かもしれませんが、他の方の参考になるかもしれないので、記事として挙げておきます。（なお、その後の検索で、同じかなと思われる現象を見つけました²。そこに解決策も書いてありました…。）

クラッシュログも一応載せておきます。

もっと読む...

自分用に Apple の iPhone/iPod touch 開発ドキュメントの一覧をまとめてみます（2007年10月15日現在／2007年12月4日更新）。意外に見つけにくいんですよね。

気が向いたら、この記事をアップデートして、補足コメントを付けてみたいと思ってます。

基本中の基本

• Apple Developer Connection - Web Development for iPhone（日本語訳）
  • Optimizing Web Applications and Content for iPhone
  • 日本語訳：iPhone向けWebアプリケーションとコンテンツの最適化）

iPhone 関連の Reference Library

その他のリソースとしては、ADC の Reference Library の iPhone の項などがあります。

• iPhone Reference Library
• iPhone Guides
• iPhone Release Notes
• iPhone Sample Code
• Safari Technical Notes

iPhone の Reference Library 一覧

以下に iPhone のリファレンスのリンク構造を可視化しました。重複がありますが、そのままにしています。

• iPhone Reference Library

  • Getting Started with iPhone

  • iPhone Fundamentals

    • iPhone Human Interface Guidelines
    • Safari Web Content Guide for iPhone

  • iPhone Reference Library List

    • iPhone Internet & Web Reference Library

      • iPhoneButtons
      • iPhoneListPatterns
      • iPhone Human Interface Guidelines
      • Preparing Content for Safari 3 and WebKit
      • JavaScript Coding Guidelines for Mac OS X
      • Web Kit DOM Programming Topics
      • MakeiPhoneRefMovie
      • Exporting Movies for iPod, Apple TV and iPhone
      • Web Kit DOM Reference

    • iPhone Safari Reference Library

      • Why am I getting odd, unexpected results with various viewport tag settings
      • Customizing Web Content for Safari on iPhone
      • Safari Release Notes for iPhone (1.1.1)
      • Safari Web Content Guide for iPhone
      • iPhoneButtons
      • iPhone Human Interface Guidelines
      • iPhoneListPatterns
      • Safari CSS Reference
      • Preparing Content for Safari 3 and WebKit
      • JavaScript Coding Guidelines for Mac OS X
      • Safari HTML Reference
      • Web Kit DOM Programming Topics
      • MakeiPhoneRefMovie
      • iSudoku
      • Exporting Movies for iPod, Apple TV and iPhone
      • Puzzler
      • Web Kit DOM Reference

    • iPhone User Experience Reference Library

      • iPhoneOrientation
      • iPhoneButtons
      • Customizing Web Content for Safari on iPhone
      • iSudoku
      • Puzzler
      • iPhoneIntegration
      • Safari Release Notes for iPhone (1.1.1)
      • Safari Web Content Guide for iPhone
      • iPhoneListPatterns
      • iPhone Human Interface Guidelines

Apple による iPhone Dev Center （追記）

が公開されました。

iPhone Tech Talk のビデオも公開されており、よくまとまっています。

Safari on iPhone/iPod touch に導入された meta 要素の viewport 属性ですが、使ったことがない人にはなかなか理解しづらいようなので、ちょっと補足しておきます。こんな突っ込みもあったので。

リキッドにしとけばいいだけの話とちゃうの？

いや、違うんですよ。

前回、viewport は仮想的なウインドウということを説明しましたが、この仮想ウインドウは、閲覧しているユーザによって大きさを変更できない、サイズ固定のウインドウなわけです。

そして、Safari on iPhone/iPod touch は、基本的にこの仮想ウインドウの（横幅）全体が、横幅 320px（縦持ち時）のディスプレイに納まるように、縮小（もしくは拡大）して表示しようとします。

viewport のデフォルト設定は 980px。980px を 320px 液晶に納めるために約 1/3 に縮小されて表示されます。よっぽどフォントサイズを大きく設定していない限り、拡大しないと読むのはつらい大きさです。

ウインドウサイズ固定なので、リキッドレイアウトであるかないかは、この点においてはあまり関係ないでしょう。リキッドレイアウトのメリットは、どんなウインドウ幅でも柔軟に表示できることですが、viewport を設定しない限り、リキッドであろうがなかろうが、Safari on iPhone/iPod touch は 980px 幅のウインドウでブラウズした状態でページを表示します。ということは、結局、約 1/3 に縮小して表示されてしまいます。ウインドウ幅固定なのでリキッドレイアウトの利点が活かせません。

viewport を自ら設定する際は、リキッドレイアウトの利点が活きてくると思います。一方、固定幅のレイアウトのサイトで、その幅が 900px のようなデフォルトの 980px とあまり変わらない値なら、viewport を width=900px に設定したところで、Safari on iPhone/iPod touch での表示はほとんど変わらず小さいまま（320/900 = 約 1/3）です。

リキッドレイアウト等を用いており、サイト幅が柔軟に変更できるなら、例えば viewport を width=640px と設定すれば、縮小率を 1/2 程度に抑えられます。このくらいだと拡大せずに十分文字の読める大きさです。 width=320px にしても破綻を来さないデザインなら、等倍で表示させることもできます。

具体的な viewport の設定方法は前回の記事をご参照ください。

おまけ：viewport を設定した人たちの喜びの声が！

インチキ通販にありそうな見出しですが、リファラより。

もっと読む...

viewport 属性の区切りはセミコロンじゃなくてカンマじゃない？

日本でも iPod touch/iPhone 用のウェブサービス・インターフェイスが続々出てきましたが、実際に使われている meta 属性の viewport プロパティの区切りが2種類存在することに気が付きました。カンマ（コンマ）を使っているところと、セミコロンを使っているところです。

カンマ区切りの viewport

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

セミコロン区切りの viewport

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

Apple の開発資料¹²³⁴⁵に示される例は、すべてカンマ区切りとなっているので、カンマ区切りが望ましいと思われます。最初そのことに気がつかずに、セミコロン区切りで書いたものをコピー＆ペーストしていました。

すると user-scalable=yes にしているにも関わらず、拡大縮小ができなくなってしまいました。ちょっと悩んだ末に、区切り文字の違いに気がつき、カンマ区切りに修正したところ、きちんと拡大縮小できるようになりました。ちなみに user-scalable の設定は Safari on iPhone/iPod touch に対してだけでなく、デスクトップの Safari 3 にも影響があり、user-scalable=no で文字の拡大縮小ができなくなるようです。（訂正：デスクトップの Safari 3 で拡大縮小ができないのは、-webkit-text-size-adjust: none; という CSS のためでした。）

user-scalable=yes; で Safari for iPhone/iPod touch のピンチ動作が使えなくなる（追記）

上記で、カンマ区切りにしたときに、拡大縮小ができなくなったのは、user-scalable の後にあるセミコロンが原因ということがわかりました。viewport 属性の区切りはセミコロンでも一応動くようなのですが、

<meta name="viewport" content="width=640; user-scalable=yes; /">

と user-scalable の後にセミコロンを付けると、user-scalable の値が偽になるのか、拡大縮小ができなくなります。セミコロンを付けずに

<meta name="viewport" content="width=640; user-scalable=yes /">

とする分には、拡大縮小含め、一応正しく機能しているようです。しかし、Apple の開発ドキュメントに習えば、セミコロンではなくカンマを使った方が無難でしょう。

viewport 属性の区切りの例

カンマ区切りの viewport の例：

• Apple の開発ドキュメント
• Apple の iPhone 開発用サンプルコード[^TL-154_iPhoneDev4]
• iPod touch/iPhone 用 NHK ウィジェット⁶

セミコロン区切りの viewport の例：

• Google 検索⁷、カレンダー、リーダー⁸
• livedoor Readre lite⁹
• ナタリー touch!¹⁰
• みんなで作る話題発見サイト　トピックイットiPod対応β版：@nifty¹¹

実はこれらのサイトはことごとく iPod touch/iPhone 専用インターフェイスで、かつ、user-scalable=no にしているものが多いので、viewport の設定が壊れていても影響が出ていないのだと思います。

F.Ko-Ji さん経由で、iPhone 用の Google Search、Google Reader、Google Calendar が公開されたのを知りました。

興味があったので、Google が iPhone に対してどのような設定をしているのが、見てみることにしました。

もっと読む...