WebKitのCSS3レシピ。モバイル機器用に作られています。各WebKitポートに共通のもの

AndroidとiPhone - ブラウザウォーズ

パート1.ウェブキットは助けのために急いでいます

ネットワークステータスの監視を担当するブラウザのアプリケーションの開発

コンテンツシリーズ：

Total、iPhone、およびAndroidプラットフォームには、さまざまな情報源からダウンロードできますが、100,000以上のアプリケーションがあります。同時に、「ネイティブ」アプリケーション、すなわち対応するSDKを使用して開発および収集されたアプリケーションで、モバイルデバイスにインストールされます。類似の「ネイティブ」アプリケーションは、サポートを含むモバイルデバイスの技術的機能を効果的に実装することを可能にしますワイヤレスネットワーク、Bluetoothおよびデータウェアハウス、加速度計、またはコンパスの機能やその他の技術不思議や、モバイルデバイスをユーザーにとって非常に魅力的にする新しいアイテム。 iPhoneおよびAndroidプラットフォーム用の「ネイティブ」アプリケーションの人気は非常に大きいですが、さらに、モバイルデバイスはWebアプリケーションを開発するための幅広い機会を提供します。モバイル技術は長い間子供の年齢から出てきて、それらが特定の成熟とモバイルインターネットに達しました。

この記事は、iPhoneおよびAndroidプラットフォーム上のブラウザアプリケーションの開発に専念した一連の2つの部分の最初のものです。このシリーズの目的は、自分のモバイルWebアプリケーションを作成する基本原則をリーダーに紹介することです。モバイルアプリケーションは、モバイルデバイス上のWebサイトの開始に限定されない。ソフトウェアの開発のこのセクションを別々の独立した規律に割り当てることを可能にするモバイルアプリケーションの開発に使用される基本的な技術とアプローチを調べます。

Webプラットフォームの人気は、その使用が従来の開発者およびシステム管理者の詐欺である多くの問題を解決できるという事実によって説明されています。その中で：

インストールの問題：Webアプリケーションのインストールに問題が発生しません - それらをサーバーにインストールまたはコピーしてクライアントにお問い合わせください。このURLをブラウザに指定する必要があります。
ズームの問題：Webアプリケーションは、高性能データセンターサーバーのサーバーのプールに簡単に拡大縮小され、アプリケーションサービスツールはアプリケーションを管理するために使用されます。
アーカイブとデータの回復の問題：Webアプリケーションは集中型データウェアハウスを使用し、それによって失敗の場合には回復のタスクを簡素化します。
ユーザーインターフェースの質問：HTML、カスケードスタイルシート（CSS）、JavaScript、およびグラフィックイメージの組み合わせでは、「ネイティブ」SDKによって開発された機能と外観インターフェイスを大幅に超える多機能ユーザーインターフェイスを作成できます。後者は、原則として、ゲームアプリケーションのための存在の影響を最大限に活用することができず、対話型情報端末のための必要な機能を保証するものではない。
使いやすい：ほとんどのアプリケーションでは、日常業務を簡単に実行できるシンプルでユーザーインターフェイス要素が必要です。

インターネットを介したアプリケーションの分布モデルの最も魅力的な側面は、相互に有益な配達方法である一種の購読サービスでソフトウェアを回すことができるということです。ソフトウェア。 "どうやって？" - あなたが尋ねる。この質問をもっと考えてみましょう。

Webインタフェースを使用するための配布モデルにより、バイヤーは最小限のリスクで、最低価格で購入する前に製品を試すことができます。私がクライアントが好きだったトライアルの場合、ソフトウェア製品をさらに使用するためにそれに必要なものはすべてクレジットカードの購入（またはPayPalシステムを使用）の購入を支払うことです。さらに、サービス（SAAS）としてのソフトウェアのモデルは、優れた事前コストをかけずにソフトウェアを購入するための便利で収益性の高い方法を提供し、最初の月の使用中の投資を保証し、遠くの将来にはありません。

その事実は、Webブラウザのサポートに関するものですモバイルデバイスああは事実上不在でした。状況は、WebKitと呼ばれるテクノロジの出現と劇的に変化しました。これは、iPhoneのおかげで正確にモバイルデバイスの分野でその場所を取得しました。

ほんの数年で、iPhoneプラットフォームは世界中のWebクライアント番号になっています。どうして？インターネット接続の信頼できる操作と結合されたWebKitは、モバイルデバイス上のWebサービスを他の最新のブラウザよりもはるかに効率的に使用することを可能にしました。他のモバイルマーケットプレーヤーも新しい技術に注目を集めていました、そして今、市場全体はウェブキットを使用する企業、Webkitを使用しない企業と企業はWebKitを使用しないために言い訳を監視する企業に分けることができます。

それでは、ウェブキットとは何ですか？

WebKitとHTML5

WebKitは、iPhoneプラットフォーム上のモバイルSafariブラウザをサポートし、Androidプラットフォーム上のブラウザをサポートするために使用されるブラウザエンジンです。もちろん、Webkitは他のモバイルデバイスでも使用されていますが、この記事の枠組みの中で、iPhoneとAndroidプラットフォームの検討に限定します。

WebKitは、Kデスクトップ環境（KDE）の開発から発信されたオープンソースプロジェクトです。モバイルデバイス用の最新のWebアプリケーションが外観によって必要とされるWebKitプロジェクトです。モバイルデバイスの技術的および設計特性は、もちろん重要な役割を果たすが、モバイルユーザは主にコンテンツに関心がある。モバイルデバイスがインターネットコンテンツの小さな部分にのみアクセスを提供する場合は、最も人気のあるデバイスのトップリストに入ることができないことがあります。

私たちのほとんどは完全な人生を生きることを好む：私たちが家に座っているラップトップコンピュータでウェブサイトを開くと、このサイトを電車の中に座っているときに同じコンテンツを見ることを期待しています。コンテンツはモバイルアプリケーションの主な問題です。私たちがどこにいるのか、そして私たちがすることに関係なく、あなたが興味のあるデータへのアクセスが必要です。 WebKitテクノロジは、iPhoneおよびAndroidプラットフォームに本格的なコンテンツを提供します。

Webkitは、Mac OS XプラットフォームのメインブラウザであるSafariブラウザでは、デスクトップコンピュータでもWebKitが使用されていることが注目に値します。デスクトップコンピュータのバージョンまたはiPhoneまたはAndroid用ブラウザエンジン、WebKit HTMLとCSSをサポートする最も先進的なテクノロジのままです。実際、WebKitは、他のエンジンのブラウザによってまだ表示されていないCSSスタイルをサポートしています。例として、HTML5仕様で定義されているプロパティの数を指定できます。

HTML5は、SQLサポート、移動、変換などのクライアント側のデータウェアハウスなど、ブラウザの使用に基づくテクノロジを定義する予備的な技術仕様のセットです。しかし、HTML5仕様の開発はまだ終わっていますが、基本原則がほとんどのプラットフォームでブラウザで明確に策定され実装されているとすぐに、Webアプリケーションの開発の非常に適度な初期段階は過去の過去になるでしょう。 Webアプリケーション開発は、ソフトウェアの開発において重要なセグメントを取ります。これは、デスクトップブラウザのアプリケーションだけでなく、モバイルブラウザの場合もあります。サイド製品から、モバイルアプリケーションはWebアプリケーションマーケットの主要製品に入ります。

モバイルWebアプリケーション開発の構築機能

Web開発技術を習得することにした場合、あなたの処分では資金の非常に限られた選択です。まず第一に、アプリケーションは、HTMLコード、CSS、JavaScriptを含むファイルとしてサーバー上で直接作成できます。同時に、HTMLコンテンツを静的HTMLファイルの形式で指定でき、たとえばPHP、ASP.NET、Javaサーブレットなどのサーバー側で動作するさまざまなテクノロジを使用して動的に生成できます。とにかく、この記事で検討されている問題の視点から、すべてがHTMLコードに登場し、ここで最も重要なことは、WebKitテクノロジがブラウザがモバイルデバイスでHTMLを再生できるという事実です。

モバイルデバイス（iPhoneまたはAndroid）でWebアプリケーションを実行するには、ユーザーはブラウザを起動し、関連サービスのURLを入力する必要があります。たとえば、http：//yourcompanyname.com/applicationURL。

