はじめに
先日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からダウンロードしたサンプルコードが解凍された場所まで行って、コマンドプロンプトを起動してください。
そこで、以下のコマンドを入力してください。サーバーが起動します。
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行目に「（編集済み）」という言葉を追加してみましょう。
<li>発生中の歌詞テキストがあれば表示されます(編集済み)</li>
ここで、編集内容を反映させるため、サーバーを再起動させましょう。コマンドプロンプト上でCtrl+Cを押してバッチジョブを終了してください。そして、「３．サンプルコードを起動する」をもう一度実行してみてください。すると、以下のようにテキストが変化しているのが分かると思います。
※2021/08/07修正
サーバーを再起動しなくても、自動的に更新されます。すごいですね。
今後の開発
これまでの手順を実行できた人は、もう開発が始められる状態です！開発手順としては、
１．ディレクトリ「src」配下のファイルを編集する
２．サーバーを再起動する。
という感じでやっていきましょう。後はTextAliveAppAPIのリファレンス（Package index
textalive-app-api）を眺めながら、自分なりアプリを作っていきましょう！
最後に
どうも初音ミク大好きおじさんです。PinocchioPさんの曲はもっと好きです。新曲でましたね（ピノキオピー - ねぇねぇねぇ。 feat. 鏡音リン・初音ミク / Nee Nee Nee.）。ループ再生しながらこの記事を書きました。プログラミングをしながら、
マジカルミライを応援できるなんて最高ですね！私もがんばりますが、みんなも頑張って商品をゲットしましょう！それじゃ！