HTML5

HTML5 開発者向け iPhone 5 / iOS 6 での変更点等まとめ

iPhone 5 / iOS 6 における変更点などを、開発者向けにまとめた海外記事がありましたので、簡単にですが日本語にしてご紹介。対訳ではなくて、内容だけ伝わるようにかなり変更していたり、省略もしていますので、詳しくは原文をご確認ください。

公開日
更新日

iPhone 5iOS 6 がリリースされましたがアップデートされましたか？私はマップアプリをよく使うのですが、早速アップデートした方々の、マップがぁぁという叫びにびびってまだアップデートできておりません…

で、まだ私の手元の iPhone 4S では iOS 5 が元気に動いている今日この頃ですが、iPhone 5 / iOS 6 における変更点などを、開発者向けにまとめた海外記事がありましたので、簡単にですが日本語にしてご紹介。対訳ではなくて、内容だけ伝わるようにかなり変更していたり、省略もしていますので、詳しくは原文をご確認ください。

原文
iPhone 5 and iOS 6 for HTML5 developers, a big step forward: web inspector, new APIs and more ： Breaking the Mobile Web

それでははじめます。原文では、iPhone 5 と iOS 6 ぞれぞれで新しく加わった機能をまとめています。それぞれの項目へのショートカットは下記の通り。一部、私の知識ではよくわからない点もあったので、その辺はもやもやした感じになっていますが、詳しいことがわかる人がいらっしゃいましたら教えてください。

iPhone 5 関連

iOS 6 関連

iPhone 5

新しいスクリーンサイズ

iPhone 5 （第5世代 iPod Touch） で最大の変更点はスクリーンサイズでしょう。そのスクリーンサイズは WDVGA （Wide Double VGA） で 640px × 1136px。326 DPI の Retina Display です。iPhone 4/4S よりも 176px、縦サイズが大きくなりました。

新しいシミュレータ

新しい、Xcode 4 （Mac AppStore から入手できます） はアップデートによって iOS シミュレータに 3つのオプションが追加され、iPhone のシミュレーションが可能になりました。

  • iPhone ： iPhone 3GS、および iPod Touch 第1世代～第3世代
  • iPhone (Retina 3.5-inch) ： iPhone 4/4S, iPod Touch 第4世代
  • iPhone (Retina 4-inch) ： iPhone 5、および iPod Touch 第5世代

新しいシミュレーターは、Google マップから刷新された新しいマップアプリ、Passbook にも対応しています。

何をしないといけないの？問題点など

縦サイズが変わった件に関して

元記事には色々と書いてありますが、要するに縦サイズを固定してたりしない限りは特に問題ないよっていうお話です。縦サイズを指定している場合、下に余白が出たりするよとのこと（元記事では Web 版の Google マップが例として上がっています）。

デバイスの判別

まだ iPhone 5 が市場に出ていないのではっきりとは言えないけど、iPhone 5 だけを UA で見分けるのは無理っぽい。iOS 6 が動く iPhone 5/4S は下記の UA を返す。

Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A403 Safari/8536.25

ということで、iPhone 5 だけを判別するなら JavaScript か、Media Queries で。

JavaScript で判別するなら、

isPhone4inches = (window.screen.height==568);

でデバイススクリーンの高さを取得 （デバイスピクセル比が 「2」 なので 1136px の半分、568px を指定）。

Media Queries でやるなら、下記のようにすれば判別可能。

@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {
  /* iPhone 5 or iPod Touch 5th generation */
}
問題点

apple-mobile-web-app-capable への対応がおかしいみたい。元記事によると高さがうまくとれないようですが、手元に iPhone 5 がないからよくわかりません。

iOS 6

File API、HTML Media Capture への対応

HTML Media Capture に対応し、Safari から カメラを起動してのファイルアップロードが可能になりました。

type 属性値に file を指定すれば単体ファイルのアップロードが簡単に。

<label>Single file</label>
<input type="file">

