アプリケーションを認証すると、以下のようになります。
一番上のブルーのメニューは、ログアウトや関連リンクをセットしてあります。下の黒いバーが 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 を使って、アクセストークン取得のテンプレートを整備しました
▼ 無名関数
現在では関数名を記述する場所で無名関数をその場に書く事が多いですが、もちろん文字列でも動作します。文字列の場合は、処理する内容をタイマーが発生する時間に内容を確定させておく事が重要です( 全て文字列なので、それがかならずそのまま実行される事を利用します ) 具体的には、関数内に値を埋め込む事で時間差の問題を解決できます。 関数名では、IE11、Firefox、Google Chrome、Opera で第三引数(関数の引数の数ぶん第4、第5と指定できます)が利用できる事を確認しています。 ( IE では IE10 以降で第3引数が使用できるようです )
一番上は、最初から設定済みのメニューで、ログアウトや関連リンクをセットしてあります。下の3つが実際にタスクリストに登録した内容をタイトルだけ設定しています。
▼ 通常のログイン(ログイン状態を保持する為のチェックボックスがあります )
▼ 認証画面
▼ 実際のデモページです。
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
