[GoogleAPI千本ノック] Google+ Hangouts API を試してみた

  • このエントリーをはてなブックマークに追加

ご注意

この記事は 2015年6月4日 に書かれたものです。内容が古い可能性がありますのでご注意ください。

こんにちは。
GoogleのAPIを片っ端から紹介する、GoogleAPI千本ノック、第5回目は、Google+ Hangouts API をご紹介します。

Hangout とは?

ハングアウトとは、Googleアカウントでできるメッセンジャーサービスです。メッセンジャーだけではなくビデオチャットもあり、APIも提供しています。
Gmailの左下にあるアドレス帳のようなものとか、最近はデスクトップアプリのようにブラウザから独立しているものもあります。

Hangouts API の使い方

ハングアウトには、Google+ Hangouts API が提供されています。このAPIを使用するとハングアウト内で実行できるアプリを開発できます。あくまでハングアウトアプリケーションまたはChromeの拡張機能内でのみ動作します。

ハングアウトアプリは、HTML、JavaScript、CSS のコードを含む XML ファイルで構成されています。
(これをガジェットXMLと言います。)
ガジェットXMLは下記のようなコードが書かれています。外部のJavaScript、CSS をインポートしてUIを設定することも可能です。

メタ情報の組み込まれたModulePrefs要素とプログラム本体部分のContent要素で構成されています。ModulePrefsのrequireにはインポートする機能を指定します。上の例では標準で必要なrpc機能と、データをアプリに渡す為のviews機能を指定してます。 ハングアウトが読み込まれると、Content要素のHTMLはハングアウト内の iframe 内に読み込まれます。hangout.js ファイルをインクルードすることで、アプリケーションで Hangouts JavaScript API (gapi.hangout.~)にアクセスできます。 このファイルをBasic認証等かかっていないオープンなサーバにホスティングします。

Hangouts API の特徴

Hangouts API には次の2つの主な特徴が含まれています。

(1) ハングアウト参加者間のデータを同期する機能

ハングアウトセッション中、すべてのアプリケーションインスタンスで共有される状態オブジェクトを保持しています。データ形式はJSON形式です。 アプリケーションの状態は gapi.hangout.data で関数を使用してアクセスされ、管理されます。gapi.hangout.data.setValue()とgetValue()を使います。
hangout_state

(2) ハングアウト内の多様なイベントに応答する機能

Hangouts API には、アプリケーション内の特定のアクションをトリガーできるイベントが用意されています。イベントには、参加者が入退出した、マイクがミュートにされた、音量が変更された、共有状態が変更された、などがあります。 イベントの一覧は API リファレンス(v1.4)に記載されています。 以下の例は、ハングアウトに参加したときに呼ばれるイベントのコールバック関数です。

[javascript]gapi.hangout.onParticipantsAdded.add(function(eventObj){
startMyApp(eventObj.id);
});
[/javascript]

Hangouts API を叩いてみた

試しにハングアウトの特徴の一つである共有状態を使い、ハングアウトアプリを作成してみます。
作ろうとしているアプリは、同じYoutubeの動画をみんなでリアルタイムに見るというものです。
例えば5人でこのアプリを使い、誰かがYoutubeのURLを投稿するとリアルタイムに後の4人のアプリでも同じ動画が再生されます。
ハングアウトAPIの特徴の一つである「共有される状態オブジェクト」を応用したアプリになります。

処理フローは次のようになりました。

  1. URLを投稿すると共有されている状態オブジェクトが更新されます。
  2. 共有されている状態オブジェクトが更新されると共有状態更新イベントが走ります。
  3. イベントが走ると共有されている状態オブジェクトからデータを取得し動画に反映します。

app_img

作成したガジェットXMLは下記のようになりました。

1.このガジェットXMLをオープンなサーバにホスティングします。
2.GCPプロジェクトを作成して、Google+ Hangouts API を有効にします。
api_activate

3.APIコンソール から Hangouts を開き、Application URL (Required) に先ほどホスティングしたガジェットXMLのURLを入力し、Application Type は Main application にチェックします。

4.画面下の方にあるSAVEボタンをクリックします。
save

5.Enter a hangout in developer sandbox のリンクから開こうとすると404エラーが返ってきます。そこでこのリンク先(https://hangoutsapi.talkgadget.google.com/hangouts?authuser=0&gid=~)のGIDの部分の数字を「https://plus.google.com/hangouts/_/?gid=」の後方に付けてアクセスします。
するとアプリが読み込まれます。
左下のテキストボックスにYoutubeのURLを投稿するとYoutube画面が変わります。
他の人を招待すれば全員のYoutube画面が変更されるのが確認できます。

youtube_app

まとめ

ハングアウトアプリは、ハングアウトアプリケーションまたは拡張機能のいずれかとして実行できます。
ハングアウトを利用したシステム開発やGCEにおける自動化のご要望、運用管理含めてご相談があれば、クラウドエースまで是非お問い合わせ下さい。

  • このエントリーをはてなブックマークに追加

Google のクラウドサービスについてもっと詳しく知りたい、直接話が聞いてみたいという方のために、クラウドエースでは無料相談会を実施しております。お申し込みは下記ボタンより承っておりますので、この機会にぜひ弊社をご利用いただければと思います。

無料相談会のお申込みはこちら