Upload
vitalify-spinoff
View
758
Download
0
Embed Size (px)
Citation preview
iPhone5とiOS6の仕様とバグ 5
3.5インチ960px×640px
4インチ1136px×640px960px×640px 1136px×640px
176pxp高さが増えました!
比率で言うと118 333 %なので比率で言うと118.333…%なので画面の高さ約2割増しですね。
画面サイズに依存したコーディングをしている場合は気をつけましょう!している場合は気をつけましょう!
iPhone5とiOS6の仕様とバグ 6
その他、・LTE対応 (環境によっては3Gの10倍以上の通信速度差)・カメラのpx数増 (640x480⇒1280x960)・カメラのpx数増 (640x480⇒1280x960)・CPU1.5GHz (約2倍)・メモリ1GB (2倍)等々等々。
Webだと画面サイズに比べたら他はそこまで重要って訳ではないですが、だと画面サイズに比 たら他はそ まで重要って訳ではな ですが、諸々スペックアップしてます。あと、そこまで問題にはならないと思いますが、LTE環境化とそれ以外での通信速度差が大き ので その辺り表示速度等 クライアントにある程度理解しても速度差が大きいので、その辺り表示速度等、クライアントにある程度理解してもらわないとかなー、とは思います。特にWebアプリとか。⇒ デバッグは3G回線でしたほうが良さそう?デバッグは3G回線でしたほうが良さそう?
iPhone5とiOS6の仕様とバグ 8
■Safariに追加された主な機能追加され 機能
・iCloudでの表示ページの共有(Mac/iPad)・iCloudでの表示ページの共有(Mac/iPad)・ランドスケープ表示(横表示) でのフルスクリーン表示リ デ グリ ト機能(あと 読む的な カル保存)・リーディングリスト機能(あとで読む的なローカル保存)・スマートAppバナー・写真のアップロード機能・html5/CSS3の追加サポートhtml5/CSS3の追加サポ ト・Animation Timing API・Javascriptのパフォ マンス向上・Javascriptのパフォーマンス向上・リモートデバッグ
iPhone5とiOS6の仕様とバグ 10
・スマートAppバナー
こんな感じでページ上部にアプリへの導線バナーを表示することができるように線バナ を表示することができるようになりました。
<meta name="apple-itunes-app" content="app id=【アプリID】/>content= app-id=【アプリID】/>
追加 だとheadに追加するだけです。すでにアプリをインストールしているユーザーはアプリ起動リンクになるようです。これはよく使うことになりそうです。
iPhone5とiOS6の仕様とバグ 11
・写真のアップロード機能やっとiOSでもファイルのアップロードがサポートされました。<input type="file" accept="image/*" />$("input").addEventListener("change", function() {var fr = new FileReader();fil $("i ") fil [0]var file = $("input").file[0];
fr.readAsDataURL(file);f l d f ti ( ) {fr.onload = function (e) {//e.target.result でImage Objectを取得できます};};});
inputにmultipleを指定すると複数選択できたり、accept="video/*"を指定するとビデオのみ参照できたりします。(指定なしも可)またFil R d APIに も色々 きるようなのまたFileReader APIについても色々できるようなので調べてみると良いと思います!
iPhone5とiOS6の仕様とバグ 12
・html5/CSS3の追加サポート[Web Audio API]Audioタグと異なり、音声再生だけでなく、生成もでき、短めの音声を正確なタイミングで再生することに向いてます。
複数のAPIモジュールを組み合わせることで音声を生成でき複数のAPIモジュ ルを組み合わせることで音声を生成できます。またエフェクト機能などもサポート。
Webアプリやゲームなどでこれから使われていきそう。
iPhone5とiOS6の仕様とバグ 13
・ html5/CSS3の追加サポート[CSS3 Filter]CSSで画像にフィルターをかけられるようになりました。・グレイスケールグレイスケ ル・ぼかし・ドロップシャドウ・ドロップシャドウ・明るさ等々 ルタリ グできます等々、フィルタリングできます。
参考サイト:http://html5-http://html5demos.appspot.com/static/css/filters/index.html
iPhone5とiOS6の仕様とバグ 14
・ html5/CSS3の追加サポートCSS3 [Cross-Fade]2つの画像を同じ場所に異なるalpha値で配置できます!
#c-fade {background-image:
bki f d (-webkit-cross-fade(url("img1.jpg"),l("i 2 j ")url("img2.jpg"),
50%);} // 50%の透過} // 50%の透過
iPhone5とiOS6の仕様とバグ 15
・ html5/CSS3の追加サポートCSS3 [CSS Image Set]-webkit-image-setのサポート。media queriesによる場合分けをしなくても
#bg {b k d ibackground-image:-webkit-image-set(l("i 1 j ") 1url("img1.jpg") 1x,
url("img2.jpg") 2x);}}
と 標準画像(x1) Retina画像(x2)を指定可能に!と、標準画像(x1)、Retina画像(x2)を指定可能に!
iPhone5とiOS6の仕様とバグ 16
・ html5/CSS3の追加サポートCSS3 [Strage API]キャッシュが25MBまでに増えました。
・ html5/CSS3の追加サポートCSS3 [Strage API]・ html5/CSS3の追加サポートCSS3 [Strage API]ホーム画面に追加した際のタイトル指定が可能になりました。
<meta name="apple-mobile-web-app-title" content="【タイトル】">
iPhone5とiOS6の仕様とバグ 17
・Animation Timing APIrequestAnimationFrameがサポートされました。- 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のWeb Inspectorからデバッグすることが可能に!※
※ただしMacのSafariに限ります。Windows版は開発終了してしまったので実装されることはないと思います。Android⇒PC版Chromeとかもできないかな…。
iPhone5とiOS6の仕様とバグ 20
■早くも遭遇したiOS6 Safariのバグ早く 遭遇 グ・position:fixedがうまく動かない。画面を一回スクロールしないとpositionが画面を一回スクロールしないとpositionがリフレッシュされない。Ti ( llT 100 0 1) とか⇒ setTimeout(scrollTo, 100, 0, 1);とかで
1pxスクロールさせる。
・AjaxでPOSTがキャッシュされるAjaxでPOSTがキャッシュされる⇒ 叩くAPIに + (new Date).getTime() を追加して対応
・そもそもキャッシュが強すぎる⇒同じく + (new Date).getTime() を追加して対応