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.7k
【個人開発】ツイッターで通話を募集するサービスを作った話
れとると・きゃりー
May 24, 2020
Tweet
Share
More Decks by れとると・きゃりー
See All by れとると・きゃりー
node.jsで好きな配信者のライブアーカイブを自動でDLする
retorutocarry
0
27k
【個人開発】バズ狙いのツイッター系サービスを作って微妙に成功した話@s-dev talks 〜サービス開発勉強会〜 #4
retorutocarry
0
34k
webサービスを3つ作った間に得たtips
retorutocarry
0
3.7k
初めてWebサービスを作って得たTips
retorutocarry
1
3.9k
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Building an army of robots
kneath
303
45k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
440
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Git: the NoSQL Database
bkeepers
PRO
428
65k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
GraphQLとの向き合い方2022年版
quramy
44
14k
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