|
|
（2012.03.19作成, 12.03.31更新）
|
|
|
＝HTML5 ビデオ(H.264/MP4動画)再生の再現性に問題あり＝
|
|
|
|
iPhoneに最適化したホームページを作成するには、iPhone
Safariで表示の確認などを行う必要があるが、実機を持っていない筆者は先ずは iPhoneをシミュレートするソフトを利用して検証する事とした。
Appleの "iPhone Simulator"は、iPhoneをMac上で再現する事が可能な便利ツールで、現在は "iOS Simulator"という名称になって Xcode and iOS
SDKの部品として配布されている。
実機と違う挙動をする場合があるというが（後で記述）、他の入手可能な iPhoneシミュレータと比較してウェブページのレイアウト表示をより忠実に再現する事が出来たので、Intel
Mac OS X 10.7 Lion（Mac mini MB139J/A：Intel Core
2 Duo 2GHz、メモリー4GB）への導入方法とともに、既存のPC用サイトをiPhone用に最適化させて表示してみた成績をメモした。
|
| |
|
|
1.a) Xcode 3.x
and iOS SDK 4.xのダウンロードとインストール
|
|
| |
iOS搭載デバイスで実行するアプリケーションの開発に必要なツール
Xcode and iOS SDK を入手するには、以下の手順が必要。
1) iOS
Dev Centerにアクセスして、AppleIDの作成とディベロッパーへの参加を行なう。
必須項目を入力。Email addressには、後ほどアカウントの確認メールが届くので正しく入力する。次のページのMacの使用歴などは適当に答えればよい。
この後、入力したメールアドレス宛に確認のメールが届くので、コード番号を入力すればAppleIDの登録は完了(という面倒な作業が必要だ)。
2) ページ右上の「Log In」のリンクをクリックして、開いたページで先ほど作成したAppleIDとパスワードを入力。
すると、最初に「Development Resources」ページが表示されるので、[Download
Xcode 4]をクリック。 |
| |
|
| |
次の「Xcode 4」ページでは
a) 古いXcode 3を入手するには「View Downloads」をクリック
b) 新しいXcode 4を入手するには「View in Mac App Store」をクリック→下に別項目で記述
|
| |
|
| |
最後の「Downloads for Apple Developers」ページでは、カテゴリーをiOSに絞っておいて最新のXcode
3.2.5 and iOS SDK 4.2：4つのダウンロード項目の内、DMGファイル(容量は3.52GBと大きい)をクリックしてダウンロード。
|
| |
|
| |
ダウンロードが完了したら、通常のアプリケーションと同様にインストールを行えばよい(但し、iTuensが起動しているとインストールが終らないと云うので、iTuensは必ず終了させておく事)。元々チェックされていた項目のみをインストールした。
|
| |
|
| |
Xcode 3は、通常のアプリケーションフォルダには格納されず、ハードデスク/Developer以下にインストールされる。
結局、8.15GBもの大容量を必要とした
(；_；)
|
| |
＜参考＞Xcode のアンインストール方法
ターミナルを立ち上げて次のコマンドを実行すれば綺麗さっぱり削除されるとある。
$ sudo /Developer/Library/uninstall-devtools --mode=all
しかし、ナッ何んと！Xcode 3.2.5 and iOS SDK 4.2には devtoolsがインストールされておらず通常にアンインストール出来ないのだ・・・困惑
(-_-;)
・・・結局削除は、Carbon Copy Clonerで保存しておいたクローンの復元をした
(;＞ω＜)/ |
| |
|
|
|
1.b) Xcode 4.3.1のダウンロードとインストール
|
|
| |
古いXcode 3と新しいXcode
4とは同居してインストールが可能なので、新旧の機種で再現性があるかを検証する為にバージョン4.3.1もインストールした。
|
| |
上記述の「Xcode 4」ページで、「View
in Mac App Store」をクリックすると、Mac App Storeへ繋がる。AppleIDとパスワードを入力すれば「無料」から入手が可能。
|
| |
|
| |
ダウンロードに続いて直ちにインストールが進行する。インストール途中で迷うとことはないが、iOS
Simulatorは一緒にインストールされない。
インストールが完了したら、アプリケーションフォルダ内の「Xcode.app」を起動すると、Xcode
Componentのインストールを求められるので実行する。再起動後、「Preferences」を開いて「Downloads」から追加インストールする必要がある。
インストールには再びApple Developer IDとパスワードが必要。
|
| |
|
| |
Xcode 4は、通常のアプリケーションフォルダにインストールされる。インストール後システムの再起動を要求されないが再起動しないと上手く作動しない。
結局、3.35GBの容量を必要とした。
|
| |
|
|
|
|
| |
起動すると、下のようにiPhoneが画面に表示されるのでSafariを起動する。
メニューバーのハードウェアメニューのデバイスで iPhoneを選択し、バージョンで目的のバージョンを指定する。
iPhoneを回転させたり、シェイクジェスチャーも、ハードウェアメニューから実行可能。
端末の日本語化は、iPhoneシミュレータのホーム画面で「Settings」→「General」→「International」→「Language」の順にクリックして「日本語」をクリック。
Optionキーを押すと 2つの円が出てくるので、マウスドラッグで2本指の操作をシミュレート出来る。
使用方法の詳細は、本家の「 iOSツール
ワークフ ローガイド p36～」PDFファイル、「 iOS開発ガイド:
iOSシミュレータの使用」を参照。
シミュレータ用にアプリケーションをビルドすると、Xcodeは自動的にシミュレーション環境にアプリケーションをインストールします。
注： App Storeから入手したアプリケーションをシミュレーション環境にインストールすることはできません
と、 トッホホ (；_；)
a) iOS Simulator 4.2は、以下の場所にインストールされている。
/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications
Mac OS X 10.7 Lionでも、下記の制限はあるも問題なく作動した。 |
| |
|
| |
b) iOS Simulator
5.1は、アプリケーションフォルダの Xcode.app内に格納されているので、「パッケージの内容を表示」で展開して起動する。
/アプリケーション /Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform
/Developer/Applications
|
| |
|
| |
以後は、iOS SimulatorのエイリアスをデスクトップかDockに置いて起動すればよい。
なお、両方の iOS Simulatorを同時に起動させる事は出来ない。
|
| |
|
Simulatorを変更した場合は、作動開始時に端末のバージョンを指定しておかないとエラーとなってしまう。
|
 |