この場合、提案されたモバイルWebアプリケーションの範囲は非常に広いものである。標準のウェブサイトから特定のモバイルプラットフォーム用に特別に設計されたモバイルWebアプリケーションへ。

標準サイトを表示します

iPhoneおよびAndroidプラットフォームの直感的でユーザーフレンドリーなユーザーインターフェースと組み合わせたWebKitエンジンでは、モバイルデバイス上のほとんどすべてのWebサイトを表示できます。以前の世代のモバイルブラウザとは対照的に、Webページは非常に正確に表示されます。これは、コンテンツのフラグメントをランダムに転送したり、それらをまったく表示しませんでした。 WebKitサポートブラウザでページをダウンロードすると、ページの内容は通常スケーリングされます。同時に、図1に示すように、ページ全体が完全に画面上に取り付けられているようにスケールが選択されます。ただし、ページはスクロールすることができます。移動して、すべてのコンテンツ項目に便利なアクセスを確保します。デフォルトでは、ブラウザは980ピクセルのウィンドウを幅広く使用します。

ブラウザウィンドウ自体のWebページの全表示が、以前の世代のブラウザを使用することの経験と比較して重大な成果にあるという事実にもかかわらず、現代のモバイル技術の可能性はこれに限定されない。

モバイル機能を考慮に入れるWebページ

Webページが通常のネットワークユーザーだけでなくモバイルユーザーにも利用できるようにしたい場合は、モバイルWebアプリケーションを最適化することのもう少し可能性を考慮することが価値があります。

WebKitがモバイルデバイスの画面でWebページを正しく表示できるという事実にもかかわらず、ポータブルまたはデスクトップコンピュータなどのマウスを使用しているデバイス間には、デバイス間には特定の違いがあり、iPhoneやAndroidスマートフォンなどのタッチデバイス。感覚装置は「クリック」領域の物理的な寸法、カーソルガイド機能の欠如によって任意の要素および別のイベントのシーケンスによって区別される。したがって、通常のユーザーとモバイルユーザーの両方に便利なWebサイトを作成したい場合は、モバイルデバイスの次の機能を考慮する必要があります。

ブラウザiPhoneおよびAndroidは "読み取り可能な" Webページ全体を表示することができます - これらのブラウザのディスプレイの質は標準のモバイルブラウザの表示よりもかなり高くなります。そのため、サイトのデザインを簡素化するために急いでください。
指の枕のサイズはマウスポインタのサイズを大幅に超えています。サイトナビゲーションアイテムの開発におけるこの要素を検討してください。リンクを互いに近づきすぎないようにしてください。そうしないと、ユーザーは同じリンクをクリックすることはできません。同時に隣接してテープされていません。
カーソルをホバリングするときに表示される要素は、モバイルデバイスでは機能しません。ユーザーは単にマウスカーソルのように任意の要素の指を「ホバー」することはできません。
マウスボタンを押して保持し、マウスのドラッグなどで定義されたイベントは、タッチスクリーンで別の方法で実装されています。これらのイベントのいくつかはモバイルデバイスで動作することができますが、一般的にモバイルブラウザとデスクトップブラウザが同じアクションのシーケンスを実行することをカウントしないでください。

記事のこれらの側面の詳細な説明を見つけることができます」 iphoneが行動します。（セクションを参照）。私たちの記事では、私たちはその欠陥ではなく、Webkitの利点を考慮して自分自身を制限します。

Webサイトにアクセスするとき、すなわち制限された画面サイズにアクセスするときに、iPhoneまたはAndroidユーザーがどのようなものになっているかについて最も明白な問題を検討してください。実際、最新のモバイルデバイスの画面は、ユーザーがランドスケープ構成でWebコンテンツを表示することを好む場合に、320 x 480または480 x 320のサイズを持っています。図1から分かるように、WebKitは標準のデスクトップ用に設計されたWebページを正しく表示することができます。ただし、Webページをスケーリングするとき、そのテキストは小さすぎる可能性があるため、ユーザーはテキストを読む前にスクロール、シフト、増加の機能を使用する必要があります。この制限に対処する方法

ページを作成する最も簡単な方法は、モバイルブラウザウィンドウとデスクトップブラウザウィンドウでも同様に表示されます。これは特別なメタタグの使用です。 ビューポート。.

METAタグは、HTML文書ヘッダーに配置されているHTMLタグです。 ViewPortタグを使用する最も簡単な例は次のようになります。。このメタタグをHTMLページに追加すると、モバイルブラウザウィンドウでのマッピングは最も最適な方法でスケーリングされます（図2を参照）。 ViewPortをサポートしていないブラウザは、このタグを無視します。

場合によっては、図3に示すように、ウィンドウスケーリングパラメータを事前に決定することが便利です。

特定のスケーリングパラメータを決定するには、コンテンツメタタグビューポートの正確な値を指定します。。初期スケールパラメータの値を変更することで、画像を縮小または増加させることができます。 iPhoneプラットフォーム用アンドロイドが良い 1.0から1.3の値を使用してください。 ViewPortメタタグは、最小スケールと最大スケールもサポートされています。これにより、ユーザーのダウンロード中にページスケールを変更する機能を制限できます。

iPhoneの設計特性、特に画面320x480のサイズは、その外観以降に実質的に変更されていないが、Androidプラットフォーム上のデバイスパラメータはかなり広い範囲を持ち、このプラットフォーム上のモバイルデバイスは様々な製造業者によって製造されているのでさまざまなユーザーグループを対象としています。したがって、Webアプリケーションがモバイルユーザーに人気のある場合は、画面のサイズと解像度、およびAndroidデバイスの設計機能の可能な違いを考慮する必要があります。

経験は、Androidに基づくさまざまなモバイルデバイス間に存在する建設的な違いに加えて、Androidソフトウェア自体が、モバイルデバイスブラウザのプロパティに応じてダウンロード可能なWebページの設定を設定しようとしていることを示しています。安定性に加えて、Androidプラットフォームは、絶えず変化する関数と機能のセットによって特徴付けられます。 Androidに基づく特定のデバイスの設定は、ほとんどの場合、開発環境の設定と異なります。 sDKバージョンそして装置の製造業者。図4は、バージョンv1.6 Androidエミュレータのブラウザ設定画面を示しています。画面設定は、画面上の画像スケーリングレベルを決定する機能（遠く、近く、中）または自動ページスケーリングモードを選択する機能を提供します。

モバイルデバイスの世界では、モバイルソフトウェア市場の開発と更新が考慮されるべきであるため、最も一定の値が変わります。たとえば、Sprint Heroブラウザの設定には、Webページをロードするときに使用される標準パラメータとは根本的に異なるオプションのセットが含まれています。 HEROブラウザは、HTCによって行われた変更の行を使用してAndroid v1.5プラットフォーム上に構築されています。幸いなことに、メタタグビューポートを使用するとき、特定のヒーロー設定は無視されます。

これまでのところ、WebkitがWebページのダウンロードに完全に対処していることを見ましたが、強く低下し難しい形で。次に、ViewPortメタタグを使用して、モバイルデバイスの画面に表示される方法を制御しました。これで表示されているページは読み取りとナビゲートにはるかに便利です。しかし、これは私たちのページがWebアプリケーションとして見て機能するのに十分ではありません。

モバイル機器用に作られました

モバイルオーディエンスを目的としたWebクジラの設計機能を考慮してください。具体例として、Google Email Service Registrationページを検討してください。

このページはデスクトップブラウザウィンドウのようになります。

デスクトップブラウザウィンドウでは、情報の内容が左側に表示され、登録ウィンドウ自体が右側のペインにあります。モバイルブラウザウィンドウでは、同じページにまったく異なる外観があります。

図6に示すページは確かにモバイルユーザー向けに設計されています。ユーザーが必要とするページ要素のみが画面に表示されているのは、さらなる作業のために画面に表示されます。追加のスクロール、オフセット、またはスケーリングは必要ありません。

