toufup / sycall Goto Github PK
View Code? Open in Web Editor NEWA K-POP fanchants practice app.
A K-POP fanchants practice app.
更新ノート、リリース情報、コール追加お知らせをユーザに展示するNewsコンポーネント、Newsテーブルを作成する。
バックエンド実装の前にフロントエンドだけが完成しているものをとりあえずAWSにデプロイする。
独自ドメインでアクセスでき、ローカル環境と同じ状態で使用できるようにする
Capistranoの導入
機能メニューを常時開かせておく、または練習画面に入るときにヒントの文字を浮かばせる
Figmaのデザインに沿ってトップページを作成する
ルートページにアクセスしてトップページが表示される
Vue, Vuetify を使って作る
初めてサイトに訪れるユーザーに優しいUX設計となるように選曲フローを改善する
現在:URL入力 → 曲を探す
改善後:
曲を探す → URLを自動で提案する(歌詞作成時に参考にした動画のURLを)
全てのページを読み込むと、下記の警告が出ます。
Cookie “_sycall_session” は “secure” 属性なしで “SameSite” 属性に “none” または不正な値が設定されているため、まもなく拒否されます。“SameSite” 属性についての詳細は https://developer.
こちらのQiitaを参考します
GoogleChrome80からこれのデフォルト値がNone⇒Laxに変更になったのです。
簡単に言うとセキュリティが強化されましたということです。
GoogleChrome80からはSameSiteがNoneのときはSecure属性を付与しなければならない仕様に変更になりました。
追加済みのコールを一覧ページ、または「人気コール」の形で検索のヒントを出すことで、
初心者にとっても分かりやすい使い方にする
選曲画面で何かしらの検索のヒントが得られる
・DBにあるコールデータ(一部)を、選曲画面の検索欄で表示させる
・もしくは、検索欄の横にコール一覧のページにリンクする
Figmaのデザインに沿ってトップページを作成する
・トップページの「TRY NOW」ボタンから表示される。
・コール字幕を探す部分でAjaxによる検索結果の表示を実現する。
Ajaxを検索に適用する。
こちらのER図にそってテーブルを作成する。
データの格納ができる
現状ユーザー登録を考えていないため、usersテーブルは一旦スルーしてOK.
[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
おそらく「次の歌詞」を表示するロジックに問題があると思います。
https://github.com/Toufup/sycall/blob/main/app/frontend/components/PracticeBody.vue#L398-L405
Googleアナリティクスを導入しPV数を測定する
https://analytics.google.com/analytics/web/provision/#/provision
訪問した人数がわかる
この記事を参考すれば良いでしょう
現時点では誰でも管理画面に入れてしまうため(URLを知っていれば)、管理者ユーザー、権限設定をしたい
元々コールデータをセッションストレージに保存したのは、練習画面でリロードしても消えないようにするためでした。
しかしそれが原因で、一度選択したら再び選曲画面に行くと、「選んでいないのに、選択肢がある」状態になってしまいます。
選曲画面のコンポーネントのMounted時にselectedCallInfoをクリアする
フロントとrailsとのやり取りの部分を実装する
現在は字幕を流す機能だけなので、UXを向上させるために適宜なエフェクトが必要だと考えております。
ユーザーが操作することなく、ランダムにエフェクトが発生するようにしたいです。
具体的には:1、紙吹雪の演出。2、ライブ会場の雑音・歓声をバックグラウンドで鳴る機能。
と上記2つを考えているところです。
現在練習画面で再生されているYouTubuの動画はコードで直接指定したものです。
準備画面からリンクを受け取れるようにしたいです。
準備画面で入力したYouTube動画リンクが練習画面で再生される
Vue-Router を使ってparamsを渡します。
アットマーク+ユーザー名でツイートしたのが原因でした。これだと「Mention」のツイートになり、
Mentionされた人とツイートした人両方フォローしていないと、タイムラインに表示されない仕様になっています。
単純にアットマークを取り除けば問題ないです。
参考:ツイートの種類について
アプリの修正情報、コールの追加情報を見せるための画面が必要です。
また、それを操作する管理画面を作る必要もあります。
コールを「歌手と一緒に歌う部分」と「ファンだけが叫ぶ部分」に分ける
コールの識別子を増やし(<コール>や、{コール} のような形とか)、Rails側で別の正規表現で抽出して、クライアント側に返す。
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').
参考になりそうなサイト:https://teratail.com/questions/119741
さまざまなロジックを1箇所に書いているPracticeBodyコンポーネントの肥大化問題を改善する
できれば1個のコンポーネントは100行を目安にしたい。
個々のコンポーネントの役割をシンプルにしたい。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.