Vtuberボタンの作り方

# Vtuberボタンについて
## 0.イントロダクション
Vtuberにはボタン文化があるようで「Vtuber　ボタン」とかでググると大手の方たちのボタンはちょくちょく出てくるんですよね。自分はボタンについて某動画で偶然知ったんですけど推しのボタン作りたくない？とか思って作っちゃいました。~~全人類[かぼくしゅか](https://www.youtube.com/@syukapen)をすこれ~~

https://kaboku-button.azurewebsites.net/

(無料サーバーなので立ち上がりに10秒くらいかかります)

少しごちゃごちゃしてますが以前自分が作ったページです。こんな感じのページを作ろうということで以下解説していきます。
技術的に難しいことは特になくてスクショ貼りまくってるので誰でも大丈夫なはず…

-本ページの対象者
　コード作成は行わないのでプログラム未経験OK

-費用
　0円

:::note warn
責任の免除について
この記事で紹介しているコードや手順を使用する際には、利用者自身の責任において行ってください。万が一コードや手順の使用により損害が生じた場合でも、著者は一切の責任を負いません。
:::

:::note warn
注意事項
この記事で提供する情報やコードは、執筆時点での知識や環境に基づいています。環境の変化やバージョンアップにより、動作しない場合がありますので、ご了承ください。
:::

:::note info
サンプルコードは自由に改変して使用していただいて構いません。
:::

それでは行きましょう。

## 1.プログラミング環境構築

### 1.1 Eclipse導入

プログラミングをするためにEclipseというツールを使うので、ダウンロードしていきます。

手順は以下の記事の「4.Eclipseの日本語化」が分かりやすいと思います。

https://qiita.com/ryome/items/b47c5acdaa52cffbec58#4eclipse%E3%81%AE%E6%97%A5%E6%9C%AC%E8%AA%9E%E5%8C%96

eclipseのダウンロードは以下リンクです。

https://willbrains.jp/index.html#/pleiades_distros2024.html


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076240/73b34d56-102e-631d-5437-0805be997815.png)


1点補足で、eclipse起動の際にワークスペースディレクトリの選択画面が開きます。
ワークスペースはどこでも問題ないですが、困ったらC\app\ボタンアプリというディレクトリを作ってそこで作業しましょう。以降はC\app\ボタンアプリと仮定して説明します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076240/d6041ea5-8405-2949-ab14-c31004000257.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076240/7038b8bd-f997-474e-c19f-f53104e540f7.png)

このような画面が開けたらeclipse導入は完了です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076240/22d27063-762a-3660-35d8-4bd950127bbe.png)

### 1.2 サンプルプログラムダウンロード

https://github.com/q-cassette/sample-vtuber-button

リンク先ページのcodeボタンからzipファイルをダウンロードします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076240/cc8eb269-2294-b2de-1365-b2264a084b20.png)

ダウンロードしたファイルを解凍して中にあるvtuber-buttonファイルをC\app\ボタンアプリにコピーします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076240/51a57bf9-764b-dc67-a6df-bcc9ff8ce896.png)


プロジェクトのインポートを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076240/0df44686-495f-ea4d-95c7-10bd68b2ccfa.png)

Maven⇒既存Mavenプロジェクト
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076240/d0b44a45-7e8c-793c-5d8d-2d07961ef02b.png)

参照ボタンから先ほどコピーしたvtuber-buttonファイルを選択し完了を押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076240/02f877fb-f55f-2dc0-b66e-4923498191a7.png)

vtuber-buttonを右クリック⇒実行⇒Spring Boot アプリケーション
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076240/65f43cec-c8aa-2668-be8f-091266cb5743.png)

edge,chromeなどでlocalhost:8080にアクセスして下の画面が出ればOKです
ボタンを押すと音声が流れるはずです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076240/41928f1f-dc01-e74c-441e-6754c03a6e33.png)

## 2. プログラム解説

### 2.1プログラム修正
さて、サンプルプログラムを動かせたので中身を修正していきましょう。

まずボタンについて、C:\app\ボタンアプリ\vtuber-button\src\main\resources\static\audio内にmp3ファイルを置くと自動で表示されます。好きなボイスをじゃんじゃん追加しましょう。(mp3ファイルの取得方法はappendix参照)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076240/c69aaba6-9727-16a5-92b2-5cd6cd3af3a4.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076240/577b1079-5e10-10e1-5b82-68f1fd28b91b.png)


続いて修正するファイルはbutton.htmlとlink.htmlの２つです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076240/edb622fd-f6c2-58f9-f34b-75379771ce6a.png)

