Web開発者向けのMobile Safari iOS 6の概要



iOSの新しいバージョンとそのベータリリースについては、すでに多くの 言葉が言われています。 しかし、舞台裏では、Safariのモバイルバージョンの新しい興味深い機能がありました。 しかし、まず最初に。



この記事はもともと翻訳として計画されていましたが、準備された資料は独立した記事としては十分でした。 機能をテストするために、iOS 6ベータ1およびMac用のSafari 6開発者プレビューを使用しました。 どちらも、登録済みのApple開発者向けにダウンロードできます。







残念ながら、公式に発表された機会についてのみ話すことができます。 登録済みの開発者であり、さらに詳しく知りたい場合は、記事の最後に関連トピックの開発者フォーラムへのリンクがあります。



iOS 6の新しいSafariで私たちを満足させるものは何ですか?





ファイルをアップロードする




はい、私たちはこれを長い間待って、ついに起こりました。 Safariは、デバイスの写真ライブラリから写真やビデオをアップロードする(またはカメラからの録画を使用する)機会をWebフォームから直接取得できます。 これは、iOSでのWebアプリケーションの開発に大きな推進力を与えると確信しています。



Web Audio API


間違いなくおいしい。 特に、iOSモバイルブラウザー用のゲームを作成するユーザー(このような経験はありましたか?)。 ただし、Web Audio APIが新しいSafariでサポートされていても、テストしたデモが機能しなかったため、非常に切り捨てられた形式になっています。 iOS 6のリリースまでに、その実装がデスクトップSafariのレベルに引き上げられることを期待しましょう。



CSSフィルター


主題に含まれていない人のために、例えばここで読むことができます 。 フィルターは機能しますが、 フィルターを使用するには-webkit-プレフィックスが必要です。

ここでテスト済み。 何らかの理由でパラメータを手動で設定すると、遅れが生じます。 しかし、アニメーションは非常に滑らかに見えます。



クロスフェードCSS関数


3つのパラメーターを受け取るCSS関数。 最初の2つは画像(またはグラデーション)であり、3番目のパラメーター(パーセント)は2番目の画像が最初の画像とどの程度重なっているかを示します。 3番目のパラメーターがゼロの場合、最初の画像のみが表示され、100%の場合は2番目の画像のみが表示されます。 他のケースでは、何らかの中間オプションがあります。 この機能の詳細については、 こちらをご覧ください 。 そして、これがテストページです。

関数を使用するには、 -webkit-プレフィックスが必要です



スマートアプリバナー


この機能についてはほとんど知られていない。 ドキュメントがないためテストに失敗しました。 理論的には、インストールされたアプリケーションの存在をそのIDで確認し、特定のパラメーターでこのアプリケーションを開くことができるようにする必要があります。



フルスクリーン横向きモード


おそらく多くの人がiOS6で既に知っているように、iPhoneとiPod Touchはブラウザーでデバイスを水平にしたフルスクリーンモードを受け取りました。 開発者にとって、これはいくつかの頭痛の種をもたらしました。なぜなら、ページの下部にアクティブな要素を使用すると、左側のブラウザナビゲーションボタンとモード切り替えボタンによって重なるため、ユーザーがそれらとやり取りするのが困難になるためです右側。 これがどのように見えるかです。







このモードへの移行をキャッチするための特別なAPIがあるかどうかはわかりません。 現時点では、「resize」イベントのリスナーとinnerHeightプロパティを使用できます。



スピード


iOS6のJavascriptの方が速いと言っても、おそらく誰も驚かないでしょう。 残念ながら、今は同じデバイスでテストを行う機会がないので、iphonehacks.comに投稿されたテスト結果を提供します。







アプリキャッシュを5から25メガバイトに増やす


非常に興味深いが、これを確認できなかった。 私の知る限り、App CacheとWeb Storageは同じ予約スペースを使用します。 App Cacheをまだテストできていませんが、iOS 5の場合と同じ2551k文字(5メガバイト)のWeb Storageで何も変わっていません。





リモートWebインスペクター


あなたはそれを推測した、私は最後に最もおいしいままにした。 これは、実際のリモートWebアプリのデバッグです...そしてそれは...動作します! これを行うには、iOSデバイスでSafariを開き、Safariを実行する必要があるコンピューターにワイヤーでデバイスを接続する必要があります。 (このために使用できるのはSafari 6のみであり、これまではMac専用であることに注意してください)次に、[開発]メニューに移動します。







必要なページを選択すると、Web Inspectorウィンドウが表示されます。 はい、5番目のバージョンから「わずかに」変更されています。





DOMでオブジェクトを選択し、デバイス(この場合はiPad)を見て、見慣れた画像を観察します。 Webインスペクターが機能します!







判明したように、コンソールメソッドはリモートコンソールに何も出力しません(Webインスペクターの図を参照)。 しかし、これは私にとってうまくいかなかった唯一のものです。 それ以外の場合、コンソールとその他のインターフェイスは予測どおりに動作します。これは朗報です。 (APDATE:コンソールへの出力とエラー出力が機能しているため、接続後にページをリロードする必要があります)



PhoneGapラッパーなどの場合 このデバッグ方法は機能しません。 古き良きiWebInspectorを使用します。 (更新:PhoneGapで動作します)



結論として



さて、宣言されたすべての機能が完全に機能するわけではありません。 だから彼女はベータ版です。 更新を待っています。



NDAによって課せられた制限のため、すべての革新について話すことはできませんでした。 ただし、このトピックの開発者フォーラムで詳細を読むことができます。 iOS 6の最終リリース後、より詳細なレビューが期待できます。 特に興味深いトピックは、Webアプリケーションでのより深いRetinaサポートになることです。



それだけです、良いデバッグです!



参照:

Safari 6開発者プレビュー

iOS 6ベータ

開発者アカウントにログインする必要があります!



All Articles