Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
【個人開発】ツイッターで通話を募集するサービスを作った話
Search
れとると・きゃりー
May 24, 2020
0
1.5k
【個人開発】ツイッターで通話を募集するサービスを作った話
れとると・きゃりー
May 24, 2020
Tweet
Share
More Decks by れとると・きゃりー
See All by れとると・きゃりー
node.jsで好きな配信者のライブアーカイブを自動でDLする
retorutocarry
0
25k
【個人開発】バズ狙いのツイッター系サービスを作って微妙に成功した話@s-dev talks 〜サービス開発勉強会〜 #4
retorutocarry
0
32k
webサービスを3つ作った間に得たtips
retorutocarry
0
3.4k
初めてWebサービスを作って得たTips
retorutocarry
1
3.7k
Featured
See All Featured
Unsuck your backbone
ammeep
662
57k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
The Art of Programming - Codeland 2020
erikaheidi
41
12k
Docker and Python
trallard
33
2.7k
A designer walks into a library…
pauljervisheath
199
23k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
220
21k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
243
20k
Building an army of robots
kneath
300
41k
Atom: Resistance is Futile
akmur
258
25k
BBQ
matthewcrist
80
8.8k
Web development in the modern age
philhawksworth
202
10k
Writing Fast Ruby
sferik
620
60k
Transcript
【個人開発】 「ツイッターで通話を募集できるサービス」 を作った話 れとるときゃりー 1
れとると・きゃりー @retoruto_carry • 個人でWebサービスをいろいろ作ってる • 大学4年生(就活中)
3 こんな感じのボタンを かんたんに作れるサービス
本題 4
5 今回のテーマ 外出自粛中の過ごし方
今回のテーマ 6 外出自粛中の過ごし方 • 家で1人 • 誰とも喋らない ➔ 誰かと通話したい
とはいえ.... 通話に誘うのは大変 ↓ ツイッターでリアルタイムで募集すればいいのでは? 7
今回作ったもの (2週間前にリリース) 8
9 twicall.net
10 twicall.net
11 twicall.net
12 twicall.net
技術的にどうやったか 13
全体構成 14
通話部分 • Skywayを使用 ◦ NTTコミュニケーションズが提供 ◦ WebRTCを簡単に使える ◦ 日本語情報が豊富 •
無料枠が大きい ◦ 音声なら個人プロダクトレベルだとかなり持つ • 1対1の電話モデルと複数人通話のルームモデルがある ◦ 今回は電話モデルを使った 15
通話部分 • FirestoreのユーザーのドキュメントにSkywayの クライアントの接続情報(peerID)をもたせる 16
通話部分 17 先着1名が通話に参加できる
通話部分 18 peer { id: “hoge” }
通話部分 19 peer { id: “hoge” }
通話部分 20 SkyWayのDataConnection を通じて、相手の状態を取得 peer { id: “hoge” }
通話部分 21 peer { id: “hoge” } 通話を掛ける(call)
通話部分 22 peer { id: “hoge” } 通話に応答する(answer)
通話部分 23 peer { id: “hoge” } 通話に応答する(answer)
OGP画像生成 1) ユーザーのドキュメントが新しく作られたとき発火 2) Image Magickで画像生成 3) 画像保存 4) 画像URL保存
24 ① ② ③ ④
通話時間の制限 • モバイルだとsetIntervalがバック グランドで動かないため、自動では通 話を切断できない 25
CSS • tailwindcssを使用 ◦ Utilクラスを提供してくれる薄いCSSフレームワーク ◦ よき • サイトの横幅を小さくした ◦
レスポンシブルを考える手間を削減 26
インフラ • Vercle(旧now.sh)を使用 • GitHubと連携して、自動でデプロイされる ◦ 自動でブランチごとにデプロイしてくれる • 個人だと無料!!! 27
リリースしてみてどうだったか 28
ツイートがそこそこバズった 29
そこそこ使われ始めた 30
VTuberの企画や配信に使われ始めた 31
振り返ってよかったこと 32
初期段階からデプロイして試した • プロトタイプから仮のURLでデプロイして実際に試した • 多くのフィードバックを得られた • 価値検証のサイクルが早められた 33
開発の進捗を逐次公開する • ステルスで開発するのと比べ、ファンが得られやすい • 公開時に使ってくれる人が増えるため、ブーストになる 34
なるべくランニングコストを抑えられた • 長く運営すればするほど、成功する確率は高まる ◦ なんらかのイベントが起こる確率が高まる • 今回のサービスは利用者が少なければほぼ無料 35
まとめ 36
まとめ • ツイッターで通話を募集できるサービスを作った ◦ twicall.net • みんな使ってね • 個人開発楽しいよ 37