twitter より (2010-12-18)

• 15:57  iphone の ipod からairplay で apple tv に音を送るとまるで iphone がリモコンのよう。実際は本体なんだけどな。
• 16:07  apple tv って iphone (または ipod touch) の再生装置としても良いかも(・∀・)ｂ ipod のささるスピーカーでもいいけど、あれだと iphone 自体で離れた場所から操作できない。大抵リモコンがあるけど操作性はやはり iphone そのものが上。
• 16:10  ってか、アレだな。airplay 対応の再生装置が出てくればそれでも良いのか。
• 20:00  iOS/Mac 向けアプリ開発者で iPad を持っているなら、おすすめです。→ http://logrepo.blogspot.com/2010/12/ibook-apple.html (iBook で Apple 提供の開発者向けドキュメントが読める)

Powered by twtr2src.

iBook で Apple 提供の開発者向けドキュメントが読める

昨夜(2010-12-17)のこと、iPod touch で App Store を開くと iBook のアップデートが配布されていることに気付いた。他にもいろいろアップデートが出ていたのでまとめてアップデートした。で、ふと iBook を開き、さらに iBookStore を開いてみたところ、iOS 関連の開発者向けドキュメントが配信されていることに気付いた(右のスクリーンショットは iPad で iBookStore を開いたもの)。

そう、ようやく Apple がやってくれた。ずっと、これが欲しかった。もともと PDF 版が配布されているから iPad に取り込んで読むことはできたし、さらに iPad がネットにつながるなら Safari でウェブ版を開けば iPad に最適化された状態で読むこともできた(→「iPad で Apple 提供の開発者向けドキュメントを読む」)。実際、このウェブ版は、iPad というデバイスの特性とあいまって、「ADC のドキュメントを読むならコレだ！」と思わせるぐらい読みやすいものになっていた。iMac で Xcode を開いているときにも、そばに立てた iPad でガイド系の文書(のウェブ版)を開いて参照していた(Xcode のドキュメントブラウザは主にクラスリファレンスを参照するのに使っている)。

とはいえ、ウェブ版のドキュメント(というよりブラウザで長い文書を読むこと)には不満がある。スクロールして読む読書体験と、ページをめくって読む読書体験を比較すれば、後者の方が圧倒的に心地良い。画面上を文字が移動するのは「読む」ことを前提にした場合は気持の良いものじゃない(せめて、iPad 上の Safari に「Page Up」と「Page Down」があれば……)。もっとも、これはわたしがデジタル以前の世界で育った世代からかもしれない。情報の入れ物としての「本」というカタチに慣れてしまっていることがそう思わせるのだろう。

また、いくら Wi-Fi 接続だろうとネット上のリソースを開くのには「遅れ」が生じる。アドレスバーが水色で塗られていくのを眺めていても楽しくない。

だから、iPad で ADC ドキュメントを読むようになってからずっと思っていた。いや、むしろ願っていた。Apple が ebook として提供してくれるようになることを。

iPad で読んでみる

いくつかスクリーンショットを撮ったので貼ってみる。すべて、iPad のスクリーンショット機能(電源ボタン + ホームボタンの同時押し)で撮影したもの。ここに並ぶんでいるのはサムネイル。実際の見え方は画像をクリックして Picasa ウェブアルバムにアップしたものを見てほしい。

iPad の iBook で ADC ドキュメントを読む

