デバイス特性の検出
CFML のデバイス検出機能を使用すると、デバイスのプロパティおよび特性を識別できます。これらの情報は、各デバイスに提供すべき最適なコンテンツ、レイアウト、マークアップまたはアプリケーションを判定するために使用できます。
デバイスの特性には、画面サイズ、ブラウザーのタイプとバージョン、メディアサポートおよび CSS、HTML、JavaScript のサポートレベルなどがあります。
デバイスの機能と特性を取得するには、<cfclientsettings> タグ内に detectDevice 属性を指定し、この属性を true に設定する必要があります。
<cfclientsettings detectDevice=true /> |
detectDevice 属性が true に設定されている場合、アプリケーションを実行しているデバイスの機能と特性（幅、高さおよび向き）が ColdFusion で自動的に検出されます。
注意：detectDevice が false に設定されている場合、すべての <div> 要素を <cfclient> ブロックの前に定義する必要があります。
サポートされるデバイス検出機能
デバイス検出機能の使用例を次に示します。
<cfClientSettings detectDevice=true /> |
この例では、デバイスで HTML5 Canvas がサポートされているかを把握しようとしています。 cfclient.properties.canvas は、HTML5 Canvas プロパティのサポート状況を示す boolean 値を返します。
ColdFusion サーバーでは、デバイス検出機能において内部的に Modernizer JavaScript ライブラリ（バージョン 2.6.2）を使用しています。
サポートされるデバイス機能と使用例を次の表に示します。
機能 |
シンタックス |
タッチイベント |
cfclient.properties.touch |
Canvas テキスト |
cfclient.properties.canvastext |
Canvas |
cfclient.properties.canvas |
ジオロケーション |
cfclient.properties.geolocation |
WebSocket |
cfclient.properties.websockets |
ドラッグアンドドロップ |
cfclient.properties.draganddrop |
履歴 |
cfclient.properties.history |
applicationCache |
cfclient.properties.applicationcache |
localStorage |
cfclient.properties.localstorage |
幅 |
cfclient.properties.width |
高さ |
cfclient.properties.height |
デバイスの幅 |
cfclient.properties.deviceWidth |
デバイスの高さ |
cfclient.properties.deviceHeight |
向き |
cfclient.properties.orientation |
デバイスのグループ名 |
cfclient.properties.deviceGroupName |
デバイスのグループの説明 |
cfclient.properties.deviceGroupDescription |
CSS アニメーション |
cfclient.properties.cssanimations |
CSS カラム |
cfclient.properties.csscolumns |
CSS 生成内容 |
Cfclient.properties.generatedcontent |
CSS グラデーション |
cfclient.properties.cssgradients |
CSS リフレクト |
cfclient.properties.cssreflections |
CSS 2D 変形 |
cfclient.properties.csstransforms |
CSS 3D 変形 |
cfclient.properties.csstransforms3d |
CSS トランジション |
cfclient.properties.csstransitions |
オーディオ |
cfclient.properties.audio |
ビデオ |
cfclient.properties.video |
ハッシュ変更 |
cfclient.properties.hashchange |
IndexedDB |
cfclient.properties.indexeddb |
入力属性 |
cfclient.properties.input.*（* は入力要素の属性を表します。有効な値については、Modernizr のドキュメントを参照してください） |
入力タイプ |
cfclient.properties.inputtypes.*（* は入力タイプの属性を表します。有効な値については、Modernizr のドキュメントを参照してください） |
メッセージ送信（postMassage） |
cfclient.properties.postmessage |
セッションストレージ |
cfclient.properties.sessionstorage |
Web Workers |
cfclient.properties.webworkers |
Web SQL Database |
cfclient.properties.websqldatabase |
これらの全機能の説明については、Modernizr のドキュメントを参照してください。
メディアクエリーの使用
メディアクエリーを使用すると、コンテンツが表示されるデバイスの表示サイズと機能に基づいて、ページデザインに変更を適用できます。メディアクエリーは、検出されたデバイスのデータを使用して作成された 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" />
