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

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

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

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. とはいえ....
    通話に誘うのは大変

    ツイッターでリアルタイムで募集すればいいのでは?
    7

    View full-size slide

  7. 今回作ったもの
    (2週間前にリリース)
    8

    View full-size slide

  8. 9
    twicall.net

    View full-size slide

  9. 10
    twicall.net

    View full-size slide

  10. 11
    twicall.net

    View full-size slide

  11. 12
    twicall.net

    View full-size slide

  12. 技術的にどうやったか
    13

    View full-size slide

  13. 全体構成
    14

    View full-size slide

  14. 通話部分
    ● Skywayを使用
    ○ NTTコミュニケーションズが提供
    ○ WebRTCを簡単に使える
    ○ 日本語情報が豊富
    ● 無料枠が大きい
    ○ 音声なら個人プロダクトレベルだとかなり持つ
    ● 1対1の電話モデルと複数人通話のルームモデルがある
    ○ 今回は電話モデルを使った
    15

    View full-size slide

  15. 通話部分
    ● FirestoreのユーザーのドキュメントにSkywayの
    クライアントの接続情報(peerID)をもたせる
    16

    View full-size slide

  16. 通話部分
    17
    先着1名が通話に参加できる

    View full-size slide

  17. 通話部分
    18
    peer {
    id: “hoge”
    }

    View full-size slide

  18. 通話部分
    19
    peer {
    id: “hoge”
    }

    View full-size slide

  19. 通話部分
    20
    SkyWayのDataConnection
    を通じて、相手の状態を取得
    peer {
    id: “hoge”
    }

    View full-size slide

  20. 通話部分
    21
    peer {
    id: “hoge”
    }
    通話を掛ける(call)

    View full-size slide

  21. 通話部分
    22
    peer {
    id: “hoge”
    }
    通話に応答する(answer)

    View full-size slide

  22. 通話部分
    23
    peer {
    id: “hoge”
    }
    通話に応答する(answer)

    View full-size slide

  23. OGP画像生成
    1) ユーザーのドキュメントが新しく作られたとき発火
    2) Image Magickで画像生成
    3) 画像保存
    4) 画像URL保存
    24




    View full-size slide

  24. 通話時間の制限
    ● モバイルだとsetIntervalがバック
    グランドで動かないため、自動では通
    話を切断できない
    25

    View full-size slide

  25. CSS
    ● tailwindcssを使用
    ○ Utilクラスを提供してくれる薄いCSSフレームワーク
    ○ よき
    ● サイトの横幅を小さくした
    ○ レスポンシブルを考える手間を削減
    26

    View full-size slide

  26. インフラ
    ● Vercle(旧now.sh)を使用
    ● GitHubと連携して、自動でデプロイされる
    ○ 自動でブランチごとにデプロイしてくれる
    ● 個人だと無料!!!
    27

    View full-size slide

  27. リリースしてみてどうだったか
    28

    View full-size slide

  28. ツイートがそこそこバズった
    29

    View full-size slide

  29. そこそこ使われ始めた
    30

    View full-size slide

  30. VTuberの企画や配信に使われ始めた
    31

    View full-size slide

  31. 振り返ってよかったこと
    32

    View full-size slide

  32. 初期段階からデプロイして試した
    ● プロトタイプから仮のURLでデプロイして実際に試した
    ● 多くのフィードバックを得られた
    ● 価値検証のサイクルが早められた
    33

    View full-size slide

  33. 開発の進捗を逐次公開する
    ● ステルスで開発するのと比べ、ファンが得られやすい
    ● 公開時に使ってくれる人が増えるため、ブーストになる
    34

    View full-size slide

  34. なるべくランニングコストを抑えられた
    ● 長く運営すればするほど、成功する確率は高まる
    ○ なんらかのイベントが起こる確率が高まる
    ● 今回のサービスは利用者が少なければほぼ無料
    35

    View full-size slide

  35. まとめ
    ● ツイッターで通話を募集できるサービスを作った
    ○ twicall.net
    ● みんな使ってね
    ● 個人開発楽しいよ
    37

    View full-size slide