I phone5 ios6

iPhone5とiOS6の仕様

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

iPhone5とiOS6の仕様とバグ 2

iPhone5が発売され、iPhone5が発売され、iOS6がリリースてから約1ヶ月が過ぎました。


そろそろバグや仕様など、そろそろバグや仕様など、色々な情報が揃ってきていると

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


iPhone4SからのiPhone4Sからの一番大きな変更点と言えば、

画面サイズですね！


3.5インチ960px×640px

4インチ1136px×640px960px×640px 1136px×640px

176pxp高さが増えました！

比率で言うと118 333 %なので比率で言うと118.333…%なので画面の高さ約2割増しですね。

画面サイズに依存したコーディングをしている場合は気をつけましょう！している場合は気をつけましょう！


その他、・LTE対応 (環境によっては3Gの10倍以上の通信速度差)・カメラのpx数増 (640x480⇒1280x960)・カメラのpx数増 (640x480⇒1280x960)・CPU1.5GHz (約2倍)・メモリ1GB (2倍)等々等々。

Webだと画面サイズに比べたら他はそこまで重要って訳ではないですが、だと画面サイズに比たら他はそまで重要って訳ではなですが、諸々スペックアップしてます。あと、そこまで問題にはならないと思いますが、LTE環境化とそれ以外での通信速度差が大きのでその辺り表示速度等クライアントにある程度理解しても速度差が大きいので、その辺り表示速度等、クライアントにある程度理解してもらわないとかなー、とは思います。特にWebアプリとか。⇒ デバッグは3G回線でしたほうが良さそう？デバッグは3G回線でしたほうが良さそう？


次にiOS次にiOSと言うか iOS6のSafariと言うか、iOS6のSafari


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

・iCloudでの表示ページの共有(Mac/iPad)・iCloudでの表示ページの共有(Mac/iPad)・ランドスケープ表示(横表示) でのフルスクリーン表示リデグリト機能(あと読む的なカル保存)・リーディングリスト機能(あとで読む的なローカル保存)・スマートAppバナー・写真のアップロード機能・html5/CSS3の追加サポートhtml5/CSS3の追加サポト・Animation Timing API・Javascriptのパフォマンス向上・Javascriptのパフォーマンス向上・リモートデバッグ


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

Webアプリを横画面フルスクリーンで実装する、とかありそうですね。


・スマートAppバナー

こんな感じでページ上部にアプリへの導線バナーを表示することができるように線バナを表示することができるようになりました。

<meta name="apple-itunes-app" content="app id=【アプリID】/>content= app-id=【アプリID】/>

追加だとheadに追加するだけです。すでにアプリをインストールしているユーザーはアプリ起動リンクになるようです。これはよく使うことになりそうです。


・写真のアップロード機能やっと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についても色々できるようなので調べてみると良いと思います！


・html5/CSS3の追加サポート[Web Audio API]Audioタグと異なり、音声再生だけでなく、生成もでき、短めの音声を正確なタイミングで再生することに向いてます。

複数のAPIモジュールを組み合わせることで音声を生成でき複数のAPIモジュルを組み合わせることで音声を生成できます。またエフェクト機能などもサポート。

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


・ html5/CSS3の追加サポート[CSS3 Filter]CSSで画像にフィルターをかけられるようになりました。・グレイスケールグレイスケル・ぼかし・ドロップシャドウ・ドロップシャドウ・明るさ等々ルタリグできます等々、フィルタリングできます。

参考サイト：http://html5-http://html5demos.appspot.com/static/css/filters/index.html


・ 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%の透過


・ 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)を指定可能に！


・ html5/CSS3の追加サポートCSS3 [Strage API]キャッシュが25MBまでに増えました。

・ html5/CSS3の追加サポートCSS3 [Strage API]・ html5/CSS3の追加サポートCSS3 [Strage API]ホーム画面に追加した際のタイトル指定が可能になりました。

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


・Animation Timing APIrequestAnimationFrameがサポートされました。- setIntervalよりも動作が軽い。複数のアメシン処理を括で処理が可能 ⇒タイミングがずれない- 複数のアニメーション処理を一括で処理が可能。⇒タイミングがずれない- 非表示になっている間は処理しない(別窓開いている間とか)

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

function animationLoop(){animation();requestAnimationFrame(animationLoop);};

()animationLoop();

※まだベンダプレフィックス付いてるっぽい。まだンダプレフィックス付いてるっぽい。⇒ webkitRequestAnimationFrame(hogehoge);


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

iPhoneをMacに接続すると、iPhoneのSafariで表示しているページをMacのSafariのWeb InspectorからMacのSafariのWeb Inspectorからデバッグすることが可能に！※

※ただしMacのSafariに限ります。Windows版は開発終了してしまったので実装されることはないと思います。Android⇒PC版Chromeとかもできないかな…。


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

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


■早くも遭遇した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() を追加して対応

おわり 21

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

Technology

I phone5 ios6