ブラウザ判定と円グラフで表示するブラウザ比率とWindowsのOS判定

  ブラウザ判定



最近は、IEのバージョン判定も必要かもしれません


  
<SCRIPT type="text/javascript">

	var userAgent = window.navigator.userAgent.toLowerCase();
	var appVersion = window.navigator.appVersion.toLowerCase();

	if (userAgent.indexOf("msie") > -1) {
		if (appVersion.indexOf("msie 6.0") > -1) {
			alert("IE6");
		}
		else if (appVersion.indexOf("msie 7.0") > -1) {
			alert("IE7");
		}
		else if (appVersion.indexOf("msie 8.0") > -1) {
			alert("IE8");
		}
		else if (appVersion.indexOf("msie 9.0") > -1) {
			alert("IE9");
		}
		else if (appVersion.indexOf("msie 10.0") > -1) {
			alert("IE10");
		}
		else {
			alert("Unknown");
		}
	}
	else if (userAgent.indexOf("firefox") > -1) {
		alert("Firefox");
	}
	else if (userAgent.indexOf("opera") > -1) {
		alert("Opera");
	}
	else if (userAgent.indexOf("chrome") > -1) {
		alert("Google Chrome");
	}
	else if (userAgent.indexOf("safari") > -1) {
		alert("Safari");
	}
	else {
		alert("Unknown");
	}

</SCRIPT>
  


関連する記事
Flex内部からのブラウザ判定



  ブラウザ比率



レンタルサーバーのログを集計して、Google API を使用して 円グラフで表示しています。
ブラウザによって、グラフィックの実装が違うので多少見栄えが変わる可能性があります

