WebRTCサービスを 個人で運営してみた話 2016/02/17 WebRTC Conference Japan ショートセッション4本勝負！ mzsm (@mzsm_j)
おまえだれよ • 名前…mzsm • 仕事…新大阪のサブスレッドという小さい会社で働いてます • 言語…PythonとJavaScript(TypeScript) • 仕事では(今のところ)WebRTC使ってません…
今日お話しすること
好きなゲームをもっと楽しく 遊ぶためにWebRTCサービス を作ってみた話
スプラトゥーンとは • 2015年5月28日に発売されたWii U用ゲームソフト • イカに相手を撃ち殺すかではなく、イカに多くの陣地を塗るか、 という新感覚シューティングゲーム • ブキを使ってインクを塗るヒト形態と、塗られたインクを泳い で...
とりあえず紹介映像見て
僕は1年待ち続けた…
1年待ち続けた期待の新作 • 2014年6月のE3(※)でサプライズ的に発表 (※…米国ロサンゼルスで開催される世界最大のゲームの展示会・見本市) • さっきの映像がそのとき流されたもの • 紹介映像を少し見ただけで直感的にわかる面白さ • ス...
(自分の周りの) ITエンジニア界隈でイカが大流行 • なんかみんなイカやってる • これきっかけでWii Uを同時購入した人もけっこういた • Wii Uのフレンド登録数が一気に増加 • おとなのちから(経済力的な意味で)ってすげー
ある日のこと…
仲間で集まって皆でバトル • フレンド合流機能 • フレンドがいる“部屋”に次のバトルから合流する • チーム分けはランダム • フレンドと同じチームに必ずしもなれるわけではない • Google Hangoutでチャットしながら • バトルが...
ボイスチャットをしたいけど… • チーム分けはバトルごとにランダム • 同チームだったプレイヤーが次のバトルでは相手チームになる可能性 • あらかじめチームに分かれて通話するということはできない • 全員で通話してると相手チームに情報がバレる ...
「WebRTCを使えば 作れるかも…」
とりあえず作ってみた • 当時WebRTCの知識はゼロ • 名前くらいは聞いたことあったけど中身にはまったく触れたことなし • 仕事から帰宅後、夜中にコツコツ開発 • WebRTC自体について調べるところから • 3日でプロトタイプ完成 • フ...
ネーミングは重要 • イカは名前に入れたいよね • ボイスチャットより電話っていうほうが キャッチーな感じがする • そういえばイエデンワっていう変な特徴 的なPHSあったよね
命名 イカデンワ
URLにもこだわってみる • .com? .net? .jp? • なんか新gTLDで面白いのがないか探してみる • 印刷用インクや署名といった意味があることから、筆記具や印刷機器、 サイン作成サービス等のサイトでの利用が期待されている.ink...
満を持してリリース！
思ってもみない大反響をいただく • ニュースサイト等に掲載 • KAI-YOU.net • GIGAZINE • 2chまとめブログ • はてブ ホッテントリ入り • ブクマ数約70 • WebRTC界隈からも反響が • ちょっとかじっただけな...
デモ
ここまでWebRTCの話題ほとんど無し(ごめんなさい)
イカデンワの仕組み
作りはシンプル • シグナリングサーバはEasyRTCほぼそのまま • PeerJSに比べてルーム機能が標準で備わってたので楽そうだった • ルーム一覧を取得できる機能だけ殺してある • でも改めてPeerJSベースで作りなおそうと画策中… •...
最大何人まで同時通話できるか • 単純なフルメッシュ接続 • SFUは使ってない • 音声だけならフルメッシュでも相当な人数いけるらしい • Vの人「WebRTCでつらいのは映像」 • 想定していたのはゲームの対戦人数である8人まで • それ以...
運営してみて大変だったこと
SSLを導入しないといけなくなった問題 • Chrome 47からHTTPのページではgetUserMediaが利用不可に • SSLサーバ証明書の導入必須 • 早めに対応しておこう • 2015年8月のイカデンワ正式リリースに合わせて導入 •...
Skype障害の余波をモロに受けた事件 • 2015年9月22日、Skypeでログイン障害が発生 • Skypeで通話していた人たちが避難先としてイカデンワを利用 • 通常の10倍以上の利用者 • アプリケーション・シグナリングサーバはさくらV...
その日のトラヒック
1週間のグラフ
STUN・TURNが機能してなかった事件 • STUN・TURNのデフォルトポートはUDP3478 • 制限のきつい環境でも使えるかも…と思ってポート80で起動 • STUNが応答しない • プロセスは動いてる • テストコマンドを実行すると応...
Webアプリだと思われてない問題 • 「イカデンワってあるんだ、今度ダウンロードしておこう」 • ネイティブアプリだと思われてる • スマホのブラウザでボイスチャットができるなんて発想はない • スマホユーザーにリーチするためにはネイティブアプ...
任天堂の開発チームに認知されてた事件 • ディレクターの天野さんに言及される • 海外のゲームニュースサイトに掲載された記事
デモ動画（ニコ動）
今後の予定とか野望とか • iOS対応 • iPhoneだから使えないっていう声を聞くと心苦しい • iOSプログラミングできないので誰か… • スプラトゥーン以外のゲームに合わせたVCサービス • 今でも別にイカ以外に使っちゃいけないわけじゃ...
求ム：イカエンジニア • イカ関連サービスを作るIT技術者増えてます • IkaLog • HDMI映像をキャプチャ・画像認識して戦績を記録するアプリ • stat.ink • IkaLog等で記録した戦績を溜め込んで集計するサイト • イカナ...
最後にちょっと宣伝
WebRTCの解説記事を書きました • 昨年末のコミケ89で頒布した同人誌 • 技術サークル TechBooster • 技術書で壁サークル • WebRTCのほかにAngular2, WebGLなど 内容盛りだくさん
152ページ
厚み約1cm の 「薄い本」
電子書籍の通販やってます https://techbooster.booth.pm/
Special Thanks • しぶき素材画像 • STARWALKER STUDIO (http://starwalkerstudio.com/)
Upcoming SlideShare
Loading in …5
×

WebRTCサービスを個人で運営してみた話

1,040
 -1

Published on

WebRTC conference Japan 2016の発表資料です

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
no profile picture user

  • Be the first to comment

No Downloads
Views
Total views
1,040
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

WebRTCサービスを個人で運営してみた話

  1. 1. WebRTCサービスを 個人で運営してみた話 2016/02/17 WebRTC Conference Japan ショートセッション4本勝負！ mzsm (@mzsm_j)
  2. 2. おまえだれよ • 名前…mzsm • 仕事…新大阪のサブスレッドという小さい会社で働いてます • 言語…PythonとJavaScript(TypeScript) • 仕事では(今のところ)WebRTC使ってません…
  3. 3. 今日お話しすること
  4. 4. 好きなゲームをもっと楽しく 遊ぶためにWebRTCサービス を作ってみた話
  5. 5. スプラトゥーンとは • 2015年5月28日に発売されたWii U用ゲームソフト • イカに相手を撃ち殺すかではなく、イカに多くの陣地を塗るか、 という新感覚シューティングゲーム • ブキを使ってインクを塗るヒト形態と、塗られたインクを泳い で素早く移動できるイカ形態を随時切り替えながら戦う • 全世界のプレイヤーとネットワーク対戦 • 国内売上累計120万本突破 • Wii Uを持ってる人の3人に1人はイカも持ってる計算
  6. 6. とりあえず紹介映像見て
  7. 7. 僕は1年待ち続けた…
  8. 8. 1年待ち続けた期待の新作 • 2014年6月のE3(※)でサプライズ的に発表 (※…米国ロサンゼルスで開催される世界最大のゲームの展示会・見本市) • さっきの映像がそのとき流されたもの • 紹介映像を少し見ただけで直感的にわかる面白さ • スプラトゥーン購入を前提に事前にWii U購入 • スマブラもあったしね… • 発売前に開催された体験イベントにも参加 • ニコニコ超会議2015 (2015/4/26, 27) • 完成披露試射会 (2015/5/9, 24) • 発売日は有休取って前日夜からずーっとプレイ • その日のうちにランクカンスト(当時の上限ランク20)
  9. 9. (自分の周りの) ITエンジニア界隈でイカが大流行 • なんかみんなイカやってる • これきっかけでWii Uを同時購入した人もけっこういた • Wii Uのフレンド登録数が一気に増加 • おとなのちから(経済力的な意味で)ってすげー
  10. 10. ある日のこと…
  11. 11. 仲間で集まって皆でバトル • フレンド合流機能 • フレンドがいる“部屋”に次のバトルから合流する • チーム分けはランダム • フレンドと同じチームに必ずしもなれるわけではない • Google Hangoutでチャットしながら • バトルが終わって次のバトルが始まるまでの間に感想を書き込む • バトル中は書き込む暇なんてない
  12. 12. ボイスチャットをしたいけど… • チーム分けはバトルごとにランダム • 同チームだったプレイヤーが次のバトルでは相手チームになる可能性 • あらかじめチームに分かれて通話するということはできない • 全員で通話してると相手チームに情報がバレる • ワイワイ楽しむだけなら別にそれでもいいけど… • どうせなら戦略的な会話をしながらのほうが楽しそう • 「このへん敵いないから塗っておくね」 • 「左のほうに敵が行ったから注意」みたいな • 「誰とは通話できる」「誰とは通話できない」を素早く切替え られるボイスチャットツールはないの？
  13. 13. 「WebRTCを使えば 作れるかも…」
  14. 14. とりあえず作ってみた • 当時WebRTCの知識はゼロ • 名前くらいは聞いたことあったけど中身にはまったく触れたことなし • 仕事から帰宅後、夜中にコツコツ開発 • WebRTC自体について調べるところから • 3日でプロトタイプ完成 • フレンド合流で遊んでた仲間で実際に使って遊んでみた • なかなか好評 • 「ライフチェンジングだ」 • 構想3日、開発1週間
  15. 15. ネーミングは重要 • イカは名前に入れたいよね • ボイスチャットより電話っていうほうが キャッチーな感じがする • そういえばイエデンワっていう変な特徴 的なPHSあったよね
  16. 16. 命名 イカデンワ
  17. 17. URLにもこだわってみる • .com? .net? .jp? • なんか新gTLDで面白いのがないか探してみる • 印刷用インクや署名といった意味があることから、筆記具や印刷機器、 サイン作成サービス等のサイトでの利用が期待されている.ink • イカちゃんの正式名称がインクリングだし、ちょうどいい • ikadenwa.inkに決定 • .inkドメインを使ったスプラトゥーン関連サービス • fest.ink • stat.ink • downy.ink/gear/ • ↑完全に僕のせい • インキ業界の人ごめんなさい
  18. 18. 満を持してリリース！
  19. 19. 思ってもみない大反響をいただく • ニュースサイト等に掲載 • KAI-YOU.net • GIGAZINE • 2chまとめブログ • はてブ ホッテントリ入り • ブクマ数約70 • WebRTC界隈からも反響が • ちょっとかじっただけなのにすみません…と思ってた • ここまでの反響は個人的に初めての経験 • スプラトゥーン人気あってこそ…
  20. 20. デモ
  21. 21. ここまでWebRTCの話題ほとんど無し(ごめんなさい)
  22. 22. イカデンワの仕組み
  23. 23. 作りはシンプル • シグナリングサーバはEasyRTCほぼそのまま • PeerJSに比べてルーム機能が標準で備わってたので楽そうだった • ルーム一覧を取得できる機能だけ殺してある • でも改めてPeerJSベースで作りなおそうと画策中… • ミュート/アンミュート指令はWebSocketで送信 • わざわざデータチャネルが必要なほどでもないので • ミュートは受信側で再生音量を0にしている • 送信側で無音状態にしてから送信するより簡単に実装できるから
  24. 24. 最大何人まで同時通話できるか • 単純なフルメッシュ接続 • SFUは使ってない • 音声だけならフルメッシュでも相当な人数いけるらしい • Vの人「WebRTCでつらいのは映像」 • 想定していたのはゲームの対戦人数である8人まで • それ以上は保証してない • 17人で使ったっていう画像がTwitterに上がってた
  25. 25. 運営してみて大変だったこと
  26. 26. SSLを導入しないといけなくなった問題 • Chrome 47からHTTPのページではgetUserMediaが利用不可に • SSLサーバ証明書の導入必須 • 早めに対応しておこう • 2015年8月のイカデンワ正式リリースに合わせて導入 • 当時はLet’s Encryptサービス開始前… • 1,000円くらいでRapidSSLのサーバ証明書を購入 • 当初のURLに付いていたはてブのブクマ数が0に戻った • 70→0→12(現在) • なんか悲しい
  27. 27. Skype障害の余波をモロに受けた事件 • 2015年9月22日、Skypeでログイン障害が発生 • Skypeで通話していた人たちが避難先としてイカデンワを利用 • 通常の10倍以上の利用者 • アプリケーション・シグナリングサーバはさくらVPS、 STUN・TURNサーバはConoHaの、それぞれメモリ1Gプラン • さくらVPSには自分のブログなど他にもいろいろ相乗り • アクセス激増を受け、耐え切れず陥落 • その日1日だけで約1ヶ月分の広告収入 • ただしそもそも1ヶ月分がしょぼいので…
  28. 28. その日のトラヒック
  29. 29. 1週間のグラフ
  30. 30. STUN・TURNが機能してなかった事件 • STUN・TURNのデフォルトポートはUDP3478 • 制限のきつい環境でも使えるかも…と思ってポート80で起動 • STUNが応答しない • プロセスは動いてる • テストコマンドを実行すると応答する • ポート80以外で起動させるとちゃんと応答する • ConoHaがUDP 80へのインバウンド通信を制限していた • その事実がConoHaのサポートページに書いてなかった • その制限を開始したメンテ時のメールをブログで発見 • ↑についてメールで問い合わせたらサポートページに追記された • めんどいのでUDP3478で起動させるようにした
  31. 31. Webアプリだと思われてない問題 • 「イカデンワってあるんだ、今度ダウンロードしておこう」 • ネイティブアプリだと思われてる • スマホのブラウザでボイスチャットができるなんて発想はない • スマホユーザーにリーチするためにはネイティブアプリのほう が有利なんだなぁ…と改めて思う
  32. 32. 任天堂の開発チームに認知されてた事件 • ディレクターの天野さんに言及される • 海外のゲームニュースサイトに掲載された記事
  33. 33. デモ動画（ニコ動）
  34. 34. 今後の予定とか野望とか • iOS対応 • iPhoneだから使えないっていう声を聞くと心苦しい • iOSプログラミングできないので誰か… • スプラトゥーン以外のゲームに合わせたVCサービス • 今でも別にイカ以外に使っちゃいけないわけじゃないけど… • モンハンとか他のゲームで使いたいっていう人がよくいる • いろんなゲームに合わせたシステムを提供できたら便利かな
  35. 35. 求ム：イカエンジニア • イカ関連サービスを作るIT技術者増えてます • IkaLog • HDMI映像をキャプチャ・画像認識して戦績を記録するアプリ • stat.ink • IkaLog等で記録した戦績を溜め込んで集計するサイト • イカナカマ • 一緒に遊ぶ仲間(チーム)を募集できるサイト • スーパーイカメーカー • パーツを組み合わせて自分好みのイカちゃんを作れるWebアプリ などなど… • イカ関連サービスは注目度が違う • 作る人も使う人も皆イカちゃんへの愛があふれてる
  36. 36. 最後にちょっと宣伝
  37. 37. WebRTCの解説記事を書きました • 昨年末のコミケ89で頒布した同人誌 • 技術サークル TechBooster • 技術書で壁サークル • WebRTCのほかにAngular2, WebGLなど 内容盛りだくさん
  38. 38. 152ページ
  39. 39. 厚み約1cm の 「薄い本」
  40. 40. 電子書籍の通販やってます https://techbooster.booth.pm/
  41. 41. Special Thanks • しぶき素材画像 • STARWALKER STUDIO (http://starwalkerstudio.com/)

×