milkcocoa と Azure を使用してプライベート動画配信サイトを作るための初めの一歩

今年最後の [milkcocoa meetup](http://mlkcca.connpass.com/event/9891/) にて登壇した際に発表した内容をこの記事でまとめてみます。

#**このコンテンツの概要**
ホビーアプリや教育向けアプリなど、動画を使ったサービスを開発しようとする際、はじめは無料の動画プラットフォームを使ってサービスを構築できますが、下記のような問題が発生します。
・広告が表示され、ユーザーエクスペリエンスが低下する。
・自社サービス外からも閲覧されるという問題があり、課金ができない。

こういった問題を解決するために、動画プラットフォームとしての Microsoft Azure Media Service と Milkcocoa を組み合わせてリアルタイムにコメントの付けられる動画サービスの構築方法を紹介します。

#**このコンテンツを試すために必要なもの**
milkcocoa のアカウントと、Microsoft Azure のアカウントが必要になりますので、下記 2 つのページからそれぞれ作成してください。
・[milkcocoa のページ](https://mlkcca.com/) 
・[Azure の１ヶ月無償利用アカウント作成ページ](http://azure.microsoft.com/ja-jp/pricing/free-trial/)
なお、Microsoft Azure とは Microsoft の提供するクラウドプラットフォームのことです。詳細は[こちら](http://azure.microsoft.com/ja-jp/)からご参照ください。
※画面ショットに含まれている URL やメールアドレスはデモ用に作成した一時的なものです。

#具体的な手順
##配信用の Web ページの作成
まずは、配信用の Web ページである [Azure Web Sites](http://azure.microsoft.com/ja-jp/services/websites/) の用意をします。
Azure にサインアップしたうえで、下記の手順に従って Web Sites を立ち上げてください。

1.Azure 管理画面で、[+新規] をクリック後、下記画面のように [コンピューティング]-[WEB サイト]-[簡易作成] を選択し、ユニークな URL を入力します。その後、[WEB サイトの作成] をクリックします。
![image1.png](https://qiita-image-store.s3.amazonaws.com/0/34023/053854f5-099c-b5e7-9728-377744279447.png)

2.WEB サイトが作成された後に、下記のような画面が表示されますので、赤い四角で囲まれた部分をクリックします。
![image2.png](https://qiita-image-store.s3.amazonaws.com/0/34023/341ebeb3-1b62-7776-cef0-89f5e5e86190.png)

3.下記のような WEB サイトの管理画面に移動するので、[構成] をクリックします。
![image3.png](https://qiita-image-store.s3.amazonaws.com/0/34023/5198ac31-b6a8-6f5b-f2fe-0d68d3fc09f6.png)

4.[構成]画面へ移動するので、ページを下の方へスクロールし下記の画面を表示させます。その後、[WEB SOCKET]と[VISUAL STUDIO ONLINE での編集] を [オン] にしたうえで、[保存] をクリックします。
![image4.png](https://qiita-image-store.s3.amazonaws.com/0/34023/1b058041-f007-b378-10b5-e1e2fb5abff0.png)

5.ここで、[保存] ボタンの 3 つ左にある [参照] をクリックすると、WEB ページを表示させることができますが、ここまでの手順では Azure Web Sites のテンプレートページが表示されるだけになります。


##チャットを実装するためのコードの追記
1.上記設定後、ページを上の方へスクロールし、下記の画面を表示させます。その後、[ダッシュボード] をクリックします。
![image5.png](https://qiita-image-store.s3.amazonaws.com/0/34023/1299eea9-12d9-294c-892d-5c6fa21bfac4.png)


2.[ダッシュボード]画面へ移動後、ページを下の方へスクロールし、下記の画面を表示させます。その後、[Visual Studio Online での編集] をクリックします。
※ [Visual Studio Online での編集]は、[ダッシュボード]画面へ遷移後、しばらくしてから表示されるので、少しだけお待ちください(10 秒以内には表示されます)。
![image6.png](https://qiita-image-store.s3.amazonaws.com/0/34023/3f19d22a-5794-be27-2cb5-15c8b820aa58.png)

3.Visual Studio Online Monaco が起動されます。これは、Azure Web Sites に表示するコンテンツを編集することのできるオンライン エディターです。詳細は[こちら](http://azure.microsoft.com/ja-jp/documentation/videos/building-web-sites-with-visual-studio-online-monaco/)からご覧ください(英語のコンテンツです)。
ここから、[milkcocoa のチュートリアルサイト](https://mlkcca.com/tutorial/page1.html)に記載されている index.html と main.js の内容を monaco 上にコピーしていきます。まずは、下記画面の赤い四角のボタンをクリックし、"index.html" と記載しましょう。
![image7.png](https://qiita-image-store.s3.amazonaws.com/0/34023/32245340-439e-9da2-0f0a-01bb77a1cb68.png)

4.milkcocoa のチュートリアルページから張り付けた index.html は下記のようになります。
![image8.png](https://qiita-image-store.s3.amazonaws.com/0/34023/9e22f7e7-76a0-e68a-e33d-986e3bc0ad07.png)

5.その後、main.js も同じように貼り付けて、下記のようになります。赤枠内の部分を milkcocoa のコメントの指示通りに変更します。
(milkcocoa 側でアプリケーション ID を作成し、app-id を記載する形になります。)
![image9.png](https://qiita-image-store.s3.amazonaws.com/0/34023/22806811-ca60-412b-f93a-c66ae94af2a7.png)

6.画面左側のペインで index.html を選択後、赤い四角で囲んでいる再生ボタンをクリックします。
![image10.png](https://qiita-image-store.s3.amazonaws.com/0/34023/0e75e9ce-b1ea-63c6-3302-4e75ebfdb93b.png)

7.ブラウザが起動し、チャットの画面が表示されます。milkcocoa のリアルタイム通信が正しく行われていることを確認するために、同じ URL の画面を 2 つ並べて起動します。左側の画面に任意の文字列を入力後、[send message!] ボタンをクリックします。
![image11.png](https://qiita-image-store.s3.amazonaws.com/0/34023/625f58e7-c7b4-4e9f-381f-6e4c6c638c8b.png)

8.手順7の結果、下記のように2つの画面にチャットの文字列が表示されることが確認できます。これで、WEB サイトの準備と、チャットの実装が完了です。
![image12.png](https://qiita-image-store.s3.amazonaws.com/0/34023/b2935f53-7bdb-2d4e-3225-ee226ebf71a3.png)


##Azure Media Service の準備
ここから、Azure Media Service の準備を進めていきます。
1.Azure のポータル画面のトップページに戻り、画面左下の[+新規] ボタンをクリックします。その後、[アプリケーション サービス]-[メディア サービス]-[簡易作成]を選択し、下記画面のように任意の URL 地域を入力し、[メディア サービスの作成] をクリックします。
![image13.png](https://qiita-image-store.s3.amazonaws.com/0/34023/e995696a-643f-7917-cfa4-d984a201a928.png)

2.しばらくすると、media service の作成が完了し、下記の画面のようになります。その後、赤い四角で囲まれている矢印をクリックします。
![image14.png](https://qiita-image-store.s3.amazonaws.com/0/34023/c8b52b47-31ec-1d1f-2c91-e63c15110c5e.png)

3.media service の構成画面が表示されるので、[コンテンツ] を選択します。
![image15.png](https://qiita-image-store.s3.amazonaws.com/0/34023/b59880e2-303c-5d32-ff9d-24070a630ee2.png)

4.コンテンツ画面に遷移するので、画面下側の[アップロード] をクリックします。
![image16.png](https://qiita-image-store.s3.amazonaws.com/0/34023/4da4c7ce-4b0e-3f42-9803-a987c4d1686f.png)

5.下記のような画面が表示されるので、[ローカルから]を選択しコンピューター上の任意の動画ファイルを選択します。なお、ファイル選択後、[コンテンツ名]は自動で設定されますが、任意の名前に変更してもよいです。その後、画面右下のチェックをクリックします。
![image17.png](https://qiita-image-store.s3.amazonaws.com/0/34023/29fe8447-d0ba-2a7a-87de-2c3037259d18.png)

6.アップロードが完了すると、下記のような画面になるので[エンコード]をクリックします。
![image18.png](https://qiita-image-store.s3.amazonaws.com/0/34023/8f552a3c-eb8f-808c-21f6-8bcfb6d88f6e.png)

7. [Azure メディア エンコーダー]画面が表示されるので、[プリセット]を"PC/Mac での再生(Flash/Silverlightを使用)" に変更したうえで、画面右下のチェックをクリックします。
![image19.png](https://qiita-image-store.s3.amazonaws.com/0/34023/e0bd1cf8-9222-b7ed-e518-1161734b0ccb.png)

8.しばらくすると下記の画面になるので、[発行]をクリックします。
※エンコード完了のメッセージ表示後もしばらくは[発行]が表示されないため、30秒ほどお待ちください。
![image20.png](https://qiita-image-store.s3.amazonaws.com/0/34023/1a2fa793-f272-5eb3-0278-064be8acff13.png)

9.上記操作が完了すると、下記のような画面になるので、赤枠内の情報をコピーしておきます。
![image21.png](https://qiita-image-store.s3.amazonaws.com/0/34023/f0116450-8d3b-53e2-a488-5fd542626818.png)

10.[プレイヤーを生成してくれるページ](http://amsplayer.azurewebsites.net/player.html)にアクセスします。もちろん、自分でプレイヤーを作成したり、配信する動画をプログラムから動的に変更することはできますが、手順が長くなるため今回はこのサイトの機能を使用します。
手順9でコピーした情報を赤枠のテキストボックス内へ張り付けたうえで、[update player] ボタンをクリックします。
![image22.png](https://qiita-image-store.s3.amazonaws.com/0/34023/7373fc6b-c8cd-331d-6060-702c2db5272d.png)

11.下記のようにアップロードした動画に変わります。[get embed code] ボタンをクリックします。
![image23.png](https://qiita-image-store.s3.amazonaws.com/0/34023/c08a958e-0dd4-7a96-a043-9aae6e71f9ab.png)


12.埋め込みコードが表示されるので、コピーします。
![image24.png](https://qiita-image-store.s3.amazonaws.com/0/34023/f441544b-8153-44e7-3492-6a0c673ff759.png)


##動画コンテンツを Web ページから配信する
Visual Studio Online Monaco の画面に戻り、動画を WEB ページ上に埋め込みます。
1."index.html" を編集する画面に移動し、赤い枠の中のように動画の埋め込みコードを貼り付けます。その際、適宜 width と height の値を 100% から 30% などの小さな値へ変更しておきます。
![image25.png](https://qiita-image-store.s3.amazonaws.com/0/34023/6a686efa-cbdb-ddac-7d09-f895c553d69e.png)

2.下記のような画面が表示されます。動画を見ながらチャットができるようになります。
![image26.png](https://qiita-image-store.s3.amazonaws.com/0/34023/92b4058a-a848-e1a7-3f9e-cd5e1643f9ff.png)

このような方法で動画を再生できる仕組みを構築後、ログイン機能・課金機能を組み込むことでプライベート動画のサイトを構築できます。
今回は手短に説明するために、あらかじめアップロードした動画を対象としましたが、milkcocoa のリアルタイム通信と相性が良いのはストリーミングの機能になるでしょう。もちろん、Azure Media Service はストリーミングも対象としているので、興味がある方は[こちらのサイト](http://azure.microsoft.com/ja-jp/documentation/articles/media-services-deliver-streaming-content/)をご参照ください。

(興味のある方が多い場合(1000名とか)には、streaming の機能も詳細に記事を書いてもよいかもしれないですね。)