歌枠を部分再生できるWebアプリを作った話
ポートフォリオサイトとして形にしたいので過去に作ったものの紹介をしていきます。過去にnoteに投稿したものとほぼ同じ内容です。
Youtube上の歌枠から各歌と、それぞれの始点終点を設定し、プレイリストにして再生するWEBアプリを作ってみました。
動機
Youtubeで「歌枠 切り抜き」とかで検索すると結構たくさんの動画が投稿されてて、再生回数もそれなりに回ってるんですけど、歌枠の切り抜きって創作性があまりに少なくないですか？ だからといって、そういう切り抜き良くないって騒ぎ立てるのも自分が権利者じゃないから違いますよね。ので、そういった切り抜きの代替となるようなものを作りたくて作りました。（ただ、ああいう切り抜きを見るのはライト層だと思うので態々個人開発のwebアプリを使ってまで動画を再生しようとするかは怪しい。）
機能
歌枠の一曲一曲にタグを付けてあるので、タグから検索できます。
右の＋ボタンを押すとプレイリストに追加でき、再生が始まります。曲の始点終点の設定、タグの設定などは全手動でやっています。
設定用のページは次のような感じで、1時間の歌枠を5~10分くらいで登録できます。
荒らし対策で、ユーザー登録をしてログインした人しかできないようになっています。
課題
歌枠の登録は全手動なので、そういうのを登録してくれるユーザーが増えないとサイトとしての価値はあまり上がらないのが課題です。こういうユーザーにコンテンツを作ってもらうサイトでは、モチベを上げるために、登録されている楽曲へのいいね機能とか再生回数を表示する機能があればいいのかもしれないなーと思いました。
それと、リストの保存共有機能も作ったのですが、リストが保存される以上、悪意のある使い方もできそうなので登録したユーザー限定の機能になっています。これももっとカジュアルに使えたほうが良さそうだなと思ってます。
技術
フロントエンドはVue、バックエンドはFirebaseを使っています。
Firebase、ユーザーが少なければ全部無料で運用できるのですごいと思います。
Vue3からVueを使い始めたので、VuetifyやらVuefireみたいな便利そうなものも使ってみたいのですが、そういうのを使うためにVue2という古いものの使い方を勉強するのもな～って気持ちで触っていません。今回はライブラリコンポーネントにPrimeVueを使ったのですが、全部自作のほうが楽なんじゃっておもっちゃいました（使い方をわかってないだけだと思いますが）。