さまざまなモバイルプラットフォーム用のphonegapアプリケーションを作成していますが、ブラウザ/携帯電話の検出の現在の最良のソリューションは何でしょうか。
サーバー側またはクライアント側の検出を使用する必要がありますか、それともメディアタイプの画面幅でcssソリューションを使用できますか?
さまざまなモバイルプラットフォーム用のphonegapアプリケーションを作成していますが、ブラウザ/携帯電話の検出の現在の最良のソリューションは何でしょうか。
サーバー側またはクライアント側の検出を使用する必要がありますか、それともメディアタイプの画面幅でcssソリューションを使用できますか?
利用可能なソリューションはほとんどありませんが、オープンソースのソリューションのみを挙げます。少なくとも、主にjQuery /jQueryMobileで使用されるソリューションです。また、このトピックは戦争を開始する可能性があることに注意してください。一方には、コミュニティで維持されているデータベースを使用したサーバー側の検出の支持者がいます。もう一方には、ブラウザスニッフィングを使用するクライアント側の支持者がいます。
WURFL- _
2002年に作成されたWURFL(Wireless Universal Resource FiLe)は、モバイルWeb開発者やモバイルエコシステムの他の利害関係者にとってデバイスの断片化の問題を解決するための人気のあるオープンソースフレームワークです。WURFLは、モバイル開発者によって採用されたデファクトスタンダードのデバイス記述リポジトリです。WURFLはオープンソース(AGPL v3)であり、ScientiaMobileの商標です。
良い :
非常に詳細な検出。おそらく、実際に必要とされるよりも多くのデータを取得するでしょう。
優れたプラットフォームサポート、APIはJava、PHP、および.Netで利用できます。
悪い :
常に最新であるとは限らず、コミュニティへの依存度が高い
iPhoneの場合、iOSのバージョンを知る方法がないため、メディアタイプはピクセル比を検出するためにクエリを実行します。
非商用利用の場合のみ料金が発生します。古いバージョンは商用利用は無料ですが、WURFLEULAの変更までに更新されたデータベースのみを使用できます。
PHPの例:
<?php
// Include the configuration file
include_once './inc/wurfl_config_standard.php';
$wurflInfo = $wurflManager->getWURFLInfo();
if (isset($_GET['ua']) && trim($_GET['ua'])) {
$ua = $_GET['ua'];
$requestingDevice = $wurflManager->getDeviceForUserAgent($_GET['ua']);
} else {
$ua = $_SERVER['HTTP_USER_AGENT'];
// This line detects the visiting device by looking at its HTTP Request ($_SERVER)
$requestingDevice = $wurflManager->getDeviceForHttpRequest($_SERVER);
}
?>
<html>
<head>
<title>WURFL PHP API Example</title>
</head>
<body>
<h3>WURFL XML INFO</h3>
<ul>
<li><h4>VERSION: <?php echo $wurflInfo->version; ?> </h4></li>
</ul>
<div id="content">
User Agent: <b> <?php echo htmlspecialchars($ua); ?> </b>
<ul>
<li>ID: <?php echo $requestingDevice->id; ?> </li>
<li>Brand Name: <?php echo $requestingDevice->getCapability('brand_name'); ?> </li>
<li>Model Name: <?php echo $requestingDevice->getCapability('model_name'); ?> </li>
<li>Marketing Name: <?php echo $requestingDevice->getCapability('marketing_name'); ?> </li>
<li>Preferred Markup: <?php echo $requestingDevice->getCapability('preferred_markup'); ?> </li>
<li>Resolution Width: <?php echo $requestingDevice->getCapability('resolution_width'); ?> </li>
<li>Resolution Height: <?php echo $requestingDevice->getCapability('resolution_height'); ?> </li>
</ul>
<p><b>Query WURFL by providing the user agent:</b></p>
<form method="get" action="index.php">
<div>User Agent: <input type="text" name="ua" size="100" value="<?php echo isset($_GET['ua'])? htmlspecialchars($_GET['ua']): ''; ?>" />
<input type="submit" /></div>
</form>
</div>
</body>
</html>
このコードをカスタマイズする場合は、wurfl_config_standard.phpファイル内の構成パラメーターを変更してください。
Modernizrは、ユーザーのブラウザー機能を確認するための優れた方法です。ただし、そのAPIにはブラウザ自体でしかアクセスできないため、サーバーロジックのブラウザ機能について知ることで簡単に利益を得ることができません。modernizr-serverライブラリは、Modernizrブラウザデータをサーバースクリプト環境に取り込む方法です。
良い :
WURFLのように非常に詳細な検出ですが、WURFLが異なる目的で構築されていることを考慮する必要があります。
悪い :
PHPでのみサポートされていますが、これで十分な場合もあります。
例 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Modernizr Server Example</title>
</head>
<body>
<?php
include('modernizr-server.php');
print 'The server knows:';
foreach($modernizr as $feature=>$value) {
print "<br/> $feature: "; print_r($value);
}
?>
</body>
</html>
遅れをとっているブラウザをサポートしなければならないまで、クールな新しいWebテクノロジーを利用することはとても楽しいことです。Modernizrを使用すると、ブラウザーが機能をサポートしているかどうかに関係なく、各状況を処理するための条件付きJavaScriptとCSSを簡単に作成できます。プログレッシブエンハンスメントを簡単に行うのに最適です。
良い :
クライアント側、サーバー側のコンポーネントのみが存在しません
高速ですが、12kbのjavascriptフレームワークとしてはまだ大きいです。モジュール性があるため、ニーズに応じて小さくすることができます。
悪い :
サーバー側の検出よりも多くの情報しか実行できません。
Modernizr自体は、ユーザーのブラウザー機能を知るための優れた方法です。ただし、そのAPIにはブラウザ自体でしかアクセスできないため、サーバーロジックのブラウザ機能について知ることで簡単に利益を得ることができません。
例 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Modernizr Example</title>
<script src="modernizr.min.js"></script>
</head>
<body>
<script>
if (Modernizr.canvas) {
// supported
} else {
// no native canvas support available :(
}
</script>
</body>
</html>
これは(学術的に)モバイルを検出するための最悪の方法である可能性がありますが、その長所はあります。
良い :
単純
悪い :
どこから始めるか
例 :
<script type="text/javascript">
var agent = navigator.userAgent;
var isWebkit = (agent.indexOf("AppleWebKit") > 0);
var isIPad = (agent.indexOf("iPad") > 0);
var isIOS = (agent.indexOf("iPhone") > 0 || agent.indexOf("iPod") > 0);
var isAndroid = (agent.indexOf("Android") > 0);
var isNewBlackBerry = (agent.indexOf("AppleWebKit") > 0 && agent.indexOf("BlackBerry") > 0);
var isWebOS = (agent.indexOf("webOS") > 0);
var isWindowsMobile = (agent.indexOf("IEMobile") > 0);
var isSmallScreen = (screen.width < 767 || (isAndroid && screen.width < 1000));
var isUnknownMobile = (isWebkit && isSmallScreen);
var isMobile = (isIOS || isAndroid || isNewBlackBerry || isWebOS || isWindowsMobile || isUnknownMobile);
var isTablet = (isIPad || (isMobile && !isSmallScreen));
if ( isMobile && isSmallScreen && document.cookie.indexOf( "mobileFullSiteClicked=") < 0 ) mobileRedirect();
</script>
これは最善の解決策ではないかもしれませんが、私はこの関数をjavascriptでの個人的な使用に使用しています。
ちなみに@Gajotresは深くて役立つ情報をありがとう。
function mobilMi()
{
if( navigator.userAgent.match(/Android/i) ||
navigator.userAgent.match(/webOS/i) ||
navigator.userAgent.match(/iPhone/i) ||
navigator.userAgent.match(/iPod/i)||
navigator.userAgent.match(/iPad/i)
){
return 1;
}
else
return 0;
}
デバイスのOSタイプを取得するために、このようなコードを作成しました...$testはユーザーエージェントの文字列になります
if (preg_match("/linux/i", $test) && preg_match("/android/i", $test)) {
$device_type = 'Android';
} else if (preg_match("/windows phone/i", $test)){
$device_type = '<font size="6">Windows Mobile</font>';
} else if (preg_match("/windows nt/i", $test)){
$device_type = 'Windows';
} else if (preg_match("/linux/i", $test)){
$device_type = 'Linux';
} else if (preg_match("/macintosh/i", $test)){
$device_type = 'Macintosh';
} else if (preg_match("/iphone/i", $test)){
$device_type = 'iPhone';
} else if (preg_match("/ipad/i", $test)){
$device_type = 'iPad';
} else if (preg_match("/symbian/i", $test)){
$device_type = 'Symbian';
} else if (preg_match("/blackberry/i", $test)){
$device_type = 'Blackberry';
} else
$device_type = 'None';
パターンを知ってキーワードを取得する必要があると思います。WURFLを使用すると、必要なものが得られない場合があります。