Google ドライブの WEBホスティングが無くなったので、Google の Firebase をとりあえず使う方法

もう、【2016/8/31で廃止】であることは解っていたのですが、Google からメールが届きました。

IMPORTANT: Drive web hosting is shutting down

We announced last year that we're deprecating web hosting in Google Drive for users and developers. Our records show that you might have used this feature to publish a webpage or serve other web assets.

On Aug 31, 2016, we will discontinue serving content via googledrive.com/host/[id] and the webpages will not be accessible anymore.

As an alternative to web hosting in Drive, we recommend:

Blogger−An easy and free way to host websites.
Firebase Hosting− An alternative if you're using the web-hosting feature to serve static webpages with items on Drive.


で、試してみました。確かに普通に使えます。インターネットの情報はそれなりにありますが、無料プランの説明はちょっと古いものしか見つかりませんでした。結論から言って、『無料プランで独自ドメインが使用できます』



技術者が使用するのであれば、DB や Android でPush 通知などがすぐいろいろ試してみれると思うので、特に問題は無いですが(ドキュメントが英語というのはいつものことですが)、一般の人にはちょっとハードルが高いです。ただ、ホスティングのみをする目的で、Node.js をインストールしてコマンドプロンプトを使ってデプロイするという事は、FTP クライアント使うのとそう違わないのかなぁ・・という気もします。それどころか、ローカルに http://localhost:5000 のウェブサーバを使用して表示を確かめる事ができるので、そんなに悪くも無いのかなぁとも思いました。

インストール等手順

二つのアカウントと、3つのPC から試しました。これでいけると思います。画像がやたらと多くなるので、NAVER のシステムを使ってまとめました。

Firebase の使い方 / Google の 1 GB まで無料のホスティングサービス

プロジェクトの作成もコマンドプロンプトからできるようですが、プロジェクトはブラウザから作成したほうがいいでしょう。そして、ブラウザであらかじめログインしておく事になるので、そのブラウザは規定のブラウザである必要があると思います。ログイン時にたぶん、規定のブラウザを使っていると思われるからです。

カスタムドメインは、自分の管理するドメイン側で、二つ TXT レコードを書き込む必要があります。これは、以前から Google が使用していた方法のようです。ただ、説明としてはサブドメインが使えるとあるのですが、自分がゾーン編集できるのはメインのドメインのみなので、試してはいません。

入力したとたん、TXT レコード が表示されて、そのエントリをすぐに削除できませんでした。仕方ないので一晩明けて見に行ったら『削除可能』になっていました。


コマンドプロンプトについて

コマンドプロンプトに慣れている人にはいまさらですが、『簡易編集モード』に変更しておくと、コピーペーストが楽になります。ただ、インストール場所をデフォルトの Program Files にした場合、昨今変更できないので、『簡易編集モード』へ変更する為にデスクトップにショートカットを作成してから『簡易編集モード』に変更する事になります。

▼ Windows10 の設定画面


また、Node.js 用にインストール時に Path 環境変数の先頭に文字列が追加されるので、これも知ってる人はいいですが、知らない場合は後で『あれ?』と思うかもしれません。


デプロイ

エラーが出る可能性があるので、その場合はしばらくしてから再度実行が必要です。

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>

ブラウザの 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,"ＭＳ Ｐゴシック",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 を送る事ができます。

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

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

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

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

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

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

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

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

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(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");
}

?>