SQLの窓

2016年07月30日


Google サイト内検索の FORM 要素による設置

このブログの PC バージョンのページナビの右上にある検索入力です。この方法を使えば、他の特殊なキーワード文字を使った Google 検索フィールドも設置可能です。

Google の検索は現在では、『https://www.google.co.jp/search』に QueryString を渡す事で容易に実現できます。これは、当然 FORM 要素で行う一般的な WEBアプリケーションの機能です。FORM に対して method を指定しないこの呼び出しは、GET コマンドとなるので、通常のリンクの呼び出しと同じになります。

accept-charset は、無くても shift_jis では正しく動作しますが、euc-jp では化けるようです。また、utf-8 にすると、Google での アドレスバーで日本語部分が日本語として表示されます

複雑な検索文字列に対応する為に、検索文字列の入力は name 属性の無い送信されないフィールドで行い、本来必要な文字列作成を onsubmit イベントの中で行って、仕様に必要な name="q" のフィールドにセットして送信します。(name="q" のフィールドは type="hidden" で非表示です)

キャラクタセット指定
<script>
function callSearch() {

	var query = document.getElementById("q").value;
	if ( query.trim() != "" ) {
		query = query + " site:logicalerror.seesaa.net";
		document.getElementById("q_submit").value = query;
		return true;
	}

	return false;
}
</script>
<form
	accept-charset="utf-8"
	action="https://www.google.co.jp/search"
	target="_blank"
	onsubmit="return callSearch()">
<input
	type="text"
	id="q"
	size="31"
	maxlength="255"> 
<input
	type="hidden"
	id="q_submit"
	name="q"> 
<input
	type="submit"
	value="検索"> 
</form>



posted by lightbox at 2016-07-30 17:19 | Google | このブログの読者になる | 更新情報をチェックする

2016年06月20日


ブラウザの geolocation で Google MAP に現在地を表示。ライブラリでさらに詳細情報。API の geocoder で名称・住所から Google MAP を表示して、ライブラリでさらに詳細情報を取得。

緯度・経度関連で、4つの機能を実装したデモページです


※ この デモは https でアクセスしますが、http でもアクセスできるので注意して下さい
※ http でアクセスした場合、Google Chrome では現在地を取得できません

1) navigator.geolocation.getCurrentPosition でブラウザの現在位置を取得
2) ライブラリ(DmGeocorder) を使用して緯度・経度から場所情報を取得
3) Google の API の geocoder.geocode で 住所・名前から緯度・経度を取得

4) Google Maps JavaScript API で MAP 表示

制限事項

Google Chrome ては、PC でも スマホでも、現在地取得には https を使うか localhost でないと動作しません。( 他のブラウザでは今のところ動作しているようですが、将来的には同じになる可能性があります )
事実、現在 Yahoo の雨雲ズームレーダでは、Chrome では現在位置が取れません。
通常のサイトで使用して、PC の開発者ツールで表示すると、以下のようにメッセージが出ます


getCurrentPosition() and watchPosition() are deprecated on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
DmGeocorder は、自分でサーバに準備して使うものです。ですが、とりあえずデモ内で使用しているものに関して外部からの使用制限は設けていません。 Google Maps JavaScript API は、API コンソールで登録した APIKEY を使用し、使用するドメインを登録しているので他所では使用できません。 もし、他所で使用しようとすると以下のようになります デモのソースコード
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">

<style>
body,input {
	font-family: "ヒラギノ角ゴPro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"MS Pゴシック",Verdana,Arial,Helvetica,sans-serif;
	font-size: 16px;
}

a {
	color: navy;
}

#target_area {
	width: 600px; 
	height: 480px; 
}
#address {
	margin-bottom: 10px;
	width: 450px;
}


@media screen and (max-width:774px) {

	#target_area {
		width: 100%; 
	}

	#address {
		width: 250px;
	}

}
</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
// *************************************
// 初期位置
// *************************************
var lat = 34.7013233;
var lng = 135.4966954;

