このページの本文へ

サイト制作の前に知りたいiPhone/Androidの仕様 (2/4)

2010年08月11日 10時00分更新

文●たにぐちまこと/H2O Space.

  • この記事をはてなブックマークに追加
本文印刷

■Mobile Safariの制限

 Mobile Safariは、ハードウェアの制限などからMac版、Windows版とはいくつかの違いもあります。


・プラグインに非対応

 ブラウザーの機能を拡張するプラグインが追加できません。特にアドビ システムズの「Flash Player」をインストールできないため、Flashコンテンツを表示できない大きな制限があります。ほかにも、マイクロソフトの動画ファイル形式である「Windows Media Video」の埋込みや、QuickTimeムービーのページ内再生などもできません。これらは、HTML5やYouTubeなどで対応することになります(詳しくは今後の連載で紹介します)。


・設定項目が少ない

 Mobile Safariは、[設定][Safari]から設定画面を呼び出せますが、デフォルトの検索エンジンやセキュリティの設定などの項目しかありません。PC向けのWebブラウザーのような「文字サイズの変更」や「エンコーディングの設定」はなく、設定もできません。

iPhone Safariの設定画面。最小限の設定項目しかなく、文字サイズやエンコーディングの変更はできない


 つまり、文字コードの設定が不適切なWebページは文字化けした状態のまま、ユーザー(iPhone)側で直す方法がないということです。HTMLの文字コードはmeta要素で忘れずに指定しておき、文字化けが発生しないように気をつける必要があります。

文字コードの設定が正しくないと文字化けして表示され、ユーザー側では対応できない


・ウィンドウの制御ができない

 iPhoneのアプリは、常に全画面に展開され、大きさの変更ができません。JavaScriptを使うとポップアップウィンドウは開けますが、標準で「ポップアップブロック」が有効になっているため、次のようなスクリプトを実行してもウィンドウは開きません。

<script type="text/javascript">
window.open('http://h2o-space.com');
</script>

 ポップアップウィンドウは設定画面でオフにできますが、その場合も以下のような許可を求めるダイアログが表示されます。

ポップアップブロックをオフにした状態でも許可を求めるダイアログが表示される


・ファイルのアップロード・ダウンロードができない

 iPhoneは、Finder(Windowsのエクスプローラー)に相当するファイル管理ソフトを内蔵しておらず、Mobile Safariではファイルのダウンロードやアップロードができません。ファイルアップロードのコントロールがあるフォームを表示すると、以下のように選択ボタンがグレーアウトした状態になります。このため、ファイルのアップロードが必要なWebサービスでは専用のアプリを作って対応するしかありません。たとえば写真共有サービスの「Flickr」では専用のアップロードアプリを配布しています。

iPhoneではファイルのアップロードができないため、選択ボタンがグレーアウトして表示される


・そのほかの細かな制限事項

 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で明示的に明朝体を指定しても反映されません。

iPhoneの日本語フォントはゴシック体のみ。PC版のSafariでは明朝体で表示されるページ(左)でも、iPhoneではゴシック体になる(右)


 メモリ容量などの制約を考えると仕方ないとはいえ、日本語を美しく見せる明朝体が収録されていないのは少し寂しいところです。一方、欧文フォントは「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オーサリングツール、スマートフォン向けのブラウザーなど、多くのソフトウェアで利用されています。

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています