i phone5・ios6変更点
TRANSCRIPT
iPhone5とiOS6の仕様
2012/10/30 株式会社バイタリフィ 制作部幸脇
iPhone5が発売され、
iOS6がリリースてから
約1ヶ月が過ぎました。
iPhone5とiOS6の仕様とバグ 2
そろそろバグや仕様など、
色々な情報が揃ってきていると
思うので、ざっくりまとめてみました。
iPhone5とiOS6の仕様とバグ 3
iPhone4Sからの
一番大きな変更点と言えば、
画面サイズですね!
iPhone5とiOS6の仕様とバグ 4
iPhone5とiOS6の仕様とバグ 5
176px高さが増えました!
比率で言うと118.333…%なので
画面の高さ約2割増しですね。
画面サイズに依存したコーディングを
している場合は気をつけましょう!
3.5インチ960px×640px
4インチ1136px×640px
iPhone5とiOS6の仕様とバグ 6
その他、
・LTE対応 (環境によっては3Gの10倍以上の通信速度差)
・カメラのpx数増 (640x480⇒1280x960)
・CPU1.5GHz (約2倍)
・メモリ1GB (2倍)
等々。
Webだと画面サイズに比べたら他はそこまで重要って訳ではないですが、
諸々スペックアップしてます。
あと、そこまで問題にはならないと思いますが、LTE環境化とそれ以外での通信
速度差が大きいので、その辺り表示速度等、クライアントにある程度理解しても
らわないとかなー、とは思います。特にWebアプリとか。
⇒ デバッグは3G回線でしたほうが良さそう?
次にiOS
と言うか、iOS6のSafari
iPhone5とiOS6の仕様とバグ 7
iPhone5とiOS6の仕様とバグ 8
■Safariに追加された主な機能
・iCloudでの表示ページの共有(Mac/iPad)
・ランドスケープ表示(横表示) でのフルスクリーン表示
・リーディングリスト機能(あとで読む的なローカル保存)
・スマートAppバナー
・写真のアップロード機能
・html5/CSS3の追加サポート
・Animation Timing API
・Javascriptのパフォーマンス向上
・リモートデバッグ
iPhone5とiOS6の仕様とバグ 9
・ランドスケープ表示(横表示) でのフルスクリーン表示
Webアプリを横画面フルスクリーンで実装する、
とかありそうですね。
iPhone5とiOS6の仕様とバグ 10
・スマートAppバナー
こんな感じでページ上部にアプリへの導
線バナーを表示することができるように
なりました。
<meta name="apple-itunes-app"
content="app-id=【アプリID】/>
とheadに追加するだけです。
すでにアプリをインストールしている
ユーザーはアプリ起動リンクになるよう
です。
これはよく使うことになりそうです。
iPhone5とiOS6の仕様とバグ 11
・写真のアップロード機能
やっと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についても色々できるようなので
調べてみると良いと思います!
iPhone5とiOS6の仕様とバグ 12
・html5/CSS3の追加サポート[Web Audio API]
Audioタグと異なり、音声再生だけでなく、生成もでき、短
めの音声を正確なタイミングで再生することに向いてます。
複数のAPIモジュールを組み合わせることで音声を生成でき
ます。またエフェクト機能などもサポート。
Webアプリやゲームなどでこれから使われていきそう。
iPhone5とiOS6の仕様とバグ 13
・ html5/CSS3の追加サポート[CSS3 Filter]
CSSで画像にフィルターをかけられるようになりました。
・グレイスケール
・ぼかし
・ドロップシャドウ
・明るさ
等々、フィルタリングできます。
参考サイト:
http://html5-demos.appspot.com/static/css/filters/index.html
iPhone5とiOS6の仕様とバグ 14
・ html5/CSS3の追加サポートCSS3 [Cross-Fade]
2つの画像を同じ場所に異なるalpha値で配置できます!
#c-fade {
background-image:
-webkit-cross-fade(
url("img1.jpg"),
url("img2.jpg"),
50%);
} // 50%の透過
iPhone5とiOS6の仕様とバグ 15
・ 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)を指定可能に!
iPhone5とiOS6の仕様とバグ 16
・ html5/CSS3の追加サポートCSS3 [Strage API]
キャッシュが25MBまでに増えました。
・ html5/CSS3の追加サポートCSS3 [Strage API]
ホーム画面に追加した際のタイトル指定が可能になりました。
<meta name="apple-mobile-web-app-title" content="【タイトル】">
iPhone5とiOS6の仕様とバグ 17
・Animation Timing API
requestAnimationFrameがサポートされました。
- setIntervalよりも動作が軽い。
- 複数のアニメーション処理を一括で処理が可能。⇒タイミングがずれない
- 非表示になっている間は処理しない(別窓開いている間とか)
function animation(){// アニメーション 処理 };
setInterval(animation, 100);
function animationLoop(){
animation();
requestAnimationFrame(animationLoop);
};
animationLoop();
※まだベンダプレフィックス付いてるっぽい。
⇒ webkitRequestAnimationFrame(hogehoge);
iPhone5とiOS6の仕様とバグ 18
・リモートデバッグ
個人的には、今回のアップデートで最も重要な機能がこれ。
iPhoneをMacに接続すると、
iPhoneのSafariで表示しているページを
MacのSafariのWeb Inspectorから
デバッグすることが可能に!※
※ただしMacのSafariに限ります。
Windows版は開発終了してしまったので
実装されることはないと思います。
Android⇒PC版Chromeとかもできないかな…。
と、色々新機能追加されてますが、
バグももちろん追加されてます。
iPhone5とiOS6の仕様とバグ 19
iPhone5とiOS6の仕様とバグ 20
■早くも遭遇したiOS6 Safariのバグ・position:fixedがうまく動かない。
画面を一回スクロールしないとpositionが
リフレッシュされない。
⇒ setTimeout(scrollTo, 100, 0, 1);とかで
1pxスクロールさせる。
・AjaxでPOSTがキャッシュされる
⇒ 叩くAPIに + (new Date).getTime() を追加して対応
・そもそもキャッシュが強すぎる
⇒同じく + (new Date).getTime() を追加して対応
おわり
ご清聴ありがとうございました。
21