var geo = null;


$(function(){

	// *************************************
	// 現在位置を取得してマップに反映する
	// *************************************
	$("#getcur").on("click",function(){

		// *************************************
		// Chrome では、この実行には https か 
		// localhost である必要があります
		// *************************************
		navigator.geolocation.getCurrentPosition(function(target){
			geo = target;
			console.dir(target);

			var obj = {};

			for( value in target.coords ) {
				obj[value] = target.coords[value];
			}

			// ブラウザの geolocation で取得した内容
			$("#latlng").text( JSON.stringify(obj,null,"    ") );

			lat = geo.coords.latitude;
			lng = geo.coords.longitude;

			// Google MAP の再表示
			loadMap(document,"target_area",lat,lng,15);

			// サーバーのライブラリから場所情報を取得
			$.get("https://lightbox.sakura.ne.jp/toolbox/g_ken.php?lat="
				+geo.coords.latitude
				+"&lng="
				+geo.coords.longitude,
				function(data){
					console.dir(data);
					$("#latlng2").text( JSON.stringify(data,null,"  ") );
			
				}
			);
				
		});

	});

});

</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCQq2Yaz_ue8jVhf2LAQBlE73RJ17jd0tM"></script>
<script>
var geocoder = new google.maps.Geocoder();
var map;

$(function(){
	// *************************************
	// 住所・名前から位置情報を取得
	// *************************************
	$("#geo_action").on("click",function(){
		geocoder.geocode( {'address': $("#address").val()}, function(results, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				map.setCenter(results[0].geometry.location);
				var marker = new google.maps.Marker({
					map: map,
					position: results[0].geometry.location
				});
				// lat と lng
				console.log(results[0].geometry.location.lat(),results[0].geometry.location.lng());

				// *************************************
				// サーバーのライブラリから場所情報を取得
				// *************************************
				$.get("https://lightbox.sakura.ne.jp/toolbox/g_ken.php?lat="
					+results[0].geometry.location.lat()
					+"&lng="
					+results[0].geometry.location.lng(),
					function(data){
						console.dir(data);
						$("#latlng2").text( JSON.stringify(data,null,"  ") );
				
					}
				);

			}
			else {
				alert("Geocode が失敗しました : " + status);
			}
		});
	});
});

// *************************************
// Google MAP の表示
// *************************************
function loadMap(doc,obj_str,a,b,c) {
	var latlng = new google.maps.LatLng(a,b);
	var myOptions = {
		zoom: c,
		center: latlng,
		mapTypeControlOptions: {
			mapTypeIds: [
				google.maps.MapTypeId.HYBRID,
				google.maps.MapTypeId.ROADMAP,
				google.maps.MapTypeId.SATELLITE
			],
			style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
		},
		mapTypeId: google.maps.MapTypeId.HYBRID,
		scaleControl: true
	};
	map = new google.maps.Map(doc.getElementById(obj_str),myOptions);
}

// *************************************
// 最初の Google MAP の表示
// *************************************
google.maps.event.addDomListener(window, 'load', function () {
	loadMap(document,"target_area",lat,lng,15);
}); 
</script>
</head>
<body>

住所 <input type="text" id="address"> <input type="button" id="geo_action" value="実行">
<div id='target_area'></div>
<br><br>
<input type="button" id="getcur" value="現在位置を取得してマップに反映する">

<br>
▼ ブラウザの geolocation で取得した内容
<pre id="latlng"></pre>
▼ <a target="_blank" href="https://github.com/demouth/DmGeocoder">ライブラリ</a>より取得した場所情報
<pre id="latlng2"></pre>


</body>
</html>


以下のツールで、スマホで簡単に URL を送る事ができます。



posted by lightbox at 2016-06-20 15:01 | Google | このブログの読者になる | 更新情報をチェックする

2015年09月11日


Google+ に投稿するテキスト内の文字列を太字(ボールド)にしたりイタリックにしたりする方法







