Ignite UI for jQuery コントロールのタッチ サポート

トピックの概要

目的

このトピックは、Ignite UI for jQuery コントロールがタッチ対応の環境の概要、ベスト プラクティス、特定の Ignite UI for jQuery コントロールのタッチ サポートの詳細を提供します。

このトピックの内容

このトピックは、以下のセクションで構成されます。

• 概要
  • タッチ サポートの概要
  • タッチ環境でのスクロール
  • モバイル ページのベスト プラクティス
• 特定のコントロールのタッチ サポートの詳細
  • igGrid
  • igHierarchicalGrid
  • igPopover
  • igVideoPlayer

概要

タッチ サポートの概要

すべての Ignite UI for jQuery コントロールがタッチ操作をサポートしています。タッチ操作と互換性のある動作をサポートするため、新しい機能とコンポーネントを追加することで、このサポートが可能になります。

タッチ操作対応環境で表示されたどの Ignite UI for jQuery コントロールも、デスクトップ プラットフォームとタッチ プラットフォームで同じ外観を持ち、同じ動作をします。たとえば、igGrid™ ウィジェットはタッチ デバイスの完全に新しいコントロールではありませんが、タッチ操作対応環境で使用できるタッチ操作に最適化された機能が組み込まれています。ほとんど構成が必要ないこの適応性により、アプリケーションにマルチプラットフォーム コントロールを持たせることができます。個々のコントロールに関する詳細については、「コントロールの概要」のセクションを参照してください。

注: Modernizr JavaScript ライブラリを Ignite UI for jQuery コントロールとともに使用することをお勧めします。これらのコントロールは Modernizr がなくても正常に動作しますが、ライブラリがページで使用できる場合、よりタッチしやすいモードに適応します。

タッチ環境でのスクロール

すべての Ignite UI for jQuery コントロールは、タッチ操作対応環境で動作している場合、デフォルトで並べ替えをサポートしています。並べ替え動作は、内部 igScroll コンポーネントで制御されます。

タッチ環境でスクロール動作を使用するには、ページで igScroll スクリプトを参照する必要があります。Infragistics® Loader を使用する場合、これは自動的に参照されています。Loader を使用しない場合、手動的に参照するか、igScroll を含む infragistics.core.js ファイルを参照する必要があります。

手動的に igScroll を参照する:

HTML の場合:

<script type="text/javascript" src="js/modules/infragistics.ui.scroll.js"></script>

igScroll コンポーネントを使用して、<div> のような他の HTML 要素をスクロールできるようにします。

HTML の場合:

<div data-scroll=”true”></div>

このようにして、igScroll コンポーネントは、タッチ対応のブラウザーでコンテナーをスクロールできるようにします。

モバイル ページのベスト プラクティス

Ignite UI for jQuery コントロールは、タッチ操作だけでなく、標準のデスクトップ Web ブラウザー操作にも最適化されています。stock コントロールを使用することに加えて、各コントロールで最高のパフォーマンスと応答を実現するため、以下に示すいくつかのベスト プラクティスに従ってください。

• Modernizr の使用 - 可能な限りタッチ操作が最適化されたモードでコントロールが表示されるよう、Modernizr JavaScript ライブラリを Ignite UI for jQuery コントロールと合わせて使用します。
• ビューポート メタ タグの定義 - ページのビューポート ディメンションを明示的に設定すると、ページが正しいディメンションと割合で表示されます。以下のコード リストは、ページのビューポート メタ タグを構成する方法を示しています。

HTML の場合:

<meta name="viewport" 
      content="width=device-width, 
               initial-scale=1, 
               maximum-scale=2.5, 
               minimum-scale=0.1, 
               user-scalable=yes" />

特定のコントロールのタッチ サポートの詳細

タッチ サポート コントロールの概要

以下の表は、タッチ対応の環境でコントロールの詳細を表示します。表の後に、アップデートされた各コントロールのその他の詳細が紹介されています。

igGrid

以下のリストに、タッチ機能をサポートするプロパティがあるか、タッチ操作対応環境で正常に動作するよう特殊な変更が必要な igGrid 機能についてまとめています。

• 機能セレクター
• Groupby
• 非表示
• 複数選択 - タッチ プラットフォームで複数セルを選択する可能になる特別な選択プロパティがあります。
• 複数並べ替え
• 行セレクター - タッチ プラットフォームで複数の行を選択する場合、明示的に行セレクターを定義する必要があります。(複数の行を選択するには、行セレクター ウィジェットを使用する必要があります。)
• ツールチップ - popover スタイルを使用します。タッチのために実装されるツールチップ スタイルです。

関連コンテンツ

igHierarchicalGrid

igHierarchicalGrid 機能をタッチ対応にするには、igGrid コントロールと同じように設定を構成します。

以下のリストに、タッチ機能をサポートするプロパティについて、およびタッチ操作対応環境で正常に動作するよう特殊な変更が必要な igHierarchicalGrid 機能についてまとめています。

• 機能セレクター
• Groupby
• 非表示
• 複数選択 - タッチ プラットフォームで複数セルを選択する可能になる特別な選択プロパティがあります。(igHierarchicalGrid については、選択機能が継承されていないため、親グリッドで選択機能を有効にする必要があります。)
• 複数並べ替え
• 行セレクター - タッチ プラットフォームで複数の行を選択する場合、明示的に行セレクターを定義する必要があります。(複数の行を選択するには、行セレクター ウィジェットを使用する必要があります。)
• ツールチップ - popover スタイルを使用します。タッチのために実装されるツールチップ スタイルです。

注: igHierarchicalGrid は内部的に igGrid を使用しているため、これらの機能に関するトピックは igGrid トピックになります。唯一の例外は、2 つのグリッド間でモーダル ダイアログが異なる igHierarchicalGrid の igGrid Group By 機能です。

関連コンテンツ

igPopover

igPopover はデフォルトでタッチ デバイスにサポートされます。タッチ環境では、activating イベントを制御できません。コントロールは常にタップで表示されます。activating として設定されるイベントは無視されます。つまり、showOn オプションの設定は無視されます。

関連トピック

• igPopover の概要

関連サンプル

• 基本的な使用方法
• ASP.NET MVC の基本的な使用方法

igVideoPlayer

Modernizr ライブラリがページで使用できる場合にモバイル デバイスで igVideoPlayer コントロールを実行しているとき、ブラウザーのデフォルト ビデオ プレーヤーがユーザーに表示されます。Modernizr ライブラリが使用できない場合、実際の igVideoPlayer コントロールがユーザーに表示されます (igVideoPlayer コントロールの方が、デフォルトのコントロールよりタッチ機能が少ない場合もあります)。

関連サンプル

• ビデオ プレーヤーの基本的な使用方法