62回目授業内容　API〜GoogleAnalytics〜QRコード〜GoogleMapsAPI

[授業][Dreamweaver][PHP]

APIの説明

GoogleAnalytics

  • 実際に設定
  • IDを設定する
  • コードを埋める
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-xxxxx-x']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
  • twitterと連動する・・・
    • すでにやっていましたｗ。
  • はてな設定に入って外部連動
  • twitter項目の連動で設定するだけ

QRコード

qrcode.php
<?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; ?>">

qrcode.html

<p>QRコードにしたい文字を入力して下さい</p>
<form action="qrcode.php" method="get">
キーワード：<input type="text" name="keyword" size40>
<input type="submit" value="作成">
</form>
  • 画像をダウンロードしてもらう

qrcode.php

<?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>

download.php

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

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

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

<!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>
<!-- 【2】どんな地図を描くかのメイン処理 -->
<script type="text/javascript">
// ■地図初期化し表示
function initialize() {
// ■地図を表示する緯度経度を指定する
	var latlng = new google.maps.LatLng(35.681382,139.766084);
// ■地図必須プロパティを設定
	var myOptions = {
// ■ズームレベルの指定 0〜17
		zoom: 15,
// ■地図の中心を指定（上記で設定の緯度経度latlng）
		center: latlng,
 // ■地図のタイプ設定
    // 　ROADMAP：デフォルト、SATELLITE：写真タイル、HYBRID：写真タイルと主要な機能、TERRAIN：物理的な起伏を示すタイル
		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);
}//initialize()
</script>
</head>

<body onload="initialize()">
<!-- 地図はここに描画される -->
<div id="map_canvas" style="width: 640px; height: 480px;"></div>

</body>
</html>
  • マーカーを追加する
// ■マーカーの追加表示（緯度経度指定の場合）
	var myLatlng = new google.maps.LatLng(35.6853438,139.7530782);
	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);
	});

脱線話（復活）

-

四十路男Tokiyoの人生再スタートblogもやってます。