アスタリスクで文字列を挟むと*太字*になりますが、
アスタリスクの両端は *スペース* が必要です

イタリックには、アンダーバーを使用しますが、
日本語は _italic にならない_ ようです

どちらが外側でもいいですが、 _*italicと太字*_ は同時に利用可能です

取り消し線はハイフンを使用します
あああ -あああ- あああ

ボールドにしたい文字列を *(アスタリスク) で挟み、イタリックにしたい文字列を _(アンダーバー)で挟み、取り消し線を設定したて文字列を-(ハイフン)で挟みます。

※ * と _ と - の両外側にはスペースが必要なようです

公式での表記( 『投稿文の書式を設定する』を開いて下さい )



posted by lightbox at 2015-09-11 14:08 | Google | このブログの読者になる | 更新情報をチェックする

2015年01月23日


Google の Plus API を使って Google+ 投稿データを jQuery UI のアコーディオン(accordion)で表示する

アプリケーションを認証すると、以下のようになります。



一番上のブルーのメニューは、ログアウトや関連リンクをセットしてあります。下の黒いバーが jQuery UI のアコーディオンを使用して Google Plus の投稿データを表示しています。


▼ 実際のデモページです。
http://winofsql.jp/gapi/examples/page2.htm

page2.htm に IFRAME 内で接続用のリンクを用意しています。こうしておくと、どんなページにも簡単に接続リンクを追加できます。IFRAME 内は普通のリンクで、target="_top" になっています。

リンクには QueryString として初期ページと処理ページを渡して標準化しています。

page2.htm
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<iframe
	src="start.php?start=page2&action=main_action2"
	name="myframe"
	frameborder="0"
	scrolling="no"
	width="200"
	height="100"
></iframe>

</body>
</html>

▼ 接続リンクのあるページ
start.php
<?php
require_once("user_client.php");

$_SESSION['start'] = $_GET['start'];
$_SESSION['action'] = $_GET['action'];

$authUrl = $client->createAuthUrl();

?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
</head>
<body style='background-color:#e0e0e0;'>
<a href="<?= $authUrl ?>" target="_top">接続</a>
<br><br><br>
ここは IFREAME です
</body>
</html>


▼ Google Plus の投稿情報を jQuery UI のアコーディオンとして
main_action2.php
<?php
require_once("user_client.php");

/************************************************
  アクセストークンがある場合
  但し、期限が切れている場合は再度取得する必要
  があるので、認証用の URL を作成する
 ************************************************/
if (isset($_SESSION['access_token']) && $_SESSION['access_token']) {
  $client->setAccessToken($_SESSION['access_token']);
  if ($client->isAccessTokenExpired()) {
    unset($_SESSION['access_token']);
    header("Location: {$_SESSION['start']}htm");
    exit();
  }
}
/************************************************
  アクセストークンが無い場合
  認証用の URL を作成する
 ************************************************/
else {
    header("Location: {$_SESSION['start']}.htm");
    exit();
}

/************************************************
  目的 API の処理
 ************************************************/
$service = new Google_Service_Plus($client);

// タスクリストの一覧
try {
	$obj_activities = $service->activities->listActivities("me", "public");
}
catch(Exception $ex) {
	header('Location: logout.php');
	exit();
}

// タスクリストの配列として取得
$activities = $obj_activities->getItems();
?>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="http://winofsql.jp/jquery/plugins/smartmenus/sm-core-css.css" rel="stylesheet" type="text/css" />
<link href="http://winofsql.jp/jquery/plugins/smartmenus/sm-blue.css" rel="stylesheet" type="text/css" />

<style type="text/css">
#main-menu {
	margin-top: -3px;
	position:relative;
	z-index:9999;
	width:400px;
}
pre {
	white-space: pre;
	white-space: pre-wrap;
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -hp-pre-wrap;
	word-wrap: break-word;
	width: 700px;
}
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://winofsql.jp/jquery/plugins/smartmenus/jquery.smartmenus.min.js"></script>

