Travellers Tales

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

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

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

もっと読む...

iPhone および iPod touch 対応の livedoor Reader lite が発表されました¹。

早速、Google の iPhone Search 設定に続き、livedoor Reader lite の設定も見てみました。

もっと読む...

以前の記事で言及したように iPod touch にはメーラが付いていないわけですが、ウェブベースのメールを使うという代替手段があります。

iPod touch 搭載の Safari でウェブメーラーが使えるのか知りたかったので、とりあえず iPhone での対応状況を調べたものをまとめてみました。（iPod touch が発売されたら、実際試してみれば済む話ですが。）

以下、自分で試したわけではないですし、iPhone での動作なので、間違っている部分もあるかもしれません。（フィードバックいただけると助かります。）

Gmail

11月15日追記：Gmail に iPod touch/iPhone 専用インターフェイスができているので、別記事で取り上げました。以下の Gmail についての記述は少し古い内容となります。

通常の Gmail（http://mail.google.com）にもアクセス可能なようですが、重たいことと、iPhone の Safari の小さい画面サイズが考慮されていないので、スクロールを沢山しなければいけないので使いやすいとは言えないのかもしれません。

追記：iPod nanoなの。「iPod touchをiPhoneで予習しよう!! ニコ動&Gmail編。」によると、特に重たかったり、不安定ということはないそうです。

また、yamaq blog さんでも「通常の HTML 形式＝（Ajax を使ったフル機能の Gmail）」が使えたと報告がありました。

先行する情報からはGmailのフルの機能が使えないものと思い込んでいましたが、「通常のHTML形式」でGmailが使えることを確認できました。これにより、複数アカウントを切り替えて差出人を切り替えて送信することができます。

それでもフル機能の Gmail はやっぱり重いということであれば、下で紹介している携帯電話用の Gmail の他にも、機能の一部は制限されますが、簡易 HTML 形式の Gmail（http://mail.google.com/mail/?ui=html&zy=f・http://mail.google.com/mail/h/ も可）を利用するのも手だと思います。

モバイル機器用 Gmail - http://m.gmail.com

Gmail には携帯電話のようなモバイルデバイス用の Gmail（http://m.gmail.com）が用意されています。こちらは問題なく使えるようです。

前の記事で触れていますが、SSL 使用の https://mail.google.com/mail/x/ は使えない可能性が高いかも。

iGoogle から Gmail を確認

iGoogle 経由で Gmail を確認するという手段も悪くないようです。

iGoogle に Gmail ガジェット を追加しておけばいいわけです。

この方法だと受信トレイ (Inbox) に来たメールしかわかりません。Gmail の吐き出している Atom フィードを iGoogle に追加できれば、ラベルごとのメール確認もできるかなと思ったのですが、現時点では iGoogle は認証付きのフィードに対応してないようで追加できませんでした。

なお、Gmail の Atom フィードや、その他、Mac で Gmail を確認する方法については、以下の過去記事も参考にしてみて下さい。

• Mac OS X で Gmail をチェックする10の方法

.Mac Web メール（.Mac Email On The Web）

.Mac の Web メール は、残念ながらかろうじて使えるが、とても使いやすいとは言えない状況のようです。

重たくて Safari がクラッシュしたり、メールの全文がうまく表示されなかったりするようです。Apple のサービスなのに本当に残念。

追記：Macテクノロジー研究所さんの製品レポートによると、やはり iPod touch で .Mac の Web メールは厳しい模様。以下参照。ページを数ページ開いただけで、既に多くのページが開いているためポップアップページが開けませんとのメッセージが出るそうです。Safari for iPhone は、JavaScript の実行が 5秒までに制限されていたり、リソースサイズの制限がありますが、それが原因でしょうか？（でも、リソースサイズの制限は 10MBなので、余裕はありそうですが。）

Yahoo! メール（Yahoo Japan）

先ほども紹介した iPhone & iPod touch Japan によると、Ajax 化されていないのが幸いしたか、Yahoo! メールは使えるようです。ただし、画面サイズがやはり iPhohe/iPod touch に最適化されてないので、スクロールが多くなってしまいそうに思えます。そうだとすると、快適とは言えないですね。

もっと読む...

いやー、出ましたね、iPod touch。

仕様をざっと眺めただけなのですが、Wi-Fi 機能が付いているので、電話サービスが始まっていない日本では、ほぼ iPhone と同等な機能であるように思えます。目立つ違いとしては、メーラーが付いていないようです。（Google Maps、カメラ機能、Bluetooth 等も省かれていますが。）

しかし、iPod touch にはフルブラウザであるところの Safari があるのですから、.Mac Web メールや Gmail を使えば済むように思っています。

.Mac Web メールって、きっと iPhone、iPod touch の Safari で使えますよね？

Gmail も恐らく。フル機能は使えなかったとしても、携帯電話用の Gmail、https://mail.google.com/mail/x/ は使えるでしょうね。後で調べてみようっと。

メーラーがなくて残念なこと（追記）

「スパムメールが待ち遠しい」というメールソフトの UI に触れないのはちょっと残念かも。

もっと読む...