Japanese: Accessing voice mail from an activity stream: sbt

Added by

Hiroaki Komine | Edited by IBM contributor

Deanna Drschiwiski on June 24, 2011 | Version 14

Edit
More Actions ▼

Abstract

このシナリオではユニファイド･コミュニケーションの機能を提供する会社が Activity Stream に直接ボイスメールの通知を埋め込み、Embedded Experience でボイスメールの再生機能を埋め込む例を示しています。

Tags: samples, examples, scenarios, Social Business Toolkit

ShowTable of Contents

HideTable of Contents

1 サンプルのシナリオ
2 埋め込み画面 ( Embedded Experience ) の作成
- 2.1 ボイスメールガジェットを作成する
- 2.2 翻訳者ノート：作成されたガジェットをサーバーにデプロイする
3 Activity Stream への通知イベントのポスト
- 3.1 翻訳者補足： FireFox Poster によるイベントのポスト
4 Activity Stream でのボイスメールのイベントの確認

サンプルのシナリオ

1. サマンサはジョンへ電話を掛けてメッセージを残します。
2. ジョン宛のボイスメールが届いたことを知らせるイベントが Activity Stream へポストされます。
3. 下図のようなジョンはイベント通知ガ表示されるので、このイベント通知をクリックするとガジェットスライドして表示されます。
ボイスメールの通知イベント

4. ジョンはガジェットから直接ボイスメールの録音を聞きます。彼はそこでメッセージを再生することもボリューム調整をすることもできます。聞き終わるとガジェットを閉じて Activity Stream に戻ります。

このシナリオの中で、ジョンは Activity Stream のコンテキストの中でボイスメールを受け取り聞くことができます。もともと開いていたウィンドウを離れて新しいアプリケーションのウィンドウを開く必要はありません。

埋め込み画面 ( Embedded Experience ) の作成

このシナリオの中で、ボイスメールを操作するための埋め込み画面 ( Embedded Experience ) はガジェットとして作成します。作成されたがジェットはボイスメールのサービスを提供するサーバーに置かれます。

ボイスメールガジェットを作成する

まず最初に、登録されたイベントから呼び出され、ユーザーが操作するがジェットを作成します。このサンプルのシナリオではユーザーはイベントから開かれたがジェットでボイスメールの再生を行います。
以下のコードはボイスメールの埋め込み画面 ( Embedded Experience ) を表示するサンプルがジェットです。この内容 voicemail.xml という XML ファイルに保存します。

翻訳者ノート： ここで示したガジェットは OpenSocial に準拠しています。

<?xml version="1.0" encoding="UTF-8"?>

<Module>

<ModulePrefs title="You have a new voice message">

<Require feature="setprefs"/>

</ModulePrefs>

<UserPref name="contextualData" display_name="contextualData" datatype="hidden" default_value="{}">

</UserPref>

<Content type="html" view="default">