<link type="text/css" href="http://winofsql.jp/jquery/jqcss/black-tie/jquery-ui-1.10.1.custom.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

</head>
<body>

<ul id="main-menu" class="sm sm-vertical sm-blue sm-blue-vertical">
	<li><a href="#">処理</a>
		<ul>
			<li><a href="page1.htm">HOME</a></li>
			<li><a href="logout.php">ログアウト</a></li>
			<li><a href="https://security.google.com/settings/security/permissions" target="_blank">Google のアカウント権限</a></li>
			<li><a href="http://code.google.com/apis/console/" target="_blank">APIs Console</a></li>
		</ul>
	</li>
</ul>

<script>
$('#main-menu').smartmenus();
</script>


<div id="google-plus">
<?php

for( $i = 0; $i < count($activities); $i++ ) {


	$obj = $activities[$i]->getObject();


	$main_text = $obj->getContent();

	$attachments = $obj->getAttachments();

	$attachments_displayName = $attachments[0]->displayName;

	// アコーディオンタイトル
	print "<h3>投稿" . ($i+1) . " : " . mb_substr($main_text,0,20,"UTF-8") . " / " . mb_substr($attachments_displayName,0,20,"UTF-8") . "</h3>";

	// アコーディオンコンテンツ
	print "<pre>";

	print "投稿部分 : " . $main_text . "<br>";

	print "▼--- 添付部分----<br>";

	print $attachments[0]->displayName . "<br>";
	print $attachments[0]->content . "<br>";
	print $attachments[0]->url . "<br>";
	print $attachments[0]->image['url'] . "<br>";
	if ( $attachments[0]->image['url'] != "" ) {
		print "   <img src=\"" . $attachments[0]->image['url'] . "\"><br>";
		print "   " . $attachments[0]->image['type'] . "<br>";
		print "   " . $attachments[0]->image['width'] . "<br>";
		print "   " . $attachments[0]->image['height'] . "<br>";
	}
	print "<br>";

	print "</pre>";

}
?>
</div>

<script>
$('#google-plus').accordion({
		heightStyle: "content",
		header: "h3"
	});
</script>


</bodyy>
</html>


Google Plus の投稿データは多くの階層内にいろいろなクラスが使われており、仕様上メソッドで呼び出す内容も多い為、一つ一つ階層を print_r で表示して取り出し方を Goolge のクラスのソースと照らし合わせながら確認する必要があります。

APIs Explorer

APIs Explorer ページの右上で認証後、me と public をセットして内容を確認できます


▼ 使用する API によって、スコープを変えれるよう標準化しています
user_client.php( 共通 )
<?php
session_start();

