Your SlideShare is downloading. ×
0
iPhone5とiOS6の仕様         2012/10/30 株式会社バイタリフィ 制作部                                幸脇
iPhone5とiOS6の仕様とバグ   2 iPhone5が発売され、iOS6がリリースてから約1ヶ月が過ぎました。
iPhone5とiOS6の仕様とバグ   3   そろそろバグや仕様など、  色々な情報が揃ってきていると思うので、ざっくりまとめてみました。
iPhone5とiOS6の仕様とバグ   4   iPhone4Sからの一番大きな変更点と言えば、  画面サイズですね!
iPhone5とiOS6の仕様とバグ      5  3.5インチ             4インチ 960px×640px       1136px×640px               176px       高さが増えました! 比率で言...
iPhone5とiOS6の仕様とバグ       6その他、・LTE対応 (環境によっては3Gの10倍以上の通信速度差)・カメラのpx数増 (640x480⇒1280x960)・CPU1.5GHz (約2倍)・メモリ1GB (2倍)等々。Web...
iPhone5とiOS6の仕様とバグ   7    次にiOSと言うか、iOS6のSafari
iPhone5とiOS6の仕様とバグ   8■Safariに追加された主な機能・iCloudでの表示ページの共有(Mac/iPad)・ランドスケープ表示(横表示) でのフルスクリーン表示・リーディングリスト機能(あとで読む的なローカル保存)・ス...
iPhone5とiOS6の仕様とバグ   9・ランドスケープ表示(横表示) でのフルスクリーン表示Webアプリを横画面フルスクリーンで実装する、とかありそうですね。
iPhone5とiOS6の仕様とバグ          10・スマートAppバナー          こんな感じでページ上部にアプリへの導          線バナーを表示することができるように          なりました。         ...
iPhone5とiOS6の仕様とバグ           11・写真のアップロード機能やっとiOSでもファイルのアップロードがサポートされました。<input type="file" accept="image/*" />$("input")....
iPhone5とiOS6の仕様とバグ    12・html5/CSS3の追加サポート[Web Audio API]Audioタグと異なり、音声再生だけでなく、生成もでき、短めの音声を正確なタイミングで再生することに向いてます。複数のAPIモジュ...
iPhone5とiOS6の仕様とバグ                   13・ html5/CSS3の追加サポート[CSS3 Filter]CSSで画像にフィルターをかけられるようになりました。・グレイスケール・ぼかし・ドロップシャドウ・明る...
iPhone5とiOS6の仕様とバグ   14・ html5/CSS3の追加サポートCSS3 [Cross-Fade]2つの画像を同じ場所に異なるalpha値で配置できます!#c-fade {  background-image:    -we...
iPhone5とiOS6の仕様とバグ   15・ html5/CSS3の追加サポートCSS3 [CSS Image Set]-webkit-image-setのサポート。media queriesによる場合分けをしなくても#bg {  back...
iPhone5とiOS6の仕様とバグ             16・ html5/CSS3の追加サポートCSS3 [Strage API]キャッシュが25MBまでに増えました。・ html5/CSS3の追加サポートCSS3 [Strage AP...
iPhone5とiOS6の仕様とバグ   17・Animation Timing APIrequestAnimationFrameがサポートされました。- setIntervalよりも動作が軽い。- 複数のアニメーション処理を一括で処理が可能。...
iPhone5とiOS6の仕様とバグ   18・リモートデバッグ個人的には、今回のアップデートで最も重要な機能がこれ。iPhoneをMacに接続すると、iPhoneのSafariで表示しているページをMacのSafariのWeb Inspect...
iPhone5とiOS6の仕様とバグ   19と、色々新機能追加されてますが、バグももちろん追加されてます。
iPhone5とiOS6の仕様とバグ     20■早くも遭遇したiOS6 Safariのバグ・position:fixedがうまく動かない。  画面を一回スクロールしないとpositionが  リフレッシュされない。⇒ setTimeout(...
おわり   21ご清聴ありがとうございました。
Upcoming SlideShare
Loading in...5
×

I phone5・ios6変更点

1,036

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,036
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "I phone5・ios6変更点"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×