JavaScript の処理は、addColumn、addRows、setValue で Excel に表を作る
ようなイメージで作成します。




  
<?
header( "Content-Type: text/html; Charset=EUC-JP" );
header( "pragma: no-cache" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
header( "Cache-control: no-cache" );
header( "P3P: CP=\"CAO PSA OUR\"" );
?>

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
<TITLE>ブラウザ比率 in SQLの窓</TITLE>
</HEAD>
<BODY>

<?

if ( $_GET['ym'] == "" ) {
	$_GET['ym'] = "200909";
}

// ログファイル
$target = "/home/lightbox/log/webalizer/agent_{$_GET['ym']}.html";

// 読み込み
$fp = fopen( $target, 'rb' );

$ie6 = 0;
$ie7 = 0;
$ie8 = 0;
$Geck = 0;
$Opera = 0;
$Chrome = 0;
$safa = 0;

//**********************************************************
// ここでログより各ブラウザのカウント
//**********************************************************

?>

<!-- 埋め込み場所 -->
<div id="chart_div" style="width: 400px; height: 240px;"></div>

<!-- Google API -->
<script charset="utf-8" type="text/javascript" src="http://www.google.com/jsapi"></script> 

<!-- 処理 -->
<script type="text/javascript">
// 円グラフを使用
google.load("visualization", "1", {packages: ["piechart"]});

// ロード時に実行する処理( Google APIの常套処理 )
google.setOnLoadCallback(drawChart);
function drawChart() {

// テーブル作成 -> 列作成 -> 行作成 -> データセット で、表を作成
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Task');
  data.addColumn('number', 'Hit per Month');
  data.addRows(7);

  data.setValue(0, 0, 'IE6');
  data.setValue(0, 1, <?= $ie6 ?>);
  data.setValue(1, 0, 'IE7');
  data.setValue(1, 1, <?= $ie7 ?>);
  data.setValue(2, 0, 'IE8');
  data.setValue(2, 1, <?= $ie8 ?>);
  data.setValue(3, 0, 'Firefox');
  data.setValue(3, 1, <?= $Geck ?>);
  data.setValue(4, 0, 'Opera');
  data.setValue(4, 1, <?= $Opera ?>);
  data.setValue(5, 0, 'Safari');
  data.setValue(5, 1, <?= $safa ?>);
  data.setValue(6, 0, 'Chrome');
  data.setValue(6, 1, <?= $Chrome ?>);

// 円グラフを適用
  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

// データを適用
  chart.draw(data, {width: 600, height: 320, is3D: true, title: '<?= $_GET['ym'] ?> ブラウザ比率'});
}
</script>

<div style='margin-left:150px;'>
<FORM>
<SELECT name="ym" onChange="document.getElementsByTagName('FORM')[0].submit();">
<OPTION value="200909" <?= $_GET['ym'] == "200909" ? "selected" : "" ?>>2009年9月
<OPTION value="200908" <?= $_GET['ym'] == "200908" ? "selected" : "" ?>>2009年8月
<OPTION value="200907" <?= $_GET['ym'] == "200907" ? "selected" : "" ?>>2009年7月
<OPTION value="200906" <?= $_GET['ym'] == "200906" ? "selected" : "" ?>>2009年6月
<OPTION value="200905" <?= $_GET['ym'] == "200905" ? "selected" : "" ?>>2009年5月
<OPTION value="200904" <?= $_GET['ym'] == "200904" ? "selected" : "" ?>>2009年4月
<OPTION value="200903" <?= $_GET['ym'] == "200903" ? "selected" : "" ?>>2009年3月
<OPTION value="200902" <?= $_GET['ym'] == "200902" ? "selected" : "" ?>>2009年2月
<OPTION value="200901" <?= $_GET['ym'] == "200901" ? "selected" : "" ?>>2009年1月
<OPTION value="200812" <?= $_GET['ym'] == "200812" ? "selected" : "" ?>>2008年12月
<OPTION value="200811" <?= $_GET['ym'] == "200811" ? "selected" : "" ?>>2008年11月
<OPTION value="200810" <?= $_GET['ym'] == "200810" ? "selected" : "" ?>>2008年10月
<OPTION value="200809" <?= $_GET['ym'] == "200809" ? "selected" : "" ?>>2008年9月
<OPTION value="200808" <?= $_GET['ym'] == "200808" ? "selected" : "" ?>>2008年8月
<OPTION value="200807" <?= $_GET['ym'] == "200807" ? "selected" : "" ?>>2008年7月
<OPTION value="200806" <?= $_GET['ym'] == "200806" ? "selected" : "" ?>>2008年6月
<OPTION value="200805" <?= $_GET['ym'] == "200805" ? "selected" : "" ?>>2008年5月
<OPTION value="200804" <?= $_GET['ym'] == "200804" ? "selected" : "" ?>>2008年4月
<OPTION value="200803" <?= $_GET['ym'] == "200803" ? "selected" : "" ?>>2008年3月
<OPTION value="200802" <?= $_GET['ym'] == "200802" ? "selected" : "" ?>>2008年2月
<OPTION value="200801" <?= $_GET['ym'] == "200801" ? "selected" : "" ?>>2008年1月
</SELECT>
<!--INPUT type="submit" value="送信"-->
</FORM>
</div>

</BODY>
</HTML>
  


PHP部分の HTTP ヘッダに関する記事
少なくともIEでキャッシュを禁止する
IE : フレーム内の別ドメインのクッキーを有効にする


関連する Google ドキュメント
Google Visualization API Reference
Using Visualizations - Google Visualization API - Google Code
AJAX APIs Playground(IE7以降でなんとか表示可能/基本、他のブラウザで見るように Google は推奨)




  WindowsのOS判定

Windows で実行されているブラウザ用です



  
<SCRIPT type="text/javascript" language="JavaScript">
function checkOS() {
	if ( (window.navigator.userAgent).indexOf( "NT 5.0" ) != -1 ) {
		alert("Windows2000")
	}
	if ( (window.navigator.userAgent).indexOf( "NT 5.1" ) != -1 ) {
		alert("WindowsXP")
	}
	if ( (window.navigator.userAgent).indexOf( "NT 6.0" ) != -1 ) {
		alert("WindowsVista")
	}
	if ( (window.navigator.userAgent).indexOf( "NT 6.1" ) != -1 ) {
		alert("Windows7")
	}
	if ( (window.navigator.userAgent).indexOf( "NT 6.2" ) != -1 ) {
		alert("Windows8")
	}
}
</SCRIPT>
<INPUT type="button" value="WindowsのOS" onClick="checkOS()">
  


関連する記事
【文字列内に含まれる文字列の判断】indexOf メソッド










  infoboard   管理者用   
このエントリーをはてなブックマークに追加





フリーフォントWEBサービス
SQLの窓WEBサービス

SQLの窓フリーソフト

素材

一般WEBツールリンク

SQLの窓

フリーソフト

JSライブラリ