Google Analytics／QRコード／Google Maps

授業 API

Google Analyticsを利用する（アクセス解析）

このブログを解析対象として設定してみる

＜Gooole＞

＜はてな＞

「Google Analytics を利用する」にチェックを入れ、トラッキングIDを入力し、変更を保存


はてなダイアリーとtwitterの連携

はてなにアップした記事をtwitterに拾わせる

＜twitter＞

  • 設定→アプリ連携に、はてなが入っていればok


＜はてな＞

  • 設定→外部サービス連携→Twitter連携設定

「Twitterアカウント」を有効にする
「Twitter通知のチェックボックスをデフォルトで有効にする 」をチェック


QRコードを作る

お試し


このブログのURLを入力してみる

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>QRコード作成</title>
<style>
body {
	text-align: center;
}
</style>
</head>
<body>
<p>QRコードにしたい文字を入力してください。</p>
<form action="qrcode.php" method="get">
キーワード：<input type="text" name="keyword" size="40">
<input type="submit" value="作成">
</form>
</body>
</html>

QRコードできた。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>QRコード作成サイト</title>
<style>
body {
	text-align: center;
}
</style>
</head>
<body>
<p>生成されたQRコード</p>
<?php
$keyword = $_GET["keyword"];
$keywordurl = urlencode($keyword);
$url = "http://chart.apis.google.com/chart?chs=150x150&cht=qr&chl=$keywordurl";
?>
<img src="<?php echo $url; ?>">

<form method="get" action="download.php">
<input type="hidden" name="url" value="<?php echo $url?>">
<input type="submit" value="QRコード画像をダウンロード">
</form>

</body>
</html>


右クリックで保存してもよし、ダウンロードもできる仕様。

<?php
$file = $_GET["url"];

$fullpath = $file;
$filename = 'qrcode.png';

header("Content-type:image/png");
header('Content-Disposition:attachment; filename="'.$filename.'"');

readfile($fullpath);
?>

Google Maps APIを利用する

*表示させたい場所の緯度経度を調べておく


・基本編
グーグルマップへリンク

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Map Test</title>
</head>
<body>
<a href="http://maps.google.com/maps/api/staticmap?center=35.619344,139.776671&zoom=16&size=320x480&maptype=roadmap&sensor=false">マップで見る</a>
</body>
</html>


・応用編
htmlページの中にマップを埋め込む
クリックするとコメント表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps API</title>

<!--Google Maps APIを呼び出し-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script>

<!--どんな地図を描くかのメイン処理-->
<script type="text/javascript">

//地図を初期化し表示
function initialize() {
	
	//地図を表示する緯度経度を指定
	var latlng = new google.maps.LatLng(35.619344,139.776671);
	
	//地図必須プロパティを設定
	var myOptions = {
		
		//ズームレベルの指定
		zoom:14,
		
		//地図の中心を指定（上記で設定の緯度経度latlng）
		center: latlng,
		
		//地図のタイプ設定
		//ROADMAP：デフォルト、SATELLLITE：写真タイル、HYBRID：写真タイルと主要な機能、TERAIN：物理的な起伏を示すタイル
		mapTypeId:google.maps.MapTypeId.ROADMAP
	}; //地図プロパティ終わり
	
	//<div id="map_canvas">と結びつけて、その領域に地図を書く
	var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
	
	//中心にマーカーの表示
	var marker1= new google.maps.Marker({
		position:latlng,
		title:"日本科学未来館"
	});
	marker1.setMap(map);
	
	//マーカーの追加
	var myLatlng = new google.maps.LatLng(35.626318,139.770626);
	var marker2 = new google.maps.Marker({
		position: myLatlng,
		title: "ホテル日航東京"
	});
	marker2.setMap(map);
	
	//マーカーをクリックしたら情報を表示
	var marker1text = 'ここは<span style="color:#f00;">日本科学未来館</span>です'
	var infowindow1 = new google.maps.InfoWindow({
		content: marker1text,
		maxWidth: 200
	});
	google.maps.event.addListener(marker1, 'click',function() {
		infowindow1.open(map,marker1);
	});  
	
	var marker2text = 'ここは<span style="color:#f00;">ホテル日航東京</span>です'
	var infowindow2 = new google.maps.InfoWindow({
		content: marker2text,
		maxWidth: 200
	});
	google.maps.event.addListener(marker2, 'click', function() {
		infowindow2.open(map,marker2);
	});
	} //initialize()
	
	</script>
  
</head>
<body onload="initialize()">

<!--ここに地図入るよ-->
<div id="map_canvas" style="width:640px; height: 480px;"></div>
</body>
</html>