Giter Club home page Giter Club logo

sycall's Introduction

sycall

サービス概要

なかなか覚えられない K-POP アイドル曲のコール（掛け声）を 楽しく、効率よく練習できる コール練習サービスです。

登場人物

  • オンラインコンサートのためにコールを練習しておきたい人
  • リアルライブができるようになった時のためにコールを復習したい人
  • K-POP のいろんな楽しみ方を知りたい人

ユーザーが抱える課題

現状、コールの練習をする際、下記のやり方がよくあります。

  • 公式ファンクラブが配布する資料を見て練習する。

    ※ 資料の形式はテキストや画像ファイルなどであり、コールすべきフレーズやタイミングが表記されている

    例：ITZY DALLA DALLA (Cheer/Fanchant Guide)

  • 上の資料をもとに有志によって作られた字幕付き動画を観ながら練習する。

    ※ MV映像 + 歌詞 + コール をコンパイルした動画であり、コールすべきフレーズはカラオケ字幕のように流れてくる

    例：(ROM/ENG) ITZY - 'DALLA DALLA' Lyrics + FANCHANT

しかし上記の方法にはいくつか不便なところがあります。

  • 課題1：テキストや画像だけではライブの時のイメージが湧かず覚えられない
  • 課題2：字幕付き動画に関しては効果的だが、有志で作成されるため、必ず誰かが作ってくれるわけではない。そもそもこういう動画の作成は労力がかかるため数が少ない。 また、コールには韓国語も混じっているため、読み方がわからない

解決方法

  • 課題1：テキストや画像だけではライブの時のイメージが湧かない
  • 解決：
    • K-POP アイドルのパフォーマンス映像は YouTube で数多く無料公開されているので、好きな動画リンクを取得してきて、用意されたコールの字幕と同時に再生する。
    • また、ライブ会場の雰囲気を再現するために、歓声のボイスサンプルを同時に流す「サウンドエフェクト」や、クラッカーや桜吹雪を画面上に散らす「グラフィックエフェクト」などのオプション機能を作成する。
  • 課題2：コール字幕の作成に手間がかかる
  • 解決：
    • 字幕を簡単に作成できる編集機能を追加する。ユーザーは動画編集ソフトでコンパイルする必要がなく、好きなパフォーマンス映像と一緒にすぐに再生できる。また、作った字幕ファイルを他人とシェアして使うこともできる。
    • 読み方がわからない英語や韓国語をルビに自動変換して表示する。

プロダクト

「コール練習機能」や「コール字幕作成機能」を備えたWebアプリケーション

マーケット

国籍性別問わず、K-POP アイドル文化に興味関心があり、10~30代の K-POP ファン。

画面遷移図

https://www.figma.com/file/u48Yv2S58coIMkc8RmDOUd/Sycall

ER図

https://drive.google.com/file/d/1YVhHjtnspS2BmLNwkkQI8QY-dhf45dIR/view?usp=sharing

sycall's People

Contributors

toufup avatar

Stargazers

avatar Shuhei Takahashi avatar 山本航平（Joseph） avatar hirabayashi naoki avatar

Watchers

avatar

sycall's Issues

[ADD] トップページを作成

詳細概要

Figmaのデザインに沿ってトップページを作成する

実現したい挙動

ルートページにアクセスしてトップページが表示される

提案内容

Vue, Vuetify を使って作る

タスク

  • JavaScript の基本について勉強する。まずはこちらから始める。基礎がわかってきたらBilibiliのチュートリアルもいいかもしれない。
  • Vue の基礎を勉強。こちらの動画が良さそう。
  • トップページの大枠を slim で作成する
  • Vuetify を使いページをデザインする

[IMPROVE] 肥大化したコンポーネントを分解する

詳細概要

さまざまなロジックを1箇所に書いているPracticeBodyコンポーネントの肥大化問題を改善する

実現したい挙動

できれば１個のコンポーネントは100行を目安にしたい。
個々のコンポーネントの役割をシンプルにしたい。

提案内容

タスク

  • 細かいタスクに分解できているなら書き出す

補足・画像・スクリーンショットなど

[ADD] AWSにデプロイ

詳細概要

バックエンド実装の前にフロントエンドだけが完成しているものをとりあえずAWSにデプロイする。

実現したい挙動

