Skype Web SDK 紹介 (Skype for Business Server)


この投稿は古い投稿です。最新の 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」にまとまっていますので参考にしてください。

 

Comments (3)

  1. felaray says:

    it's work now? I can't login by this code.

  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

  3. Added again.

    * Furthermore, if you use audio and video, "Skype for Business Web App Plug-in" is needed in the client now. (This requirement will be changed soon.) Please see the following post.

    blogs.msdn.com/.../skype-web-sdk-audio-video.aspx

Skip to main content