Uncategorized

Skype Web SDK 紹介 (Skype for Business Server)

By on • ( 5 Comments )

この投稿は古い投稿です。最新の Skype Web SDK については「Skype Web SDK 紹介 (最新版)」を参照してください。

 

こんにちは。

「UCWA (Unified Communications Web API) 開発入門」で紹介した REST などの処理をラッピングした Web 用の API (つまり、JavaScript API) として Skype Web SDK が提供されています。現時点 (2015/05 現在) では Preview 版です。

基本的な仕組みは、過去に紹介した UCWA (Unified Communication Web API) の REST API を呼び出していますので (UCWA も 2.0 にバージョン アップしています)、あらかじめ「UCWA (Unified Communications Web API) 開発入門」で紹介した、lyncdiscoverinternal (または lyncdiscover) の DNS 設定と、Cross Domain の Authorization List (whitelist) の設定を忘れずに実施しておきましょう。

今回は「UCWA (Unified Communications Web API) 開発入門」で紹介した Text Message (Chat) の送受信までの簡単なプログラミング方法を Skype Web SDK で記述しますが、Audio / Video サポートや、今後のマイルストーン (最終的な姿) については、de:code 2015 で詳しく解説します。

 

SDK の初期化

Skype Web SDK を使用するには、まず、SkypeBootstrap.min.js のライブラリー参照を追加し、Skype の初期化をおこないます。下記のようなコードです。

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  <title></title>  <meta charset="utf-8" /></head><body>  <script src="https://swx.cdn.skype.com/shared/v/1.1.23.0/SkypeBootstrap.min.js"></script>  <button id="btnSignIn">1.Sign In</button>  <button id="btnGetPerson">2.Get Person</button>  <button id="btnStartIM">3.Start Conversation</button>  <button id="btnSendIM">4.Send text message</button>  <script>(function () {  var Application;  var app;  var person;  var conver;  // Initialize skepe sdk  Skype.initialize({apiKey: 'SWX-BUILD-SDK',  }, function (api) {Application = api.application;app = new Application();alert('initialize succeed');  }, function (err) {alert('initialize error: ' + err);  });  . . .}());  </script></body></html>

なお、今回は、下記のような UI を持った簡単な Web アプリケーション (SPA) を構築しますが、各ボタンを押した際の動作 (function)  はこのあとプログラミングします。

SkypeBootstrap.min.js は、その名の通り、関連する JavaScript ライブラリーを読み込む Bootstrapper としてのライブラリーであり、内部では RequireJS (almond) を使った動的ロードをおこなっています。

 

SignIn

では、まず、上図の SignIn ボタンを押した際の処理を構築してみます。

「UCWA (Unified Communications Web API) 開発入門」で解説したように OAuth の password 方式を使用しますが、Skype Web SDK を使うと、下記の通り、直感的な関数呼び出しで実装できます。
(「UCWA (Unified Communications Web API) 開発入門」で解説したように、内部では、AutoDiscovery や XFrame による Cross-Domain 呼び出しもおこなっていますが、プログラマーはいっさい気にする必要はありません。)

document.getElementById('btnSignIn').onclick = function () {  app.signInManager.signIn({username: 'demouser03@example.com',password: 'P@ssw0rd'  }).then(function () {alert('Signin as ' +  app.personsAndGroupsManager.mePerson.displayName());  }).then(null, function (err) {alert('signin error: ' + err);  });}

実行をおこなうと、下図の通り、SignIn (ログイン) したユーザーの Display Name が alert で表示されます。

 

User オブジェクトの取得 (検索)

つぎに、User の検索をおこなって、Person オブジェクトを取得します。(このあとで、取得した Person に対して Chat をおこないます。)

ユーザーとグループを扱う際は、下記の通り personsAndGroupsManager を使います。
Query を使ってユーザーを検索し、検索されたユーザーの最初の 1 人目の Presence (Online, Away, OnIdle など) を取得して alert 表示します。

var person;. . .document.getElementById('btnGetPerson').onclick = function () {  var personSearchQuery =app.personsAndGroupsManager.createPersonSearchQuery();  personSearchQuery.text('Demo Jiro');  personSearchQuery.limit(50);  personSearchQuery.getMore(  ).then(function (results) {person = results[0].result;person.status.get().then(function (status) {  alert('Status is: ' + status);});  }).then(null, function (err) {alert('Search error: ' + err);  });}

このボタンを押すと、下図の通り表示されます。

ここでは解説を省略しますが、Presence の status の subscribe (状態監視) も可能です。(後述する IM の受信と同様、event 処理をプログラミングします。)

 

Conversation (IM, Chat)

さいごに、Chat (Instant Messaging) の送受信をおこないます。

Chat をおこなうには、まず、Conversation の作成をおこなって開始します。
そして開始後に、Event 受信をおこなって、相手からメッセージを受信するのを待機します。

「UCWA (Unified Communications Web API) 開発入門」で解説したように、UCWA の Event 処理では Long Polling (Polling GET) を使用しています。

var conver;. . .document.getElementById('btnStartIM').onclick = function () {  conver = app.conversationsManager.createConversation();  var part = conver.createParticipant(person);  conver.participants.add(part);  app.conversationsManager.conversations.add(conver);  conver.selfParticipant.chat.state.changed(function (state) {if (state == 'Connected') {  alert('connected');}  });  conver.chatService.start();  // receive message ! (event)  conver.historyService.activityItems.added(function (item) {if (item.type() == 'TextMessage') {  if (item.direction() == 'Incoming') {alert('received message: ' + item.text());  }};  });}

Conversation を開始すると、下図の通り、相手に通話が開始されます。相手が受け取ると (承諾すると)、上記コードの Connected が呼ばれます。

IM の送信 (Send) をおこなうには、以下の通り記述します。

document.getElementById('btnSendIM').onclick = function () {  conver.chatService.sendMessage('hello world !');}

下図の通り、Skyep for Business と Browser の相互で会話をおこなうことができます。

 

ご参考までに、最終的なソースコードは下記の通りです。

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  <title></title>  <meta charset="utf-8" /></head><body>  <script src="https://swx.cdn.skype.com/shared/v/1.1.23.0/SkypeBootstrap.min.js"></script>  <button id="btnSignIn">1.Sign In</button>  <button id="btnGetPerson">2.Get Person</button>  <button id="btnStartIM">3.Start Conversation</button>  <button id="btnSendIM">4.Send text message</button>  <script>(function () {  var Application;  var app;  var person;  var conver;  // Initialize skepe sdk  Skype.initialize({apiKey: 'SWX-BUILD-SDK',  }, function (api) {Application = api.application;app = new Application();alert('initialize succeed');  }, function (err) {alert('initialize error: ' + err);  });  document.getElementById('btnSignIn').onclick = function () {app.signInManager.signIn({  username: 'demouser03@example.com',  password: 'P@ssw0rd'}).then(function () {  alert('Signin as ' +app.personsAndGroupsManager.mePerson.displayName());}).then(null, function (err) {  alert('signin error: ' + err);});  }  document.getElementById('btnGetPerson').onclick = function () {var personSearchQuery =  app.personsAndGroupsManager.createPersonSearchQuery();personSearchQuery.text('Demo Jiro');personSearchQuery.limit(50);personSearchQuery.getMore().then(function (results) {  person = results[0].result;  person.status.get().then(function (status) {alert('Status is: ' + status);  });}).then(null, function (err) {  alert('Search error: ' + err);});  }  document.getElementById('btnStartIM').onclick = function () {conver = app.conversationsManager.createConversation();var part = conver.createParticipant(person);conver.participants.add(part);app.conversationsManager.conversations.add(conver);conver.selfParticipant.chat.state.changed(function (state) {  if (state == 'Connected') {alert('connected');  }});conver.chatService.start();// receive message ! (event)conver.historyService.activityItems.added(function (item) {  if (item.type() == 'TextMessage') {if (item.direction() == 'Incoming') {  alert('received message: ' + item.text());}  };});  }  document.getElementById('btnSendIM').onclick = function () {conver.chatService.sendMessage('hello world !');  }}());  </script></body></html>

 

ここで紹介した Skype Web SDK については「MSDN : Skype Web SDK – How to」にまとまっていますので参考にしてください。

 

Categories: Uncategorized

Tagged as:

5 replies»

  2. Yes, it works now.
    As I wrote above, please check the following. (Sorry, but I'm writing these posts in Japanese …)
    * Now, on-premise (server) only, not work at online. SfB Online will be supported soon.
    * Please set "lyncdiscoverinternal" at DNS server. The autodiscover uses this.
    * Please execute "Set-CsWebServiceConfiguration" command in SfB server, as I'm writing in the following post. The SDK uses the cross-domain call.
    blogs.msdn.com/…/lync-unified-communications-web-api-ucwa-programming.aspx
    * If you use audio and video, the edge server is needed (must be installed). Please see the following post.
    blogs.msdn.com/…/skype-web-sdk-audio-video.aspx

    Like

    Reply
  4. Pingback: Office & Office 365 Development Sample (Cloud 開発サンプル) – tsmatz
  5. Pingback: Skype Web SDK の Audio / Video プログラミング (Spring 2015 版) – tsmatz

Leave a Reply