Ignite UI for jQuery™ は、jQuery コア、jQuery UI、HTML5 (マークアップと API)、ならびに最新のプログラミング技法を駆使したコントロールのセットで、最先端の Web アプリケーション開発をサポートする製品です。Web テクノロジーが急速に進歩しつづけているのに対して、ブラウザーのエコシステムは基盤テクノロジーに比べ進化が大変遅いのが現状です。このトピックでは、どのような形で古いブラウザーが Ignite UI for jQuery と連携して動作するか、また、どのようなアプリケーション開発を行えば新旧のブラウザーが混在する環境にも適切に対処できるようになるかについて説明します。
Ignite UI for jQuery に含まれるコントロールは、主にカスタムの jQuery ウィジェットから構成されています。これらのウィジェットには、新旧のブラウザーにおいて抜群の操作性とパフォーマンスを発揮してきたという実績があります。こうした高い能力は、大多数のコントロールがほぼすべての Web ブラウザーでサポートされる通常の HTML マークアップをレンダリングできるということに由来するものです。依存関係のある JavaScript はコントロールによってロードされ、特定のケースにおいてのみ、HTML5 JavaScript API を使用します。CSS3 スタイリングは、限られた状況においてのみ使用されます。表 1 は、Ignite UI for jQuery に含まれるコントロールのうち、どのコントロールが新しい HTML 機能や CSS3 スタイリングを使用するかを示したものです。
表 1: HTML5 マークアップ、HTML5 API、または CSS3 スタイリングを使用する Ignite UI for jQuery コントロールの数は限られています。
| コントロール | HTML5 マークアップ | HTML5 API | CSS 3 スタイリング/アニメーション | 古いブラウザーにおける動作や外観* |
|---|---|---|---|---|
| igGrid | なし | なし | グリッドの更新通信中に散発的に表示されるアニメーション。 | 古いブラウザーではアニメーションが実行されず、Internet Explorer では色のグラデーションを表示できません。 |
| igVideoPlayer | ビデオ | ビデオ | なし | igVideoPlayer コントロールは、ネイティブな VIDEO 要素の拡張で、VIDEO 要素の本文に含まれるフォールバック コンテンツをサポートするものです。 |
| igDataChart | キャンバス | キャンバス | なし | なし - チャートを描画するかどうかについては、Modernizr の判定に基づいて決定する方法を検討してください。 |
| igDoughnutChart | キャンバス | キャンバス | なし | なし - チャートを描画するかどうかについては、Modernizr の判定に基づいて決定する方法を検討してください。 |
| igFunnelChart | キャンバス | キャンバス | なし | なし - チャートを描画するかどうかについては、Modernizr の判定に基づいて決定する方法を検討してください。 |
| igPieChart | キャンバス | キャンバス | なし | なし - チャートを描画するかどうかについては、Modernizr の判定に基づいて決定する方法を検討してください。 |
| igRadialGauge | キャンバス | キャンバス | なし | なし - チャートを描画するかどうかについては、Modernizr の判定に基づいて決定する方法を検討してください。 |
| igSparkline | キャンバス | キャンバス | なし | なし - チャートを描画するかどうかについては、Modernizr の判定に基づいて決定する方法を検討してください。 |
| igMap | キャンバス | キャンバス | なし | なし - チャートを描画するかどうかについては、Modernizr の判定に基づいて決定する方法を検討してください。 |
| igRating | キャンバス | キャンバス | なし | 古いブラウザーは、CANVAS 要素と同じ動作と外観を示す一連の INPUT 要素および SPAN 要素を使用して CANVAS と同等の機能を実現します。 |
注: 古いブラウザーではアニメーションが無効にされてしまいますが、グリッドの機能がすべて実行されることに変わりはありません。
* ここでいう「古いブラウザー」とは、VIDEO 要素や CANVAS 要素、または CSS3 アニメーションに対応していないブラウザーのことを指します。
上の表にリストされているコントロールは、大多数のブラウザーでサポートされる HTML4/XHTML 規格準拠マークアップを使用します。
テクノロジーの進歩に合わせて Web ブラウザーを更新しないユーザーや、更新できないユーザーもいるため、最新のブラウザーでは期待通りに機能を実行し、古いブラウザーでは安全に動作する代替機能を提供するようなアプリケーションを開発する必要があります。
今日では、低機能ブラウザーで認識できないマークアップがあっても安全な形で処理されるようになっているため、多くの場合、Web アプリケーションで HTML 5 マークアップを使用しても問題はありません。最新式の HTML doctype() は、ページ上でその新しいマークアップや JavaScript API が使用できることを、その能力を備えたブラウザーに知らせるものです。ただし、doctype を認識できない低機能ブラウザーでは、ブラウザーの動作モードが標準モードに切り替わり、認識できないマークアップが安全に処理されるようになっているため、ページ上に不要なエラーが表示されることもありません。
ブラウザー機能の劣化および HTML doctype の詳細については、『Doctypes の真実』(Divya Manian 著) をお読みください。
これまで、多くの Web 開発者は、ブラウザーが特定の HTML バージョンに対応しているかどうかを判断するためにユーザー/エージェント判定を使用してきました。HTML5 のサポートの有無を判定することはほぼ不可能であるため、ユーザー/エージェント判定は、特に最新の Web 開発環境において多くの問題を抱えています。公的な HTML 仕様に準拠してブラウザーを開発するという点では各ブラウザー メーカーの意見は一致していますが、どの領域の仕様が実装されるかはブラウザーごとに異なる可能性があります。
特定のブラウザーにおいてアプリケーション コードが期待通りに動作するかをより確実な形で判定する方法は、機能判定を使用することです。古いブラウザーには装備されているかどうか疑わしい機能について、ひとつずつその有無を手動で判定していくという方法を採ることも、機能判定に JavaScript ライブラリを利用するという方法を採ることもできます。次のコード リストは、このブラウザーで CANVAS 要素および JavaScript API がサポートされるかどうかを手動で判定する方法を示したものです。
JavaScript の場合:
if(document.canvas && document.canvas.getContext()){
alert("Canvas is supported");
}
また、ブラウザーの機能の有無を手動で判定する際には、Modernizer を利用することもできます。Modernizer は、最新の JavaScript API を検出する JavaScript ライブラリです。このライブラリには、その他にも、堅牢な Web アプリケーションの構築に役立つ便利な機能が数多く含まれています。次のコード リストは、このブラウザーで CANVAS 要素および JavaScript API がサポートされるかどうかを手動で判定する方法を示したものです。
JavaScript の場合:
if(Modernizr.canvas){
alert("Canvas is supported");
}
Modernizer の詳細については、その Web サイト (http://modernizr.com) をお読みください。
Ignite UI for jQuery に含まれるコントロールのほとんどは、古いブラウザーでも新しいブラウザーでも期待通りに動作します。ごく限られたケースですが、コントロールが最新の HTML 機能を使用するという場合もあります。この場合は、コントロールが低機能ブラウザーに欠けている機能を補填することになります。特定のブラウザーで Web ページが期待通りに動作するかどうかは、手動またはライブラリ ベースの機能判定によって調べることができます。
オンラインで表示: GitHub