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

Google

<< VB.net(C#) : Picas… | TOP | JavaScript : setTi… >>

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

【Googleの最新記事】

posted by lightbox at 2015-01-23 20:44 | Google |

Seesaa ブログ

	SQLServer の BCP で INT IDENTITY 列に csv からリストアする
	MySQL に PIPES_AS_CONCAT を設定して、CSV を出力する SQL
	Chrome ポリシー : レジストリ : ( ChatGPT 解説 )
	PL/SQL : 最も簡単な CSV 出力の記述
	VBScript を『管理者として実行する』には、Shell の runas ( 右クリックメニューの実行と同等 ) で実現します / Jscript も追加
	fake sendmail for windows を使って、PHP でごく普通に( mb_send_mail で )メール送信
	TCPDF をダウンロードして、Windows の任意のフォルダで TCPDF 同梱のサンプルを実行する為の設定
	JavaScript : window オブジェクトのプロパティとしてグローバル変数を定義する
	TCPDF をダウンロードして、フリーフォントを埋め込み型で使用する方法
	汎用型 : JSON データより履歴書のフォームを出力するサンプル
	ChatGPT でトップまでスクロールするブックマークレット
	Replit : cs-list
	Replit : js-web-speech
	Replit : js-csv-read-utf8
	Replit : text-editor
	指定した位置でレジストリエディタを開く為の VBScript をダウンロードします
	JScript / VBScript : 指定したフォルダ内のフォルダ毎の使用済みサイズを読める範囲でレポートする
	デスクトップを部分キャプチャした時に切り取り&スケッチを起動してキャプチャ画像に枠線を付加させる。
	#Zoom の必殺技 : 相手に自分の Zoom 関連のウインドウを見せる
	GAS でユーザ作成 : 組織は "orgUnitPath": "/組織名A/組織名B"

	一部のファイル形式がブロックされる(GMail)
	Creating Shortcut Menu Handlers
	Microsoft Word のキーボードショートカット
	Excel のショートカットキーとファンクションキー
	サイトへの不自然なリンクを否認する新しいツールの提供を開始しました

logical error

2015年01月23日

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

logical　error