テトラポット技術ブログ「TetLab」

社会人3年目エンジニアのブログ。趣味での開発や仕事で得た知見などを書いて行こうと思います。

NTTComの「WebRTCワークショップ」に行ってきた。

1月21日に、NTTコミュニケーションズさん1Dayインターン「WebRTCワークショップ」に参加してきました。 ワークショップと言っても、午前中に軽くNTTComさんの企業紹介とWebRTCの説明、ハンズオンがあって、午後からはハッカソンでWebRTC技術を使って簡単なプロダクトを作ったのでそれも少し紹介しようと思います。

参加した経緯

去年の11月くらいに行われたハッカソンで、NTTコミュニケーションズさんの提供する「SkyWay」を使ったサービスを開発し、NTTコミュニケーションズ賞をいただきました。 その時の賞品が今回参加した、1Dayインターン「TechWorkShop優先参加権」と「ドローン」でした。 しかし、ドローンはハッカソン当日に用意していなかったみたいで、最初は後日、郵送するみたいな話だったんですが、いろいろあって、人事の方に「インターン来たらその時渡すよ」となったので、ドローンを手に入れるため、そして、前よりもWebRTCとSkyWayについて深く知ろうと思い参加しました。

開催場所の田町にあるグランパークタワー。かなり大きい。NTTコミュニケーションズは東京に4箇所もオフィスがあるらしい... f:id:tetrapod117:20170122205759j:plain

ロゴ f:id:tetrapod117:20170122205743j:plain

NTTコミュニケーションズって長いので、以下NTTComで書きます。

WebRTCとSkyWayとは

Web Real Time Communication 「IPネットワーク(Web)上の時差がほとんどない通信/意思疎通」という意味です。

簡潔に言うと、Web上で電話やビデオ通話チャットなどのリアルタイムコミュニケーションを行えるサービスを実装できるAPIのことです。

特徴 1. 意思疎通(=ビデオ/⾳声通話)と通信(=P2Pデータ通信)の 2つの機能を備える。 2.iOS, Android, Webブラウザなど様々なプラットフォームで利用できる。 3.Webサイトやアプリの中で利⽤でき、SkypeやLINE等の他社アプリのインストールや起動が不要。

細かい話はこういうのを見た方が分かりやすいと思います。

www.slideshare.net

上のスライドでも書いていますが、このWebRTCという技術、ちゃんとやろうとするとめちゃくちゃ難しいみたいです。

jxck.hatenablog.com

そんな、難しいWebRTCの技術を、簡単に扱えるサービスがNTTComさんの提供する「SkyWay」です。 nttcom.github.io

開発したサービス

今回のWebRTCワークショップは「WebRTCの技術を使って、次世代のコミュニケーションアプリを作ろう」というテーマで、条件はWebRTC技術を使うことです。

SkyWayを使えと言われることはなかったですが......

いやまぁ、使わないわけにはいかないですよね......

ということで僕が開発したプロダクトの紹介です!

サービス名「Share Tube」

わかりにくいですが、スクリーンショットはこんな感じ

f:id:tetrapod117:20170122184744j:plain

何をやっているかというと、「SkyWay」のJavaScriptSDKとiOSSDKを用いて、WebとiOSアプリ間でP2P通信を行い、リアルタイムで動画ファイルを共有しています。 その下には、チャットスペースがあって、多少WebとiOS間で動画のラグなどがありますが、チャットを使いリアルタイムで感想を共有することもできます。

解決したい課題で言えば、友達との動画の共有の不便さ。

例えば、ネットで面白い動画を見つけた時、この動画を友達にも観せたいと思ったら

YouTubeなどの動画のURLをコピーLINEに貼って友達に送る、友達はLINEからYouTubeに飛んで動画を観る、LINEで感想を送る

という風に2つのサービス間を行き来しないといけなくて面倒ですよね。(別の方法もありますが...)

それを1つのサービスで実現でき、さらに「この場面のガッキーかわいいよね!」的な、リアルタイムで動画の感想を言い合える!!!!!

超画期的!!!!!

コードをある程度書き直したらGitHubにあげます...

結果

ハッカソンなので、もちろん優秀賞がありました。 学生参加者10人とNTTCom社員さん4名が良いと思ったプロダクトに投票していくシステムで、票の多かった上位2名がFitbitをもらえるのですが、今回は残念ながらFitbitはもらえなかったです。

というか、他の参加者が凄かったです。はい。完敗です。Fitbit取った方おめでとうございます。

でも、最後にSkyWayチームのリーダーの方に「WebRTCで動画を送るアイディアは面白い」って言ってもらえたので嬉しかったです。

今後の課題

今回のワークショップはハッカソン形式でしたが、チームではなく、個人の開発で開発時間は実質4時間ほどでかなり荒削りな感じになってしまいました。しかも、普段はSwiftでのアプリ開発をメインでやっているので、講義の時以外はJavaScriptはほとんど触ったことがないという状況なので、メンターの方に何度も聞きまくって開発しました。メンターの社員さんには感謝の言葉しかないです。

プロダクトの改善点がたくさんあります。ということで僕自身の備忘録的に書いていきます。

  • 動画ファイルを選べるようにする(選べないなんてなかなか致命的)というかYouTubeとかから持ってきたい

  • デザイン

  • チャットに送信された時の動画の時間を入れる

  • 動画止めた場合の処理が入っていない

  • Web版同士ではなぜかチャットができない

などなど とりあえず、時間があったら修正していきます。

感想

1Dayのインターンは、会社紹介で終わると思われて行く意味がないと思う人もいますが、実際の社員さんに技術の話を聞いたり、コードの書き方を聞けたりするので、僕は行ってよかったと思います。

同じエンジニアを目指す学生や、スーパーエンジニアの社員さんと交流することは楽しいというのもありますが、そこで得た知識や経験は一生残るモノだと思ます。

他の学生にも、こういうイベントに行くことは大事ということが伝わってほしいです。

NTTComさんのTechWorkShopはまだまだいろいろあるので、僕もまた行きたいと思います。

www.ntt.com

そういえば、ドローンもちゃんともらえましたよ。 f:id:tetrapod117:20170122205942j:plain

iPhoneが帰ってきたら遊ぼうと思います。