|
|
| |
・4.2.1：Safariでの本文検索が可能となり、検索した言葉のハイライト表示がされるようになった。
・4.3：SafariにNitro JavaScriptエンジンが組み込まれ、JavaScriptの処理性能が従来の2倍以上に向上、ブラウザの読み込みや動作が高速化される。iAdがフルスクリーンで表示可能。
・5.0：Safari Reader - ページから広告やナビゲーションバー等の余分な要素を取り去り、見出しと本文だけを表示する。
タブブラウズ(iPad版のみ) - デスクトップ版Safariと同じようなでタブ形式になる。iPhone・iPod
touch版は従来通りサムネイル一覧による切り替え。
Reading List - 後で読みたいページをスタック出来る。iTunesとの同期時にリストをPC側のSarariと同期させることも可能。
|
|
|
|
|
＜備考2＞iPhoneはバージョン3.2を、iPadはバージョン4.1以前を選択するとハングアップして再起動出来ない不具合があるが・・・ホームライブラリのPreferencesフォルダ内の "com.apple.iphonesimulator.plist” ファイルを削除すれば復旧する。
従って、今回は古い iPhoneバージョン 3でsafariの挙動を検証出来なかった
(>_<、)
|
|
| |
|
|
|
|
| |
|
A. ウェブページのレイアウト表示の再現性
＝既存のPC用サイトを iPhone用に最適化した過程をシミュレート＝
|
| |
|
PC用にHTML5+CSS3で作成した既存のサイトをiPhone用に対応させてみたので、その調整の経過を
iPhoneシミュレータ(バ-ジョン4.0.2以降)のSafariで表示して確認を行なった。
|
| |
|
| |
I. PC用に作成した既存のサイトを、先ずはiPhoneのSafari用にサイズとフォントを対応させた。
1)サイトの横幅は 640pxに縮小
2)フォントサイズは10px以上の偶数のみ。基本は14px
3)フォントにはMacのヒラギノ角ゴ Pro W3も記述
＝成績＝
それだけでは、右図の如く文字サイズと横幅はハチャメチャで、小サイズ(スマフォの仮想ウィンドウ幅
980px)で表示されてしまう
(>_<、)
(Androidブラウザでは小サイズで表示されるが、文字サイズと揃えた横幅は意図した通りに表示可能だ)
|
 |