今視聴を見ることを検討してください eメール Gmailのモバイル版。アプリケーションで利用可能なオンスクリーンスペースは非常に限られているので、メッセージ表示ウィンドウにはオプションのボタンとナビゲーションアイテムがあります。この場合、表示されているナビゲーション要素はウィンドウと重なってメッセージを表示します。さらに、それが避けることができれば、あまりにも多くのフレームまたはDIVスクロール項目を使用しないでください。 Gmail Mobileバージョンは、ユーザーがページのスクロールを終了するとすぐに表示されるポップアップメニューを使用してこの問題を解決します。ポップアップメニューには3つのボタンが含まれています。 アーカイブ。, 削除します。 そして もっと。ボタンを押す もっと 追加のメニュー項目が表示されます（図7を参照）。

これは本当にモバイルデバイス用に開発されたアプリケーションです。

意図的に設計を削除し、iPhoneおよびAndroidプラットフォーム用の多機能ブラウザを開発したモバイルユーザーの可能性を軽減したくないことに留意する必要があります。この観点から、Gmailページの下部に表示されている要素に注意を払うと便利です（図8を参照）。

ユーザーがデスクトップのバージョンの拡張バージョン区分を好む場合は、適切なページをダウンロードできるようにしてください。

Webテクノロジを使用してアプリケーションを作成する場合は、「ネイティブ」モバイルアプリケーションのように見えます。

コンテンツ固有のプラットフォーム

次のステップは、特定のモバイルプラットフォームに固有のコンテンツを開発することです。この場合、ページのフォーマットとインタフェースは、ページが特定のプラットフォーム用の「ネイティブ」アプリケーションのように見え、標準のWebサイトとしてではないように決定されます。一般アクセス。「ネイティブ」アプリケーションがどういう意味ですか？

特定のプラットフォーム用の「ネイティブ」アプリケーションにできるだけWebアプリケーションを作成する方法についての議論を深める前に、iPhoneとAndroidブラウザの一般的なプロパティを除やしましょう。そして、間に存在する視覚的な違いに簡単に焦点を当てます。これらのプラットフォーム

iPhoneアプリケーションには独自のインタフェースがあります。誰かにスナップショットを表示しますスクリーンiPhone そして、この人が月から他の一日で文字通り落ちない限り、彼はほとんど確実にこれがiPhoneであると言うでしょう。同一の人に、Androidに基づいてモバイルデバイスの画面の写真を表示し、その答えはそうではないでしょう。理由は何ですか？考えられる説明がいくつかあります。第一に、iPhoneは、Androidに基づいて、多くの前のデバイスに登場し、膨大な数のファンを取得することができました。 V1 iPhoneの限られた機能にかなりのお金を払うために、キューに立っている人々を覚えておいてください。あなたのiPhoneやこれではありませんアップル製品現在マーケットリーダーです。 Androidの場合は何ですか？

Androidプラットフォームは比較的新しい製品であり、多くの側面では、主にオープンコミュニティのために設計されているため、iPhoneの抗ポケットとして機能します。 Androidプラットフォームが最も多く使用されています別の機器（電話やその他の家電）。この記事で議論を簡単にするために、携帯電話のAndroidの使用に限定します。

時間が経つにつれて、Androidに基づく世界のデバイスの数はiPhoneの量を超えています。これは、Androidプラットフォームデバイスが多数の企業によって発行され、最も異なるデータネットワークによってサポートされることによって説明されます。 Android Mobile Marketのこのような重要な数のプレーヤーでは、デバイスの外観とパラメータに基づいて、市場の特定の断片化を期待することが間違いありません。この傾向は、会社のHTCからのSENESUIインターフェースの例でトレースされています。この魅力的です外観そして、インタフェースはAndroid SDKの基本バージョンではサポートされておらず、他のAndroidデータベースデバイスと互換性がありません。 Motorola、Google、Verizonは、Androidに基づく新しいドロイドデバイスを開発するための努力を統合しました。これはAndroidバージョン2.0プラットフォーム上の最初の商品です。

iPhoneの均一な外観を持つ様々なAndroidベースのシステムとを比較します。 iPhoneはAppleの特に貴重な財産です。 iPhoneアプリケーションの外観は時間とともに軽く変わる可能性がありますが、これらの小さな変更は比較される可能性は低いです。さまざまなバージョン現在、プラットフォームが開発の始まりになったときであっても、Androidシステムの数は十分に大きいです。

そのため、「ネイティブ」プログラムへの外観とアプリケーションインタフェースを最大化するために何をする必要がありますか？

Web 2.0の外観の前にそのようなタスクが私たちに直面していたら、それは本当に深刻な問題になるでしょう。複数のクライアントブラウザ（モバイルおよび静止状態）をサポートしようとする早期の試みは、例えばいくつかのアプローチの使用に基づいていました。

完全並列サイトの開発
ユーザ付パラメータによる動的コンテンツ生成
各特定のデバイスに応じてコンテンツを変換できるプロキシサーバーを使用してください。同様の技術は、顧客のモバイルデバイスからの電子メールへのアクセスを整理するためにRIMによって正常に使用されました。

そのようなアプローチは、開発が大規模なチームによって行われる場合には非常に受け入れられるかもしれません。そして世界の残りのことは何をしますか？誰もが重要な財源、高品質の専門家、そのような戦略を実行するための無制限の時間があるわけではありません。また、すでに注目しているように、以前の世代のブラウザのモバイルインターネットは便利または人気のあるものと呼ばれることはできません。

幸いなことに、私たちはそれをする必要はありません。 WebKitとCSSの時代には、さまざまなモバイルデバイスの外観とインタフェースの違いは、スタイルとメディアクエリ（メディアクエリ）のスタイルを使用して克服でき、特定の種類のデバイスに応じてさまざまなスタイルを使用できます。メディア要求技術を使用すると、クライアントに関する情報を入手できます。伝統的に、ブラウザはサーバが特定のブラウザを識別し、クライアントに送信する必要があるコンテンツを定義できるようにするサーバにユーザファブリックを送信する。 Media-Queryを使用して、ブラウザはその機能に基づいてページのスタイルを選択します。次の例は、スマートフォン用に設計されたスタイルテーブルの選択を示しています。。そしてこの要求によって、デスクトップコンピュータのスタイルの表が決まります。 .

Internet Explorer V6。

この書き込み時に、Internet Explorer V6は一般的なブラウザ市場の約20~30％を占有していましたが、IE V6機能を考慮することはこの記事のタスクに含まれていません。

仕様の予備バージョンでメディアクエリに関する詳細情報を見つけることができます（セクションを参照）。

メディアクエリを使用してネットワークサーバーのステータスを表示するアプリケーションを開発する例を考えてみましょう。

ネットワーク監視プログラム

このアプリケーションのタスクは、複数のサーバーの動作を監視することです。独立したソフトウェア開発者は、複数のサーバー上で複数のアプリケーションをサポートすることが多い。いつでも発達している場合は、さまざまな種類のサーバーとさまざまな種類のアプリケーションに絶対に遭遇しました。これは、必要なすべてのアプリケーションの作業を追跡するために単一のツールを使用できない場合にこの状況が非常に可能であることを意味します。この場合、それは理にかなっているモバイルアプリネットワーク監視（NetMon）。アプリケーションは、すべての必要な機能を提供しながら、モバイルデバイスにアクセスするのに十分に柔軟で便利です。

NetMonアプリケーションには、その作業を追跡しなければならないサーバーのリストが含まれています。サーバーごとに、鍵パフォーマンスインジケーター（KPI）が収集されます。主要なパフォーマンスインジケータ - メインツール。長年にわたってMBAの学生を使用して現在のビジネス状態を評価します。 Webアプリケーションをホスティングする観点からは、次のインジケータをKPIとして使用できます。

過去期間にわたる取引数
- 命令
- カタログリクエスト
- 電子メールメッセージ
- ページビュー数
最後のトランザクションから経過した時間
- 注文
- 電子データを交換します
- ビジネスパートナーからのメッセージ
- FTPを介してベンダーからファイルをダウンロードしてください
データベースが利用可能です
最後のバックアップ日
平均注文金額（ドル）
ボリュームフリースペースディスク上
最後の時間、日、月の帯域幅

上記の指標と他の同様の操作パラメータを使用すると、特定のシステムまたはアプリケーションのステータスを推定できます。それで、たとえば、ホリデーシーズンの間に、私たちのサイトのいくつかの命令の数を見ます。各時間での注文が安定した増加を示さない場合は、状況のより詳細な分析を実行します。