複数ファイルのアップロードは下記のように。

<label>Multiple files</label>
<input type="file" multiple>

下記のように、アップロードするファイルの種類 （写真 / 動画） を指定することも可能です。ただし、PDF などの他フォーマットには未対応。

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

補足ですが、HTML Media Capture の仕様では、下記のようにすると、直接カメラを起動させることもできます。iOS6 では未対応みたいですが、サポートすれば今撮った写真だけをアップしてもらいたいなんて用途には使えるかも。

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

ファイルを選択したあとは何ができるか…

  • action による Multipart post
  • Ajax （XMLHttpRequest 2） を使用したファイル送信（プログレス表示にも対応）
  • File API に対応したので JavaScript で色々できるよ

Web Audio API に対応

モバイルブラウザではじめて Web Audio API に対応。この API を使えば、ブラウザ上 JavaScript を使用して音声ファイルを生成したり、合成したりできます。HTML5 でゲームコンテンツを開発するような人達には有益な機能かもしれません。

Web Audio API に関する詳しい情報は下記のサイト （英語） が参考になります。

スマート App バナー機能

例えば Web アプリ版を使っているユーザーに、ネイティブアプリもあるよと伝えたい、インストールを促したいといったときなど、下記のような簡単な meta タグを HTML に記述するだけで、App Store への誘導バナーが表示されます。

<meta name="apple-itunes-app" content="app-id=9999999">

この仕組みはアフィリエイトプログラムにも対応していて、下記のように記述することでアフィリエイトコードの埋め込みもできます。

<meta name="apple-itunes-app" content="app-id=9999999, app-argument=xxxxxx">
<meta name="apple-itunes-app" content="app-id=9999999, app-argument=xxxxxx, affiliate-data=partnerId=99&siteID=XXXX">

ちなみに、バナーのサイズは高さ 156px （デバイスピクセル比 2 の環境で） で、このバナーに対して DOM によるアクセスは不可。

CSS Fillter Effects の対応

-webkit-filter をサポートしたので、下記のように指定することで CSS による様々なフィルターを適用可能に。

-webkit-filter: blur(5px) grayscale (.5) opacity(0.66) hue-rotate(100deg);
参考リンク

CSS cross-fade() への対応

CSS Image Values and Replaced Content Module Level 3 から cross-fade() をサポートし、CSS だけで画像のクロスフェードが可能になります。transition などと組み合わせて色々できそう。

background-image: -webkit-cross-fade(url("logo1.png"), url("logo2.png"), 50%);

Safariのフルスクリーンモード

Safari がフルスクリーンモードを実装しました。

[補足]
Fullscreen API でサイト側からフルスクリーンにすることできるんですかね。あとで試してみます。元記事には 「強制的にフルスクリーンにすること」 はできないとは書かれています。

requestAnimationFrame() への対応

JavaScriptでのアニメーション処理に、従来のような setInterval() など元々アニメーション用ではないメソッドを使わなくてよくなります。これにより、処理の高速化、複数のアニメーションの動作をきちんと同期させたりということが可能になる…らしいです （実際に試してないからよくわからない）。

-webkit-image-set() への対応（Responsive images）

image-set() は、デバイスピクセル比などに応じて画像を振り分ける、所謂、Responsive images のための仕組みです。

Responsive images 周りでは色々とゴタゴタしている感じもありますが、下記のように書くことで、デバイスピクセル比ごとに画像を振り分けたりできます。

-webkit-image-set(url(low.png) 1x, url(hi.jpg) 2x)

Passbookとの連携

Passbook 自体はクーポンやポイントカード （これをパスと呼んでる） をアプリ上で一元管理できる仕組みですが、iOS 6 では、Web サイトから Passbook にパスを渡すことができるそうです。が、私 Passbook 使ったことないのでよくわかりませんです。

Web サイトからパスを送信する場合は、JSON形式で画像やその他メタ情報を受け渡すそうで、メタデータ内にはアップルの署名が必要なため、iOS Developer Program のアカウントを取得 （有料） して署名データを受け取る必要があるとのこと。