まずbutton.htmlの中身は先ほど開いたページの内容が記載してあります。
タイトル、h1タグ、フッターのtwitterリンクの3点を修正しましょう。修正したらctrl+sで保存してブラウザで確認。
```button.html
!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>かぼくしゅかボタン</title>←ここを編集
    <link rel="stylesheet" href="styles.css"> 

</head>
<body>

<h1>かぼくしゅかボタン</h1>←ここを編集
<p>ボタンを押しまくれ!</p>

<!-- ボタンを含むコンテナーのdiv -->
<div id="button-group-container">
    <div id="buttons-container"></div> 
</div>

<audio id="audio"></audio>

<!-- フッター -->
<footer>
    <a href="link">切り抜き元一覧</a>
    <a href="https://twitter.com/syukapen">かぼくしゅかTwitter</a>←ここを編集
</footer>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076240/4b22f3b1-dea9-c25a-002c-7df4ba7f288f.png)

次にlink.htmlですが音源を取得したリンク先URLと動画名を記載しましょう。これも修正したらctrl+sで保存してブラウザで確認。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076240/b1e589c9-b76a-1bcd-266a-809652619c34.png)

最後にもう一度localhost:8080にアクセスして想定通り変更できていればOKです。

さて、ここまでの説明で、ローカル環境でプログラムを動作させることができたと思います。次はビルドという作業を行いましょう。


### 2.2ビルド
ビルドとは、すごくざっくり言えば作ったプログラムを１つのファイルにまとめる作業です。今回の場合はビルドしてjarファイルというものができますが、このファイルをサーバーにデプロイ(方法は後述)することで作ったプログラムをインターネットに公開することができます。

それでは以下手順です
vtuber-buttonを右クリック⇒実行⇒Mavenビルド…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076240/cf8ed384-2f4a-e8e6-795e-25ade9e1a6d0.png)

ゴールに「clean package」と入力し他はデフォルトのまま適用⇒実行
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076240/1e6ecaaf-a1a9-e372-aff5-50f7699c952c.png)

正常に動けばC:\app\ボタンアプリ\vtuber-button\targetに[app-0.0.1-SNAPSHOT.jar]というファイルができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076240/c42d6e66-421d-7593-b9f1-e7d8cf8144ec.png)

app-0.0.1-SNAPSHOT.jarは「app.jar」に名前を変更しておきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076240/a1d78701-4d6c-6f23-dc6f-507bb7801ea0.png)


さて、これでビルドもOKです。次は作ったプログラムをサーバーにデプロイしてだれでもアクセスできるようにしていきましょう。

## 3.サーバーへデプロイ

### 3.1サーバー準備
サーバーは設定が楽で無料のfreeプランがあるAzureのApp serviceを使います。
freeプランにはCPUなど制約がありますが、今回のような簡単なページならばよほどアクセス数が多くならない限りは問題ないはずです。(今のところ自分は大丈夫)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076240/8125d431-7bfd-343f-9b87-ebcc6ad09319.png)

まずは下記サイトの「Azureの無料アカウント作成方法」を参考にしてAzureテナントを作成しましょう。

https://www.cloud-for-all.com/azure/blog/take-full-advantage-of-azure-free-account#toc-3
　
　6.登録完了まで進み、以下のようなポータル画面が表示されていればOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076240/6e660e27-9694-7681-eadb-62930bbf76ed.png)

さて、Azureテナントの準備ができたのでサーバーを作っていきましょう。
まず検索バーからapp serviceを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076240/961799bf-f857-d6b7-9267-7e8cff2fe0e2.png)

作成⇒webアプリをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076240/b25646ca-3ee1-292b-9489-832f0a7d2ff5.png)

以下仮画像
画像のように設定します。リソースグループの名前は適当で大丈夫です。
インスタンスの名前も何でも大丈夫ですが、ページにアクセスする際のURLになるので○○(Vtuberの名前)-buttonとかが無難かなと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076240/06f3d96b-d918-bcbc-379e-10aa74e243ac.png)
プランは新規作成で適当な名前を付けた後、必ずfree F1に設定しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076240/f7df4b3c-c01c-c73a-7f0c-51435ac94c73.png)

デプロイとネットワークはデフォルトのまま
監視のApplication Insightsは費用が掛かるので無効にしましょう。

タグはデフォルトのまま
最後に名前、プラン、ランタイムスタックを確認して作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076240/e03c8191-760d-6220-f7e7-09660bfd02a7.png)


:::note warn
Azure登録時には無料クレジットがもらえますが1か月で期限が切れて勝手に課金が始まるので初心者は課金系のサービスを立ち上げないことをおすすめします。
:::

数分でサーバーのデプロイが完了
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076240/23ac0ce5-b43e-29b8-f0c8-cc57cce94846.png)

念のため既定のドメインをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076240/664a1057-8e9a-5144-e9b5-1185f5242ebb.png)

この画面が開くことを確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076240/9524098a-7be8-b2a7-b502-d4e7696e3139.png)


### 3.2デプロイ
画面左側のタブで高度なツール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076240/d8b6ace6-f029-7ac3-4bc6-20b962d9acce.png)

移動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076240/3e5204ae-e4e7-b5d6-b6d7-15aa248ec5c2.png)

Debug console⇒CMD
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076240/3166f3ce-9dbb-7dfc-801f-d7c569cef115.png)

site
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076240/69cfdf69-eee6-1a1c-3c07-e81d17eb8c91.png)

wwwroot
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076240/7bd8bd1d-228d-80a5-365f-2f0cb7146d28.png)

2.2で作成したapp.jarをドラッグアンドドロップ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076240/61d709b5-a386-4a12-704f-258524ee7bb6.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076240/155fb186-133b-7d19-4484-8fe070938fdd.png)

Hey,Java developpersページを更新してページが表示されることを確認

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3076240/5cb106f0-8376-bd02-9a0e-87b89742f545.png)

無事にデプロイまで完了してインターネットに公開できました。あとはTwitterとかでURL拡散して完了です。お疲れ様でした！


## apenndix

mp3音源はどうやって取得してるのかとか思われてそうなので一応書いておきます。
1. Youtubeのライブ配信でボタン化したい音源を見つける
2. win+gで画面キャプチャを取る
3. 2.のmp4ファイルをmp3に変換する
4. 3.のmp3ファイルの切り取り・音量調整を行う。(自分はaudacityを使用しています)