はじめに

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

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

・参考
※１：【初音ミク「マジカルミライ 2021」プログラミング・コンテスト】TextAlive App API講座【リリックアプリの作り方】
※２：初音ミク「マジカルミライ2021」プログラミングコンテスト

この記事の対象者

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

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

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

この記事で得られること

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

サンプルコードを動かす

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

１．サンプルコードをダウンロードする

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

・参考
※１1. 開発の始め方

　すると、Githubのページに行きます。緑色のボタン「↓Code▼」をクリックし、「Dawnload ZIP」をクリックしましょう。サンプルコードすべてを含むZIPファイルがダウンロードされます。なので、適当な場所に解凍しておいてください。解答した場所が開発する場所になります。

２．NodeJSをインストールする

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

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

３．サンプルコードを起動する

　いよいよです！サンプルコードを動かしましょう！

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

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

command_for_run

npm install
npm run dev

　実際にコマンドを打ち込んだ様子が　↓　です。サーバーがhttp://localhost:1234から立ち上がっています。chrome上でhttp://localhost:1234 を打ち込むと、サンプルコードが動いているのが分かります！

４．実際に動かしてみよう！！

　chrome上でhttp://localhost:1234 を打ち込んで、以下のような画面になっていたら成功です！真ん中の「再生」ボタンを押すと、始まります。

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

サンプルコードを編集する

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

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

src/index.html_line23

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

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

今後の開発

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

１．ディレクトリ「src」配下のファイルを編集する
~~２．サーバーを再起動する。~~

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

最後に

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