読者です 読者をやめる 読者になる 読者になる

Hack & Sports

Microsoft エバンジェリスト&トライアスリート 大田 昌幸の個人ブログ

Skype Web SDK の初心者向けサンプルを公開しました!

Skype開発 スポーツ web

前回のエントリーではSkype Web SDK はドキュメントが揃っていなくて辛いけど、「開発も筋トレと一緒で、辛くなったら将来の輝かしい姿を妄想して乗り越えよう!」という話をしました。 nt-d.hatenablog.com

サンプル公開しました

僕はオンライン英会話会社にSkype Web SDKを提案して、英会話ライフをより良いものにすることを妄想しながら開発しています。 そして、初心者向けのHello World的なサンプルが完成しました! github.com

どうせ作るなら世界中の開発者が活用できるようにと思い、今回はMicrosoft公式レポから英語で公開しました! 公式レポからの公開は手続きやチェック項目が多くて大変でしたが、良いクオリティのものを出すのに必須のものばかりで勉強になりました! 早速UKやUSから質問やissue/pull requestが来ていて非常に楽しいです。

皆さんも気に入ったら是非Starしたり、cloneしてアプリ開発に活用してください!そして、アプリに埋め込んだら教えてください!日本からインパクトのある事例を出して、「日本の企業/開発者すごいだろ!」とアピールしていきたいです!

さて、これからいくつかの会社に提案しに行ってきます!

トライアスロン完走しました!

Skype開発と時を同じくして、8/28(日)の木更津トライアスロンで完走してきました! 今回はオリンピックディスタンスというオリンピックで使われるルールのものでした。1.5km海を泳いで、40km自転車、10km走るという中々大変でしたが、地道にトレーニングしてたので普通に完走できました! f:id:NT-D:20160905093857j:plain 自分の理想像を妄想して、パーツに分割して、一歩一歩乗り越えていく!アプリ開発と同じなので、仕事に対する良い精神修行になりました。

とはいってもタイムとしては遅いほう。「完走しよう」という一歩目としては十分ではあるが、目標がぬるかったなぁと反省しています。 今後は、とりあえず2.5時間以内に完走できるように、この本でロジックを学んでいきます。

次はXamarin + Azure + Office 365を使ってモバイルアプリを公開していきます。適宜技術情報は出していくので切磋琢磨していきましょう!

Skype SDK 開発のドキュメントが辛いので妄想を膨らませる

Skype開発 Azure Office 365 web

前回のブログではSkype Developer Platform でできそうなことを紹介してきました。 nt-d.hatenablog.com

「めちゃワクワクしているのでガンガン触って共有していこうかなと思います」という文末で終わっているくらい興奮していたようです。コンセプトは素晴らしいですからね、もちろん今でもワクワクしています!

ただ、今の僕は「開発用ドキュメントが辛いから開発チームにガンガンPull Request送ろう!」とメラメラ興奮しています。

もくじ

このブログではこの気持ちに至った経緯をいくつかのまとまりで紹介していきます

  1. ワクワク開発を進めようとしてドキュメントを確認し始めたあの頃
  2. ドキュメントが辛い・・
  3. Skype開発のために必要なことの整理
  4. 作りたいものの妄想
  5. 次回以降の構成紹介

1.ワクワク開発を進めようとしてドキュメントを確認し始めたあの頃

前回Skype開発の概要を見たときには色々な感想を抱きました。

  • チャットはECサイトのO2O文脈で役立ちそう
  • オンライン英会話とかで使えそう
  • その際のサーバーリソースをSkype側に任せられるから楽そう
  • 途中までBotを使って、難しいやり取りが発生したらSkypeに引き継ぐとかできたらよさそう

よし!ドキュメントを見よう!!

2.ドキュメントが辛い・・

1つ前のblogでSkype開発のページを紹介しました。そのまま[Get Started]をクリックしてスタートしようとしたんですね。