header( "Content-Type: text/html; Charset=utf-8" );
header( "pragma: no-cache" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
header( "Cache-control: no-cache" );

require_once realpath(dirname(__FILE__) . '/../autoload.php');

$client_id = '';
$client_secret = '';
$redirect_uri = 'http://winofsql.jp/gapi/examples/idtoken.php';

$client = new Google_Client();
$client->setClientId($client_id);
$client->setClientSecret($client_secret);
$client->setRedirectUri($redirect_uri);
if ( $_GET['start'] == 'page1' || $_SESSION['start'] == 'page1' ) {
	$client->addScope('https://www.googleapis.com/auth/tasks');
}
if ( $_GET['start'] == 'page2' || $_SESSION['start'] == 'page2' ) {
	$client->addScope('https://www.googleapis.com/auth/plus.login');
	$client->addScope('https://www.googleapis.com/auth/plus.me');
}

?>


▼ API から呼び出されるページ
idtoken.php
<?php
session_start();

require_once("user_client.php");

if (isset($_GET['code'])) {

  $client->authenticate($_GET['code']);
  $_SESSION['access_token'] = $client->getAccessToken();
  header("Location: {$_SESSION['action']}.php");

}
else {
  header("Location: {$_SESSION['start']}.htm");
}

?>

関連する記事

Google API の中でも単純な Task API を使って、アクセストークン取得のテンプレートを整備しました



タグ:google API
posted by lightbox at 2015-01-23 20:44 | Google | このブログの読者になる | 更新情報をチェックする

2015年01月20日


Google の タスク API(ToDoリスト) を使ってタスクリストとタスクのタイトルを jQuery のプラグインでメニュー化する

アプリケーションを認証すると、以下のようになります。



一番上は、最初から設定済みのメニューで、ログアウトや関連リンクをセットしてあります。下の3つが実際にタスクリストに登録した内容をタイトルだけ設定しています。

Google のタスクリストの管理

Google にログインしていない状態で認証プロセスを実行すると、ログイン画面が表示されるのですが、このログイン画面でログインしてしまうと、ログインを保持してしまうので注意して下さい。これを避けるには、あらかじめ Google にログインしてから認証すると OK です。

▼ 認証プロセス中のログイン


▼ 通常のログイン(ログイン状態を保持する為のチェックボックスがあります )


▼ 認証画面


▼ 実際のデモページです。
http://winofsql.jp/gapi/examples/page1.htm

page1.htm に IFRAME 内で接続用のリンクを用意しています。こうしておくと、どんなページにも簡単に接続リンクを追加できます。IFRAME 内は普通のリンクで、target="_top" になっています。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<iframe
	src="start.php?start=page1&action=main_action"
	name="myframe"
	frameborder="0"
	scrolling="no"
	width="200"
	height="100"
></iframe>

</body>
</html>

▼ 接続リンクのあるページ
start.php
<?php
require_once("user_client.php");

$_SESSION['start'] = $_GET['start'];
$_SESSION['action'] = $_GET['action'];

$authUrl = $client->createAuthUrl();

?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
</head>
<body style='background-color:#e0e0e0;'>
<a href="<?= $authUrl ?>" target="_top">接続</a>
<br><br><br>
ここは IFREAME です
</body>
</html>


▼ タスクリストのメニュー作成
main_action.php
<?php
require_once("user_client.php");

/************************************************
  アクセストークンがある場合
  但し、期限が切れている場合は再度取得する必要
  があるので、認証用の URL を作成する
 ************************************************/
if (isset($_SESSION['access_token']) && $_SESSION['access_token']) {
  $client->setAccessToken($_SESSION['access_token']);
  if ($client->isAccessTokenExpired()) {
    unset($_SESSION['access_token']);
    header("Location: {$_SESSION['start']}htm");
    exit();
  }
}
/************************************************
  アクセストークンが無い場合
  認証用の URL を作成するページへのリンクがある
  ページに移動する
 ************************************************/
else {
    header("Location: {$_SESSION['start']}htm");
    exit();
}

/************************************************
  目的 API の処理
 ************************************************/
$service = new Google_Service_Tasks($client);

// タスクリストの一覧
try {
	$obj_tasklists = $service->tasklists->listTasklists();
}
catch(Exception $ex) {
	// セッションの継続中に、アプリケーションの
	// 認証登録が削除された場合
	header('Location: logout.php');
	exit();
}

// タスクリストの配列として取得
$tasklists = $obj_tasklists->getItems();

for( $i = 0; $i < count($tasklists); $i++ ) {

	$obj_tasks = $service->tasks->listTasks($tasklists[$i]->id);
	// タスクリストの数にに同期したタスクの配列の配列を作成
	$tasks[] = $obj_tasks->getItems();

}

/************************************************
  目的の処理
 ************************************************/

?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="http://winofsql.jp/jquery/plugins/smartmenus/sm-core-css.css" rel="stylesheet" type="text/css" />
<link href="http://winofsql.jp/jquery/plugins/smartmenus/sm-blue.css" rel="stylesheet" type="text/css" />

<style type="text/css">
#main-menu {
	margin-top: -3px;
	position:relative;
	z-index:9999;
	width:400px;
}
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://winofsql.jp/jquery/plugins/smartmenus/jquery.smartmenus.min.js"></script>
</head>
<body>