独自ドメインでアクセスでき、ローカル環境と同じ状態で使用できるようにする

提案内容

Capistranoの導入

タスク

  • 細かいタスクに分解できているなら書き出す

補足・画像・スクリーンショットなど

[BUG] SameSite and Secure

起こっている問題

全てのページを読み込むと、下記の警告が出ます。

Cookie “_sycall_session” は “secure” 属性なしで “SameSite” 属性に “none” または不正な値が設定されているため、まもなく拒否されます。“SameSite” 属性についての詳細は https://developer.

スクリーンショット

Chrome：
image

Firefox：
image

起こっている問題の再現手順

  1. トップページにアクセスします。
  2. コンソールを開き、警告や問題を確認します。

期待する見せ方・挙動

  • 警告が出ない。

修正案

こちらのQiitaを参考します

GoogleChrome80からこれのデフォルト値がNone⇒Laxに変更になったのです。
簡単に言うとセキュリティが強化されましたということです。

GoogleChrome80からはSameSiteがNoneのときはSecure属性を付与しなければならない仕様に変更になりました。

動作環境・ブラウザ / Environment

  • macOS Monterey
    バージョン：12.0.1（21A559）
  • Chrome
    バージョン: 95.0.4638.69（Official Build） （x86_64）
  • Firefox
    バージョン: 95.0.4638.69（Official Build） （x86_64）

[ADD] コール練習の準備画面ページを作成

詳細概要

Figmaのデザインに沿ってトップページを作成する

実現したい挙動

・トップページの「TRY NOW」ボタンから表示される。
・コール字幕を探す部分でAjaxによる検索結果の表示を実現する。

提案内容

Ajaxを検索に適用する。

タスク

  • 画面の大枠を作る
  • #10
  • Vue-Routerを導入してページ遷移を実装する
  • Animate.cssなどを導入してUI操作やページ遷移を滑らかにする

[ADD] 準備画面から練習画面へのルーティング・ロジック（YouTubeリンクの受け渡し）

詳細概要

現在練習画面で再生されているYouTubuの動画はコードで直接指定したものです。
準備画面からリンクを受け取れるようにしたいです。

実現したい挙動

準備画面で入力したYouTube動画リンクが練習画面で再生される

提案内容

Vue-Router を使ってparamsを渡します。

タスク

  • 細かいタスクに分解できているなら書き出す

[BUG] 「選択したコール」のデータが残り続けるバグ

起こっている問題

  • 選択したコールのデータをセッションストレージに残していますが、
    「TOPページ→選曲」や、「練習画面→選曲」というように戻ると残ってしまいます。

元々コールデータをセッションストレージに保存したのは、練習画面でリロードしても消えないようにするためでした。
しかしそれが原因で、一度選択したら再び選曲画面に行くと、「選んでいないのに、選択肢がある」状態になってしまいます。

スクリーンショット

起こっている問題の再現手順

  1. 任意のコールを選択して練習スタート
  2. トップページに戻り、再び選曲画面へいくと、コールデータに紐づいているVideoのデータが表示されています。

期待する見せ方・挙動

  • いかなる道のりでも選択画面に行くと、「選択したコールデータ」をクリアすべき。

修正案

選曲画面のコンポーネントのMounted時にselectedCallInfoをクリアする

動作環境・ブラウザ / Environment

  • macOS / Windows / Linux / iOS / Android
  • Chrome / Safari / Firefox / Edge / Internet Explorer

[BUG] 練習画面、星エフェクトの新規タイマーが起動してしまう

起こっている問題

  • 練習画面、方向キーでYouTubeの再生位置を変えると星エフェクトの新規タイマーが起動してしまう
  • 星エフェクトのタイマーは常に1つであるべき。

スクリーンショット

起こっている問題の再現手順

  1. 練習画面までいく
  2. 再生されたら星エフェクトが出るのを確認する
  3. 方向キーでYouTubeの再生を複数回早送りする
  4. 1つ以上の星エフェクトが出現する（複数のタイマーが起動する）

期待する見せ方・挙動

  • 星エフェクトのタイマーは常に1つであるべき。

修正案

動作環境・ブラウザ / Environment

  • macOS / Windows / Linux / iOS / Android
  • Chrome / Safari / Firefox / Edge / Internet Explorer

