
iPhoneサイトを構築しよう--第1回:iPhoneサイト構築で知っておきたい5項目
1. タブブラウジング
iPhone、iPod touchでは厳密には「タブ」ではないが、複数のWebサイトを同時に開いてのブラウジングが可能だ。様々なページを見比べたり参照しながらブラウジングすることがストレスなく行える。利用者にとって便利といえるが、特定のページに居座るという可能性は低くなる。モバイルコンテンツには元々そういった部分はあったが、マルチタスクはさらにそれを加速させるだろう。
2. 柔軟なサイトデザインの実現
他のブラウザではサポートしきれていないCSS 2.1および一部のCSS3がSafariでは利用できるのも、マークアップエンジニアの心を揺さぶる部分だ。
CSSといえばWebサイトのレイアウトを組むときや装飾に役立つというイメージがあるが、iPhone/iPod touchではそれ以上の役割を果たしている。一部の携帯電話で利用可能なOperaにも実装されているが、SafariではCSS3のメディアクエリ(Media Queries)が利用できる。
メディアクエリを利用すれば、デバイス、スクリーンサイズ、色に応じて異なるスタイルをページに継承させることが可能だ。パソコンで閲覧できるページをそのまま見られるのが強みではあるが、可能な限りストレスのない体験を提供したいところだ。その際、わざわざ専用ページを設けるのではなく、メディアクエリを利用してオールインワンソリューションを提供することができる。(注釈2)
注釈2
<link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />
メディアクエリはCSSファイル内に書き込むことが可能だが、上記のようにHTMLのlinkタグ内に記述することもできる。iPhone/iPod touchは横に傾けた際の幅が480pxなので、スクリーンサイズが最大480px(max-device-width: 480px)を想定したCSSファイルを用意しておくと良いだろう。
3. JavaScriptを利用したWebアプリケーション開発
CSS3と同様、Safariでは高いレベルでJavaScriptのサポートを実現している。詳しくはアップルが公開している「Web Kit DOMプログラミングトピックの紹介」を参照して欲しいが、様々なアニメーション効果やAjaxを利用することができるのだ。メディアクエリーを利用して最適化したサイトデザインを提供することができるが、JavaScriptを組み合わせてデバイスを回転したときに異なるレイアウトを提供するといったことも難しくない。
今までのWebサイト開発で慣れ親しんでいたJavaScriptをそのまま使っても動作するが、注意も必要だ。Safariは早いJavaScriptレンダリングを売りにしているものの、パソコン上で起動しているSafariに比べると大幅に遅くなる。iPhoneとMacBookを対象にしたレンダリングスピードのテストがブログ「John Murch the Self Proclaimed Geek Guru」で公開されているが、CPUの影響かiPhoneのほうが遅いのが分かる。パソコンと同等のJavaScriptが利用できるが、iPhone向けにJavaScriptを最適化するか、利用するJavaScriptの量を削る努力は惜しまないほうが良いだろう。(注釈3)
注釈3
addEventListener("load", function() { setTimeout(updateLayout, 0); }, false); var currentWidth = 0; function updateLayout() { if (window.innerWidth != currentWidth) { currentWidth = window.innerWidth; var orient = currentWidth == 320 ? "profile" : "landscape"; document.body.setAttribute("orient", orient); setTimeout(function() { window.scrollTo(0, 1); }, 100); } } setInterval(updateLayout, 400);
- 新着記事
- 特集
- ブログ
- 企画特集
-
連載!プロが語るストレージ戦略
-
デジタルを当たり前と言えるか?
-
企業のリスクマネージメント対策に
-
クラウド時代に理想のセキュリティ
-
リモート、オフィス、オンサイト
-
IDaaSって何?
-
漫画で解説:IoTはじめの一歩
-
ビッグデータ最前線!
-
明日からではもう遅い?!
-
クラウド活用 虎の巻
-
連載!プロが語るストレージ戦略
-
特集:IT最適化への道
-
部分最適だけではダメ
-
M365 活用のセキュリティ対策
-
データの散在と非常率運用がネック
-
いまあるデータで身近な業務をDX
-
ゼロトラストに向けた道のりを支援
-
DX時代のアプリケーションセキュリティ
-
いまさら聞けない「PPAP」
-
第4回CNBFミートアップレポート
-
SoRとSoEをつなぐDX推進の要
-
コスト・運用の壁を崩す!
-
その先へ
-
ネットワークもサービスとして使う
-
未来のセキュリティイノベーターへ
-
次の一手はこれだ!
-
連載!プロが語るストレージ戦略
-
性能の大幅向上を実現!
-
セキュリティの今を知る
-
厳しい目が向けられる内部不正
-
次期自治体ネットワーク強靭化へ
-
SECCON2020レポート第二弾!
-
ハイブリッドクラウドとAI
-
エンジニアのためのREHL8まとめ