Passbook に関する開発者向け情報 （英語） は下記にあります。

Passbook for Developers ： Apple Developer

ストレージ、およびアプリ周りの変更点

  • アプリケーションキャッシュの容量が 25MB に増量されました。
  • Chromeless webapps （apple-mobile-web-app-capable が指定された Web コンテンツ） においては独自の sandbox を持つようになりました。つまり、同一ドメイン上にあるコンテンツでも、Chromeless webapps として提供されている場合は、ストレージは個別のものとなります。異なる Chromeless webapps 間でデータの受け渡しが必要な場合は注意が必要です。
  • ホームアイコンを保存する際に、そのタイトルを指定できるようになりました。下記のように指定できます。13文字以内にしておくと省略されずいい感じに（日本語表記の場合は 6文字ですね）。
<meta name="apple-mobile-web-app-title" content="My App Name">

元記事では他にも apple-mobile-web-app-**** っていう指定を見つけたけど動作しなかったからよくわからんと書いてあります。

WebView周りの変更点

WebView の JavaScript 処理速度は相変わらず遅い（Safari の 3.3 倍遅いってさ。だけどあくまでベンチマーク上のことなので注意とのこと）。

開発者にはいいニュースもいくつか

  • リモート Web インスペクタ （下記参照）
  • supressesIncrementalRendering 真偽値属性のサポート（これよく知らないです。教えて偉い人）
  • info.plist に WebKitStoreWebDataForBackup が指定できるようになった。localStorage や SQL database の内容を iCloud などの違う場所にバックアップできます。
  • 開発者契約が変更され、WebView 使用の制限がなくなった？（この辺詳しく知らないのでよくわかりません）

リモート Web インスペクタでのデバッグ

iOS Safari にリモート Web インスペクタが追加されました。これで Adobe Shadow みたいなリモートからのデバッグが可能になります。ただし Mac に限る…（リモート Web インスペクタを使うには Safari 6 for desktop が必要で、Windows 版は提供されていないため）

なお、このインスペクタでは下記のようなことが可能です。

  • HTML、CSS を見ながらライブで更新
  • Cookie、Local Storage、Session Storage、SQL Database へのアクセス
  • Web アプリのパフォーマンスレポート
  • DOM の検索
  • エラーや警告の確認
  • JavaScript コードのデバッグ …etc

高速になった JavaScript エンジン、その他

  • JavaScript の実行が 20% 速くなった。
  • Google Maps が使えなくなった。http://maps.google.com へのアクセスで今まではマップアプリが立ち上がりましたが、iOS 6 では Web 版へリダイレクトされます。マップアプリを開くには、新しく設定された、maps:?=<検索文字列 or 緯度経度> スキーマを使います。ルート案内を開きたい場合は maps:?saddr=<出発点>&daddr=<目的地> のように。
  • XHR2: XMLHttpRequestProgressEvent をサポート。
  • input 要素の autocomplete 属性を正式にサポート。
  • Mutation Observers （DOM4） を実装。
  • -webkit-transform: preserve-3d を指定することでハードウェアアクセラレーションを有効にできていたのを廃止 （パフォーマンス向上目的でこの指定をしないこと）。
  • window.selection を介した Selection API。
  • keygen 要素のサポート。
  • Canvas アップデート ： 高解像度画像を制御するための webkitGetImageDataHD / webkitPutImageDataHD が追加。…etc

元記事では下記のようなことがまだ未対応なので早くしろとおっしゃっております。

  • IndexedDB
  • FileSystem API
  • Performance Timing API
  • WebRTC and getUserMedia
  • WebGL …etc

最後、かなり適当になりましたが、自分の手元で試せる状態になったら確認してみようと思います。

記事をここまで御覧頂きありがとうございます。
この記事が気に入ったらサポートしてみませんか？

Ofuse でおやつをおごる

関連記事