[ADD] 管理画面へのアクセス権限処理を実装する

詳細概要

現時点では誰でも管理画面に入れてしまうため（URLを知っていれば）、管理者ユーザー、権限設定をしたい

実現したい挙動

提案内容

タスク

  • devise を導入する

補足・画像・スクリーンショットなど

[BUG] シェアしたTweetがTwitterの「ツイート」に表示されない

起こっている問題

  • シェアしたTweetがTwitterの「ツイート」に表示されない
  • 「ツイートと返信」に表示されてしまう

スクリーンショット

期待する見せ方・挙動

  • 「ツイート」に表示されて、ツイートした人のフォロワーでなくても閲覧できる

修正案

アットマーク＋ユーザー名でツイートしたのが原因でした。これだと「Mention」のツイートになり、
Mentionされた人とツイートした人両方フォローしていないと、タイムラインに表示されない仕様になっています。
単純にアットマークを取り除けば問題ないです。
参考：ツイートの種類について

動作環境・ブラウザ / Environment

  • macOS / Windows / Linux / iOS / Android
  • Chrome / Safari / Firefox / Edge / Internet Explorer

[ADD] お知らせ画面を作成する

詳細概要

アプリの修正情報、コールの追加情報を見せるための画面が必要です。
また、それを操作する管理画面を作る必要もあります。

実現したい挙動

提案内容

タスク

  • News コンポーネントを作る
  • News の管理画面、バックエンド側のテーブル、コントローラ作成など

補足・画像・スクリーンショットなど

[ADD] 練習画面の大枠を作成する

詳細概要

  • 練習画面の全体のデザインを作成する。
  • 埋め込み動画の部分はdivタグで代用する。

タスク

  • 埋め込み動画エリア
  • コール字幕エリア
  • お気に入りなどのボタン

補足・画像・スクリーンショットなど

完成イメージ
image

[ADD] 練習画面を完成させる

詳細概要

フロントとrailsとのやり取りの部分を実装する

実現したい挙動

提案内容

タスク

  • 練習画面created時にrailsに歌詞をリクエストする
  • rails側でデータを整形して返す
  • フロント側で受け取った歌詞をlyricsLinesに格納する

[IMPROVE] 選曲フローの改善

詳細概要

初めてサイトに訪れるユーザーに優しいUX設計となるように選曲フローを改善する

実現したい挙動

現在：URL入力 → 曲を探す
改善後：
曲を探す → URLを自動で提案する（歌詞作成時に参考にした動画のURLを）

提案内容

タスク

補足・画像・スクリーンショットなど

[IMPROVE] コールを細分化する

詳細概要

コールを「歌手と一緒に歌う部分」と「ファンだけが叫ぶ部分」に分ける

実現したい挙動

提案内容

コールの識別子を増やし（<コール>や、{コール} のような形とか）、Rails側で別の正規表現で抽出して、クライアント側に返す。

タスク

  • 細かいタスクに分解できているなら書き出す

補足・画像・スクリーンショットなど

[ADD] News機能を作成する

詳細概要

更新ノート、リリース情報、コール追加お知らせをユーザに展示するNewsコンポーネント、Newsテーブルを作成する。

実現したい挙動

提案内容

タスク

  • 細かいタスクに分解できているなら書き出す

補足・画像・スクリーンショットなど

[ADD] モバイル版対応

詳細概要

実現したい挙動

提案内容

タスク

  • 細かいタスクに分解できているなら書き出す

補足・画像・スクリーンショットなど

[BUG] 最後の歌詞が表示されない

起こっている問題

  • 最後の歌詞が表示されない。
  • ブラウザのコンソールでは下記2種類のエラーが出る
[Vue warn]: Error in render: "TypeError: undefined has no properties"

found in

---> <PracticeBody> at app/frontend/components/PracticeBody.vue
       <VMain>
         <VApp>
           <App> at app/frontend/App.vue
             <Root>

