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.3k
初めてWebサービスを作って得たTips
retorutocarry
1
3.7k
Featured
See All Featured
Designing for Performance
lara
601
67k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.2k
Building a Scalable Design System with Sketch
lauravandoore
455
32k
GitHub's CSS Performance
jonrohan
1023
450k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
19
1.6k
What the flash - Photography Introduction
edds
64
11k
What's new in Ruby 2.0
geeforr
335
31k
Designing with Data
zakiwarfel
94
4.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
10
4.4k
Embracing the Ebb and Flow
colly
78
4.1k
Web development in the modern age
philhawksworth
201
10k
Visualization
eitanlees
135
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