<ul id="main-menu" class="sm sm-vertical sm-blue sm-blue-vertical">
	<li><a href="#">処理</a>
		<ul>
			<li><a href="page1.htm">HOME</a></li>
			<li><a href="logout.php">ログアウト</a></li>
			<li><a href="https://security.google.com/settings/security/permissions" target="_blank">Google のアカウント権限</a></li>
			<li><a href="http://code.google.com/apis/console/" target="_blank">APIs Console</a></li>
			<li><a href="https://mail.google.com/tasks/canvas" target="_blank">Google のタスク管理ページ</a></li>
 
		</ul>
	</li>
</ul>

<div>
  <pre class="data" style='padding:20px;'>

<?php 
// 主処理

$obj = json_decode($_SESSION['access_token']);
print_r($obj);

print "期限 :" . ($obj->{'created'}+$obj->{'expires_in'}) . "\n";
print "現在 :" . time() . "\n";

print "\n";


?>
  </pre>
</div>

<script type="text/javascript">
// PHP の タスクリストを JavaScript のオブジェクトとして埋め込む
var taskLists = <?php print json_encode( $tasklists ) ?>;
// PHP の タスクの配列の配列を JavaScript のオブジェクトとして埋め込む
var tasks = <?php print json_encode( $tasks ) ?>;
var ul_unit;

for( i = 0; i < taskLists.length; i++ ) {
	// main-menu に最上位メニューとしてタスクリストを追加
	$( "<li id='"+ taskLists[i].id +"'><a href='#'>" + taskLists[i].title + "</a></li>" ).appendTo( $("#main-menu") )
	if ( tasks[i].length != 0 ) {
		// サブメニューのユニットを追加
		ul_unit = $("<ul></ul>").appendTo( $("#"+ taskLists[i].id) );
		// サブメニューの項目としてタスクを全て追加
		for( j = 0; j < tasks[i].length; j++ ) {
			if ( tasks[i][j].title != "" ) {
				$( "<li><a href='#'>" + tasks[i][j].title + "</a></li>" ).appendTo( $(ul_unit) );
			}
		}
	}
}

$('#main-menu').smartmenus({});

</script>


</body>
</html>

jQuery のプラグインである SmartMenus を使用しています。SmartMenus のデモページはこちらになります。

▼ user_client.php( 共通 )
<?php
session_start();

