Slide 1
Slide 1 text
【個人開発】
「ツイッターで通話を募集できるサービス」
を作った話
れとるときゃりー
1
Slide 2
Slide 2 text
れとると・きゃりー
@retoruto_carry
● 個人でWebサービスをいろいろ作ってる
● 大学４年生（就活中）
Slide 3
Slide 3 text
3
こんな感じのボタンを
かんたんに作れるサービス
Slide 4
Slide 4 text
本題
4
Slide 5
Slide 5 text
5
今回のテーマ
外出自粛中の過ごし方
Slide 6
Slide 6 text
今回のテーマ
6
外出自粛中の過ごし方
● 家で１人
● 誰とも喋らない
➔ 誰かと通話したい
Slide 7
Slide 7 text
とはいえ....
通話に誘うのは大変
↓
ツイッターでリアルタイムで募集すればいいのでは？
7
Slide 8
Slide 8 text
今回作ったもの
（２週間前にリリース）
8
Slide 9
Slide 9 text
9
twicall.net
Slide 10
Slide 10 text
10
twicall.net
Slide 11
Slide 11 text
11
twicall.net
Slide 12
Slide 12 text
12
twicall.net
Slide 13
Slide 13 text
技術的にどうやったか
13
Slide 14
Slide 14 text
全体構成
14
Slide 15
Slide 15 text
通話部分
● Skywayを使用
○ NTTコミュニケーションズが提供
○ WebRTCを簡単に使える
○ 日本語情報が豊富
● 無料枠が大きい
○ 音声なら個人プロダクトレベルだとかなり持つ
● 1対1の電話モデルと複数人通話のルームモデルがある
○ 今回は電話モデルを使った
15
Slide 16
Slide 16 text
通話部分
● FirestoreのユーザーのドキュメントにSkywayの
クライアントの接続情報（peerID）をもたせる
16
Slide 17
Slide 17 text
通話部分
17
先着１名が通話に参加できる
Slide 18
Slide 18 text
通話部分
18
peer {
id: “hoge”
}
Slide 19
Slide 19 text
通話部分
19
peer {
id: “hoge”
}
Slide 20
Slide 20 text
通話部分
20
SkyWayのDataConnection
を通じて、相手の状態を取得
peer {
id: “hoge”
}
Slide 21
Slide 21 text
通話部分
21
peer {
id: “hoge”
}
通話を掛ける（call）
Slide 22
Slide 22 text
通話部分
22
peer {
id: “hoge”
}
通話に応答する（answer）
Slide 23
Slide 23 text
通話部分
23
peer {
id: “hoge”
}
通話に応答する（answer）
Slide 24
Slide 24 text
OGP画像生成
1) ユーザーのドキュメントが新しく作られたとき発火
2) Image Magickで画像生成
3) 画像保存
4) 画像URL保存
24
①
②
③
④
Slide 25
Slide 25 text
通話時間の制限
● モバイルだとsetIntervalがバック
グランドで動かないため、自動では通
話を切断できない
25
Slide 26
Slide 26 text
CSS
● tailwindcssを使用
○ Utilクラスを提供してくれる薄いCSSフレームワーク
○ よき
● サイトの横幅を小さくした
○ レスポンシブルを考える手間を削減
26
Slide 27
Slide 27 text
インフラ
● Vercle(旧now.sh)を使用
● GitHubと連携して、自動でデプロイされる
○ 自動でブランチごとにデプロイしてくれる
● 個人だと無料！！！
27
Slide 28
Slide 28 text
リリースしてみてどうだったか
28
Slide 29
Slide 29 text
ツイートがそこそこバズった
29
Slide 30
Slide 30 text
そこそこ使われ始めた
30
Slide 31
Slide 31 text
VTuberの企画や配信に使われ始めた
31
Slide 32
Slide 32 text
振り返ってよかったこと
32
Slide 33
Slide 33 text
初期段階からデプロイして試した
● プロトタイプから仮のURLでデプロイして実際に試した
● 多くのフィードバックを得られた
● 価値検証のサイクルが早められた
33
Slide 34
Slide 34 text
開発の進捗を逐次公開する
● ステルスで開発するのと比べ、ファンが得られやすい
● 公開時に使ってくれる人が増えるため、ブーストになる
34
Slide 35
Slide 35 text
なるべくランニングコストを抑えられた
● 長く運営すればするほど、成功する確率は高まる
○ なんらかのイベントが起こる確率が高まる
● 今回のサービスは利用者が少なければほぼ無料
35
Slide 36
Slide 36 text
まとめ
36
Slide 37
Slide 37 text
まとめ
● ツイッターで通話を募集できるサービスを作った
○ twicall.net
● みんな使ってね
● 個人開発楽しいよ
37