説明
このタグは cfprocessingdirective と似ており、各種機能(デバイス検出およびデバイス API)向けのプラグインを追加するためのコンパイラディレクティブとして機能します。 このタグを使用すると、必要になるすべてのデバイスプラグインとデバイス検出プラグインをロードすることができます。
シンタックス
<cfclientsettings |
関連項目
履歴
ColdFusion 11: このタグが追加されました。
属性
属性 |
必須/オプション |
デフォルト |
説明 |
---|---|---|---|
enableDeviceAPI |
オプション |
false |
デバイス API を有効または無効にします。 |
detectDevice |
オプション |
false |
デバイス検出プラグインを有効または無効にします。 |
deviceTimeout | オプション | 10 | プラグインのロードのタイムアウト(秒単位)。 プラグインのロードに 10 秒(デフォルトのタイムアウト値)以上かかった場合、エラーが表示されます。この問題を回避するには、タイムアウト値を増やします。 指定した enableDeviceAPI が true の場合、デバイスプラグインはロードされます。デバイスプラグインがロードされた後、ColdFusion は、DeviceReady イベントがトリガーされるのを待機します。DeviceReady イベントがトリガーされると、CFML の実行が開始されます。デスクトップブラウザーでは、DeviceReady イベントはトリガーされません。ただし、モバイルアプリケーション(シェルアプリケーションまたはパッケージ化されたアプリケーション)では、トリガーされます。 |
デバイス検出
CFML のデバイス検出機能を使用すれば、デバイスのプロパティおよび特性を識別できます。これらの情報は、各デバイスに提供すべき最適なコンテンツ、レイアウト、マークアップまたはアプリケーションを判定するために使用できます。
デバイスの特性には、画面サイズ、ブラウザーのタイプとバージョン、メディアサポートおよび CSS、HTML、JavaScript のサポートレベルなどがあります。
デバイスの機能と特性を取得するには、<cfclientsettings> タグ内に detectdevice 属性を指定し、この属性を true に設定する必要があります。
<cfclientsettings detectDevice=true /> |
detectdevice 属性が true に設定されている場合、アプリケーションを実行しているデバイスの機能と特性(幅、高さおよび向き)が ColdFusion で自動的に検出されます。
デバイス検出機能の使用例を次に示します。
<cfclientSettings detectDevice=true /> |
この例では、デバイスで HTML5 Canvas がサポートされているかを把握しようとしています。 cfclient.canvas は、HTML5 Canvas プロパティのサポート状況を示す boolean 値を返します。
この例では、デバイスで HTML5 Canvas がサポートされているかを把握しようとしています。 cfclient.canvas は、HTML5 Canvas プロパティのサポート状況を示す boolean 値を返します。
ColdFusion サーバーでは、デバイス検出機能において内部的に Modernizer JavaScript ライブラリ(バージョン 2.6.2)を使用しています。
サポートされるデバイス機能と使用例を次の表に示します。
機能 | シンタックス |
applicationCache | cfclient.properties.applicationcache |
オーディオ | cfclient.properties.audio |
Canvas | cfclient.properties.canvas |
Canvas テキスト | cfclient.properties.canvastext |
CSS 2D 変形 | cfclient.properties.csstransforms |
CSS 3D 変形 | cfclient.properties.csstransforms3d |
CSS アニメーション | cfclient.properties.cssanimations |
CSS カラム | cfclient.properties.csscolumns |
CSS 生成内容 | cfclient.properties.generatedcontent |
CSS グラデーション | cfclient.properties.cssgradients |
CSS リフレクト | cfclient.properties.cssreflections |
CSS トランジション | cfclient.properties.csstransitions |
デバイスのグループの説明 | cfclient.properties.deviceGroupDescription [array] |
デバイスのグループ名 | cfclient.properties.deviceGroupName [array] |
デバイスの高さ | cfclient.properties.deviceHeight |
デバイスの幅 | cfclient.properties.deviceWidth |
ドラッグアンドドロップ | cfclient.properties.draganddrop |
ジオロケーション | cfclient.properties.geolocation |
ハッシュ変更 | cfclient.properties.hashchange |
高さ | cfclient.properties.height |
履歴 | cfclient.properties.history |
IndexedDB | cfclient.properties.indexeddb |
入力属性 | cfclient.properties.input.*(* は入力要素の属性を表します。有効な値については、Modernizr のドキュメントを参照してください) |
入力タイプ | cfclient.properties.inputtypes.*(* は入力タイプの属性を表します。有効な値については、Modernizr のドキュメントを参照してください) |
localStorage | cfclient.properties.localstorage |
向き | cfclient.properties.orientation |
メッセージ送信(postMassage) | cfclient.properties.postmessage |
セッションストレージ | cfclient.properties.sessionstorage |
タッチイベント | cfclient.properties.properties.touch |
ビデオ | cfclient.properties.video |
WebSocket | cfclient.properties.websockets |
Web SQL Database | cfclient.properties.websqldatabase |
Web Workers | cfclient.properties.webworkers |
幅 | cfclient.properties.width |
これらの全機能の説明については、Modernizer のドキュメントを参照してください。
メディアクエリーの使用
メディアクエリーを使用すると、コンテンツが表示されるデバイスの表示サイズと機能に基づいて、ページデザインに変更を適用できます。メディアクエリーは、検出されたデバイスのデータを使用して作成された 1 つ以上の論理式で構成され、メディア機能の特定の条件をチェックします。この式の結果に基づいて、ページのレイアウトを動的に変更できます。
モバイルアプリケーションを構築している場合、次の例に示すように、簡単にデバイスの特性を検出して、レイアウトをそのデバイス専用にカスタマイズできます。
<cfclientsettings detectDevice=true /> |
この例では、Web ページが画面サイズに基づいて、それぞれのデバイスに合わせてカスタマイズされます。
向きの変更の処理
デバイスの向きの変更を処理するために、addOrientationListener() 関数を使用してリスナーを登録できます。
<cfclientsettings detectDevice=true /> |
この例では、addOrientationListener 関数を使用して、デバイスの向き(縦長モードまたは横長モード)を監視するリスナーを登録しています。デバイスの向きが変更されると、orientationHandler コールバック関数が呼び出されます。
リスナーの登録を解除するには、removeOrientationListener を使用します。
<cffunction access="public" name="removeorientationhandler" |
複数のリスナーを追加することもできます。
<cfset cfclient.addOrientationListener(orientationHandler1)> |
デバイスの向きが変更されたときに、登録されているすべてのリスナー関数が呼び出されます。
ウィンドウのサイズ変更イベントの処理
ウィンドウのサイズ変更イベントを処理するために、addResizeListener() 関数を使用してリスナーを登録できます。
<cfclientsettings detectDevice=true /> |
複数のリスナーを追加することもできます。
<cfset cfclient.addResizeListener(resizeHandler1)> |
ウィンドウのサイズが変更されたときに、登録されているすべてのサイズ変更リスナー関数が呼び出されます。ハンドラーの登録を解除するには、removeResizeListener() を使用します。
<cffunction access="public" name="removeresizehandler" |
デバイスのタイムアウトの設定
<cfclientsettings> タグでは deviceTimeOut という属性を指定できます。deviceTimeOut のデフォルト値は 10 秒です。enableDeviceApi または detectDevice を true に設定している場合に、deviceTimeOut の値が利用されます。必要なプラグインをロードするための時間を指定します。指定した時間が経過した後、例外がスローされます。
<cfclientsettings detectDevice=true deviceTimeOut="30" />