特定のアプリケーションの作業にはその条件やリソースが必要なので、NetMonは各アプリケーションの機能を考慮に入れるのに十分な柔軟性を持っていなければなりません。そのようなレベルの柔軟性を確保するために、各システムのステータスパラメータを考慮することができるデータの最も一般的な構造の定義から始めます。第2部では、このデータがどこから来たか、および更新されているのかについて詳しく説明します。これまでのところ、以下の情報に限定してください。

サイト名
サイトURL（ホームページ）
アップデートのためのURL
ステータス：OKまたはNOTの
簡単な概要：サーバのステータスの説明は、OKの値を持ち、このサーバーにとって最も深刻な問題を示すテキスト文字列を含んでいます。
要素：これは、対応するサイトの現在のKPI値を送信する必要があるペアの名前/値のセットです。

私たちのアプリケーションは、ユーザーの注意を問題のある分野に引き付けるために、CSS、jQuery、およびWebKitの機能の最大使用をナビゲートするために、結果として生じる効率指標を便利な形式に表示します。すでに述べたように、このアプリケーションの開発における主な目標は、iPhone、Androidプラットフォーム、およびSafariブラウザのデスクトップで実行する機能です。

ネットワーク監視のためのアプリケーションの開発

最新のWebページは、ページの組織構造と内容を定義する宣言形式で作成する必要があります。ページの位置付けとフォーマットは、カスケードテーブルを使用して実行されます。スタイルCSS。そして、ほとんどの場合、JavaScriptを使用しています。実際、JavaScriptライブラリは、今日の使用が例外よりもむしろルールであることが非常に一般的になりました。この記事で検討されている付録では、人気のJavaScript jQueryライブラリを使用します。私たちのアプリケーションはiPhone、Androidプラットフォーム、およびデスクトップ上で実行されます。これにより同じHTMLコードが使用され、必要な違いはすべてスタイルで実装されます。ここでは、意識的にアプリケーションの魅力的な外観を発症するために重要な努力を際立たせなかったことに注意すべきです。さらに、キャスターは、スタイルシートの組織への読者の追加の注意を引き付けるために、異なる色で互いに調和していない背景として意識的に選択されました。第2部では、HTMLコードがリスト1に表示されているように見え、アプリケーションの外観をわずかに向上させます。

リスト1. HTMLDアプリケーション

私のネットワークリソース

私のユーザーエージェント

提案されたHTMLコードを迅速に見ることで、次の主な機能を割り当てることができます。

このコードは、1つのjQueryライブラリファイルと私たちのアプリケーションのための1つの補助ファイルの2つのJavaScriptファイルを使用します。
ビューポートメタタグを使用してコード内の表示可能なコンテンツを拡大縮小するには。
メインスタイルシートはnetmon.cssファイルによって決まります。
補助スタイルシートを決定するには、Usergentパラメータを使用します。その値に応じて、スタイルシートはiPhone、Android、またはデスクトップブラウザのためにロードされます。
ページをロードするプロセスでは、netmon.jsファイルに定義されているjQueryおよび補助関数を使用してデータを表示します。
メインページコードでは、いくつかのDIVタグが使用されます。
最後に、コード内では、ユーザブレント文字列を示すページへのリンクがあります。このリンクはアプリケーションのアプリケーションとは関係ありませんが、デモ専用で使用されています。

実際には、アプリケーションの主な操作を決定するスタイルシートとnetmon.jsファイルの詳細な分析を進める前に、現在の状態で私たちのアプリケーションを見てみましょう。もう一度、3つの異なるスタイルシートを使用しています。これは、3つのサポートされているプラ\u200b\u200bットフォームのそれぞれに対して1つです。アプリケーション開発プロセスがより視覚的になるように、各テーブルはその背景色を決定します。図9では、デスクトップSafari Desktopブラウザで開かれており、青色の背景があります。

図11は、iPhoneブラウザウィンドウ（背景色 - 緑）のアプリケーションの外観を示しています。

netmon.jsファイルに格納されているスタイルのメインテーブルをリスト2に示します。

リスト2.基本スタイルシート

Body（Color：＃888888; Font-Family：Helvetica：Font-Size：14px; PADDING：0;）。 -width：1px; -webkit-border-top-left-lever-radius：8px; -webkit-bord-top-radius：8px; -webkit-border-boott-ladius：8px; -webkit-boott radius：8px;）.ok（カラー：＃000000;）.odd（カラー：＃FF0000;）.odd（バックグラウンド - イメージ：-webkit-gradient（リニア、左上、右下、から（#ccc ）、（＃999））。）。）;）。）。）。）。serverentry a（float：float：float：float：float：＃999）。）.even（＃999））。）。serverentry a（float：右：色：#fffffff; .serverItems（color：＃000;）#Header H1（マージン：0;パディング：0; text-align：center; color：＃000;）

プラットフォームごとにスタイルテーブルを使用すると、次のタスクを実装できます。

ページの色の決定を変更してください。これにより、最初に、スタイルシートの役割を明確に実証し、次に、ユーザーがユーザーがユーザーに付いているスタイルシートを選択するのが簡単なことを示すことができます。
モバイルおよびデスクトッププラットフォームのさまざまなフォントサイズを設定します。
適切なWebKit関数を確認してください。ブラウザがWebKitサポートなしで動作するために使用された場合、Firefoxなどのブラウザが使用されている場合は必須です。

リスト3は、コードiphone.cssファイルを示しています。

リスト3. iPhone.cssファイル

BODY（背景色：＃00FF00;）.serverEntry（-webkit-border-top-ladius：8px; -webkit-border-top-右半径：8px; -webkit-bord-bott-ladius： 8px; -webkit-bortm-bottom-右半径：8px;）.NAME（フォントサイズ：2em;）.SUMMARY（フォントサイズ：1.5em;）.serverEntry A（フォントサイズ：1.5em;）

見ているように、緑色はボディタグの背景色として使用され（＃00FF00）、モバイルデバイスの画面からのより便利な読み取りのためにフォントサイズが設定されます。最後に、サーバーのリストと各サーバーを出力する関数（リスト4で使用する）を定義するnetmon.jsファイルを見てみましょう。簡潔さのファイルコードの一部が逃されていますが、その全文はセクションで利用可能です。

リスト4. netmon.jsファイル

