説明

このタグは cfprocessingdirective と似ており、各種機能(デバイス検出およびデバイス API)向けのプラグインを追加するためのコンパイラディレクティブとして機能します。 このタグを使用すると、必要になるすべてのデバイスプラグインとデバイス検出プラグインをロードすることができます。

シンタックス

<cfclientsettings
enableDeviceAPI = "true|false"
detectDevice = "true|false"
deviceTimeout = Number > 

関連項目

cfclient

履歴

ColdFusion 11: このタグが追加されました。

属性

属性

必須/オプション

デフォルト

説明

enableDeviceAPI

オプション

 false

デバイス API を有効または無効にします。

detectDevice

オプション

false

デバイス検出プラグインを有効または無効にします。

deviceTimeout オプション 10

プラグインのロードのタイムアウト(秒単位)。

プラグインのロードに 10 秒(デフォルトのタイムアウト値)以上かかった場合、エラーが表示されます。この問題を回避するには、タイムアウト値を増やします。

指定した enableDeviceAPI が true の場合、デバイスプラグインはロードされます。デバイスプラグインがロードされた後、ColdFusion は、DeviceReady イベントがトリガーされるのを待機します。DeviceReady イベントがトリガーされると、CFML の実行が開始されます。デスクトップブラウザーでは、DeviceReady イベントはトリガーされません。ただし、モバイルアプリケーション(シェルアプリケーションまたはパッケージ化されたアプリケーション)では、トリガーされます。
したがって、デバイス API がデスクトップブラウザーで有効になっている CFM を実行しようとした場合、空白のページが表示され、コンソールには deviceTimeout に関するエラーメッセージが表示されます。

デバイス検出

CFML のデバイス検出機能を使用すれば、デバイスのプロパティおよび特性を識別できます。これらの情報は、各デバイスに提供すべき最適なコンテンツ、レイアウト、マークアップまたはアプリケーションを判定するために使用できます。

デバイスの特性には、画面サイズ、ブラウザーのタイプとバージョン、メディアサポートおよび CSS、HTML、JavaScript のサポートレベルなどがあります。

デバイスの機能と特性を取得するには、<cfclientsettings> タグ内に detectdevice 属性を指定し、この属性を true に設定する必要があります。

<cfclientsettings detectDevice=true />

detectdevice 属性が true に設定されている場合、アプリケーションを実行しているデバイスの機能と特性(幅、高さおよび向き)が ColdFusion で自動的に検出されます。

 

デバイス検出機能の使用例を次に示します。

<cfclientSettings detectDevice=true />

<cfclient>
<cffunction access="public" name="showCanvasSupport" returntype="void" >
<cfset document.getElementById('canvas').innerHTML= cfclient.properties.canvas>
</cffunction>
</cfclient>

Canvas support -<b id="canvas"></b><br>

<button onclick="invokeCFClientFunction('showCanvasSupport',null, null)">
Show canvas support
</button>

この例では、デバイスで 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 />
<cfclient>
<cfif cfclient.width lte 480 >
<cfinclude template=" phone.css ">

<cfelseif cfclient.properties.width gte 480 AND cfclient.properties.width lte
760>
<cfinclude template=" tablet.css ">

<cfelse>
<cfinclude template=" desktop.css ">

</cfif>
</cfclient>

この例では、Web ページが画面サイズに基づいて、それぞれのデバイスに合わせてカスタマイズされます。

向きの変更の処理

デバイスの向きの変更を処理するために、addOrientationListener() 関数を使用してリスナーを登録できます。

<cfclientsettings detectDevice=true />
<cfclient>
Orientation : <b id="orientationId"></b><br>
Width : <b id="width"></b><br>
Height : <b id="height"></b><br>
<!--- Adding the orientation handler here. After adding
the handler, the handler will be invoked whenever there
is an orientation change.--->
<cfset cfclient.addOrientationListener(orientationHandler)>
<cffunction access="public" name="orientationHandler" returntype="void" >
<cfargument name="orientationString" type="string">
<!--- The orientation (landscape/portrait) will be
passed as an argument to the handler.You can also get
the orientation value from cfclient.--->
<cfset document.getElementById('orientationId').innerHTML= orientationString>
<cfset document.getElementById('width').innerHTML= cfclient.properties.width>
<cfset document.getElementById('height').innerHTML= cfclient.properties.height>
</cffunction>
</cfclient>

この例では、addOrientationListener 関数を使用して、デバイスの向き(縦長モードまたは横長モード)を監視するリスナーを登録しています。デバイスの向きが変更されると、orientationHandler コールバック関数が呼び出されます。

リスナーの登録を解除するには、removeOrientationListener を使用します。

<cffunction access="public" name="removeorientationhandler"
returntype="void" >
<cfset cfclient.removeOrientationListener(orientationhandler)>
</cffunction>

複数のリスナーを追加することもできます。

<cfset cfclient.addOrientationListener(orientationHandler1)>
<cfset cfclient.addOrientationListener(orientationHandler2)>

デバイスの向きが変更されたときに、登録されているすべてのリスナー関数が呼び出されます。

ウィンドウのサイズ変更イベントの処理

ウィンドウのサイズ変更イベントを処理するために、addResizeListener() 関数を使用してリスナーを登録できます。

<cfclientsettings detectDevice=true />
<cfclient>
Width :<b id="width"></b><br>
Height :<b id="height"></b><br>
Device width :<b id="devicewidth"></b><br>
Device height :<b id="deviceheight"></b><br>
<!--- Adding the resize handler here.
After adding the handler, the handler will be invoked whenever there is a browser resize.

--->
<cfset cfclient.addResizeListener(resizehandler)>
<cffunction access="public" name="resizehandler"returntype="void" >
<cfargument name="width" type="string">
<cfargument name="height" type="string">
<!--- The width and height of the browser will be
passed as arguments to the handler. You can also
get the width/height value from cfclient. --->
<cfset document.getElementById('width').innerHTML= cfclient.properties.width>
<cfset document.getElementById('height').innerHTML= cfclient.properties.height>
<cfset document.getElementById('devicewidth').innerHTML= cfclient.properties.deviceWidth>
<cfset document.getElementById('deviceheight').innerHTML= cfclient.properties.deviceHeight>
</cffunction>
</cfclient>

複数のリスナーを追加することもできます。

<cfset cfclient.addResizeListener(resizeHandler1)>
<cfset cfclient.addResizeListener(resizeHandler2)>

ウィンドウのサイズが変更されたときに、登録されているすべてのサイズ変更リスナー関数が呼び出されます。ハンドラーの登録を解除するには、removeResizeListener() を使用します。

<cffunction access="public" name="removeresizehandler"
returntype="void" >
<cfset cfclient.removeResizeListener(resizeHandler)>
</cffunction>

デバイスのタイムアウトの設定

<cfclientsettings> タグでは deviceTimeOut という属性を指定できます。deviceTimeOut のデフォルト値は 10 秒です。enableDeviceApi または detectDevice を true に設定している場合に、deviceTimeOut の値が利用されます。必要なプラグインをロードするための時間を指定します。指定した時間が経過した後、例外がスローされます。

<cfclientsettings detectDevice=true deviceTimeOut="30" />

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー