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 -&gt; ui)と型名(Api -&gt; HoloData)を変更しました。<a href="https://github.com/eternaleight/custom-holo-app/pull/3" target="_blank" rel="nofollow noopener noreferrer">https://github.com/eternaleight/custom-holo-app/pull/3</a>)

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)

VTuberアプリケーション開発の基本　基礎から始めるアプリケーション開発のステップ

自分の手でアプリを作成する力とアイデア力が身に付く本

使用技術

環境構築 (Node.js, yarn)

プロジェクトの作成

TailwindCSSの導入

必要なパッケージのインストール

全体の構成

Headerの作成

Footerの作成

Heroの作成

LiveCardの作成

ScheduleCardの作成

Drawerの作成

サムネイルをhoverで動画再生機能の実装

１日１回コインが貰える実装（簡易ログインボーナス）

OGP設定 URLで表示されるカードの設定（Twitterカードなど）

GoogleAnalyticsの設定（Gtagの設置）

useContextとlocalStorageを使ってカードのサイズをグローバル管理、初期描画のラグを防止（非同期処理、ローディング実装）