アプリケーションを認証すると、以下のようになります。一番上は、最初から設定済みのメニューで、ログアウトや関連リンクをセットしてあります。下の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
|
|
【Googleの最新記事】
- Google 共有ドライブの容量の上限について
- Google Classroom は無料の G Suite for Education アカウントが必要
- 教室と一対一のフォルダより新しく登録されたフォルダの中にあるZoom動画ファイルを該当するClassroom の コース内の該当するトピックに登録する
- Google Apps Script : 動画を添付して Classroom の指定のトピックへ課題として投稿する
- Google Classroom のテーマ画像のサイズと既存画像をテーマ画像として使用してみた手順
- Google Chrome でスマホのソースコードをごく普通に表示して利用する
- Gmail に 実行可能なファイルの拡張子を持つファイルを格納した zip 書庫は送れません
- Gmail で添付できないファイルをエクスプローラで検索する為の文字列
- jQuery で既存 table より Firebase Database のデータを作成する
- jQuery + Bootstrap(css) + mmenu : Firebase Database 参照と更新サンプル( 新規登録テンプレートより )
- jQuery + Bootstrap(css) + mmenu : Firebase Database 新規登録テンプレート
- jQuery + Bootstrap(css) + mmenu : Firebase ログインテンプレート
- Google ドライブの WEBホスティングが無くなったので、Google の Firebase をとりあえず使う方法
- Google サイト内検索の FORM 要素による設置
- ブラウザの geolocation で Google MAP に現在地を表示。ライブラリでさらに詳細情報。API の geocoder で名称・住所から Google MAP を表示して、ライブラリで..
- Google+ に投稿するテキスト内の文字列を太字(ボールド)にしたりイタリックにしたりする方法
- Google の Plus API を使って Google+ 投稿データを jQuery UI のアコーディオン(accordion)で表示する
- Google API の中でも単純な Task API を使って、アクセストークン取得のテンプレートを整備しました
- GitHub の google-api-php-client( PHP ) を使って、Gmail でメールを送る( 添付ファイル付き )
- GitHub の google-api-php-client( PHP ) を使って、Gmail でメールを送る