iBook の本棚に並んだ iOS 開発者向けドキュメントたち
早速、ダウンロードしてみた。最上段の 5 つが iOS 開発者向けドキュメントだ。O'Reilly の ebook と比べると表紙が文字だけで少しさびしい。
iOS Application Programming Guide を開いてみた (#1)
文字はもちろん、写真もクッキリ。
iOS Application Programming Guide を開いてみた (#2)
図もはっきり見える。図中の文字も十分に判別できる。

もう、なんて言うかさ、iPad はこのために作られたんじゃないか、って思えるぐらい。Apple は開発者向けに ADC ドキュメントを(iOS 用のものだけじゃなく)丸ごと収録した iPad を販売するべきだよ。有料の Dev program (iOS 向けと Mac 向けのものがある)に参加している場合はちょっと安くしてさ。

iPod touch で読んでみる

画素数ではともかく、画面が小さいから iPad ほどの見やすさは得られないとわかっているけど、せっかくなので iPod touch でも試してみた。以下は iPod touch のスクリーンショット機能で撮ったもの。残念ながらスクショでは iPod touch の画面での見た目は再現できないから参考程度に見てほしい。

iPod touch の iBook で ADC ドキュメントを読む

iOS Application Programming Guide を開いてみた (#1)
スクショだとやけに文字が大きく見えるが、実機で見るとこれより小さいと読みづらくなるサイズ。ま、見えやすさには個人差が出ると思うが。
iOS Application Programming Guide を開いてみた (#2)
iPad のスクショと同じ図。実機で見ると、図中の文字の判別はかなり厳しい。
図だけを表示(横向き)
横向きで、図だけを表示させると少し大きくなる。ただ、やはり実機上では図中の文字は読みづらい。

iBook では図をダブルタップすると図だけを表示することができる。この状態ではピンチオープン、クローズによる拡大縮小も可能。iPod touch でも、ダブルタップからピンチオープンで拡大すれば図中の文字も読み取れる。

他のドキュメントも欲しい

iBook 向けに提供されているのはまだたった 5 つだけ。ADC にはそれこそ山ほどのドキュメントがある。iOS 向けだけじゃなくて、Mac 向けの方のものも iPad で読みたい。

Apple さん、どんどん配信してください。お願いします。

関連リンク

• iOS Application Programming Guide (iOS Reference Library)

関連記事

• iPad で Apple 提供の開発者向けドキュメントを読む

twitter より (2010-12-08)

• 09:51  今の iPad は少々大きいと思う。Retina ディスプレイがあれば同じ画素数でももっと小さくできるよね。B6ぐらいのサイズで作ってくれないかな。 → http://bit.ly/hejP3z
• 10:10  RT @yukihiro_matz: 字下げ依存構文の解析 - 再帰の反復: http://bit.ly/hzJwtX

Powered by twtr2src.

twitter より (2010-11-24)

• 16:23  そうか。何気なくアップデートしたけど、tv は iOS デバイスでありながら母艦を必要としないんだ。 → http://ipodtouchlab.com/2010/11/apple-tv-os41.html
• 16:31  インタラクティブっていうのはデジタルコンテンツの得意とするところだものな。電子書籍もこっちの方向に進むかね。ただ、子どもに使わせるなら今の iPad はちょっと重すぎるだろう。 → http://bit.ly/gMJsry

Powered by twtr2src.

twitter より (2010-11-23)

• 18:13  iPad のアップデート中。アップデートが終わり、リブートした後の同期(バックアップ)に時間がかかるわ。雑誌の PDF データがでかいんだよね(Good Reader のデータになってる)。
• 19:05  AirPlay って iPhone や iPad から tv への配信のみなのか。逆はできない。ちょっと残念だけど、これだけでもオモシロイ。iPhone や iPod touch ならリモコン感覚で使えるしな(実際リモコンにもなる)→ http://bit.ly/h97C0V
• 19:06  AirPlay があると iPod touch に動画を溜めてみたくなる。
• 21:17  そうだ、iPad のメールも iPhone と同じで「全受信」が使えるようになったんだね。これに慣れてしまうと、iPad でメールを開いたときにいちいちアカウントを切り替えるのがメンドウでしかたなかった。地味だけど、これも 4.2.1 になって良かったことの 1 つだな。
• 21:34  お、いいね。.gitignore の設定集。プロジェクトごとだけじゃなく、グローバルに ignore を設定することもできるのね。OSX で git を使うときは便利だな。「.DS_Store」とか、いちいち足さなくても良くなる。→ http://bit.ly/fQxBqD
• 21:51  今どきの若者や子どもたちの中にはダイヤル式の電話なんか見たこともなかったりするんだろうな。きっと使い方もわからないんだろうな。→ http://inspire.2ia.pl/post/35068946/dial-the-old-fashion-way
• 21:55  ちょっと試してみたけど、おもしろかった。iPhone にも最適化されていて素敵。ただ、iPhone で開くとランダムボタンは出てこない。ちょっと残念。 → http://bit.ly/hLlA1V

Powered by twtr2src.

iOS アップデート (→ 4.2.1)

一度延期になってしまったが、ようやく iOS のアップデートが来た。早速、iPad、iPhone 3GS、iPod touch (4th)、そして iPhone 3G の順にアップデートを行った。

AirPlay や AirPrint といった新機能もあるけれど、今回のアップデートの肝はなんといっても、iPad と他の iOS デバイスの OS が統合されたことだ。両方を使っていて、微妙な差異にイライラさせられることがなくなる(フォルダとかタスク切り替えとか)。アプリを開発するときにも、現行の OS のバージョンがいくつもあるというのは面倒が多い。

iOS 4.2.1 上の Safari のユーザエージェント

以前にも使った簡単な CGI プログラムで各実機が使うユーザエージェントを調べてみた。

Apple 製デバイスの OS のバージョンとユーザエージェント文字列の対応

Device	OS	User-Agent
Mac	Snow Leopard 10.6.5 (10H574)	Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_5; ja-jp) AppleWebKit/533.19.4 (KHTML, like Gecko) Version/5.0.3 Safari/533.19.4
iPhone 3G	iOS 4.2.1 (8C148)	Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_2_1 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5
iPhone 3GS	iOS 4.2.1 (8C148a)	Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_2_1 like Mac OS X; ja-jp) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148a Safari/6533.18.5
iPad	iOS 4.2.1 (8C148)	Mozilla/5.0 (iPad; U; CPU OS 4_2_1 like Mac OS X; ja-jp) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5
iPod touch (4th)	iOS 4.2.1 (8C148)	Mozilla/5.0 (iPod; U; CPU iPhone OS 4_2_1 like Mac OS X; ja-jp) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5

すぐに気付くことは、Mac 用の Safari のバージョンが一番高い(5.0.3)こと。WebKit のバージョンもやはり Mac 用のものが新しい(533.19.4)。意外だったのは、iPhone 3GS だけ OS の番号(ビルド番号かな)が異なっているということだ。3GS のみ 8C148a と末尾に a が付いている。他の iOS デバイスはすべて 8C148 だ。

ともあれ、このアップデートで、ようやく iPad の Safari と他の iOS デバイスの Safari が同じバージョンになった。これまでは、iPad の方が少し古く、CSS3 のサポート状況に若干の違いがあったのだ(→「ウェブページのスタイルを iPad に最適化する方法」参照)。今後のアップデートは足並みを揃えてもらいたいものだ。

関連リンク

• アップル、iPad・iPhone・iPod touch向けソフトウェアアップデート「iOS 4.2」を公開 (Touch Lab - タッチ ラボ)

関連記事

• twitter より (2010-11-18) (iOS 4.2 対応の iTunes 10.1 への更新が来たというつぶやき)
• twitter より (2010-11-12) (iOS 4.2 のリリースが延期というつぶやき)
• Snow Leopard アップデート (10.6.4 → 10.6.5)
• Retina ディスプレイ搭載の iPod touch (ユーザエージェント文字列比較表がある)
• twitter より (2010-06-22) (iPhone 3G を iOS 4 にアップするというつぶやき)
• iPhone OS 3.1.3 アップデート
• ウェブページのスタイルを iPad に最適化する方法

twitter より (2010-11-18)

• 19:38  そろそろかな。iOS アップデート。iTunes のアップデートが来たし。→

Powered by twtr2src.

twitter より (2010-11-12)

• 20:34  あらあら。→ iOS4.2のリリースが延期!? - http://ipodtouchlab.com/2010/11/ios42-wifi-issue-delayed.html

Powered by twtr2src.

Blogger で作ったブログを iOS デバイス対応にする

このブログを iOS デバイスに、とくに iPad に対応させようと試行錯誤を始めたのが 8 月の下旬。そろそろ一ヶ月になるが、ようやく iPad を中心に一群の iOS デバイスに対応させる作業が完了した。新しい iPod touch (→ 第4世代になるらしい)でも確認したから Retina ディスプレイを備えた世代のモノでも大丈夫だ。

デバイスを切り替える方法の調査から、スタイルシートを Blogger の外部に置く方法の調査やら考察に進み、Google App Engine (以下、GAE) を使う方法に気付く。さらには GAE アプリでスタイルシートを切り替える方法を採り、今に至っている。

細かなことになるが、Google Font API を試したことや、iPhone シミュレータを使って iOS デバイスでの見た目を確認することを思い付いたり、Redmine でプライベートな問題追跡を始めたのも、この作業の中でのこと。

ま、一番の苦労は、Blogger の(複雑な)テンプレートとの格闘だったけどな。ちなみに、そこでは Safari の「開発」メニューから起動できる「Web インスペクタ」が大活躍だった。これなくして、Blogger のテンプレートから生成される HTML の解析は困難だったろう。ましてやスタイルの定義は不可能だったに違いない。CSS によるスタイルの定義が、どう適用されているかの表示は、Blogger のスタイルを上書きするために、なくてはならないものだった。Safari、バンザイ ヽ(｀д´)ノ。

もっとも、Firefox にしろ、Chrome にしろ、最近のブラウザでは似たような機能は利用できるみたいだけどね。

スタイル定義における基本方針

多少、ブレたりもしたが、最終的には以下の方針に落ち着いた。

1. iOS デバイスに対応する
2. iPad (横向き)を基本サイズにする
3. iPad (縦向き) はサイドバーを表示しない
4. iPhone は向きに関係なくサイドバーを表示しない
5. Mac 以外のデバイスでは通信量を考慮に入れる

作業を始めた当初は、iPhone の横向き 480px を、iPad の縦向き時のメイン領域にして、サイドバーも表示させようと考えていた。しかし、これだと iPad の向きを変えたときに、一行に表示されている文字数が変化してしまい、見づらいことがわかった。これを避けるため、縦向き時と横向き時のメイン領域の横幅を同じにしたい。かといって、サイドバーがあまり細くなっては、これまた中身が見づらい。悩んだ末、縦向き時にはサイドバーの表示をあきらめた。結果として、サイドバーが見たければ向きを変えるというユーザ体験を導入したことになった。

デバイスの向きを変えるとメニューの類が表示されるというユーザ体験は、iPad 標準アプリの「メール」や「メモ」などのものに少し似ている。

メイン領域

iPad で縦向き時にはサイドバーを表示させないので、画面幅 768px はすべてメイン領域の表示に使う。そして、横幅 768px をこのブログでの基本幅とし、Mac 向けのスタイルでもそのまま適用する。

一方、iPhone に最適化する際は横向き 480px での表示を基本とし、縦向きでの見た目は最低限の調整に留めた。なので、iPhone でこのブログを見るときには、なるべく横向きにして見てほしい。

サイドバー

メイン領域が 768px だから、サイドバーは iPad の横向き時の幅からメイン領域を除いた部分に表示する。つまり、1024 - 768 = 256 で 256px になる。

メイン領域と同じく、サイドバーの幅 256px も Mac 向けスタイルにもそのまま適用する。

Mac 向けのレイアウト

iPad の横向き時と同じレイアウトになる。縮尺は正確ではないけれど、27 インチ iMac で表示させた場合、横幅 768px + 256px は、だいたい左図のようになる。

ちなみに、Mac 上の Safari で 1024px のウェブページを表示させるにはウィンドウのサイズを 1040px にすると良い(→ AppleScript を使って URL を Safari のタブで開く)。余分な 16px はスクロールバーの分だ。

通信量に対する考慮

大した量じゃないという気もするのだが、Google Font API を使うのは Mac のみとした。

そもそも、iPhone の場合で、common と iphone の 2つ CSS ファイルで約 18 KB ある。通信量のことを気にするなら、これ自体も十分ムダだよな。

まとめ

Retina ディスプレイ搭載の iPhone 4、iPod touch (4G) への対応に少し不満が残っているものの、ほぼ満足行くスタイルに仕上がった。iPad や Mac で見たときはもちろん、iPhone で見ても、コンテンツを見る分には十分だ。

サイドバーをふくめたナビゲーション全般で改良の余地はあるけれど、HTML と CSS でやれる範囲はここまでだろう。この先は、JavaScript の活躍する領域になる。ただ、Blogger のテンプレートとの格闘には良い加減疲れたので、これ以上手を加えることはないと思う。スタイルのバグ修正や、ちょっとした新スタイルの追加はするけれど。

むしろ、Blogger は記事の投稿だけに使って、記事を見るには別のアプリやウェブアプリを使う方が良いんじゃないか、と思い始めている。先のナビゲーションの改良なんかもやりやすい。特定のブログを表示するためだけの iPhone アプリがあっても良いじゃないか。ブログシステム全体を作るのは大変でも、見るだけに特化するなら HTML + CSS でやることの延長として考えられる。

関連リンク

• iPod touch (Wikipedia:ja)

関連記事

• ウェブページのスタイルを iPad に最適化する方法
• 外部ファイルの置き場所を求めて…
• 外部ファイルの置き場所としての Google App Engine
• GAE アプリによるスタイルシートの切り替え
• Google Font API を使ったフォントの表示
• iPhone シミュレータをウェブページの作成に活用する
• プライベートな問題追跡システムが欲しい
• Retina ディスプレイ搭載の iPod touch

twitter より (2010-09-12)

• 14:58  Amazonに発注したiPadスタンドが届いたので早速使ってみた。なんてゆうか、やられたわ。iPadってこうやって使うべきものだったんだ。iPadに対する印象がすっかり変わるゾ。→ http://bit.ly/9OgV92
• 15:31  う〜ん。iPadのスタンドにはまいった。想像だけではユーザ体験は語れないってことの証拠になる。無意識のうちに、iPadを「ちょっと大きいiPhone」と認識していたのかもな。だからiPhoneと同じような使い方をしなきゃならないと思い込んでいた。スタンドなんて邪道だよ、と。
• 15:36  しかし、大きさという特性は利用の仕方も変えるものだったんだ。iPhoneにスタンドは不要だが、iPadにはスタンドはぜひとも必要。そしてiPad+スタンドは「読む」という体験を根本から変える。「本を手に持たずに読む」ことが実用的になる。むしろ本はこう読むべきだったと気付く。
• 15:39  紙の本を「手に持たずに読む」には 2 通りの方法が考えられる。(1) 机の上に本を水平に置く、(2) ブックスタンドを使う。(1) は首を下に向けて読むことになるから首に負担がかかる。(2) はiPad+スタンドに近い体験となるが、ページがめくりにくいという欠点がある。
• 15:44  参考書を机に広げて作業することを考えると、iPadが複数台あっても良い気がしてきた。もうこれ以上、机の上にディスプレイは置けないけど、iPad なら置けるしな。加えて、iPadなら指先で直接触れられる分、画面にPDFを表示させるよりもページ送りなんかの操作感は上だ。
• 15:45  とはいえ、さすがに同じものを2台、3台と買う気にはなれないので、早く新しいiPadを出してください。> Apple
• 21:04  バイオハザードか。3は見てないんだよな。

Powered by twtr2src.

twitter より (2010-09-10)

• 08:07  うぉー、なんかスゲェ。手のひらに乗るコンピュータか。って感心した後にふと思った。iPhone もそうじゃん、って。→ http://jp.makezine.com/blog/2010/09/chumby_hacker_boards.html
• 08:09  古い iPhone (や iPod touch) を差して自宅サーバにできるようなドックとか発売されないかな。
• 08:42  この iPad スタンド、たったいま Amazon で発注した。買っといて言うのもなんだけど、こういうものを必要に感じてしまうところが iPad の弱点だよな。→ http://www.ideaxidea.com/archives/2010/09/xstand.html
• 08:47  前にも書いたけど、iPad は画面への映り込みのせいで机の上などに水平に置いて使うことが難しい。やはり、画素数そのままで(増える分には文句はない)サイズを小さくしたモデルを出してほしいよ。軽くなるなら小さくなくても良いゾ。 → http://bit.ly/arTYR0
• 08:57  カッコイイな、コレ。→ http://www.cultofmac.com/groves-bamboo-iphone-case-is-a-work-of-art-review/57347
• 16:39  Google Instant、おもしろいわ。co.jp からはまだ使えないけど、.com からなら日本語でも Instant な検索になる。suggest と組み合わせたところが秀逸なアイデアかもな。検索語の候補を矢印で切り替えると結果もリアルタイムで切り替わる。いいわ、これ。

Powered by twtr2src.

twitter より (2010-09-04)

• 18:08  はてブには twitter でつぶやいた URL を流し込んでいる。ときどき見返すんだが、iPad できるならそれが手軽にできるようになるか。 / はてなブックマーク for iPad 公開！ http://htn.to/goJLcn
• 18:22  9/8 だそうな。イベントからちょうど一週間後ってことか。4.0 は不安定だからな(on 3GS)、バグフィックスに期待大。→ http://ipodtouchlab.com/2010/09/ios-41-release.html

Powered by twtr2src.

角が丸いのは Mac の伝統！

ちょっと長いけど、二人のやり取りがおもしろいので引用する。引用中、Steve はもちろん Steve Jobs、Bill は QuickDraw や HyperCard を書いたことで知られる Bill Atkinson だ。ちなみに、この記事(原文)を書いたのは Andy Hertzfeld (オリジナル Macintosh の開発者の一人で、Folklore.org の製作者)。

(レボリューション・イン・ザ・バレー; p.60「角丸長方形だらけ！」より)
しかし、ここで何かが Steve Jobs の頭に浮かんだ。 「まあ、円と楕円はよくできてたな。でも角の丸い長方形はどうだ？ それも今できるのか？」。

「いや、そんなことはできませんよ」と Bill は食ってかかった。 [...snip...]

「角の丸い長方形なんて、そこら中にあるだろ！ この部屋を見回してみろ！」。確かに、たくさんあった。 [...snip...]

[...snip...] 「OK。参りました」と Bill は認めた。 「思っているほど難しいかどうか、やってみますよ」。 [...snip...]

翌日の午後、Bill は満面の笑みを浮かべて Texaco Towers に戻ってきた。 彼のデモは、見事に角の丸い長方形を、ほとんど普通の長方形と変わりない、猛烈な速さで描くようになった。 彼はその新しい命令を [...snip...]「RoundRects」と名付けた。 次の 2、3 ヶ月の間に、RoundRects はユーザーインターフェースのさまざまな部分に浸透し、まもなく必要不可欠なものとなった。

レボリューション・イン・ザ・バレー―開発者が語るMacintosh誕生の舞台裏

Andy Hertzfeld
オライリージャパン ( 2005-09-26 )
ISBN: 9784873112459
おすすめ度:

物読みファイル (別館)で詳細を見る

MediaMarker

正直言って、技術者ではない Jobs が Macintosh (初代) の開発に直接的に貢献したとは思えないんだけど、こういう話を聞くと、なるほど Jobs がいなかったら Mac はこうなっていなかったんだな、とわかる。この「角の丸い長方形」の話なんて、Mac どころかその後の GUI の発展にも影響しかねないものだ。もし、あのとき Jobs の頭に「角の丸い長方形」が浮かばなかったら……、もし、Bill が Jobs との議論に勝っていたら……。

ウェブページでも角を丸く

角の丸い長方形は、今も初代 Macintosh の子孫たちに受け継がれている。Mac OS X のウィンドウたちは、たいてい四隅が(少なくとも上部の二つの隅は)丸い。iPhone のアプリアイコンも角が丸い。標準のボタンやリストもやはり角が丸い。改めて見回せば、丸い角はデジタルなモノの中にあふれている。まるで、角の丸いことがデジタルなモノの特性であるかのようだ。デジタルな道具に遺伝子があるなら、そこには「角は丸い」と書かれているにちがいない。

ならば、ウェブページでも角は丸くあるべきだろう。かつてのように、背景画像と table 要素を組み合わせて作らなければならなかった時代ならともかく、今では CSS3 だけで簡単に記述できる。もう、角を丸くしない理由がないじゃないか。Mac の伝統なんだよ。デジタルな遺伝子に書き込まれているんだよ。

ウェブページのスタイルを iPad に最適化する方法

増えたデバイス

かつては、Mac (や PC) だけがウェブブラウザだった。今では iPhone に加えて、iPad が「普段使いのブラウザ」として加わった。Mac 向けに作ったページをそのまま開くこともできるけど、やはりデバイスに最適化されたデザインのページは見やすい。このブログも iPhone や iPad ですっきりと表示させたい。多少の手間はかかるけど、やるだけの価値はある。

iPad はウェブブラウザのリファレンスプラットフォームだ

以前にも、このブログを iPhone 対応させたことがあった(テンプレートを変えたために今ではその効果は失われている)。あのときは、単にサイドバーを非表示にしただけだった。今回は、レイアウト全体を見直してみよう。

iPad で見ることを前提に、幅を 768 ピクセル、および 1024 ピクセルで、レイアウト(メインとサブの 2 列構成)をデザインする。1024px仕様を手直しすることで、Mac 用のデザインを仕上げる。iPhone 用のものは、768px仕様からサイドバーを非表示にすることで作る。こうすることで、iPhone、iPad、そして Mac の 3 つのデバイスで、ほぼ同じ見た目にすることができる。

ともあれ、3 種類のデバイスに対応するのだから、デバイスごとにスタイルを指定しなければならない。まずはその方法を(前の iPhone 対応のときより少し詳しく)調べてみた。

デバイスごとにスタイルを指定する

CSS2 には、画面や印刷といった「表示の媒体」(メディア)に合わせてスタイルを指定する機能がある。 CSS3 では、これが拡張され、媒体(メディア)ごとの特性(幅、高さなど)に応じてスタイルを指定できるようになっている。 これがメディアクエリーと呼ばれる機能だ。 Mac 用の Safari はもちろん、iPhone/iPad 用のものもメディアクエリーをサポートしている。 このため、CSS スタイルを適切に記述してやれば、ひとつのウェブページを、開くデバイスに合わせて見た目が切り替わるようにすることができる。

デバイスを識別する

メディアクエリーを使いスタイルを切り替える場合、識別の鍵になるのは画面の幅だ。iPhone なら画面の最大幅が 480 ピクセル(横向きにしたとき)、iPad なら 1024 ピクセル(同じく横向き)になる。

通常、画面幅を鍵にして 2 つのデバイスごとにスタイルを指定する場合、以下のようになる。

(画面幅で切り替え; 2 デバイス)
@media only screen and (max-device-width: 480px) { ... }
@media only screen and (min-device-width: 481px) { ... }

前が画面幅が小さいデバイス(例: iPhone)向けのスタイル、後がそれ以外のデバイス向けになる。

デバイスが 3 つならどうなるか？

(画面幅で切り替え; 3 デバイス)
@media only screen and (max-device-width: 480px) { ... }
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) { ... }
@media only screen and (min-device-width: 1025px) { ... }

only というキーワードは、(メディアクエリーを知らない)古いブラウザに、この記述全体を無視させるための仕掛け。メディアクエリーをサポートしているブラウザは単に only を無視するので付けたところで影響はないが、(古いブラウザを使う人がまだいるかもしれないので)付けておく方が安全だ。

参考までに、iPhone 3G/3GS、iPad の画面幅についてまとめておく。

機種	横	縦
iPhone 3G/3GS	320	480
iPad	768	1024
iPhone 4	640	960

iPhone 4 のピクセル数は 3G/3GS の 4 倍(縦横が2倍)だが、(iPhone 4 の Safari は)画面幅のメディアクエリーに関して旧機種と同様に振る舞うらしい。このため、iPhone 4 を 3G/3GS と区別するためには、画面幅ではなく -webkit-device-pixel-ratio という特性を使うようだ(→ 詳細は「iPhone 4 の CSS を切り替える方法」を参照)。いかんせん、iPhone 4 をまだ手に入れていないから試しようがない。

twitter より (2010-08-12)

• 11:34  i文庫HD の開発元のサイト。アプリもそうだけど、サイトも良くつくられている。どのページもキレイで、アプリの紹介なんかは Apple の製品ページを思い出させる。 → http://ipn.sakura.ne.jp/index.html
• 22:07  3 つ目。
• 22:15  白いやつがウチにもある。ま、もう使ってないけどな。 → http://journal.mycom.co.jp/news/2010/08/12/010/

Powered by twtr2src.

古い雑誌の記事や広告に見る懐しいコンピュータ

右の写真は、「UNIX MAGAZINE Classic with DVD」の内容物だ。雑誌の記事を収めた DVD 4枚組と特別号(？)が 1 冊。DVD には 1986 年の創刊以来、月刊誌最終号までの記事がほぼ丸ごと入っている。総容量は 13.3 ギガバイト。二十年がたった 13 GB に収まってしまうことを空しく見るか、それを可能にした技術の進歩に感心するべきか。

すでに書いたように、iPad に PDF 化された雑誌を詰め込んでいる。この DVD の内容も丸ごと詰め込んだ。iPad でパラパラとページを送りながら、一昔も二昔も前の記事を眺めていると、隔世の感とはこういうことを言うのかと実感できる。創刊号を始めとする初期の号に書かれているほとんどのコンピュータよりも、この iPad の方が高性能だろう。これらの時代をリアルタイムで経験した身には、何というか、何もかもがとても懐しい。

創刊号には、「低価格・高機能・4.2BSD搭載ワークステーション」と題した SONY の NEWS 発売のニュースが載っている。上述の DVD 付属の特別号によれば、創刊3号目には、この NEWS シリーズの広告が掲載されたそうだ(→ 特別号のページを iPhone で撮影)。

当時は、その破壊的な低価格もあって強烈に憧れたものだ。もちろん、いくら低価格だといっても当時の他のワークステーションと比較しての話で、「オレにも買える！」とはならなかった。

このとき発売になったモデルでは、プロセッサはモトローラ社製の 68020 (16MHz x 2)、メモリは 4MB、HDD が 156MB。ほら、iPad の方の方がはるかに高性能だ。

1988年12月号には NeXT 発表に関するの記事が載っている(→ iPad で表示させたスクショ)。

OSX で動く Mac は、それ以前の Mac の後継というよりも、むしろ NeXT というコンピュータがリンゴの皮をかぶっていると見る方が良い。これは OS のカーネルやら、各種フレームワークが NeXT の OS であった NeXTSTEP 由来のものであるからだ。そして、その系譜は iPhone や iPad にもつながる。

この記事にある NeXT は、プロセッサがモトローラ社製の 68030 (25MHz)と浮動小数点演算ユニット 68882 (25MHz)、メモリは 8MB、HDD はオプションで、補助記憶装置としては光磁気ディスク(256MB)が搭載されている。ほら、やっぱり iPad の方が高性能だ。

ちなみに、月刊誌として最終号となる 2006年4月号には Mac mini (Early 2006) 発売のニュースが載っている。これは Intel 版 Mac mini の最初のモデルで、Core Duo 1.66GHZ、メモリは 512MB、HDD は最大で 120GB。さすがに iPad よりも高性能かも。

ともあれ、こうして古い雑誌を眺めるのは意外に楽しい。ウェブのなかった時代の記憶として、こうした雑誌は貴重な資料でもある。上述の「UNIX MAGAZINE Classic with DVD」に付属の特別号の表紙に「いまある道具はなぜこの形をしているのか？」という問いかけが書かれている。これに答えるには過去を掘り起こすしかない。

ウェブ以前に刊行されていた他のコンピュータ関連の雑誌でも、電子化(PDF化)して、DVD で発売してくれると良いんだが。「bit」とか、また読んでみたい。

ググってみたところ「bit」(共立出版)の創刊は 1969 年だとのこと・・・。1969 年と言えば、アポロが月に着陸した年だし、Unix が生まれた年だ。ちょっとビックリだね。「bit」は 2001年4月号を最後に休刊状態だから、トータル 33 年分になる。70年代の「bit」には何が書かれていたんだろう？

関連リンク

• SONY NEWS に関する資料
• 第2話　社内ベンチャーから生まれた「NEWS」 (「Sony History　第12章　苦闘する新分野への進出」より)
• NeXT (Wikipedia:ja)
• NeXT Cube 写真集 (ユーザによるサイト)
• ようこそ bit ワールドへ (共立出版)

関連記事

• iPadにPDF化された雑誌を詰め込む
• iPadにPDF化された雑誌を詰め込む (その2)

twitter より (2010-08-10)

• 09:46  iPad の最大の弱点は「映り込み」にあるかも。使用時には光源に対する角度に気をつかう。アンチグレアフィルムを貼っても(軽減されるけど)解消されない。見やすい角度にするためにはスタンドっぽい何かが必要になる(膝とか)。手だけで角度を保持しようとすると重さがネックになる。
• 09:54  「映り込み」のせいで、紙のノートや本とちがい、机の上に水平に置いて使うことが難しい。大きさと重さのため片手でしっかりと保持することも難しい。iPhone とは違い、使用時のスタイル(姿勢とか持ち方とか)にかなり制約のあるデバイスなのだ。

Powered by twtr2src.

iPad で Apple 提供の開発者向けドキュメントを読む

追記@2010-12-18

ここに書いたよりもっと良い方法が提供された。以下の記事を参照のこと。

• iBook で Apple 提供の開発者向けドキュメントが読める

今のところ、提供されているのは(膨大な ADC ドキュメントのうち)ごく一部だけど。

まずは PDF で読んでみる

iPadに雑誌のPDFなんかを詰め込んでいたときに、Apple が提供する開発者向けのドキュメント(以前は、ADCドキュメントって呼んでいたんだけど、今はどう呼ぶべきだろう？)も、iPad に詰められたら良いのに、と思った。実際のところ、PDF版が用意されているから、それを iBooks や GoodReader に詰めることはできる。ただ、この PDF 版は印刷向けに作られているから、iPad で読むには文字が小さい(→)。文字がつぶれているわけではないから読めなくはないが、長時間このサイズの文字を見続けるのはつらい。

印刷用のためか、ADC の PDF は余白が大きく取られている(昔からの Apple ドキュメントの特徴だ)。これを除いて内容部分を拡大すれば文字は幾分大きくなる。ページをめくる度、いちいち拡大するのは面倒だが、GoodReader にはまさにそのための機能がある(version 2.8 になって追加された)。それが Crop Margines 。PDF の余白をトリミングし、その分内容を拡大表示してくれる。→ がその表示例。↑と同じドキュメント(の同じページ)を crop させたもの。かなり読みやすくなる。

(GoodReader for iPad の Help より)
If your file has large unnecessary page margins, you can get rid of them by cropping them out with this button. Set crop margins any way you like them. You can even define different crops for odd and even pages. Crop settings are memorized on per file basis.

実際、これはかなり優れものの機能だ。PDF ファイルのほとんどが印刷用にレイアウトされていることを思えば、むしろ必須と言えるかも。

もっと良い方法

実は PDF にこだわらなければ、そしてオンライン前提で良ければ、もっと良い方法がある。それは、iPad の Safari で Apple の Develper サイトのドキュメント(HTML版)を開くというもの。

いつからかわからないが、ここのドキュメントは iPad の Safari 対応になっている。Mac 等で開いたときに表示されるナビゲーションのための目次は、iPad のアプリを思わせるメニューになっていて、画面にはドキュメントの内容が一杯に表示される。文字サイズも iPad で読むのに適したサイズになっている。

どんな方法であれ一長一短があるのが世の習い。この方法も、ページをめくる代わりに縦スクロールと「Next」リンクを使わなければならない点がユーザ体験としては減点。また、Wi-Fi でしか使ったことがないから想像するしかないが、3G 回線では「Next」と「Previous」によるページ遷移で待たされるかもしれない。

HTMLでも十分にアプリが作れる

正直、HTML (+ CSS + JavaScript だろうな)でここまでできる(ポップオーバーなメニューとか)とは思ってもみなかった。もうほとんど電子ブックアプリと変わらないユーザ体験を実現している。iPad 専用が前提なら、コンテンツのサイズを調整して縦スクロールをなくすこともできるだろうし、ローカルにコンテンツを持つのであればオフラインでも使える。Apple はもっとこういうこと(Safari と HTML でここまでできる)をアピールすべきだろう。

ちなみに、2010年7月28日時点で、上記のドキュメントは iPhone 対応にはなっていない。少なくとも 3GS では Mac で開いたときと同じように表示される。ちょっと残念。

このブログも iPad 対応にしないとな。ま、そのうち、そのうち。

関連リンク

• iOS Application Programming Guide (iPhone Dev Center/iOS Reference Library より)
• iPad Human Interface Guidelines (同上)

関連記事

• iPadにPDF化された雑誌を詰め込む
• O'Reilly の Ebook を買ってみる

twitter より (2010-07-23)

• 10:11  これ、オモシロイわ。Google Reader と連動するニュースアプリなんだけど、ニュースを新聞のように二次元に配置してくれる。 → My Newspaper - http://bit.ly/9P66zP
• 10:15  配置の際は PostRank (→ http://bit.ly/d596W )を元に位置とかサイズを決めるっぽい。ニュースリーダーに ¥600 はちと高い気もするが、このユーザ体験なら納得する。公式サイトはこちら → http://bit.ly/aN5PWK
• 10:26  今朝のうちの My Newspaper のスクショ。→ 写真をご覧ください: http://goo.gl/photos/GnGp

Powered by twtr2src.

iPadにPDF化された雑誌を詰め込む (その2)

調子に乗って、「Software Design 総集編 【2000-2009】」も買ってきた。早速、iPad に詰めてみたところ……こいつは index が Flash だった(´・ω・｀)。
さらに、特典(？)の創刊号の PDF は一部が iPad の GoodReader では表示できない。

Mac では問題なく表示できるから文句を付けられる筋合いのものではないんだけど、ちょっと残念。

関連記事

• iPadにPDF化された雑誌を詰め込む