Travellers Tales

Boot Camp Assistant が /Applications/Utilities に見当たらない場合¹に、Boot Camp Assistant をシステムディスクから簡単にインストールするユーティリティを作ってみました。

難しいことはしてません。BootCamp.pkg を探してきて、立ち上げるだけのアプリケーションです。Terminal で打ったり、Finder で不可視ディレクトリを開いたりする手間を省いているだけです。AppleScript で書いてます。

必要条件

• Mac OS X v.10.5 Leopard
• Leopard のインストールディスク（Mac OS X Install Disc 1、もしくは Mac OS X Install DVD のような名前のディスク）

というニュースを見かけて、記事にしようかと思ったけど、Google ブログ検索で Leopard を検索してみたら、既にすごくたくさんの人が言及していた…。と言いながら書いてますが。

今すぐ Leopard を予約したい人は オンラインの Apple Store で購入できます。

自分用に 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 を設定して iPhone/iPod touch に対応しよう

ぼちぼち iPod touch が届き始めましたね。

Safari on iPhone/iPod touch のために用意された meta 要素の viewport 属性¹を使って、あなたのサイトをなんちゃって iPhone/iPod touch 対応にする方法を説明してみたいと思います。

方法は簡単です。

<meta name="viewport" content="width=1024" /> 

head 要素に上記のようなタグを入れるだけです。ただ、ここで width に指定する横幅を自分のサイトに合わせて最適化する必要があります。

ちなみに、上記の width=1024 となっている viewport の設定は Apple のホームページで使っているもの。（xhtml を使ってないためか、正確には最後のスラッシュがない形になってますが。）

なお、実のところ、viewport なんて設定しなくても iPhone/iPod touch からほとんどのウェブページは見ることができます。わずかながらレイアウトが崩れる場合や、重い JavaScript のためにエラーが出てしまうページはあるでしょうが。

なお、viewport 以上のより細かいカスタマイズをするには、iPhone/iPod touch 専用の CSS を用意したり、さらには、User Agent を見て、専用ページに振ってしまう方法もあります。

以下、自分のウェブサイトに合わせて、どのように viewport を設定すべきか考えてみます。

もっと読む...

iPhone/iPod touch 専用の簡易フィードリーダー reader.mac.com

iPod touch/iPhone で RSS/Atom フィードを開くとリダイレクトされる reader.mac.com は、シンプルなフィードリーダーです。

フィードを表示するためだけのリーダー（ビューアの方が近い？）であって、アグリゲータ (aggregate = 集める) のように登録されたフィードを購読したり管理する機能はありません。リンク等からアクセスしたフィードを見やすいように整形して表示するのみの、その場限りのものです。その際の URL は以下のようになります。

• http://reader.mac.com/mobile/v1/(Feed URL)

例えば、当ブログのフィード

• http://feeds.travel-lab.info/travellers

にアクセスすると、`

• http://reader.mac.com/mobile/v1/http%3A%2F%2Ffeeds.travel-lab.info%2Ftravellers

に飛ばされて、フィードの内容が表示されます。（右の画像は表示例）

以下、reader.mac.com の表示設定をもう少し詳しく見てみます。Apple 自身による iPhone/iPod touch 用アプリケーションなので、参考になることがあると思います。

もっと読む...

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 の設定が壊れていても影響が出ていないのだと思います。