| |
|
| |
|
| |
II. Viewportでスマートフォン用に横幅を最適化
Viewportメタタグを<head>... ...</head>内に記述した。
<meta name="viewport" content="width=device-width"
/>
＝成績＝
図のみ横幅にフィットして表示可能となった（Androidブラウザでは横表示時にのみ横幅にフィット。縦表示ではフィット出来ない）。しかし、意図した文字サイズで表現出来ず、ある領域の文字が巨大又は極小に表示されてしまう（Androidブラウザでは、このような勝手に文字サイズの変更は起こさない）。
|
 |
| |
|
| |
|
| |
III.
iPhoneのSafari用が自動でフォントサイズを調整してしまう機能を解除する為に、ヒビヅレさんの対応方法：CSSのbodyに
-webkit-text-size-adjust: none; を記述した。
＝common.cssの記述例＝
@charset "Shift_JIS";
body {
font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku
Gothic Pro", Verdana, Osaka,"ＭＳ Ｐゴシック", "MS PGothic", Arial, sans-serif;
-webkit-text-size-adjust: none;
}
＝成績＝
いずれのバージョンでも、縦表示も横表示も完全フィット ＼(^o^)／
|
|
|
| |
|
最終的には、店頭のデモ機 iPhone
4S(5.1)でもウェブページのレイアウト表示が最適化出来た事を確認した。
但し、Flashビデオが読み込めないページの縦表示ではViewportが上手く作動しない。
|
|
|
| |
|
B. HTML5 ビデオ(H.264/MP4動画)再生の再現性に問題あり！！
iPhoneシミュレータのsafariによるHTML5
ビデオの再生は、「南イタリア...のタイトルページ」,「LeanBack Player
で..字幕表示」,「LeanBack Playerで...プレイリスト表示」,「各種プロバイダの...対応状況」や「FlashアニメーションをHTML5...」のページでは、QuickTimeが起動するフルスクリーン表示だが可能だ。
|
| |
|
|
しかし、いずれのバージョンでも(最新の
v.5.1も含めて) 以下の少し込み入ったJavaScriptが含まれている
3個のページではH.264/MP4動画の再生が出来ない・・・ビデオの読み込みエラーとなってしまう
┓(☆o☆)┏
・南イタリア 10日間..の導入ページ（複数のwindow.onloadを保有）
・HTML5 ビデオのストリーミング配信（キャプション記述のスクリプト）
・Flash及びHTML5 video対応JW Player（複雑な内容のスクリプト）
|
|
|
| |
|
ところが、店頭のデモ機
iPhone 4S(5.1)で視聴したら、上記ページでも(やはりQuickTimeのフルスクリーン表示だが)、再生出来る事を確認した！！
従って、 残念ながら最終的には実機で挙動を確認しないと実証出来ないと勘違いしたが・・・デバイス
iPhone(Retina)で実行すれば、実機と同じく再生可能だ
＼(^o^)／
|
| |
|
|
| |
|
＜備考＞ある記事によれば、 iPhone iOS
3.x迄のSafariは QuickTimeのフルスクリーン再生仕様だったが、iOS 4.0からはブラウザ植え込み再生が可能になったと云う？（ こちらを参照）。
|
| |
|
|
| |
|
C. QuickTimeムービー再生の再現性
iPhoneシミュレータのSafariによるHTML5
ビデオの再生は、最新の v.5.1でも
StandAlone方式も Embed方式もフルスクリーンで再生されてしまう。又
QTtext字幕の表示は出来ず、QTVR パノラマムービーには未対応 ・・・これはデモ機
iPhone 4S(5.1)でも同じだった。
|
| |
|
|
| |
|
追記(2012.03.31)
D. 自動切換えバナー表示の再現性にも問題あり・・・Intel Mac本来の問題！！
|
| |
|
別記の方法で、自動切換えバナーをトップページに配置した(サンプルページはこちらに提示)。
iPhoneシミュレータのSafariによる表示では、切り替え表示出来ず縦に並んで表示されてしまう
(；.；)
・・・一方、デモ機
iPhone 4S(5.1)では自動切換えが可能だった！！
Intel Macでは、SafariのみならずFirefox,
Chromeでも同様に作動せず、しかもVirtualBoxのゲストWin XP環境のブラウザでも作動しない。但し、PowerPC,
TigerのSafari(4.1.3)では自動切り替えが可能だ
?(゜_。)?
なお、バルーンポップアップの下からの表示が出来ない・・・これはデモ機
iPhone 4S(5.1)でも同じだ
┓(´_`)┏
|
|
|
| |
|
|
|
| |
|
＜参考＞iPadシミュレータでの表示
|
| |
|
a) iPadシミュレータのバージョン4.3.2以降のSafariによるウェブページの表示は、自動でフォントサイズを調整してしまうようなお節介な機能はなく、ほば意図した通りにレイアウト表示可能だ(右図は、iPhone用に適応化IIとIIIを実行する前のページを表示した)。
|
|
|
| |
又、iPhoneシミュレータのSafariで再生出来ないページのHTML5
ビデオの再生も可能だった。
例えば、Javaスクリプトでキャプションを記述した「HTML5 ビデオのストリーミング配信」のページでは、意図した通りにブラウザ植え込み方式で再生出来、字幕の表示及び字幕表示のON/OFF操作も可能だ。但し「LeanBack
Playerで...プレイリスト表示」のページでは、ブラウザ植え込み方式で再生出来るもプレイリスト表示は出来ない・・・店頭デモ機
iPad2(4.3.1)でも同様にリスト表示出来ない事を確認した。
|
| |
b) iPadシミュレータのバージョン4.2では、込み入ったJavaScriptが含まれている上記ページのHTML5
ビデオは再生出来ない。その他のページの場合はブラウザ植え込み方式で再生出来、字幕表示も可能だ(但しプレイリスト表示は不可)。
|
| |
C) QuickTimeムービーの再生
iPadシミュレータのSafariは、Embed方式はブラウザ植え込み再生可能だが、最新のv.5.1でも
StandAlone方式はフルスクリーンで再生されてしまう。又
QTtext字幕を表示出来ず、QTVR パノラマムービーには未対応・・・デモ機
iPad2でも同じだった。
|
| |
|
| |
|
|
|
|
| |
以下、iPhone用に最適化した後のページについて、各種iPhoneシミュレータを試用して
Safariの再現性を検証した。
|
| |
| |
＝Mac OS
X 10.7で試用＝
・iPhoney
1.2は、Viewメニューの "Zoom to Fit"で横幅にフィットさせて表示させる事が可能だ。
HTML5 ビデオの再生は、Mac OSシステムのQuickTime に依存して筆者のXiphQとPerianを導入した環境では
OGG, WebM の再生も植え込み方式で可能となってしまう・・・実機のMP4のみに対応とは異なった成績となってしまう
(-_-;)
なお、リンクの焦点がズレる不具合がある。
以下のツールは、Macでも使用可能だが ・・・
|
 |
|
iPhoneyで表示
|
|
|
|
|
|
| |
|
 |
|
|
| |
|
Electric Mobile
Simulator Liteで表示
|
|
Chromeの機能拡張 iPSimで表示
|
|
| |
・AIR
iPhone 3.60は、上記のWindowsで利用出来るシミュレータ類に比べれば画面調整の再現性があり、横幅にフィットして表示してくれる。
しかし、そのフィット機能は不完全で、横表示に回転したり、リンクを繰り返す操作を行なうと、スマフォの仮想ウィンドウ幅
980pxで小さく表示されてしまう。
又、HTML5 ビデオの再生は出来ない。
|
 |
|
AIR iPhoneで表示
|
|
|
なお、Electric Mobile SimulatorとFireMobileSimulator以外のシミュレータはいずれも、_blankリンクを実行する事が出来ない。
従って、今回の目的 "ウェブページがiPhone 用に最適化出来たか"を確認する為のシミュレータは、iOSシミュレータ以上に優秀な再現性を持ち合わせたツールは存在しない。
|
|
| |
| |
| |
