i phone5・ios6変更点

iPhone5とiOS6の仕様

2012/10/30 株式会社バイタリフィ制作部幸脇

iPhone5が発売され、

iOS6がリリースてから

約1ヶ月が過ぎました。

iPhone5とiOS6の仕様とバグ 2

そろそろバグや仕様など、

色々な情報が揃ってきていると

思うので、ざっくりまとめてみました。


iPhone4Sからの

一番大きな変更点と言えば、

画面サイズですね！



176px高さが増えました！

比率で言うと118.333…%なので

画面の高さ約2割増しですね。

画面サイズに依存したコーディングを

している場合は気をつけましょう！

3.5インチ960px×640px

4インチ1136px×640px


その他、

・LTE対応 (環境によっては3Gの10倍以上の通信速度差)

・カメラのpx数増 (640x480⇒1280x960)

・CPU1.5GHz (約2倍)

・メモリ1GB (2倍)

等々。

Webだと画面サイズに比べたら他はそこまで重要って訳ではないですが、

諸々スペックアップしてます。

あと、そこまで問題にはならないと思いますが、LTE環境化とそれ以外での通信

速度差が大きいので、その辺り表示速度等、クライアントにある程度理解しても

らわないとかなー、とは思います。特にWebアプリとか。

⇒ デバッグは3G回線でしたほうが良さそう？

次にiOS

と言うか、iOS6のSafari



■Safariに追加された主な機能

・iCloudでの表示ページの共有(Mac/iPad)

・ランドスケープ表示(横表示) でのフルスクリーン表示

・リーディングリスト機能(あとで読む的なローカル保存)

・スマートAppバナー

・写真のアップロード機能

・html5/CSS3の追加サポート

・Animation Timing API

・Javascriptのパフォーマンス向上

・リモートデバッグ


・ランドスケープ表示(横表示) でのフルスクリーン表示

Webアプリを横画面フルスクリーンで実装する、

とかありそうですね。


・スマートAppバナー

こんな感じでページ上部にアプリへの導

線バナーを表示することができるように

なりました。

<meta name="apple-itunes-app"

content="app-id=【アプリID】/>

とheadに追加するだけです。

すでにアプリをインストールしている

ユーザーはアプリ起動リンクになるよう

です。

これはよく使うことになりそうです。


・写真のアップロード機能

やっとiOSでもファイルのアップロードがサポートされました。

<input type="file" accept="image/*" />

$("input").addEventListener("change", function() {

var fr = new FileReader();

var file = $("input").file[0];

fr.readAsDataURL(file);

fr.onload = function (e) {

//e.target.result でImage Objectを取得できます

};

});

inputにmultipleを指定すると複数選択できたり、

accept="video/*"を指定するとビデオのみ参照できたりします。(指定なしも可)

またFileReader APIについても色々できるようなので

調べてみると良いと思います！


・html5/CSS3の追加サポート[Web Audio API]

Audioタグと異なり、音声再生だけでなく、生成もでき、短

めの音声を正確なタイミングで再生することに向いてます。

複数のAPIモジュールを組み合わせることで音声を生成でき

ます。またエフェクト機能などもサポート。

Webアプリやゲームなどでこれから使われていきそう。


・ html5/CSS3の追加サポート[CSS3 Filter]

CSSで画像にフィルターをかけられるようになりました。

・グレイスケール

・ぼかし

・ドロップシャドウ

・明るさ

等々、フィルタリングできます。

参考サイト：

http://html5-demos.appspot.com/static/css/filters/index.html





・ html5/CSS3の追加サポートCSS3 [Cross-Fade]

2つの画像を同じ場所に異なるalpha値で配置できます！

#c-fade {

background-image:

-webkit-cross-fade(

url("img1.jpg"),

url("img2.jpg"),

50%);

} // 50%の透過


・ html5/CSS3の追加サポートCSS3 [CSS Image Set]

-webkit-image-setのサポート。

media queriesによる場合分けをしなくても

#bg {

background-image:

-webkit-image-set(

url("img1.jpg") 1x,

url("img2.jpg") 2x);

}

と、標準画像(x1)、Retina画像(x2)を指定可能に！


・ html5/CSS3の追加サポートCSS3 [Strage API]

キャッシュが25MBまでに増えました。

・ html5/CSS3の追加サポートCSS3 [Strage API]

ホーム画面に追加した際のタイトル指定が可能になりました。

<meta name="apple-mobile-web-app-title" content="【タイトル】">


・Animation Timing API

requestAnimationFrameがサポートされました。

- setIntervalよりも動作が軽い。

- 複数のアニメーション処理を一括で処理が可能。⇒タイミングがずれない

- 非表示になっている間は処理しない(別窓開いている間とか)

function animation(){// アニメーション処理 };

setInterval(animation, 100);

function animationLoop(){

animation();

requestAnimationFrame(animationLoop);

};

animationLoop();

※まだベンダプレフィックス付いてるっぽい。

⇒ webkitRequestAnimationFrame(hogehoge);


・リモートデバッグ

個人的には、今回のアップデートで最も重要な機能がこれ。

iPhoneをMacに接続すると、

iPhoneのSafariで表示しているページを

MacのSafariのWeb Inspectorから

デバッグすることが可能に！※

※ただしMacのSafariに限ります。

Windows版は開発終了してしまったので

実装されることはないと思います。

Android⇒PC版Chromeとかもできないかな…。

と、色々新機能追加されてますが、

バグももちろん追加されてます。



■早くも遭遇したiOS6 Safariのバグ・position:fixedがうまく動かない。

画面を一回スクロールしないとpositionが

リフレッシュされない。

⇒ setTimeout(scrollTo, 100, 0, 1);とかで

1pxスクロールさせる。

・AjaxでPOSTがキャッシュされる

⇒ 叩くAPIに + (new Date).getTime() を追加して対応

・そもそもキャッシュが強すぎる

⇒同じく + (new Date).getTime() を追加して対応

おわり

ご清聴ありがとうございました。

21

i phone5・ios6変更点

Documents