<! [CDATA [

<script type="text/javascript">

var name__MODULE_ID__ ;

var icon__MODULE_ID__ ;

var senderPhone__MODULE_ID__;

var receiverName__MODULE_ID__;

var messageSendTime__MODULE_ID__;

var urgency__MODULE_ID__;

var audioURL__MODULE_ID__;

function getData__MODULE_ID__(){

    var prefs__MODULE_ID__ = new gadgets.Prefs(__MODULE_ID__);

    var node = document.getElementById(__MODULE_ID__);

    var contextualData = prefs__MODULE_ID__.getString("contextualData");

    contextualData = unescapeHtml__MODULE_ID__(contextualData);

    var data = gadgets.json.parse(contextualData);

    senderPhone__MODULE_ID__ = data.senderPhone;

    audioURL__MODULE_ID__ = data.audioUrl;

    loadData__MODULE_ID__();

function unescapeHtml__MODULE_ID__(str) {

    var temp = document.createElement("div");

    temp.innerHTML = str;

    var result = temp.childNodes [0].nodeValue;

    temp.removeChild(temp.firstChild);

    return result;

function loadData__MODULE_ID__(){

    //fromEmail

    var fromEmailNode__MODULE_ID__ = document.getElementById("fromEmail__MODULE_ID__");

    //added format the phone #

    //var niceNum = formatPhoneNum(senderPhone__MODULE_ID__);

    fromEmailNode__MODULE_ID__.innerHTML = senderPhone__MODULE_ID__;

    var av = document.getElementById("avsourcevoicemail__MODULE_ID__");

    av.src = audioURL__MODULE_ID__;

//Add the OnClick to any AV element

function addOnClickAV(av_id){

    var av = document.getElementById(av_id);

    av.onclick = function() {

    if (av.paused) {

        av.play();

    } else {

        av.pause();

};

//play AV element

function play(av_id){

    var vm=document.getElementsByTagName("video") [0];

    vm.play();

function formatPhoneNum(phone_number){

    matcher = new RegExp(/\(?( [0-9]{3})\)?-?( [0-9]{3})-?( [0-9]{4})/);

    matched = matcher.exec(phone_number);

    new_num = "("+matched [1] + ") "+ matched [2] + "-" + matched [3];

    return new_num;

function contains(str,key){

    var x = str.indexOf(key);

    if(x > -1){

        return true;

    }else{

        return false;

getData__MODULE_ID__();

</script>

<style type="text/css">

h4 {

    border-bottom-color: #D6DADF;

    border-bottom-style: solid;

    border-bottom-width: 1px;

    clear: both;

    color: #444444;

    margin-bottom: 6px;

    margin-left: 0;

    margin-right: 0;

    margin-top: 30px;

</style>

<p>

<div class="lotusBtnContainer">

    <span role="button" class="lotusBtn lotusBtnAction">

        <a href="javascript:;" onClick="play('avsourcevoicemail__MODULE_ID__');">Play Message</a>

    </span>

    <span role="button" class="lotusBtn lotusBtnAction"><a href="javascript:;">Call Back</a></span>

</div>

<span id="voicemail__MODULE_ID__" ></span><br/>

<div id="message" style="padding:10px;">

<video tabindex="0" preload="auto" controls id="voicemail__MODULE_ID__" autoplay>

    <source src="./widgets/voicemail/voice_msg.wav" id="avsourcevoicemail__MODULE_ID__" type="audio/x-wav;">

    </source>

</video>

<p>

Phone: <span id="fromEmail__MODULE_ID__"></span>

</div>

]]&gt;

</Content>

<Content type="html" view="canvas">

</Content>

</Module>

翻訳者ノート：作成されたガジェットをサーバーにデプロイする

作成したガジェットでとなる XML ファイルを、ボイスメールのサービスを提供する適当なサーバーに配置します。
このサンプルの場合、実際のボイスメール･サーバーは必要はありません。IBM Social Business Toolkit のサンプルを提供している Lotus Greenhouse のサーバーからアクセス可能な、インターネット上の適当な Web サーバー上に voicemail.xml を配置します。

また、以下の URL に配置されている voicemail.xml を利用することもできます。

http://www.ibm.com/developerworks/wikis/download/attachments/77758479/voicemail.xml

Activity Stream への通知イベントのポスト

次に、登録すべきイベントをフィードサーバーにポストします。それによってボイスメールが届いたことが通知されます。イベントをポストするには、ボイスメールを処理するアプリケーションを IBM Social Business Toolkit のサービスを提供するサーバーと連携させます。そしてポストすべきイベントを、Toolkit API を使って対象となるユーザーの Activity Stream にポストします。
ポストするコンテンツタイプを正しくフィードサーバーに知らせなくてはならなことに注意してください。そしてポストしたあとに戻ってくるレスポンスのコンテンツタイプも指定することを忘れないでください。コンテンツタイプは Atom か JSON フォーマットになります。以下に JSON フォーマットの例を具体的に示します。

ノート： イベントのポストを試すには Lotus® Greenhouse の https://greenhouse.lotus.com/vulcan/shindig/client/ を開いてください。このページで API を実行できます。

イベントをポストするには以下の手順で行います。

1. イベントのオブジェクトを作成します。この例では以下の内容を data.json という JSON フォーマットのデータに保存します。

    "body": "you have a new voice mail message",

    "postedTime": "2011-01-21T10:21:44Z",

    "provider": {

        "displayName": "news",

        "link": "https://ghvm620.lotus.com/vulcan/shindig",

        "id": "urn:Isld:ibm.com:news"

},

    "generator": {

},

    "actor": {

        "displayName": "Voicemail System",

        "id": "voicemail",

        "image": {

            "duration": "1200",

            "width": "50",

            "height": "50",

            "url": "images/voicemail.png"

},

    "title": "you have a new voice mail message",

    "link": "https://ghvm620.lotus.com/vulcan/shindig/rest/activitystreams/@me/@all/@all/urn%3Alsid%3Aibm.com%3Aactivities-16ad4bb9-c7ad-4621-9720-56b3a43122a8",

    "id": "urn:lsid:ibm.com:activities-16ad4bb9-c7ad-4621-9720-56b3a43122a8",

    "standardLinks": {

        "alternate":  [

                "inline": "{\"ee:component-instance-data\":{\"ee:context\":\"{\\\"audioUrl\\\":\\\".\\\\\\/widgets\\\\\\/voicemail\\\\\\/voice_msg.wav\\\",\\\"senderPhone\\\":\\\"8-675-309\\\"}\",\"ee:component-definition\":\"http:\\/\\/localhost:9080\\/toolkit\\/widgets\\/voicemail.xml\"}}",

                "type": "application/gadget-instance+json",

                "href": ""

},

    "verb": "post",

    "object": {

        "summary": "you have a new voice mail message ",

        "displayName": "Voice Message - 1/31/2011",

        "objectType": "voice_mail",

        "link": "https://greenhouse.lotus.com/vulcan//object/c113556a-1fb8-44fd-944e-02f86276b109",

        "id": "c113556a-1fb8-44fd-944e-02f86276b109"

翻訳者ノート：
このイベントデータにはボイスメールのガジェットの情報が standardLinks > alternate > inline の値として設定されています。この値は埋め込み画面 ( Embedded Experience ) の複合的な情報を含んでいます。特に ee:component-definition の値がガジェットの URL で、URL文字列がエスケープされた設定されています。
先のステップで作成したボイスメールガジェットを置いた場所によって、この URL も修正する必要があります。
また先に紹介した作成済みでサーバーに置かれているガジェットをそのまま利用するのであれば、以下の URL にある JSON データを修正せずに利用することができます。

http://www.ibm.com/developerworks/wikis/download/attachments/77758479/voicemail_event_data.json

2. 以下のような CURL コマンドであらかじめサーバーにログインします。

curl.exe https://greenhouse.lotus.com/vulcan/news/j_security_check --insecure -c cookies.txt

-d "secure=&j_username=vulcan_test3%40test.ibm.com &j_password=yourpassword"

ここで vulcan_test3%40test.ibm.com は、Greenhouse に登録しているユーザー名で、yourpassword はそのユーザーのパスワードです。
ログインが成功すると認証情報を含むクッキーは cookies.txt ファイルに保存されます。
翻訳者ノート： CURL は様々なインターネットプロトコルでデータの送受信を行うためのコマンドライン･ツールです。CURL の詳細については http://curl.haxx.se を参照してください。

3. 以下のような CURL コマントでデータをポストします。

curl.exe https://greenhouse.lotus.com/vulcan/shindig/rest/activitystreams/@owner/@self?format=json -X POST

-b cookies.txt -post301k -L -H "Content-type: application/json" --data-binary @data.json --insecure

ここで CURL 小マントに指定したパラメータの説明は以下の様になります。

@data.json で「@」以下にデータ･ファイル名を指定
-H で HTTP ヘッダーを指定
-X で HTTP メソッドを指定
--post301k はリダイレクトに従うことを指定

200 OK メッセージが返ってくれば処理が成功したことになります。ここまでの処理で IBM Social Business Toolkit API サーバーに正しく認証され、Activity Stream へのイベントのポストが完了しました。

翻訳者補足： FireFox Poster によるイベントのポスト

ここまでで説明した Activity Stream への通知イベントのポストの操作には FireFox の Poster アドオンを使用することもできます。FireFox Poster アドオンについては https://addons.mozilla.org/ja/firefox/addon/poster/ を参照してください。

Activity Stream でのボイスメールのイベントの確認

この前の操作でイベントを Activity Stream にポストしました。ポストされたイベントはサンプルアプリケーションでも確認できますが、以下の示すように Toolkit API を直接呼び出すことでも確認ができます。

以下のいずれからの手順で Activity Stream にポストされたイベントを確認します。

Web ブラウザで直接 HTTP リクエストを送信する

1. あらかじめ Web ブラウザで Lotus Greenhouse のページを開きログインします。

2. Web ブラウザから以下のような URL を開きます。

https://greenhouse.lotus.com/vulcan/shindig/rest/activitystreams/@owner/@self?format=json

CURL ツールで HTTP リクエストを送信する

1. 以下のような CURL コマンドであらかじめサーバーにログインします。

curl.exe https://greenhouse.lotus.com/vulcan/news/j_security_check --insecure -c cookies.txt

-d "secure=&j_username=vulcan_test3%40test.ibm.com &j_password=yourpassword"}

ここで vulcan_test3%40test.ibm.com は、Greenhouse に登録しているユーザー名で、yourpassword はそのユーザーのパスワードです。
ログインが成功すると認証情報を含むクッキーは cookies.txt ファイルに保存されます。

2. 以下のような CURL コマントで URL を指定して HTTP GET リクエストを送信します。

curl.exe -b cookies.txt https://greenhouse.lotus.com/vulcan/shindig/rest/activitystreams/@owner/@self

--insecure > output.txt

ここでは保存された LPTA トークンを使用するために -b オプションを指定しています。

これらのいずれかによって、以下のようなデータが返ってきます。

    "startIndex": 0,

    "totalResults": 1,

    "entry":  [

            "body": "you have a new voice mail message",

            "postedTime": "2011-01-21T10:21:44Z",

            "provider": {

                "displayName": "news",

                "link": "https://ghvm620.lotus.com/vulcan/shindig",

                "id": "urn:Isld:ibm.com:news"

},

            "generator": {

},

            "actor": {

                "displayName": "Voicemail System",

                "id": "voicemail",

                "image": {

                    "duration": "1200",

                    "width": "50",

                    "height": "50",

                    "url": "images/voicemail.png"

},

            "title": "you have a new voice mail message",

            "link": "https://ghvm620.lotus.com/vulcan/shindig/rest/activitystreams/@me/@all/@all/urn%3Alsid%3Aibm.com%3Aactivities-16ad4bb9-c7ad-4621-9720-56b3a43122a8",

            "id": "urn:lsid:ibm.com:activities-16ad4bb9-c7ad-4621-9720-56b3a43122a8",

            "standardLinks": {

                "alternate":  [

                        "inline": "{\"ee:component-instance-data\":{\"ee:context\":\"{\\\"audioUrl\\\":\\\".\\\\\\/widgets\\\\\\/voicemail\\\\\\/voice_msg.wav\\\",\\\"senderPhone\\\":\\\"8-675-309\\\"}\",\"ee:component-definition\":\"http:\\/\\/localhost:9080\\/toolkit\\/widgets\\/voicemail.xml\"}}",

                        "type": "application/gadget-instance+json",

                        "href": ""

},

            "verb": "post",

            "object": {

                "summary": "you have a new voice mail message ",

                "displayName": "Voice Message - 1/31/2011",

                "objectType": "voice_mail",

                "link": "https://greenhouse.lotus.com/vulcan//object/c113556a-1fb8-44fd-944e-02f86276b109",

                "id": "c113556a-1fb8-44fd-944e-02f86276b109"

],

    "itemsPerPage": 1

翻訳者補足：埋め込み画面 ( Embedded Experience ) のテストページでのイベントの確認

IBM Social Business Toolkit の埋め込み画面 ( Embedded Experience ) のテストページでも、ポストされたイベントの確認ができます。以下の URL でテストページを開いてください。
テストページではボイスメールのイベント通知が表示され、そのイベント通知をクリックすることでボイスメールを再生するガジェットが表示されます。このボイスメール・ガジェットではボ??スメー???の再生などの操作が行えます。

https://greenhouse.lotus.com/activitystream/

テストページに表示されたイベント