webタイマーアプリを作る

· ☕ 4

最近Pococha(ぽこちゃ)という動画配信アプリにハマっていますww

アイドルを目指していたり、女優さんを目指していたりする可愛い子が動画を配信するアプリです。

それを応援する人たちが、配信を見て課金して…。で、それが女の子に還元されてっていうよくできた仕組みww

私の大好きな子が配信するという事で始めたのですが、なんとか課金せずに応援できないものかと色々考えて、とあるツールを作ったというお話ですww

コイン(課金通貨)をポコボックスで効率よく稼ぐためのタイマーを作ります!

Pococha(ぽこちゃ)の仕組み

アプリの話だけ見たい方は作るものまでスキップしてくださいww

ライバー(配信者)はリスナー(視聴者)からの応援ポイントに対してお金がもらえます。

応援ポイントはコイン(課金通貨)、視聴時間、いいね数、コメント数、拍手数などで加算されていきます。

加算時に重要なのは、

コイン(課金通貨)>コメント数>視聴時間>拍手数>いいね数

って感じみたいですが、

ダントツでコインが大事です。

課金なので当然ですね。

でも、毎日毎日課金も出来ない…。でも応援はしたい…ってひとのために、ポコボックスという仕組みがあります。

ポコボックス

  • 配信を見ながら、7分のカウントダウンが0になるともらえるプレゼント

  • 毎日1人のライバー(配信者)につき、2個までもらえます。

  • 中身は2~10コイン。開けるまで何枚かはわからない。

このカウントダウンというのが、コメントをしなければカウントは最後のコメントをした時から1分半でストップし、コメントすれば再開するという仕組みになっています。

ボックスのカウントが0になるとボックスが取得でき、20秒以内にぽこボックスをタップして開けることができます。

が、ボックスが取得できる状態の20秒を過ぎるとぽこボックスは消え、タイマーが最初の7分から再スタートになります…。

効率のいいボックスの開け方

最短時間でボックスを開ける

最短で7分でボックスを開けることができます。

そのためには、1分半以内にコメントをし続ける。

で、コインを取得できる状態になったら20秒以内に画面をタップ。

最少操作回数でボックスを開ける

最少で5回の操作回数でボックスを開けることができます。

5:30,4:00,2:30,1:00でそれぞれカウントが止まってからそれぞれコメント=4回。

で、コインを取得できる状態になったら20秒以内に画面をタップ=1回。

それぞれの開け方に対応したツールの検討

ポコボックスで問題というか、難しいのが、カウントが止まったときや、コインが獲得できるようになった事が、画面を見ていないと分からないことです。

なので、それが分かるようなツールを作ろうと考えました!

で、細かい調整はあとで設定で好きにできるようにしようとは思いますが、まずは、↑の2パターンを考えます。

最短時間でボックスを開ける

1分半以内⇒切りよく1分毎に軽めのアラームが鳴る。

7分経ったら強めのアラームが鳴る。

最少操作回数でボックスを開ける

1分半以上⇒切りよく2分毎に軽めのアラームが鳴る。

4回のアラーム+1分経ったら強めのアラームが鳴る。

作るもの

という事で作るもの

私はながら作業でBOXを開けたいので、最少操作回数でボックスを開ける、をまず作っていきます。

  • スタートから2分毎に軽めのアラームが鳴る。

  • 4回のアラーム+1分経ったら強めのアラームが鳴る。

構成

なんでも作れそうだけど、勉強がてらReactで作る。

で、s3に乗せて、皆に使ってもらおう!

どうやってs3に乗せるかはなんか色々方法あるみたいだから、とりあえずローカルで完成してから考える!

勉強方法

前に、ついに、フロント初心者の私がReactに挑戦してみた!でちょっとReact触ったんだけども、webpack?使ったおかげで基本がよく分からず…ww

初心にもどって最初から公式チュートリアルを一通りやった。

途中windowsのWSLを使うとnpmのパスがおかしいでちょっと躓いたので、WSL使ってて、npm初心者の人は要注意!

で、↑のチュートリアルを元に作成してみました。

できた

使い方はこちら

ソースは後ほど。


るな
るな
エンジニア