📖

Vtuber × スケジュール確認アプリの開発

2024/04/29に公開

開発したアプリ

https://vtuberdule-pink.vercel.app/

https://github.com/hato72/vtuberdule/

参考にさせていただいたサイト

基本的な構造は以下のサイトにならい、開発を行った
https://zenn.dev/eternaleight/books/fedd5f1ce2f9fc

アプリを開発したきっかけ

  • 各Vtuberの配信状況を1つの画面で確認できるアプリが欲しいと考えていた
  • TypeScriptを用いたアプリ開発手法を学びたかった

模倣開発を行ってみて

上記のサイトの手順通りに開発を進め、いざアプリを使ってみると..

「ホロライブ」だけでなく、他のVtuber事務所にも対応するようにしたい!
対応する全事務所のVtuberを確認できる画面と、指定した事務所に所属するVtuberのみを確認できる画面が欲しい!
Vtuber名、配信タイトルで検索したい!

など、欲しい機能が次々と頭に浮かんできた

そこで、実際に頭に浮かんできた機能を追加することに挑戦した

アプリの内容

主な機能について

  • 元々の機能
    • 「ホロライブ」に所属するVtuberの配信状況を1つの画面で確認できる機能
  • 追加した機能
    • 「ホロライブ」だけでなく、他の5つの事務所にも対応
    • Vtuber名や配信タイトルで検索を行える機能
    • 事務所を指定して所属するVtuberの配信状況の確認や検索を行える機能

初期画面1


初期画面2


drawerボタン押下後


「ホロライブ」を選択後


「apex」で検索


「ぺこら」で検索

使用した技術

TypeScript

Next.js

TailwindCSS

Vercel

さいごに

ここまで見てくださり、ありがとうございます。

もしよろしければ、このアプリに関する改善点や他に欲しい機能などのご意見、ご感想などを頂きたいです。○○事務所を追加してほしい、こんな機能は開発できないか?、この機能は使いずらいなどざっくりしたことでも大歓迎です。
また、READMEの開発メモの部分に記載していることに関して、改善策やアイデアをお持ちの方がいらっしゃればそちらもいただけると幸いです。

ご意見をくださる方は以下のフォームからご回答お願いいたします。

https://docs.google.com/forms/d/e/1FAIpQLSf22GNLi1UmWizGNkGD9odMkTZKHW_UxCLPUDpG8-8x1MioKA/viewform

Discussion