Skype for Business Online uses Azure Active Directory (Azure AD) to provide authentication services that your application can use to obtain rights to access the service APIs. To accomplish this, your application needs to perform the following steps:

•Register your application in Azure AD. To allow your application access to the Skype Web APIs, you need to register your application in Azure AD. This will allow you to establish an identity for your application and specify the permission levels it needs in order to access the APIs.

•Add a sign in feature to your app. When a user visits your website and initiates sign-in, your application makes a request to the Microsoft common OAuth2 login endpoint. Azure AD validates the request and responds with a sign-in page, where the user signs in. After consent flow the UI redirects the user back to your application. If authentication and authorization are successful, Azure AD returns a token and grants access to SfB Online and identifies the current signed-in user.

•Call Skype Web APIs. Your application passes an access token to the Skype Web APIs to authenticate and authorize your application.

なるほどなるほど。認証基盤としては Azure AD を使用する。そして、アプリにOAuthのSign in機能を付けて、API callしろって感じですね。facebookとかと同じような感じ。Learn moreってリンクがあるのでそこをクリックするとこのページに行きます。

アプリ登録とかはOAuth関連のプログラム書いたことある人にはまぁわかる内容なのですが、、Update your codeからがちょい辛い。そもそも僕まだcode書き始めてないからupdateって言われましても・・あと、項目の並び順がちょっと・・・

まぁサンプル見ればいいかと思い、最初のページにリンクされているGitHubのサンプルからskype-web-sdk-samplesというやつを選んでみる。Setupのリンクがあるけど、たどるとこれまたセットアップ方法がわかりづらい・・

「なんなんすかね、これ。Developerに使ってもらう気あるのかね。Getting Startedは何も考えずにスタートできるようにしようよ?」という気持ちがふつふつと沸きはじめ、このあたりから「開発用ドキュメントが辛いから開発チームにガンガンPull Request送ろう!」とメラメラ興奮しはじめました。

3.Skype開発のために必要なことの整理

僕のほうではガチャガチャ操作をして、実際にサンプル動作させることは成功したので、現状必要なことをまとめます。

Skypeの種類の確認

Skypeというブランドには2つの製品があります。個人向けのSkypeと企業向けのSkype for Businessです。そして、現時点(2016年7/23)でSkype Web SDKが対象にしているのはビジネス用途のSkype for Businessです。

開発前の準備で必要なこと

Skype Web SDK開発には以下の3つが大枠必要です。

  1. Azure AD (認証基盤)
  2. Office 365 開発者アカウント
  3. WebサーバーとWebアプリ

1は認証/認可用に使います。認証・認可周りを任せられるのはうれしい。このあたりはfacebook開発と似ています。

2はSkype for BusinessをはじめとしたOffice関連のクラウドサービスです。API呼び出し先が必要なので、用意が必要です。こいつを用意するとチャットも音声通話もうまいことやってくれるので、自分でチャット基盤(アプリ/インフラ)用意しなくていいのは最高!

3がないとアプリ作れないので、これは必須です。

アカウント作成方法とかは今後のブログで解説します。基本無償なので、始める分には敷居が低いです。

4.作りたいものの妄想

さて、ちょっと話をそらします。僕がプログラミングつらい時には「筋トレみたいなものだ」と思うようにしていて、そのあたりをシェアします。多少話を端折るので論理的飛躍があるのはご了承くだされ。

僕は今トレーニングにはまっていて、8月にはトライアスロンの大会に出ようと思っています。 トレーニングのきっかけは、友達の奥さんに「シュレックみたいな体していますねw」と言われたことに始まります。 https://images-na.ssl-images-amazon.com/images/I/5152QKZZB1L.jpg

えぇ、盛大に腹が出ていました。。そして、悔しい思いをしました。

悔しいのでジムに通い始めましたが、つらい。「なんなんすかね、これ。」とやめたい気持ちになりました。どうにかモチベーションを上げるために始めたのが「妄想」です。