var netmon \u003d（initialize：function（）（）、リソース： "" name： "msiservices.com"、homeurl： "http://msiservices.com"、pingurl： "http://msisiservices.com/netmon.php" 、ステータス： "OK"、概要： "OK"、項目：[名前： "diskspace"、value： "22.13 GB"）、（名前： "データベースアップ？"、値： "yes"）））（名前： "Server 2"、homeurl： "http：// someurl"、pingurl： "http：//someurl/netmon.jsp"、ステータス： "OK"、概要： "OK"、exite：[名前： "diskspace"、値： "100.8 gb"）、（名前： "データベースアップ？"、値： "yes"）]）、// bloovityの追加のエントリをクリッピングしました。render：function（index、itm）（var ret \u003d "を試してください。 RET + \u003d "

"; ret + \u003d" "+ itm.name +" 公演。
";（ITM.Status！\u003d" OK "）の場合（ret + \u003d" - "+ ITM.SUMMARY +"
";）RET + \u003d"

"; jQuery.each（ITM.Items、function（j、itemdetail）（RET + \u003d"\u003e "+ itemdetail.name +" \u003d "+ itemdetail.value +"
「;））; ret + \u003d "

"; ret + \u003d"

「; Ret Ret;）キャッチ（E）

エラーレンダリング項目["+ ITM.NAME +"] "+ E +"

"; } } };

サーバーのステータスバーがOKと等しくない場合、CSSファイルのクラス定義からわかるように、対応するサーバーレコードが赤で表示されます。さらに、サーバーのステータスチェックにいくつかの問題が発生した場合（ステータスはOKと等しくない）、さらに出力簡単な説明問題図9~図11は、サーバ4が空きディスク容量を欠いていることを示している。このサーバーの文字列をクリックすると、詳細メッセージが画面に表示されます（図12を参照）。

リンクをクリックすると 公演。 サーバー名の右側にあるこのサーバーのホームページが開きます。そのようなリンクの存在は2つの理由で非常に便利です。まず、各サーバーのURLを記憶する必要がある不快な必要性から和らげ、次に、このURLをさらに不快な必要性から節約します。モバイルデバイスのキーボード（最も快適でも）。

そのため、モバイルデバイスでNetMonを正常に起動することができれば、サーバーサポートのタスクは問題を引き起こすべきではありません。

結論

この記事では、WebKitテクノロジを使用してiPhoneおよびAndroid用のWebアプリケーションの開発の原則を紹介します。第2部では、AJAX呼び出しを使用してデータ更新機能を追加して、アプリケーションの機能を拡大します。

私たちの多く、開発者、 ウェブキット - ブラックボックス。私たちはIT HTML、CSS、JS、および束のイメージを投げて、どういうわけか...魔法のように見えるWebページをお知らせします。
しかし実際には好きです私の同僚Ilya Grigoricを言います :

ウェブキット。 ではありません ブラックボックス。これは白い箱です。そして白いだけでなく、また 開いた ボックス。

それで、いくつかのことで見つけようとしましょう。

WebKitとは何ですか？
ウェブキットは何ですか？
WebKitはWebKitブラウザをどのように使用しますか？
WebKit-Sが同じではないのはなぜですか？

今、特にオペラがウェブキットに引っ越したニュースの後、私たちはたくさんのウェブキットブラウザに囲まれています、そして、彼らがユナイテッドであると言うのは非常に難しいです。以下では、この質問に少し光を当てることを試みることを願っています。その結果、ブラウザ間の区別、右のトレーサーへのバグを送信し、クロスブラウザの開発をより効率的に調整することができます。

標準のWebブラウザコンポーネント

最新のブラウザのいくつかのコンポーネントをリストしましょう。

解析（HTML、XML、CSS、JavaScript分析）
レイアウト）
テキストとグラフィックをレンダリングする
画像の復号化
GPUとの対話
ネットワークへのアクセス
ハードウェアアクセラレーション

どれがすべてのWebkitブラウザに共通していますか？ 大きく、最初の2つだけです。

残りのコンポーネント各Webkit "Port"はそれ自身の方法で実装されています。それが何を意味するのか取り扱いましょう。

ウェブキットポート

多くのWebKitの「ポート」があり、Aria Hidatyat、WebKitハッカー、およびそれらを提供しています。 Senchaのディレクターこれについて伝えてください：

WebKitの最も人気のある関連協会は、通常、Mac OS X（Firstおよび元のWebKitライブラリ）で実行されているAppleのWebKit-Aのビューです。推測できるように、様々なネイティブMac OS Xライブラリを使用して様々なインターフェイスが実装されており、主にCoreFoundationコンポーネントに焦点を当てています。たとえば、カラーフラットボタンを定義した場合、特別な回路半径で、WebKitはこのボタンをどこで描画するかを知っています。同時に、CoreGraphicsの肩に寝て寝るボタンの最終的な図面が（ユーザーモニタのピクセルの形）。

上記のように、使用されるCoregraphicsは各ポートWebkitに固有のものです。 MAC-A用のChromeは、例えばスキアを使用します。

ある時点で、WebKitはさまざまなプラットフォーム、デスクトップとモバイルの両方に「移植されました」でした。このバリエーションは一般的に "WebKit Port"と呼ばれます。 Safari Windowsの場合、Appleは独立してWindowsを使用して（制限された実装で）CoreFoundationライブラリを使用してWindowsで実行されるように移植されました。

... Windowsの下のサファリが今死んでいるという事実にもかかわらず。

さらに、他の多くの「ポート」もありました（全リストを参照）。 Googleは彼のクロムポートをサポートするために作成しました。 GTK +に基づくWebKitgtkもあります。 Nokia（そして今The TrollTech、Twisted）は、Qtwebkitモジュールとして人気があるWebKit Qtポートをサポートしています。

いくつかのポートWebkit.

サファリ。
- Windowsの下のOS XとSafariの下のSafari 2つの異なるポート
- WebKit Night AssegrangはSafariに使用されているMac "Port"のソースコードの組み立てです。
モバイルサファリ。
- プライベートブランチで開発されましたが、後で開かれました。
- IOSの下のChrome（AppleのWebViewを使用します。違いについて少し後で）
クロム（クロム）
- Androidの下でChrome（直接 "ポート" Chromiumを使用）
- Chromiumはブラウザの基礎です：Yandex、Sogou、そしてすぐにオペラ。
Androidブラウザ
- リリース時に利用可能な最新のWebKitソースコードを使用します。
さらに多くのポート：Amazon Silk、Dolphin、BlackBerry、Qtwebkit、webkitgtk +、EFLポート（Tizen）、WXWebKit、Webkitwincinceなど

さまざまなポートがさまざまなタスクに集中できます。 MACポートの焦点 - ブラウザとオペレーティングシステムの間の分離、およびエンジンのレンダリングをネイティブアプリケーションに埋め込むためのBindigs OBJ-CおよびC ++の提供。フォーカスクロムポートはブラウザに完全にあります。 Qtwebkitは、レンダリングエンジンとして、そのクロスプラットフォームアプリケーションアーキテクチャと一緒に使用するポートを提供しています。

すべてのWebkitブラウザで一般的なもの

まず、すべてのWebKitブラウザで使用されている一般的な機能を見てみましょう。

あなたはそれが面白いことを知っています、私はこの段落を書くためのいくつかの試みをしました。そしてChromeチームのメンバーがあなたが見るように私を修正したたびに...

それで、最初に、WebkitはHTMLを等しく分解します。 まあ、Chromiumが現時点で唯一のポートであることを除いて、HTML構文解析のサポートが有効になっています。
...良いですが、HTMLを解析した後、DOMツリーは等しく設計されています。 まあ、実際には、シャドウDOMはクロムポートのみに含まれています。つまり、DOM-Aの構造は異なります。カスタム要素にも。
...まあ、WebKitは皆さんのウィンドウと文書オブジェクトを等しく作成します。 プロパティとそれらが提供する変換は、機能スイッチの使用（機能フラグ）によって異なりますが、真です。
... CSSを同じに解析する。 CSSの食事とCSSOMへの変換はかなり標準です。 ええ、Chromeは、Appleと他のブラウザが古くの-khtmlと-apple -appのプレフィックスをサポートしているときにのみ-webkitの接頭辞をサポートしますが。
...レイアウト...位置決め？バターとパンのようなものです。どこでも同じ、権利は？まあ、もう！ サブピクセルレイアウトと飽和ダンプ演算はWebKitの一部ですが、ポートとポートとは異なります。
素晴らしい。

だから、それは困難です。

さて、Webkitの世界で一般的なものを要約しよう...

各WebKitポートに共通のものがあります。

DOM、ウィンドウ、文書
多かれ少なかれ
cssom.
コラボレーションCSS、プロパティ/ value
製造業者の接頭辞の違い
HTML解析と建物ドーム
同様に、Webコンポーネントを忘れた場合。
レイアウトとポジショニング
Flexbox、Floats、ブロックFormating Context ...すべて合計
ユーザーインターフェースツール、および開発者ツール、Type Chrome DevToolsそれはWebKitインスペクタです。
昨年4月から、Safariは独自のSafari Inspector、Non-Webkitを閉じて使用しています。
Contenteditable、PushState、ファイルAPI、ほとんどのSVG、数学CSS変換、WebオーディオAPI、LocalStorageなどの機能
実装は異なる場合があります。各ポートはそれ自身のストレージシステムをローカルストレージに使用でき、WebオーディオAPIには異なるオーディオAPIを使用できます。

それは完全にはっきりされないので、いくつかの違いを見てみましょう。

これでWebKitポートには共有されていません。

GPUに接続されています
- 3D変換
- webgl。
- ビデオを復号化します
スクリーン上の2Dを採用しています
- スムージングテクノロジー
- SVGとCSSグラデーションのレンダリング
テキストと転送をレンダリングする
ネットワーク技術（SPDY、事前レンダリング、WebSocket輸送）
JavaScriptエンジン
- JavaScriptCoreエンジンはWebKitリポジトリにあります。しかし、Webkitに、そして彼のために、そしてV8のためのバインディングがあります。
フォームの要素のレンダリング
タグビデオとオーディオおよびサポートコーデックの動作
画像の復号化
ナビゲーションバック/フォワード
- パートプッシュステート（）
厳密なトランスポートセキュリティや公開キーピンなどのSSL機能

そのうちの1つを見てみましょう。 2Dグラフィック ポートによって異なり、画面上でレンダリングするためのまったく異なるライブラリを使用します。

または詳細に入った場合は、新しく追加された関数：css.supports（）がすべてのポートに対して有効になっていました。これは、CSS3 CSS3条件付き機能）が含まれているWINとWincairoを除いて。

今、私たちはテクニカルサイトにあります... PEDTICになる時間。上記でも完全に正しいわけではありません。実際、それはWebCoreです。一般的なコンポーネントです。 WebCoreは、レイアウト、レンダリング、およびHTMLとSVGのDOMライブラリ、主に人々がWebKitと言うときに考えるものです。実際、「WebKit」は技術的にはWebCoreと「ポート」の間のバインディング層ですが、通常の会話ではこの違いは主に重要ではありません。

ダイアグラムは役に立ちます。

WebKitコンポーネントの多くは切り替え可能です（灰色で表示）。

たとえば、JavaScript WebKit-Aエンジン、JavaScriptCoreは、WebKitのデフォルトエンジンです。（当初、それは日々からのKJS（KDEから）に基づいています。WebkitがKHTMLブランチとして始まったとき、ChromiumポートはV8エンジンに切り替わり、一意のDOMバインディングを使用します。

テキストのフォントとレンダリングは、プラットフォームの非常に大きな部分です。 WebKit：FastとComplexのテキストには2つの別々のパスがあります。どちらもプラットフォームに固有のサポート（ポート側で実装）を必要としますが、複合がプラットフォームレベルにレンダリングする文字列がプラットフォームレベルに描画され、単に「これを描画する」と言えるのは、Redescent Glyph（プラットフォーム用のWebkitキャッシュ）を知っている必要があります。、お願いします。"

「ウェブキットはサンドイッチのようなものです。他の事項では、クロムの場合、それはそれより多くのものです。 Web技術のおいしいタコス。
Dmitri Glazkov、Chrome Webkit Hacker。 Webコンポーネントのチャンピオン、およびシャドウDOM。

これで、レビューを拡張し、いくつかのポートといくつかのサブシステムを見てみましょう。以下は、5つのWebKitポートで、一般的なコンポーネントにもかかわらず、ツールキットがそれらのそれぞれに対してどのように異なるかに注意を払っています。

	Chrome（OS X）	Safari（OS X）	Qtwebkit。	Androidブラウザ。	iOS用クローム。
レンダリング。	スキア	コアグラフィック	qtgui。	Androidスタック/スキア	コアグラフィック
ネットワーキング。	Chromiumネットワークスタック	cfnetwork。	QTNetwork。	クロムのネットワークスタックのフォーク	クロムスタック
フォント	Skiaを介したCoreText.	cor cor	QT内部	Androidスタック	cor cor
JavaScript。	v8。	JavaScriptCore	JSC（V8はQTの他の場所で使用されています）	v8。	JavaScriptCore（JITITONE）*

* iOSのためのChromeについての脚注。あなたがおそらく知っているように彼はUiwebviewを使います。 UIWebViewの可能性に従って、これはエンジンの同じレンダリング、およびモバイルSafari、JavaScriptCore（v8）およびシングルスレッドモデルのみを使用できることを意味します。現在、ネットワーク、同期インフラストラクチャのブックマーク、Omnibox、メトリック、障害レポート（クラッシュ報告）を操作するためのサブシステムなど、Chromiumからいくつかのコードが借りられます。（また、JavaScriptは非常にめったにモバイルデバイス上のボトルネックはめったにありません。

特定のブラウザのサイトにプロパティが表示されます。たとえば、「」 -moz-border-newl-colors.「要素の左フレームの色を示す Firefox。なぜあなたがこれをしてはいけないのか、そして私が唯一の訴訟のみを示すだろうか疑問に思いましょう。 -MOZ、-MS、-WebKitおよび類似体 あなたは使うことができます。

私はこれらすべてのプロパティが標準に含まれていないと特に言えません CSSしたがって無効です。その結果、それらの実装はいつでも変更できます（ブラウザの開発者を検討する場合は、標準内のこれらのプロパティの説明があるため）。 CSS その結果、あなたのサイトは非常に台無しにすることができます。私は彼らが一般的なコードを台無しにする理由を特に説明しません。これはとても理解できます。

これらのプロパティが使用する理由を理解することをお勧めします。そしてここでの理由は2つです。

クロスガラスはありません。私は、クロスブラウザの問題がすでに過去にあると言うことができます。品質の低いレイアウトの問題だけが残った。最新のブラウザはすべてすべてを扱うことができます。最小誤解（例えば、 オペラの入力における境界半径全てのブラウザがページなしで表示されるのが良い場合、タスクへの代替的なアプローチによって容易に解決される。 ハコ州「。そしてこの問題は「左」のプロパティを使用する理由ではありません。
古いブラウザのサポート。そして指定可能な もっと" 95% 観客は最新のブラウザにあります。残り 5% それを楽しんでいることは何ですか。コードを入れて、あなたは強さをよく見ます 1% ブラウザしたがって、それはブラウザを変更する価値があるというメッセージをより良くまたは引き出すことが今や（ jQuery。 プラグインがあります jReject。それはどちらかです）、または無視するだけです。また、これらの中でも強く疑います 5% 多くの人々が大部分がある可能性が高いです。クライアントについて恣意的な見出しを与えるボットがある。そして古いボットは同じことを与えることができます IE6。ここでも同じことに、古いブラウザのサイトをテストし続ける人が含まれます。

したがって、使い方 CSS3。、すべての可能性がすでにそこにあり、それはただ見ることができます 95% 観客

しかし、私は財産のときに言うことを約束しました -MOZ、-MS、-WebKitなど、に使える。あなたがやりたい場合は、少し異なるデザインが必要です別のブラウザ。そして指定可能な little「そして、あなたがすべてを完全に変更する必要があるならば、それはより簡単です JavaScript。 ブラウザを決定し、別々のスタイルファイルを接続します。率直に言って、私はそのような仕事に出かけませんでしたが、これはどういうわけかどうかを正当化するために私に起こった唯一のものです lyland."プロパティ CSS.

Safariでは、Appleは、ブラウザがサイト上のさまざまなコンテンツをより適切に表示できるようにする必要があるいくつかの新機能、およびその作業をスピードアップしました。単純に使用できるようにします - 設定\u003e Safari\u003eアドオン\u003e実験機能にアクセスする必要があります。

もちろん、それはすぐに理解できず、すべてのアイテムが責任があります。より詳細にそれらを分析します。

一定のプロパティ - 異なる設定でWebページの設定を変更することはできません。つまり、Webサイトを変更するか、ダウンロード後のそのプロパティを変更することで防止されます。
CSS表示：内容 - 要素フィールドの生成を管理できます。たとえば、それを使用すると、「松葉杖」なしでサイト上の異なる要素間で統一された区分を作ることができます。
CSSスプリングアニメーション - もちろん、春には関係ありませんが、物理学の観点からサイト上の要素のアニメーションを作ることができます。
リンクプリロード - いいえ、プリロードリンクとの関係はありません。この機能は主に、構文解析後に事前にロードされたリソースの防止を防ぐように設計されています。
従来のWebRTC APIを削除します- 一般に、古いWebRTC（ブラウザとポイントツーポイント添付ファイルの間でデータを送信する機能）も明確であります。例 - VKアプリケーションでリンクを開く - WebRTCテクノロジを使用したSafariのコピーで開きます。）。
安全なコンテキストAPI - その機能、そのエッセンス - デバイス上のデータが安全なプロトコル（HTTPS）に配信され、侵入者によって傍受されていないことを確認してください。
サブリソースインテリティ - セキュリティのための別の機能。その本質 - リソースの所有者はその暗号化ハッシュを示すことができます。これは、デバイス自体のリソースをロードした後に計算されたハッシュでチェックされます。
ビューポートフィット - サイトがデバイス画面の物理的なサイズのグラフィック要素のサイズを変更できるようにします（つまり、このサイトがこれをサポートしている場合は、その要素のエッジに対して検索されません）。
Webアニメーション。 - ここではすべてが明らかです。サイトにアニメーションを含めることができます。切断されると、生産性がわかります。
webgpu。 - サイトの情報を処理するためにグラフィックプロセッサを使用できます。飽和スケジュールサイトでブラウザの作業を加速することはできますが、デバイスの加熱を増やし、バッテリ寿命を軽減します。
非同期フレームスクロール - スクロール、表示更新頻度の影響を受けない。明らかに、120人のFPSを与えることができないサイトの遅れを回避するために、120 Hzのスクリーンからの新しいデバイスに必要です。古い60 Hz画面で、違いは目立ちません。

すぐに予約をする - いくつかの正確な説明アップル機能私は提供しませんでした、そして私は他のブラウザから説明を受けました、それでそれは特にSafariにとってはかなり近づかないかもしれません。

この記事を書くときは、IOSのSafariが最も難しいブラウザでした。第7章で述べたように、バージョン2.0以降では、IOSは、ハードウェアアクセラレートアニメーション、遷移、さらには3D効果を使用できるように、大（および奇妙な）CSS拡張グループをサポートしています。これらの拡張機能の一部は、オペレーティングシステムのバージョンによっては、AndroidブラウザとWebOSブラウザでも機能します。

WebKit関数

パラメータ知覚関数としての多くのCSSプロパティこれらの機能はハードウェアアクセラレーションWebKit展開です。

iOSのグラデーション関数に関連する関数は正式にサポートされていません（Safariリファレンスライブラリーによると）。それにもかかわらず、彼らはOS 3.0以前のデバイスと協力して、シンプルな背景を使用します。

表9.7に、iPhoneで利用可能な機能（他のものがありますが、デスクトップサファリでのみ機能します）を示します。これらの機能のいくつかは、例えば、Scale and Rotate - Androidブラウザでも使用できます。

テーブル。 9.7。 Table CSSのCSSの特徴は、Safariで入手可能です

関数	description
立方体ビア（P1X、P1Y、P2X、P2Y）	タイミング関数のベジエ曲線を定義します。
マトリックス（M11、M12、M21、M22、TX、TY）	2回の変位を持つ6つの値の変換行列を決定します。
matrix3D（M00、M01、M02、M03、M10、M11、M11、M13、M20、M21、M22、M23、M21、M22、M23、M30、M31、M31、M33）	変換3Dマトリックス4×4を決定します。
遠近感（深さ）	キューバピラミッド上のカードを見ると、その基礎は視聴者から遠いです。
回転（角度）	要素座標の原点の周りに2D回転を決定します。
rotate3D（X、Y、Z、角度）	回転ベクトル方向と3D回転を決定します。
rotateX（角度）	軸Xの周りの回転時計回りを示します。
回転（角度）	Y軸の周りの回転時計回りを示します。
rotatez（角度）	Z軸周りの回転時計回りを示します。
スケール（Scalex、）	2Dスケーリング操作を実行します。
scale3D（Scalex、Scaly、Scalez）	3Dスケーリング操作を実行します。
scalex（value）	X軸に沿ったスケーリング
スケジュリー（値）	y軸に沿ったスケーリング。
スケール（値）	Z軸に沿ったスケーリング。
スキュー（角度）	X軸に沿って傾斜した変換を実行する
スキュー（角度）	y軸に沿って傾斜した変換を実行する。
翻訳（deltax、）	ベクトル2Dオフセットを指定します。
translate3D（Deltax、Deltay、Deltaz）	3Dオフセットベクトルを指定します。
translatex（value）	軸Xの周りのオフセット。
翻訳（value）	y軸の周りに表示されます。
translatez（value）	Z軸の周囲に表示されます。
（色）から	シーケンス内の初期色を決定します。
色）	シーケンス内の最終色を決定します。
カラーストップ（STOP_PERCENTAGE、COLOR）	stop_percentage値のシーケンスで使用される中間色を指定します。
-WebKit-Gradient（Linear、Start_Function、End_Function）	開始点、終点、および追加の中間点を使用して線形勾配を指定します。 CSSの任意のイメージの代わりに使用できます。 iOS 3.0から入手可能。
-webkit-gradient（ラジアル、INNER_CENTER、INNER_RADIUS、OUTER_CENTER、OUTER_RADIUS、）	カラーストップ機能の一連のカラーストップ機能によって決定される花を持つ中央（内部）点と別の点（外部）のラジアル勾配を決定します。 iOS 3.0から入手可能。

CSS関数は新しいCSS機能ではありません。それらは任意のブラウザで利用可能です。当然のことながら、おそらくあなたはすでにいくつかの標準機能（url_string）またはRGBA（赤、緑、青、アルファ） - 色を決定するために既に慣れています。

勾配

IOS 3.0以降の起動Safariは、イメージを使用した場所（背景のために）どのような状況の関数としてのCSSグラデーションの拡張機能をサポートしています。バックグラウンドでは、URL関数の代わりに、線形の使用を決定するために、-WebKit-Gradient関数を使用できます。ラジアルグラデーション背景として。この方法では、最小コードを使用することができ、ヘッドライン、コンテナ、セルのための本当に良い背景をします。にとって androidブラウザまったく同じコードを適用してください。

グラデーションの定義のいくつかの例：

/ *太陽の右上の角度* /体からの影響（背景： - ウェブキット勾配（ラジアル、50％~50,0,50％0,300、（＃676767）、（ブラック）） ;）本体（背景： - ウェブキット勾配（ラジアル、100％~10,50,70％0,200、（黄色）、（黄色）、（白））＃/ *単純な線形グラデーション* / LI（バックグラウンド）： - ウェブキットグラデーション（線形、0％0％、0％100％、（＃369）、（＃369）、（＃3FF））＃369;）/ * SIMPLE 3D効果* / H1（バックグラウンド： - ウェブキットグラデーション（線形、0％0％、0％100％、（＃369）、（＃369）、色停止（0.5、＃58B））;）;）;

位置値の場合は、興味、絶対値（ピクセルなし）または上、下、左右の定数を使用できます。たとえば、CSS関数の2番目のパラメータとして、右上、0％0％を使用できます。図9.1にそのようなオプションがブラウザを調べる方法を示しています。

図。 9.1。 CSSのみを使用すると、iPhone、iPod Touch、iPad、およびAndroidデータベースにさまざまなグラデーションエフェクトを作成できます。

Version 6.0以降のモバイルInternet Explorerは、フィルタスタイルでCSS拡張子を使用したフィルタと遷移をサポートしています。他の効果を適用することができます。

反射効果

反射効果や鏡の効果は、Web 2.0プロジェクトで最も頻繁に使用される効果の1つです。これらの効果は、画像を含む任意のコンテンツに使用できます。しかし、私たちが小さなスクリーンを持つモバイルデバイスのために開発していることを忘れないでください。

元の要素の反射は、要素のコンテンツのレイアウトまたはソースブロックのサイズを変更しません。これはコンテナオーバーフローの一部です。

SafariでIOSで反射の効果を抑えるには、次の構文を持つプロパティを使用します。

WebKit-Box-Reflect：方向オフセット ;

方向は、下、左または右の上にあります。オフセット - ソース要素からの距離（pxまたは％）の反射は表示されるべきです。追加 - 通常、画像を反映するためのマスクとして機能するグラデーション関数です。マスクの画像が指定されていない場合は、通常のミラーが使用されます。

Web 2.0サイトで通常使用されている反射効果のタイプは、次の属性を示しています。

WebKit-Box-Reflect：3px -webkit-勾配（線形、左上、左下、（透明）、色停止（0.5、透明）、（白））。

画像のマスク

IOS 3.0から始めて、私たちは典型的なデザイナー機能にアクセスできます。これは、長年のWeb開発には欠けていました。画像マスク。画像マスク私たちは、正しいまたは誤ったトリミングを適用するために、またはアルファマスク（またはグラデーション関数）が任意の画像に使用されている場合（たとえば、ファジィ境界など）。マスクの特性はバックグラウンド特性と似ています。マスクを使用するには、ショートカットの省略形プロパティ、および各パラメータを決定するための特定のプロパティがあります。

オプションのパラメータを使用したショートカットバージョンの構文：

WebKitマスク：添付ファイル、クリップ、原点、イメージ、繰り返し、複合、ボックスイメージ。

もちろん、私たちはすべてのプロパティ（など）に別々のアクセス権を持っています。多くの機会がありますが、通常、画像（アルファまたはNOT、PNGまたはSVG）や勾配の機能が画像値として使用されます。例：

遷移

遷移は、CSS値がプロパティを変更したときに自分自身をマニクスする自動アニメーションです。このプロパティは、アニメーションが可能な限りブラウザによって決まります（通常は位置とサイズのプロパティを参照します）。公式リストアニメーションで動作できるプロパティは、一般に、その位置はそのようなものです。数値またはカラー値を持つ任意のプロパティを遷移を使用してアニメーション化できます。離散性のあるプロパティなどの例外がいくつかあります。

これらのオフセットはCSSによってのみ実装されていることを忘れないでください。アニメーションを作成するには、JavaScriptやその他の同様の方法を使用しません。多分それはあなたにとって奇妙に思えるでしょう、しかしそれは単純で、同時に強力な方法です。

遷移フレームワークは、Safariブラウザ（iOS 2.0から始まる）とAndroidで、さらに、これらのデバイスでは上記の遷移を処理するときにパフォーマンスを実行できます。

移行を実装するには、次のことを行わなければなりません。

アニメーション化したい要素（-th）の遷移プロパティ（期間、遅延、同期機能を使用）を決定します。
JavaScriptを使用してアニメーションの要素のプロパティの値を変更したり、クラスを適用したり、アイテムから完全に削除したりしてください。
アニメーションが機能することを確認してください。

TRUE、それはちょうどいいですか？今やりましょう。

アニメのプロパティ

アニメーションは、次の構文を持つプロパティを使用して定義できます。

WebKit-Transhion：プロパティ期間Timing_Function Delay [、...];

表9.8に指定されている特定のプロパティを使用することもできます。

テーブル。 9.8。 WebKitのテーブルプロパティ遷移

財産	description
	アニメーションにどのプロパティまたはプロパティを使用するかを決定します。カンマまたは一定値で区切られた値のリストを使用できます。
	遷移の期間を決定します。値は0（アニメーションなし）、または秒単位の正の値（単位として使用されています）であり得る。異なる時間を設定したいプロパティごとに - -webkit-transition-propertyプロパティの値と同じ順序で分割値のリストを使用できます。

	計算に使用される機能を決定します中間値プロパティの初期値と終了値の間。 CSS Cubic-Bezier関数または次の定数のいずれかを使用できます。

次のコードを使用すると、外観と消失のアニメーションが実装されています

フェードサンプル。

フェージング。

同じ遷移を使用して3D変位のサイズ変更、移動、色変更、さらには3D変位でも使用できます。

遷移の完了

遷移の完了は、他のDOMイベントと同じ方法でJavaScript AddeVentListenerを使用して実装できます。アニメーションが本当に終わったことを確認すると、次の移行やその他の処置の開始を開始できます。これを行うには、WebKitTransitedEndイベントをキャッチする必要があります。次のコードを使用してできることを確認してください。

Box.AdDeventListener（ "webkittransitionend"、関数（イベント）（警告（ "完了遷移"）））。

アニメーション

移行は、iPhoneとAndroidデバイスでアニメーションを実装するのに最適なものと最も簡単な方法です。キーフレームレベルでアニメーションを正確に制御する必要がある場合は、AnimationのCSSフレームワークを使用できます。正直に言うと、私はすでにCSS、非規模で「マーキング以外の」言語を通してのみ処理のためのものであると思います。しかし、それはうまく機能します。

WebKitでは、アニメーションはプロパティを使用して行われ、構文は次のとおりです。

WebKit-Animation：名前期間timing_function遅延iteration_countの方向

あなたがすでに、表9.9にリストされている各可能価値について、特別なプロパティがあるとすでに推測されます。

テーブル。 9.9。 WebKitのアニメーションテーブル

財産	description
	キーフレームで使用されるアニメーションの名前を定義します。
	アニメーションの期間（秒またはミリ秒）を決定します。
	特定のプロパティの初期値と終了値の間の中間値を計算するために使用される機能を決定します。 CSS Cubic-Bezier（）関数または次のいずれかの定数を使用できます。
	プロパティが変更された瞬間から始まるアニメーション遅延を決定します。秒またはMIRISECONDSで決定できます。デフォルト値は0です。負の値が使用されている場合 - アニメーションはすぐに始まりますが、ある種のアニメーションフラグメントはすでに失われ、したがってスキップされます。
	アニメーションが繰り返される回数を決定します。値は1です。値は任意の整数、特別な無限定数、または任意の有効な番号です。
	アニメーションがどの方向に再生されるかを決定します。

このリストで理解したことは、アニメーションが決定される場所を正確に尋ねている必要がありますか？アニメーションオブジェクトとして機能するのは何ですか？そしてこれらの質問に答えることは、主要担当者のためのWebKit拡張機能を助けるでしょう。

オブジェクトを移動または拡張してほしい場合は、標準のCSSプロパティ（標準のCSSプロパティ）の代わりに使用することをお勧めします。

キーフレームディレクティブ

アニメーションがどのように機能するかを判断し、正確に何が起こるかを決定するには、このルールが呼び出された特別なCSSを定義する必要があります。この規則には、-webkit-animation-nameで定義されているアニメーション名が添付されています。

キーフレームディレクティブの内側には、キーフレームとしてセレクタまたはアニメーショングループが必要な方が必要です。セレクタは、パーセンテージ値とFROM定数（0％に相当）と（100％に相当）によって決まります。各セレクタで、特定のアニメーションポイントのすべてのプロパティと値を定義します。 -webkit-transition-timing-functionを使用すると、各アニメーショングループの同期を定義できます。

アニメーションが完了すると、初期値は復元されます。アニメーションを停止した後、アイテムは最後のキーフレームの値を保存しません。

たとえば、次のコードの助けを借りて、正方形の軌跡に沿って移動します。

フェードサンプル。

正方形の軌道の動き

要素の先頭に-webkit - アニメーション属性を指定した場合、アニメーションはページがロードされたときに起動します。アニメーションをクラスとして決定し、アニメーションを起動する必要があるときにこのクラスをアイテムに適用することをお勧めします。

そのため、アニメーションの開始時にクラスを使用し、最後のフレームより前のアニメーションを停止したい場合は、空の値を-webkit-animation-nameプロパティに割り当てる必要があります。

複数のオプションを使用することができます.1つのプロパティを一度に変更する1つまたは複数のプロパティを変更したり、異なるアニメーションを（異なる名前で）と同時に適用される1つのアニメーションで、それぞれが1つのプロパティのみを変更します。

アニメーションイベント

オフセットの遷移と同様に、WebKitanimationStart、WebKitanimationItemation、WebKitanimationEndイベントを追跡できます。起動すると、これらのイベントはWebKitanimationEventオブジェクトとしてパラメータとして送信されます。しかし、イベントのキーフレームの各変更についてはイベントがありません。

イベントオブジェクトには、AnimationNameとElapsedTimeの特別なプロパティがあり、その値は秒単位で指定されます。

変換

考慮したWebKit CSS拡張子の最後のグループ - 変換関数（変換）。画像、キャンバス、SVGを使用せずに視覚効果を生成するために、これらの関数を任意の要素に適用できます。変換機能は、Safari、Android、およびWebOSブラウザで動作します。

これらの機能を使用している機能は非常に簡単です：私たちは使用します CSSプロパティ CSS関数を使用すると、このセクションの前に既に起動しています。これは、回転、Scale、またはTranslate3D（Last Only Safari）などのこのセクションで既に満たしています。

CardFlipテンプレートの簡易版は次のようになります。

カードのフリップ。

♠ ♦
♣

♦ ♠
♣

コードを分析した場合は、カードを構成する2つのDIV要素が表示されます。 1つのDIVは「前面」の表面であり、もう1つは「後部」です。両面は（絶対要素として）同じ位置に配置され、後側はY軸が180度のときに始まる。

ユーザーがカードコンテナをクリックすると（表示されている前面または後部画面）、 javaScriptヘルプ CSSクラスがFlipされたCSSクラスを適用する（または適用されません）。これは、Y軸の周囲に180度を回転させます。そしてVoila！前面（前面）には常に片面のみが表示され、もう1つは自動的に隠されます。そして私はあなたが美しい平滑化されたアニメーションで起こるようにそれを取ります、残念ながらあなたは完全に評価されていません図9.3では完全に評価できません。

図。 9.3。 3Dターンでは、優れた3D効果を使用して要素の後部線を表示できます。