iPhoneサイトを構築しよう--第2回:iPhoneならではのサイト構築テクニック
現在、iPhone向けアプリケーションを開発し、デバイスに実装するのは公式サポートされていない。しかし、Safari 3のJavaScriptとCSS対応のおかげで、パソコン向けと同じように作り上げることができる。
iPhone/ iPod TouchにはWebブラウジングだけでなく、iTunes Storeやアドレス帳といった様々なアプリケーションが標準実装されており、それらとシームレスにリンクさせることもできる。通常のリンクは「http://」だが、別のスキームにすることで他アプリケーションと連携させることが可能だ。
「iPhone向けWebアプリケーションとコンテンツの最適化」にも、電話向け(tel://)、メール(mailto://)、Google Maps(maps://)といったiPhone 向けのスキームが紹介されているが、iPod Touchでも使えるスキームも幾つかある(注釈3)。
注釈3
- itms://:iTunes Wi-Fi Music Store
- feed://、feeds://:.Mac 会員向けのフィードリーダー
- youtube://:YouTube
このようにiPhone/ iPod Touch向けに独自のメタ情報やリンクを記述することで最適化を図ることができるが、iPhone/ iPod Touch向けのWebサイト開発において最もエキサイティングな部分は、他のブラウザとの互換性を気にすることなく、Safariのレンダリングエンジン「WebKit」の機能を十二分に利用できるところだろう。豊富なCSSサポートのおかげで余計な画像を作成することなく、軽量かつ見た目の良いサイトデザインにすることができる。
例えばテキストに影を付けるtext-shadow属性や、角丸の枠線を作る-webkit-border-radius、半透明の画像やテキストをPNGを使わずに実現できるopacityをサポートしている。また、ひとつの要素に対して複数の背景画像を継承することができる、マルチバックグラウンドのサポートや、枠線に画像を継承することができる-webkit-border-imageは、マークアップをシンプルにするだけでなく、工夫次第でファイルサイズの節約にも繋がる(注釈4)。
注釈4
a.button { display: block; margin: 0 auto; width: 250px; text-align:center; border-width: 0 14px 0 14px; -webkit-border-image: url(whiteButton.png) 0 14 0 14; }border-image属性を使った例がLunchPad Blogで紹介されている。
利用した画像は29×46pxの小さな画像で、画像のパーツを枠線の異なる場所に割り当てることにより、大きな画像を作ることなく柔軟性の高いものにしている。横幅にあたる29pxのうち、左右14pxがボタンの脇の画像になり、中央の1pxがボタンの中央にあたる背景画像になる。
- 特集: iPhoneサイトを構築しよう (3件)
- 今日のトップ記事
- 昨日
- 2日前
- 5日前
- 6日前
- ホワイトペーパー
- 話題のタグ
EPUBのオーサリングツールや変換ツールを検討する
CarbonからCocoaへ--Snow LeopardでEmacs 23を使う(1)
ニフティクラウドがアプリケーション開発者にもたらすもの
IT投資のポイント「情報統合」
ニューノーマル時代、製造業に迫られる変革
御社はまだフリーの転送サービスですか?
Xbox Live インディーズゲーム開発の軌跡
Oracle製品にお悩みの管理者の方へ
景気回復を見据えた戦略的コスト削減を解説
身近な業務をCRMが変革!
アプリケーション仮想化 3つの課題
拠点間の情報の受け渡しを効率的に行うには
経営統合後の事業損益構造の見える化を実現
リスクと投資のバランスをどう最適化するか