Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Transcript

  1. 【個人開発】 「ツイッターで通話を募集できるサービス」 を作った話 れとるときゃりー 1

  2. れとると・きゃりー @retoruto_carry • 個人でWebサービスをいろいろ作ってる • 大学4年生(就活中)

  3. 3 こんな感じのボタンを かんたんに作れるサービス

  4. 本題 4

  5. 5 今回のテーマ 外出自粛中の過ごし方

  6. 今回のテーマ 6 外出自粛中の過ごし方 • 家で1人 • 誰とも喋らない ➔ 誰かと通話したい

  7. とはいえ.... 通話に誘うのは大変 ↓ ツイッターでリアルタイムで募集すればいいのでは? 7

  8. 今回作ったもの (2週間前にリリース) 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 先着1名が通話に参加できる

  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