[API] Google+ Hangouts API を使う #1 – Hangout プロジェクトを作成する
[API] Google+ Hangouts API を使う #2 – Hangout アプリケーションを記述する
Google+ Hangouts API (v1.2 / 2012年8月現在) > Running Hangout Apps 翻訳
パブリックアクセス可能なURLに、ガジェットXMLファイルをアップして公開する必要があります。（Google App Engine のアプリケーションや、Google Project Hosting のレポジトリのような安定したURL）
続きを読む
[API] Google+ Hangouts API を使う #1 – Hangout プロジェクトを作成する
Google+ Hangouts API (v1.2 / 2012年8月現在) > Writing Hangout Apps 翻訳
Hangout アプリケーションは、基本的なHTML、JavaScript とCSSを使って記述します。 （必要なときに、アプリケーションはさらに任意のサーバーAPIと通信することができますが、それはこのドキュメントの範囲外です。）
starter app は、自分のアプリケーションに基礎として使用できる単純な骨組みです。
このページのほかのサンプルも参考にしてください。 ダウンロードした README.txt ファイルの手順に従ってください。
以下、アプリケーションを記述するために重要な3点。
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Your App Name">
<Require feature="rpc"/>
<Require feature="views"/>
</ModulePrefs>
<Content type="html">
<![CDATA[
<script src="//talkgadget.google.com/hangouts/_/api/hangout.js?v=1.2"></script>
<!-- Your application code -->
]]>
</Content>
</Module>
XMLファイルは、アプリケーションの名前（<ModulePrefs title=”Your App Name”>）とコードを置き換えて、サンプルコードXML に従ってください。 ModulePrefs セクションの”rpc” を Require してください（<Require feature=”rpc”/>）。
自分のアプリケーションにデータを渡したい場合は、”views”をRequireしてください（<Require feature=”views”/>）。
アプリケーションのコードは、標準のHTML、JavaScript、およびCSSで構成する必要があります。hangout にロードされたときに、Content要素の内容は、hangout 内部のiframe にロードされます。hangout.js ファイルを含めることによって、アプリケーションはHangouts JavaScript API にアクセスします。標準的なスクリプトやHTML要素のリンクを使用して、アプリケーションの外部JavaScript/CSSファイルの一部または全部を読み込むことができます。
Googleのサーバーによってフェッチされることができるように、 アプリケーションのXMLファイルは、パブリックアクセス可能なURLで公開する 必要があります。外部JavaScriptファイルとCSSファイルは、必ずしもパブリックURLでホストする必要はありませんが、hangout の参加者のブラウザからアクセスできるようにしてください。
Hangoutセッション中には、単一のstate objectがHangoutの全てのアプリケーションインスタンス間で共有されます。
{
'leader': participantId,
'highScore': '112358132134'
}
State values は文字列でなければなりません。
State にオブジェクトを格納したい場合は、それぞれ、それらをシリアル化および逆シリアル化するために JSON.stringify（obj） と JSON.parse（obj） を使用することができます。
Application state は gapi.hangout.data名前空間 の関数を使用して管理、アクセスします。
HangoutsAPI は、特定のアクションをトリガーするためにアプリケーションで使用できる多くのイベントが含まれています。 on*.add 関数のいずれかを使用して、特定のイベントが発生したときに呼び出されるコールバック関数を登録します。
（イベント >> API のReady状態。アプリケーションの表示。参加者がHangoutに参加。マイクがミュートされた。ボリュームの変更。共有状態の変更。通知の表示、など。）
on*.remove 関数を使用して、登録済みのイベントコールバックを削除します。
var onStateChange = function(eventObj) {
for (var i = 0; i < eventObj.addedKeys.length; ++i) {
foo(eventObj.addedKeys[i].key,
eventObj.addedKeys[i].value,
eventObj.addedKeys[i].timestamp);
}
for (var j = 0; j < eventObj.removedKeys.length; ++j) {
bar(eventObj.removedKeys[j]);
}
state_ = eventObj.state;
metadata_ = eventObj.metadata;
};
gapi.hangout.data.onStateChanged.add(onStateChange);
var onParticipantsChange = function(eventObj) {
participants_ = eventObj.participants;
};
gapi.hangout.onParticipantsChanged.add(onParticipantsChange);
gapi.hangout.onApiReady.add(function(eventObj){
if (eventObj.isApiReady) {
startMyApp();
}
});
※そのほかのイベント詳細については APIリファレンスを参照してください。
Google+ Hangouts API (v1.2 / 2012年8月現在) > Getting Started 翻訳
略
Google+ Hangouts APIを使う前に、Google APIs sconsole でプロジェクトを作成する必要があります。アプリケーションを Developer Sandbox で動作させるためにOAuth2.0 は必要ありません。
・ APIs console ページ を開く
・ 左メニューの上部の API Project プルダウンリストから Create をクリックし、プロジェクト名を入力する。
・ Google web service のリストが表示されるので、一覧から Google+ Hangouts API を ON にし、サービスの使用条件に同意する。
APIs console ページ の左メニューから Hangouts をクリックする。
・ Application URL のフィールドにXMLファイルのURLを入力する。
ｅｘ）http://url-to-your-xml-file
step1を省略した場合は、Google が既にホストしている public example XML file のＵＲＬを入力する。↓
https://plushangoutstarter.appspot.com/static/simpleHangoutApp.xml
・ Save ボタンをクリックする。
・ Save ボタンの下に Enter a hangout のリンクが表示される。左記のリンクをクリックして Hangout App を起動させる。
※ 起動した Hangout App は、 Developer Preview と表示されているように、Developer Sandbox 上で動作している。
このページのボタン等の詳細については、Running your app in Developer Sandbox を参照する。
【JSONサンプルコード】
※ employees の子要素に, “surname” : “Lacava” と “Brown” がいる。
{
"employees" :
[
{
"surname" : "Lacava",
"name" : "Alessandro",
"city" : "Milan",
"age" : 30
},
{
"surname" : "Brown",
"name" : "John",
"city" : "Rome",
"age" : 35
}
]
}
参照►JSONを使ってAJAXベースのアプリケーションを高速化する
参照►JSONPってなに？
【サンプルコード】
※ パラメータを付加したURLを投げて、結果を取得する。
$.ajax({
type:"POST"
dataType: "json", // データ形式はJSONを指定
data: { // リクエストパラメータを定義
"vq": keyword,
"max-results":"10",
"alt":"json-in-script"
},
cache: true, // キャッシュを使用
url: "http://gdata.youtube.com/feeds/api/videos",
success: function (data) {
// データ取得に成功した場合の処理を定義
$("#videos").empty();
$.each(data.feed.entry, function(i,item){
// entryの各要素へアクセス
var group = item.media$group;
$("") // a要素を生成
.attr("href", group.media$player[0].url) //a要素のhref属性を設定
.append("![](" + group.media$thumbnail[0].url + ")
") // a要素の子要素にimg要素を追加
.appendTo("#videos"); // a要素を表示領域の子要素に追加
});
},
error : function(XMLHttpRequest, textStatus, errorThrown){
// データ取得に失敗した場合の処理定義
}
});
file_get_contents よりもパフォーマンスが良い cURL を使う。
PHP を cURL サポート機能付きでコンパイルすると、 curl 関数を使用可能となる。
1. curl_init() により cURL セッションを初期化
2. curl_setopt() により転送時のオプションを設定
3. curl_exec() により転送を実行
4. curl_close() によりセッションを終了
【 サンプルコード 】
※ cURL で JSON データを取得/更新
try{
// セッションを初期化
$ch = curl_init();
// 転送時のオプションを設定
if($request == "POST"){
$param_arr = http_build_query($param_arr);
curl_setopt($ch, CURLOPT_POST, TRUE);
curl_setopt($ch, CURLOPT_POSTFIELDS, $param_arr);
}else{
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "DELETE" );
}
curl_setopt($ch, CURLOPT_URL, $access_url);
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, TRUE);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
// 転送を実行
$strResponse = curl_exec($ch);
// エラー番号を取得
$curlErrno = curl_errno($ch);
if($curlErrno){
$curlError = curl_error($ch);
throw new Exception($curlError);
}
// セッションを終了
curl_close($ch);
// JSON 文字列をデコード
$result = json_decode($strResponse, true);
$arr = array(
'code' => $result["meta"]["code"],
'ret_data' => $result["data"] );
// 文字列をエンコード
$encode = json_encode($arr);
header("Content-Type:text/javascript; charset=utf-8");// for debug
echo $encode;
exit;
} catch (Exception $e) {
echo "Exception-".$e->getMessage();
}
※今回（Instagram API）は、データの更新（DELETE）に CURLOPT_CUSTOMREQUEST というカスタムメソッドを使用。