Skype API - Skype.ui 編
こんにちは。
日本マイクロソフト エバンジェリストの 渡辺 友太です。
＊2014/8/23 最新情報を追記しました：Skype API の新しいドキュメント
先日、ご紹介した Skype API について、昨日は Skype Button を用いて Web サイトに Skype 機能を組み込む方法をご紹介しました。今日は、 Skype.ui を用いて動的に Skype 機能を埋め込む方法を見ていきます。
Skype.ui を用いることで、動的に Skype 機能を組み込むことが出来ます。Skype Button に似たインターフェースを提供できるのはもちろんですが、サイズや色、ビデオ会議や複数人チャットといった、追加のフォーマットや機能のオプションも利用可能です。
Skype.ui を使う基本的な流れ
Skype.uiを用いて Skype URIs を使う流れは、基本的に下記３ステップです。
- skype-uri.js の読み込み
- Skype URI を埋め込む div タグの設置
- Skype.ui の呼び出し
それぞれのステップについて追っていきます。
1. skype-uri.js の読み込み
script タグで、skype-uri.js を CDN から読み込みます。
2. Skype URI を埋め込む div タグの設置
適当に id 属性を指定して、Skype URI を埋め込む div タグを設置します。
3. Skype.ui の呼び出し
JSON 形式でオプションを指定すると、Skype.ui は指定の div タグの中に アンカータグを生成します。例えば下記のような形。
ここまでの３ステップをまとめると、下記のコードになります。
これを実際にこの記事に張り付けてみると、下記のボタンが表示されます。
Skype.ui の仕様を確認する
Skype.ui で使用できるパラメーターには下記のようなものがあります。詳しくはドキュメントをご参照ください。
- name: call, chat, dropdown ( call または chat をドロップダウンで選択 )
- element: Skype URI を埋め込む div タグの id 属性の値を指定
- participants: 通話、もしくはチャット参加者の skype アカウント名
- listParticipants: 参加者を表示するか否か
- video: この通話がビデオ通話か否かを指定
- topic: 多人数通話におけるオプションで指定するトピック ( 文字列 )
- listTopic: トピックを表示するか否か
- imageSize: 画像サイズの指定 ( 10, 12, 14, 16, 24 または 32 )
- imageColor: "skype" or "white"
また、Skype.ui quick reference では、基本的な Skype URI について、どのようにパラメーターを設定すればよいかが整理されています。設置したい物に一番近い物を選んでカスタマイズしてみてください。