海外の同僚の姿を思い浮かべると、胸板がっちりで腕が太いので、Tシャツ+ジーンズという適当な格好でも超かっこいいです。つらい度に「ああなったらモテるだろうなぁ」と妄想し、モチベーションの維持には成功しました。現状2kmくらい泳げますし、時速14kmくらいで走れるし、90kgくらいのベンチプレスもできるようになりました。

何が言いたいかというと「開発も筋トレと一緒で、辛くなったら将来の輝かしい姿を妄想して乗り越えよう!」ということです。僕は皆さんがつらくならないようにSkypeチームにpull requestを送りますが、もし、一緒のタイミングで開発を始めた人でつらくなった人は、ぜひ、妄想をしてみてください。Skype SDKでできることはすごいし絶対面白いですから!

ちなみに僕の今の妄想は「英会話アプリにSkype SDKを組み込む」というものです。僕が毎日お世話になっているDMM英会話はいい感じの英会話アプリです。ヨーロッパ、アフリカ、アジア、北米・南米など色々な国の人と話す練習ができます。ただ、Web画面で予約をして、Skypeアプリで授業を受けているので、ちょい面倒です(ほかの英会話アプリも同じ感じです)。これを予約もSkype通話もWebでできたら便利だよなぁと思っています。色々わかってきたら提案もしに行ってみたいw なんか楽しくなってきました。これでドキュメントは乗り切れます!

5.次回以降の構成紹介

次回以降はだいたいこんな感じで進めます。

  1. Skype開発大枠解説 + 必要な準備解説
  2. Login周りのコードの解説(javascript)
  3. Skype SDKでのログインの解説
  4. Skype SDKでのAPI Callの解説(javascript)

なお、基本的に英会話アプリを作るための前提で進めます。題材ないとブログつまらなくなるので。 ではでは、引き続きよろしくお願いします~!

Skype Developer Platform について調べ始めてみた

Skype開発 web Technology Office 365 Azure

最近Office開発周りが面白いのだけど、その中でも特にSkype開発系が面白そうなので調べ始めてみました! 今回は Skype Developer Platform を使うと何ができそうか?を軽くまとめてみます。

どこに情報があるか?

Skype周りの開発はこのページにまとまっています。 活用シナリオ、サンプルコードなどが手に入るので自力で始めたい人はここを見てみてください。 自力で進めるのが嫌だwという方は、僕のブログをSubscribeして情報収集してみてください(^ ^)

何ができそうか?

まだ実際にコーディングしていないので、コンセプトベースで話を進めます。 Skype Developer Platformでは主に3つのことができそうです。

  1. WebアプリにSkypeを埋め込んで、チャット/通話/ビデオ通話/デスクトップ共有ができる

  2. バイルアプリにSkypeを埋め込んで、1と同じようなことができる

  3. Skype Share buttonContact me buttonを使ってソーシャルにつながる

Webへの埋め込みは下の画像のようなイメージです。どうやらjavascriptのコードを埋め込むとチャット/通話画面が埋め込める模様。はよコーディングはじめて動かしたい! http://dev.office.com/media/default/skype/IS.png

文章で見るよりもビデオのほうが理解しやすいので、YouTube動画をいくつか貼り付けます。 シナリオは複数あったのですが、その中でもわかりやすかった Customer Support, Retail(ECっぽい),Health Careの動画をピックアップしました。動画を見ると感じていただけると思うのですが、お客様、患者さんとの距離が近づいて便利になりそうです!最近はECサイトなどでチャット埋め込みが多いですが、それに加えてビデオ通話ができると便利そうですね! 個人的には英会話アプリで使えないか?が気になるので、英会話アプリのデモを作っていく予定です

Customer Support シナリオのビデオ


Skype Developer Platform: Partnership with Genesys

Retailシナリオのビデオ


Skype Developer Platform: Retail Services

Health Careシナリオのビデオ


Skype Developer Platform: Health Care Services

めちゃワクワクしているのでガンガン触って共有していこうかなと思います(目標は週1くらいかなぁ) 興味ある人はぜひガチャガチャいじってみてください。