デバイス特性の検出

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

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

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

<cfclientsettings detectDevice=true />

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

注意:detectDevice が false に設定されている場合、すべての <div> 要素を <cfclient> ブロックの前に定義する必要があります。

サポートされるデバイス検出機能

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

<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)">
Show canvas support
</button>

この例では、デバイスで 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 />
<cfclient>
<cfif cfclient.properties.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>
<cfoutput>
Orientation : <b id="orientationId"></b><br>
Width : <b id="width"></b><br>
Height : <b id="height"></b><br>
</cfoutput>
<!--- 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.--->
</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>
<cfoutput>
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>
</cfoutput>
<!--- 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">
<cfset document.getElementById('width').innerHTML=width>
<cfset document.getElementById('height').innerHTML=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 の規約内容は適用されません。

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