+RECOMMEND
+RECOMMEND
+Ad
+OTHERS

無料ブログ作成サービス JUGEM

paperboy&co.
RSS 1.0
ATOM  0.3
<< July 2017 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >>
<< 本の表紙アーカイブ | main | オススメサイト情報 「田口元の「ひとりで作るネットサービス」探訪」 >>
iPad発売前に!iPad向けWebサイト制作についてのおさらい
iPad向けWebサイト制作についてのおさらい

iPadの予約が順調すぎて、受付を一時停止するほどになっています。
「アップル、Apple Store各直営店での「iPad」予約販売を停止」マイコミジャーナル

Webクリエイターの方は今のうちにiPad向けサイト制作についておさらいしておきましょう。


 AppleのiPadサイト制作の解説ページによると、基本的なiPadの仕様は次のようになっています。

■ユーザーエージェント user agent

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10
ユーザーエージェントとはWebサイトにアクセスする際に使用されるプログラムのことで、このユーザーエージェントを解析することで、アクセスしている端末やOSがなんであるか、ということがわかるようになっています。
以前エントリーで紹介した「入れてるとチョット便利なFireFoxアドオン」でもユーザーエージェントを変更して、サイトの見え方を携帯用に変更したりできるものを紹介しています。
もしiPad用サイトの検証の時はご利用ください。

■標準ブラウザ Safari

Appleの標準ブラウザである「Safari」が搭載されています。
HTML5とCSS3にもっとも対応が早いブラウザのひとつであり、AppleもHTML5を推奨しています。コーディングの際はHTML5が標準となるでしょう。

HTML5に関しては、いずれあらためてまとめを書きたいと思います。
管理人も現在勉強中につき、しばらくお待ちください。


■HTML5,CSS3,javascript をサポート(iPhone同様 Flashは非対応)

ブラウザのながれで。iPhoneやMac、Windows用のSafariでも同様に次世代のコーディング技術として策定が進んでいる HTML5、CSS3がサポートされています。 Flashに対応していないiPadですので、ページの演出やリッチコンテンツの制作、Flash代替対策などにHTML5とCSS3を活用することが望ましいようです。 すでにAppleの公式サイトではHTML5とCSS3を活用したサイトを集めた「iPad ready」を公開しています。


■ページ幅をデバイスに最適化するためのiPad用のメタタグ

<meta name="viewport" content="width=device-width">
viewportタグはiPhoneにも用いられた、ブラウザの幅を設定するタグです。 iPhoneの記述では「width=320」と320ピクセルにするように設定されています。これはiPhoneの幅に合わせられたもので、iPadは当然横幅がちがってくるので、この記述が最適と言う事のようです。
viewportの説明はこちらから。


■iPadだけにCSSを適用する

ソース元はこちらの「How to CSS for the iPad
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />
この記述を適応するだけで良いようです。
説明によると、このmediaタイプは他のブラウザでは無視されるためiPadだけにCSSを適用出来るということだそうです。
ちなみに (max-device-width: 1024px)部分を(max-device-width: 480px)とすることでiPhoneにだけに最適化出来るということです。


北米版をすでに購入されている方は、すぐに検証ができることとおもいます。
管理人は環境がそろうまで、ニヤニヤしながら検証サイトをつくろうとおもいます。


■2010-05-17追記
トラックバックしていただいた「</gecko>(げことじ)」さんによるとCSS単体で振り分けるのは無理とのことです。ユーザーエージェントごとにjavascriptで割り振る必要があるようです。

むむ、早く実機で検証したい・・・。
| iPhone/iPad | 22:24 | comments(2) | trackbacks(1) | - | - |はてなブックマーク - iPad発売前に!iPad向けWebサイト制作についてのおさらい | このエントリーをはてなブックマークに追加
4MediaiPad MaxはApple iPadファンたちに、iPadファイルをPC 、iTunesにバックアップする複数の方法を提供しています。そして、この4Media iPad Max を使えば、iTunesがなくても構わないで、PCファイルをiPadに転送するのも実現できます。この上、4Media iPad MaxフリーソフトはCD/DVDをリッピングする機能、様々の動画音声及びISO、IFOイメージをiPad適用の形式に変換する機能を持っています。さらに、M2TS、MTS、AVI、MP4、MPEG-4、MPEG、WMV、DAT、TS、MPV、NSV、M4V、MOV、QT、H.261、H.264、MP3、AAC、WMA、AAC、AIF、AIFF、AC3など数多くの形式をサポートしています。
| ookizi | 2010/08/04 12:01 PM |
管理者の承認待ちコメントです。
| - | 2015/04/05 6:13 PM |









http://blog.tug.lomo.jp/trackback/990152
【CSS】iPadだけにCSSを適用する方法
結論から言うとjavascriptでUserAgentを参照して振り分けるしかない。 linkやcss内の@mediaでどうにかなるもんだと思ってましたが。 [html] [/html] どうやら↑では”iPadオンリー”は無理です。 結局UserAgentを見るしかない。 [java
| </gecko>:げことじ。:日常からWEBまで: | 2010/05/17 11:32 AM |