【個人開発】ツイッターで通話を募集するサービスを作った話

Transcript

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