【TextAliveAppAPI】TextAlive入門！サンプルコードを動かしてみる【マジカルミライ2021プロコン】

# はじめに
　先日2021年08月05日、こんな動画がYouTube上に公開されましたね（※１）。私はプログラミングコンテストに興味はなかったんですが、「プログラムで大好きな初音ミクさんを盛り上げることができる」なら話は別です！。という事で、応募締め切り（９月３０日（※２））に間に合うかどうかは分からないけど、やってみたいと思った所存でございます(*'ω'*)
　
　また、この記事では各種言語の詳細な解説は行いません。あくまで、動作環境を整えて、サンプルコードを動かすまでやっていただいたらなと思います。自分なりのコードを書くための準備としてこの記事を読んでください(^^)/

※2021/08/11追記
　基本的なパラメータを取得するソースコードを公開しました。この記事を読んでいただいた後、是非参考にしていただけると幸いです。
・[【TextAliveAppAPI】楽曲のパラメータを取得するプログラム【マジカルミライ2021プロコン】](https://qiita.com/mimuro_syunya/items/39b80307b6d6e0eb8db7)

![youtube_1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554112/bab54766-0d9a-aead-7311-2555a768161c.jpeg)

・参考
※１：[【初音ミク「マジカルミライ 2021」プログラミング・コンテスト】TextAlive App API講座【リリックアプリの作り方】](https://www.youtube.com/watch?v=8i6YciZLk3w&t=322s)
※２：[初音ミク「マジカルミライ2021」プログラミングコンテスト](https://magicalmirai.com/2021/procon/)

# この記事の対象者

* かなり初心者（JavaScript、Html、Cssの単語ぐらいは聞いたことある）
* 公式サイト「開発者登録と最初の一歩」で躓いた人（[1. 開発の始め方](https://developer.textalive.jp/app/)で何言ってるかわからん）
* サンプルコードを動かして、開発の準備を整えたい人
* <font color="red">マジカルミライを一緒に盛り上げたい人</font>

　私の動作環境はWindows10です。（それ以外でもできると思いますが、一応注意してください）

　フロントエンドに強い人は、※１の動画でアナウンスされていた[1. 開発の始め方](https://developer.textalive.jp/app/)を進めていけば大丈夫です。
　ちなみに、記事作成者はNodeJSどころかJavaScriptすら触ったことがなかったです。なので、あまり詳しい解説はできません。勉強中です。私は公式サイトで躓いたので、やり方だけ記述していきます。

# この記事で得られること

* githubに上がっているサンプルコードを実行できる
* それを編集し、自分なりのコードが書けるようになる！

# サンプルコードを動かす
　とりあえずサンプルコードを動かすための手順を書いていきます。

## １．サンプルコードをダウンロードする
 まず、サンプルコードをダウンロードしましょう。公式サイトの「開発者登録と最初の一歩※１」の右下、「コード全体を見る」をクリックしましょう。

・参考
※１[1. 開発の始め方](https://developer.textalive.jp/app/)

![tutrial_1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554112/40ff6557-38c6-d345-b91e-fc56050da019.jpeg)
　すると、Githubのページに行きます。緑色のボタン「↓Code▼」をクリックし、「Dawnload ZIP」をクリックしましょう。サンプルコードすべてを含むZIPファイルがダウンロードされます。なので、適当な場所に解凍しておいてください。解答した場所が開発する場所になります。
![git_install_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554112/bf770abc-321a-96f0-4435-d1d6d9223570.png)

## ２．NodeJSをインストールする
　安心してください。私もNodeJSが何なのか、まだ分かっていません。でも動かしてみた感じ、JavaScriptを動かすためのサーバーを立ち上げてくれている、っぽいです。まあ、やってみたらわかると思います！

　まず、[Node.js](https://nodejs.org/ja/)までアクセスしましょう。そして、推奨版のインストーラをダウンロードしてください。
利用規約なんてすっ飛ばして
利用規約をしっかり読んで、適当にOK押して、インストールしましょう。私がやったときは、パスが勝手に通っていました。

![nodejs_install_1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554112/e0b05b02-21f3-9f08-a45c-e8f14ea92f25.jpeg)

## ３．サンプルコードを起動する
　いよいよです！サンプルコードを動かしましょう！

　まず、githubからダウンロードしたサンプルコードが解凍された場所まで行って、コマンドプロンプトを起動してください。

![running_0.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554112/44dc5844-2751-e947-ac71-9af8883de15d.jpeg)

　そこで、以下のコマンドを入力してください。サーバーが起動します。

```ruby:command_for_run
npm install
npm run dev
```
　実際にコマンドを打ち込んだ様子が　↓　です。サーバーが`http://localhost:1234`から立ち上がっています。chrome上でhttp://localhost:1234 を打ち込むと、サンプルコードが動いているのが分かります！
![running_1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554112/93658ed5-92ea-ff80-8c85-5f0291b2fcca.jpeg)

## ４．実際に動かしてみよう！！
　chrome上でhttp://localhost:1234 を打ち込んで、以下のような画面になっていたら成功です！真ん中の「再生」ボタンを押すと、始まります。
![running_2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554112/9bfde517-47b4-f2cf-7391-9168455998f6.jpeg)

　曲はピノキオピーさんの「愛されなくて君がいる」で、リアルタイムで歌詞が表示されます！

![running_3.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554112/0775dfe1-d90d-7ca7-2b04-cb77b29ee78a.jpeg)

# サンプルコードを編集する
　サンプルコードをいじって、反映させてみましょう。
　おそらくダウンロードしたZIPファイルの「src」ディレクトリ配下にあるものが、ソースコードです。そこの「index.html」・「index.js」・「index.css」を編集していって、自分のソースコードを作っていく感じです。

　今回は「index.html」の23行目に「（編集済み）」という言葉を追加してみましょう。

```ruby:src/index.html_line23
<li>発生中の歌詞テキストがあれば表示されます(編集済み)</li>
```

　![edit_1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554112/149e11fc-e7e7-e920-ad94-a63ddd99c7d6.jpeg)

　
ここで、編集内容を反映させるため、サーバーを再起動させましょう。コマンドプロンプト上で`Ctrl+C`を押してバッチジョブを終了してください。そして、「３．サンプルコードを起動する」をもう一度実行してみてください。すると、以下のようにテキストが変化しているのが分かると思います。

※2021/08/07修正
 サーバーを再起動しなくても、自動的に更新されます。すごいですね。

![edit_2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554112/b96db625-34df-1a8a-f197-d66668bff259.jpeg)

# 今後の開発
　これまでの手順を実行できた人は、もう開発が始められる状態です！開発手順としては、

１．ディレクトリ「src」配下のファイルを編集する

２．サーバーを再起動する。


という感じでやっていきましょう。後はTextAliveAppAPIのリファレンス（[Package index　 
textalive-app-api](https://developer.textalive.jp/packages/textalive-app-api/)）を眺めながら、自分なりアプリを作っていきましょう！

# 最後に
　どうも初音ミク大好きおじさんです。PinocchioPさんの曲はもっと好きです。新曲でましたね（[ピノキオピー - ねぇねぇねぇ。 feat. 鏡音リン・初音ミク / Nee Nee Nee.](https://www.youtube.com/watch?v=w8yweCungCE)）。ループ再生しながらこの記事を書きました。プログラミングをしながら、
　マジカルミライを応援できるなんて最高ですね！私もがんばりますが、みんなも頑張って商品をゲットしましょう！それじゃ！