![VTuberアプリケーション開発の基本 基礎から始めるアプリケーション開発のステップ](https://res.cloudinary.com/zenn/image/fetch/s--S7PAJr-h--/c_fill%2Cf_jpg%2Cfl_progressive%2Ch_700%2Cq_90%2Cw_500/https://storage.googleapis.com/zenn-user-upload/book_cover/e7ac643016.jpeg)
VTuberアプリケーション開発の基本 基礎から始めるアプリケーション開発のステップ
VTuberファンの方やVTuberアプリ開発に興味がある方におすすめの書籍が登場!『VTuberアプリケーション開発の基本』は、初心者でも理解しやすい解説とステップバイステップの手順書で、アプリ開発の基礎を学ぶことができます。ぜひ本書を一度読んで、VTuberアプリ開発にチャレンジしてみてください。 この本では、以下のような内容を扱います。 ・使用技術(Next.js、TypeScript、TailwindCSS) ・Next.jsとTypeScriptを使って、VTuberのスケジュール表を作成する方法について詳しく説明します。 ・hololiveのスケジュール表を作るために必要なAPI ・サムネイルをhoverで動画再生機能の実装方法 ・簡易ログインボーナスの実装方法 ・URLで表示されるカードの設定方法(OGP設定やTwitterカードなど) ・GoogleAnalyticsの設定方法(Gtagの設置) ・useContextとlocalStorageを使ってカードのサイズをグローバル管理、初期描画のラグを防止(非同期処理、ローディング実装)の実装方法 最後に、作成したスケジュール表をデプロイする方法について説明します。Vercelを使って、簡単にデプロイすることができます。 この本を読むことで、Next.js、TypeScript、TailwindCSSを使ってVtuberのアプリケーションを作成するための基本的な知識を身につけることができます。 (2024/5/10 記事修正とコード修正 fix(rename): ディレクトリ名(atoms -> ui)と型名(Api -> HoloData)を変更しました。https://github.com/eternaleight/custom-holo-app/pull/3)
自分の手でアプリを作成する力とアイデア力が身に付く本
使用技術
環境構築 (Node.js, yarn)
プロジェクトの作成
TailwindCSSの導入
必要なパッケージのインストール
全体の構成
Headerの作成
Footerの作成
Heroの作成
LiveCardの作成
ScheduleCardの作成
Drawerの作成
サムネイルをhoverで動画再生機能の実装
1日1回コインが貰える実装(簡易ログインボーナス)
OGP設定 URLで表示されるカードの設定(Twitterカードなど)
GoogleAnalyticsの設定(Gtagの設置)
useContextとlocalStorageを使ってカードのサイズをグローバル管理、初期描画のラグを防止(非同期処理、ローディング実装)
Vercelへのデプロイ
おわりに
![Ryoya Itabashi](https://storage.googleapis.com/zenn-user-upload/avatar/2da7b60885.jpeg)
Neovim|Fukuoka| Front-to-Back-End Engineer|『VTuberアプリケーション開発の基本』基礎から始めるアプリケーション開発のステップ(bit.ly/3ngQops)という本をZennでリリースしました。