TypeError: undefined has no properties
    showLyric PracticeBody.vue:401
    render PracticeBody.vue:133
    renderList VueJS
    render PracticeBody.vue:125
    VueJS 14
    processId PracticeBody.vue:391
    promise callback*playing/this.processId< PracticeBody.vue:390
    setInterval handler*playing PracticeBody.vue:389
    VueJS 4
    playerStateChange vue-youtube.js:130
    trigger sister.js:59
    onEventName YouTubePlayer.js:49
    ba www-widgetapi.js:437
    rk www-widgetapi.js:878
    Ia www-widgetapi.js:901
    ok www-widgetapi.js:866
    g www-widgetapi.js:500
    Hf www-widgetapi.js:501
    ok www-widgetapi.js:866
    wk www-widgetapi.js:883
    setup www-widgetapi.js:884
    qk www-widgetapi.js:868
    zk www-widgetapi.js:899
    playerAPIReady index.js:81
    promise callback*./node_modules/youtube-player/dist/index.js/exports.default/playerAPIReady< index.js:79
    default index.js:72
    mounted vue-youtube.js:199
    VueJS 13
    js main.js:31
    js main.js:30
    Webpack 7

スクリーンショット

image

起こっている問題の再現手順

  1. 動画を再生する
  2. 最後の歌詞がくる手前にジャンプ
  3. 最後に出てくるはずの歌詞が表示してこない
  4. またコンソールでは、最後の歌詞がくる手前にジャンプし再生すると、上記スクリーンショットのようなエラーが出る。

期待する見せ方・挙動

  • 最後の歌詞が正しく表示してくれる
  • コンソールのエラーが出ない

修正案

おそらく「次の歌詞」を表示するロジックに問題があると思います。
https://github.com/Toufup/sycall/blob/main/app/frontend/components/PracticeBody.vue#L398-L405

動作環境・ブラウザ / Environment

  • macOS Monterey
    バージョン：12.0.1（21A559）
  • Chrome
    バージョン: 95.0.4638.69（Official Build） （x86_64）
  • Firefox
    バージョン: 95.0.4638.69（Official Build） （x86_64）

[BUG] 練習画面でのコンソールエラー：Failed to execute 'postMessage' on 'DOMWindow'

起こっている問題

  • 練習画面のコンソールで下記のエラーが出る
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('http://localhost:3000').

スクリーンショット

image

起こっている問題の再現手順

  1. 練習画面でリロードすると高い確率で出る
  2. 準備画面から練習画面に入る場合は、今の所検出されていない。

期待する見せ方・挙動

  • 動画はちゃんと再生できていますが、エラーをなくしたい。

修正案

参考になりそうなサイト：https://teratail.com/questions/119741

動作環境・ブラウザ / Environment

  • macOS Monterey
    バージョン：12.0.1（21A559）
  • Chrome
    バージョン: 95.0.4638.69（Official Build） （x86_64）
  • Firefox
    バージョン: 95.0.4638.69（Official Build） （x86_64）

[ADD] 練習画面にグラフィックエフェクトとサウンドエフェクトを追加する

詳細概要

現在は字幕を流す機能だけなので、UXを向上させるために適宜なエフェクトが必要だと考えております。

実現したい挙動

ユーザーが操作することなく、ランダムにエフェクトが発生するようにしたいです。

提案内容

具体的には：1、紙吹雪の演出。2、ライブ会場の雑音・歓声をバックグラウンドで鳴る機能。
と上記2つを考えているところです。

タスク

  • 歓声のサウンドファイルを用意し、動画の再生と共に鳴る/止まる
  • すでに導入した「party.js」を活用し、紙吹雪の演出を実装する
  • その他、実装済みのエフェクトの動作改善など

[IMPROVE] 追加済みの一覧を表現する

詳細概要

追加済みのコールを一覧ページ、または「人気コール」の形で検索のヒントを出すことで、
初心者にとっても分かりやすい使い方にする

実現したい挙動

選曲画面で何かしらの検索のヒントが得られる

提案内容

・DBにあるコールデータ（一部）を、選曲画面の検索欄で表示させる
・もしくは、検索欄の横にコール一覧のページにリンクする

タスク

補足・画像・スクリーンショットなど

[ADD] テーブル作成

詳細概要

こちらのER図にそってテーブルを作成する。

実現したい挙動

データの格納ができる

提案内容

現状ユーザー登録を考えていないため、usersテーブルは一旦スルーしてOK.

タスク

  • Lyricsテーブル
  • Langragesテーブル
  • LyricsVersionsテーブル
  • Songsテーブル
  • Artistsテーブル
  • Videosテーブル

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.