■Mobile Safariの制限
Mobile Safariは、ハードウェアの制限などからMac版、Windows版とはいくつかの違いもあります。
・プラグインに非対応
ブラウザーの機能を拡張するプラグインが追加できません。特にアドビ システムズの「Flash Player」をインストールできないため、Flashコンテンツを表示できない大きな制限があります。ほかにも、マイクロソフトの動画ファイル形式である「Windows Media Video」の埋込みや、QuickTimeムービーのページ内再生などもできません。これらは、HTML5やYouTubeなどで対応することになります(詳しくは今後の連載で紹介します)。
・設定項目が少ない
Mobile Safariは、[設定][Safari]から設定画面を呼び出せますが、デフォルトの検索エンジンやセキュリティの設定などの項目しかありません。PC向けのWebブラウザーのような「文字サイズの変更」や「エンコーディングの設定」はなく、設定もできません。
つまり、文字コードの設定が不適切なWebページは文字化けした状態のまま、ユーザー(iPhone)側で直す方法がないということです。HTMLの文字コードはmeta要素で忘れずに指定しておき、文字化けが発生しないように気をつける必要があります。
・ウィンドウの制御ができない
iPhoneのアプリは、常に全画面に展開され、大きさの変更ができません。JavaScriptを使うとポップアップウィンドウは開けますが、標準で「ポップアップブロック」が有効になっているため、次のようなスクリプトを実行してもウィンドウは開きません。
window.open('http://h2o-space.com');
</script>
ポップアップウィンドウは設定画面でオフにできますが、その場合も以下のような許可を求めるダイアログが表示されます。
・ファイルのアップロード・ダウンロードができない
iPhoneは、Finder(Windowsのエクスプローラー)に相当するファイル管理ソフトを内蔵しておらず、Mobile Safariではファイルのダウンロードやアップロードができません。ファイルアップロードのコントロールがあるフォームを表示すると、以下のように選択ボタンがグレーアウトした状態になります。このため、ファイルのアップロードが必要なWebサービスでは専用のアプリを作って対応するしかありません。たとえば写真共有サービスの「Flickr」では専用のアップロードアプリを配布しています。
・そのほかの細かな制限事項
Mobile SafariはPC向けのSafariと同様、画像ファイルとしてGIF/JPEG/PNG/TIFFが表示できますが、容量については厳しく制限されています。また、JavaScriptの処理時間などにも決まりがあります。こうしたMobile Safariの細かな制限についてはアップルの「Safari Web Content Guide」に記載されています。
Safari Web Content Guideには以下のような制限が記載されています。
- GIF、PNG、TIFF画像はデコード時の状態で3メガピクセル以下
- サブサンプリングされたJPEG画像は、デコード時の状態で32メガピクセル以下
- canvas要素は3メガピクセル以下
- HTML、CSS、JavaScriptなどの要素はそれぞれ10MB以下
- JavaScriptの処理時間は10秒まで
これらの制限はiPhone 4(iOS 4)を基準としたもので、iPhoone OS 2では画像が2メガピクセル以下までだったり、JavaScriptの処理時間が5秒までだったりと、古いOSほど制限は厳しくなります。古い機種にも対応させるためには、制限ギリギリまで使うのではなく、できるだけ余裕を持った作りにする必要があります。
■日本語フォントはゴシック体のみ搭載
iPhoneのSafariとMac版で大きく違うのがフォントです。Mac版のSafariは明朝体(ヒラギノ明朝)が標準なのに対して、iPhoneのSafariはゴシック体(ヒラギノ角ゴ)で表示されます。iPhoneに搭載されている日本語フォントは「ヒラギノ角ゴ」の「W3」および「W6」のみで、明朝体は搭載されていません。このため、CSSで明示的に明朝体を指定しても反映されません。
メモリ容量などの制約を考えると仕方ないとはいえ、日本語を美しく見せる明朝体が収録されていないのは少し寂しいところです。一方、欧文フォントは「Arial」や「Helvetica」など、Macで利用できるフォントが数多く収録されています。以下に、iPhoneに搭載されているフォントの一覧をまとめます(出所=soundscape out)。
AmericanTypewriter-Bold | Georgia-Bold | STHeitiTC-Light |
AppleGothic | Georgia-Italic | STHeitiTC-Medium |
ArialMT | Georgia-BoldItalic | TimesNewRomanPSMT |
Arial-BoldMT | Helvetica | TimesNewRomanPS-BoldMT |
Arial-ItalicMT | Helvetica-Bold | TimesNewRomanPS-ItalicMT |
Arial-BoldItalicMT | Helvetica-Oblique | TimesNewRomanPS-BoldItalicMT |
ArialRoundedMTBold | Helvetica-BoldOblique | TrebuchetMS |
ArialUnicodeMS | HelveticaNeue | TrebuchetMS-Bold |
Courier | HelveticaNeue-Bold | TrebuchetMS-Italic |
Courier-Bold | HiraKakuProN-W3 | TrebuchetMS-BoldItalic |
Courier-Oblique | HiraKakuProN-W6 | Verdana |
Courier-BoldOblique | MarkerFelt-Thin | Verdana-Bold |
CourierNewPSMT | STHeitiJ-Light | Verdana-Italic |
CourierNewPS-BoldMT | STHeitiJ-Medium | Verdana-BoldItalic |
CourierNewPS-ItalicMT | STHeitiK-Light | Zapfino |
CourierNewPS-BoldItalicMT | STHeitiK-Medium | LockClock-Light |
DBLCDTEmpBlack | STHeitiSC-Light | PhonepadTwo |
Georgia | STHeitiSC-Medium |
WebKitとは
WebKitは「HTMLレンダリングエンジン」と呼ばれるプログラムの一種で、Webブラウザーの内部でHTMLやCSSを解釈し、画面に描画する役割を担います。
もともとはアップルがMac OS用のSafariのためにKHTMLというオープンソースレンダリングエンジンを改良して開発したものですが、同時にオープンソースとして公開したことから、「Google Chrome」などのPC向けのブラウザー、「Dreamweaver」などのWebオーサリングツール、スマートフォン向けのブラウザーなど、多くのソフトウェアで利用されています。