header( "Content-Type: text/html; Charset=utf-8" );
header( "pragma: no-cache" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
header( "Cache-control: no-cache" );

require_once realpath(dirname(__FILE__) . '/../autoload.php');

$client_id = '';
$client_secret = '';
$redirect_uri = 'http://winofsql.jp/gapi/examples/idtoken.php';

$client = new Google_Client();
$client->setClientId($client_id);
$client->setClientSecret($client_secret);
$client->setRedirectUri($redirect_uri);
if ( $_GET['start'] == 'page1' || $_SESSION['start'] == 'page1' ) {
	$client->addScope('https://www.googleapis.com/auth/tasks');
}
if ( $_GET['start'] == 'page2' || $_SESSION['start'] == 'page2' ) {
	$client->addScope('https://www.googleapis.com/auth/plus.login');
	$client->addScope('https://www.googleapis.com/auth/plus.me');
}

?>


▼ API から呼び出されるページ( idtoken.php )
<?php
session_start();

require_once("user_client.php");

if (isset($_GET['code'])) {

  $client->authenticate($_GET['code']);
  $_SESSION['access_token'] = $client->getAccessToken();
  header("Location: {$_SESSION['action']}.php");

}
else {
  header("Location: {$_SESSION['start']}.htm");
}

?>



タグ:API
posted by lightbox at 2015-01-20 20:36 | Google | このブログの読者になる | 更新情報をチェックする

2015年01月15日


Google API の中でも単純な Task API を使って、アクセストークン取得のテンプレートを整備しました

google-api-php-client
Client ID と Client secret と Redirect URIs が必要です ( APIs Console )

今までサンプルコードをそのまま使って来ましたが、よくよく読むと少し胡散臭いので整備しました。

どの API も一様に同じようになっていますが、その中でも Task API は単純で解りやすく、実際のオンラインページと比較しやすいのでおすすめです。

※ アクセストークンの期限を内部でチェックしている方式で目で見れるようにしました
<?php
/*
 * Copyright 2011 Google Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
include_once "templates/base.php";
session_start();

header( "Content-Type: text/html; Charset=utf-8" );
header( "pragma: no-cache" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
header( "Cache-control: no-cache" );

require_once realpath(dirname(__FILE__) . '/../autoload.php');

$client_id = '';
$client_secret = '';
$redirect_uri = 'http://localhost/gapi/examples/idtoken.php';

$client = new Google_Client();
$client->setClientId($client_id);
$client->setClientSecret($client_secret);
$client->setRedirectUri($redirect_uri);
$client->addScope('https://www.googleapis.com/auth/tasks');

/************************************************
  ログアウト処理
  アクセストークンをクリアして最初の状態に戻す
 ************************************************/
if (isset($_REQUEST['logout'])) {
  unset($_SESSION['access_token']);
}

/************************************************
  API からのコールバック
  つまり、アクセストークンが取得されるところ
  取得後、環境をリセットする為に自分自身を呼ぶ
 ************************************************/
if (isset($_GET['code'])) {
  $client->authenticate($_GET['code']);
  $_SESSION['access_token'] = $client->getAccessToken();
  $redirect = 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['PHP_SELF'];
  header('Location: ' . filter_var($redirect, FILTER_SANITIZE_URL));
  exit();
}

/************************************************
  アクセストークンがある場合
  但し、期限が切れている場合は再度取得する必要
  があるので、認証用の URL を作成する
 ************************************************/
if (isset($_SESSION['access_token']) && $_SESSION['access_token']) {
  $client->setAccessToken($_SESSION['access_token']);
  if ($client->isAccessTokenExpired()) {
    unset($_SESSION['access_token']);
    $authUrl = $client->createAuthUrl();
  }
}
/************************************************
  アクセストークンが無い場合
  認証用の URL を作成する
 ************************************************/
else {
  $authUrl = $client->createAuthUrl();
}

/************************************************
  目的の処理
 ************************************************/

echo pageHeader("目的の処理");
?>
<div class="box" style='width:80%'>
  <div class="request">
<?php
// 接続用リンク
if (isset($authUrl)) {
  echo "<a class='login' href='" . $authUrl . "'>Connect Me!</a>";
} 
// ログアウト用リンク
else {
  echo "<a class='logout' href='?logout'>Logout</a>";
}

if ($client->getAccessToken() && isset($_SESSION['access_token']) && $_SESSION['access_token'] ) {
?>
  </div>

  <pre class="data">
<?php 
// 主処理

$obj = json_decode($_SESSION['access_token']);
print_r($obj);

print "期限 :" . ($obj->{'created'}+$obj->{'expires_in'}) . "\n";
print "現在 :" . time() . "\n";

print "\n";

$service = new Google_Service_Tasks($client);

// タスクリストの一覧
$obj_tasklists = $service->tasklists->listTasklists();

// タスクリストの配列として取得
$tasklists = $obj_tasklists->getItems();

print_r($tasklists);


?>
  </pre>
</div>
<?php
}

?>

環境をリセットする為と言うのは、コールバック時にはアクセストークンが URL に付加されており、そのままのページではトークンの内容が解ってしまうからです。( $_GET['code'] は URL から取得されるものです )

関連する記事


posted by lightbox at 2015-01-15 15:23 | Google | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり



フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり