Go to Qiita Advent Calendar 2024 Top
LoginSignup
27
20

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@yukuduri

【TextAlive App API】HTML＋CSS+JavaScriptのみで実装するチュートリアル【マジカルミライ2020プロコン】

Posted at

はじめに

　2020/09/18、初音ミク「マジカルミライ 2020」プログラミング・コンテストの開催が発表され、同時に「TextAlive App API」が一般公開された。未だ人気を誇るコンテンツ「初音ミク」を用いたプロコン（プログラミングコンテスト）ということで、熱意に満ちた同志は多いことだろう。

　しかし、一般公開されたばかりのAPIということで公式の文献以外の情報が無いに等しい。しかもサンプルコードもビルドツール仕様がほぼほぼ前提であり、ビルドツールなども何も使わない（つまり、HTML・CSS・JavaScriptベタ書き）&&ローカル環境となると厳しいものばかり。諦めたくなった人も多いのではなかろうか。。。

　今回、プロコンに参加するにあたって、公式のチュートリアルとサンプルコード、リファレンスを参考にしつつ闘い抜いた戦果をここに書き記しておく。尚、本記事ではあくまでAPIの動作を理解するためにあり、「こう実装しなければならない」というものを示すものではない。本記事読者様の思うように実装し、プロコンに挑むなどして頂きたい。

　尚、JavaScriptの言語自体の詳細な仕様、用語などについては本記事では解説を入れないものとする。ここでは「関数」「メソッド」を呼び分けず、すべて「関数」と呼ぶとする。わからないことについては、私の過去記事「JavaScript基礎文法 - Qiita」の参照や、各自でググって頂きたい。（もちろんヤフってもらっても構わない。検索エンジン的にはググってるのと一緒だけどな）

　ここまで読んでお察しだろうが、記事内では割とフザけつつ書いているのでその点注意されたし。

今回の戦果

　ちなみに、現時点で不具合も多い。詳細は後ほど。

実装内容

　注）今回のソースコードについては、CSSは含まれていない。「タイトルにCSSと入れているにも関わらず使っていないのか」とか言わない。

　今回は、非推奨かもしれない（※後述）が、ひとまずわかりやすさ重視で<input type="text">要素に入力された楽曲URLを読み込み、それを再生＆歌詞を表示してみよう。いちいちURLをコピペするのは面倒なので、ひとまず今回のプロコンの課題曲3曲のURLをautocomplete属性で補完可能にしている。また、jQuery3.5.1を利用している。

　本記事では、まずソースコードを提示し、その後詳しく見ていくとしよう。

ソースコード

ディレクトリ構成：
root/
　├ js/
　│ └ script.js
　└ index.html

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>API Test</title>
  </head>
  
  <body>
    <label>songURL:</label><input type="text" name="songUrl" size="50" autocomplete="on" list="songs"><button onclick="run()">Run</button>
    <datalist id="songs">
      <option value="https://www.youtube.com/watch?v=ygY2qObZv24"></option>
      <option value="https://www.youtube.com/watch?v=a-Nf3QUFkOU"></option>
      <option value="https://www.youtube.com/watch?v=XSLhsjepelI"></option>
    </datalist>
    <hr>
    <div id="info"></div>
    <div id="contents">
      <h3 id="text"></h3>
    </div>
    <div id="media"></div>
    
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/textalive-app-api/dist/index.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="js/script.js"></script>
  </body>
</html>
js/script.js
const { Player } = TextAliveApp;

let songUrl = 'http://www.youtube.com/watch?v=ygY2qObZv24';

// 単語ごとに歌詞を表示
const animateWord = (now, unit) => {
  if (unit.contains(now)) {
    $('#text').html(unit.text);
  }
};

const run = () =>{
  //初期化処理
  $('#info').empty();
  $('#media').empty();
  
  const songUrlVal = $('input[name="songUrl"]').val();
  if (songUrlVal!='') songUrl=songUrlVal;
  const player = new Player({ app: true , mediaElement: document.querySelector('#media')});
  console.log('Run');
  player.addListener({
    onAppReady: (app) => {
      console.log('AppReady');
      player.createFromSongUrl(songUrl);
    },
    
    // 楽曲情報読み込み完了後、呼ばれる
    // この時点ではrequestPlay()等が実行不能
    onVideoReady: (v) => {
      console.log('VideoReady');
      let infoContents = '';
      infoContents += '<h1>楽曲情報</h1>';
      infoContents += '<h2>楽曲名：<br>' + player.data.song.name + '</h2>';
      infoContents += '<h2>アーティスト名：<br>' + player.data.song.artist.name + '</h2>';
      $('#info').html(infoContents);
      $('#text').html('[再生準備待機中]');
    },
    
    // 再生準備完了後、呼ばれる
    // これ以降、requestPlay()等が実行可能
    onTimerReady: () => {
      console.log('TimerReady');
      $('#text').html('[再生開始]');
      player.requestPlay();
      // 定期的に呼ばれる各単語の "animate" 関数をセットする
      let w = player.video.firstWord;
      while (w) {
        w.animate = animateWord;
        w = w.next;
      }
    },
  });
}

仕様詳細

全体的な流れ：

  1. フォーム入力欄に楽曲URLを入力、Runボタンを押して実行
  2. 入力されたURLを用いてTextAlive App API呼び出し（未入力なら、「ピノキオピー」氏の「愛されなくても君がいる」を使用）
  3. 楽曲情報が読み込めたら、「楽曲名」「アーティスト名」を表示
  4. 再生準備ができたら、再生を開始し、歌詞が始まれば単語ごとに表示

１．Runボタン押下直後

let songUrl = 'http://www.youtube.com/watch?v=ygY2qObZv24';
const run = () =>{
  //初期化処理
  $('#info').empty();
  $('#media').empty();

  //※以下省略
}

初期化処理として「楽曲情報」の部分と「#media（※後述）」の中身を消しているが、歌詞表示の実行中に再度Runを押すと歌詞を二重に取得し、その止め方がいくら試しても無理だった（推測だが、歌詞を表示するループが止められていないからだと思われる）ため放置。現状、ページ再読み込みで対処。

  const songUrlVal = $('input[name="songUrl"]').val();
  if (songUrlVal!='') songUrl=songUrlVal;

フォーム入力欄からURLを取得、何か入力があればsongUrlに代入。なければsongUrlの初期値を使用。

const player = new Player({ app: true , mediaElement: document.querySelector('#media')});

TextAlive App APIで利用するplayerを宣言。サンプルコードを見るに、app: trueの箇所でアプリ名や作者を定義するなどできるみたいだが、ひとまず放置。
mediaElement: document.querySelector('#media')で再生時に表示されるメディア（YouTubeの埋め込み動画）の位置を指定できる模様。CSSなどでいい感じに位置を調整するなどしよう。ちなみに、試してみたがjQueryのセレクタ$('#media')などは利用できないみたい。

２．TextAlive App API呼び出し後

player.addListener()に引数として
イベント１:関数１,イベント２:関数２,...
のように渡すことで、そのイベント（onAppReady , onVideoReadyなど）になった際に対応する関数を実行。
サンプルコードを見るに、イベントと同名の関数を入れることでも代用可？（未検証）
尚、本記事ではここで渡す関数にはサンプルコードでも使われている「アロー関数」を用いる。

onAppReadyイベント：初期化されたプレイヤーが最初に呼ぶイベント

    onAppReady: (app) => {
      console.log('AppReady');
      player.createFromSongUrl(songUrl);
    },

player.createFromSongUrl(url);で引数のurl(文字列)から再生する楽曲のURLを直接渡す。
※本来、楽曲URLはクエリパラメータta_song_urlで渡すことが前提とされており、今回のようにフォーム入力などから取得するのは非推奨と考えられる。チュートリアルでは、クエリパラメータで指定されていない場合のフォールバックとして利用する方法が紹介されている。
app.managedがtrueのとき、ホストが存在する（＝TextAliveと接続されている？）。
app.songUrlがtrueのとき、クエリパラメータta_song_urlで指定されたURLが存在し、それにより自動的に選曲状態になっている（＝player.createFromSongUrl();でURLを渡す必要はない、ハズ）。

３．楽曲情報読み込み完了後

onVideoReadyイベント：楽曲情報読み込み完了後、呼ばれるイベント

    // 楽曲情報読み込み完了後、呼ばれる
    // この時点ではrequestPlay()等が実行不能
    onVideoReady: (v) => {
      console.log('VideoReady');
      let infoContents = '';
      infoContents += '<h1>楽曲情報</h1>';
      infoContents += '<h2>楽曲名：<br>' + player.data.song.name + '</h2>';
      infoContents += '<h2>アーティスト名：<br>' + player.data.song.artist.name + '</h2>';
      $('#info').html(infoContents);
      $('#text').html('[再生準備待機中]');
    },

この時点で楽曲情報は読み込みが終わり、音源の再生準備に入る。VideoReadyという名前がややこしいが、再生準備が整ったときに起こるイベントではなく、再生準備に入るときに起こるようだ。この名前のせいで、この時点で再生は可能だと思ってしまった。紛らわしい。ちくしょう！思えば、他のイベントも同様の名付けなのか？笑
楽曲情報の読み込みはできているので、player.data.song.nameやplayer.data.song.artist.nameで楽曲名やアーティスト名を取得可能。
今回利用していないが、v.firstCharがtrueのとき、歌詞付き楽曲、falseのときは歌詞のない楽曲と判別可能。
ちなみに本記事最初に貼り付けた動画では$('#text').html('[再生準備完了]');にしてたけどややこしいので変えた。

４．再生準備完了後

onTimerReadyイベント：再生準備完了後、呼ばれるイベント

    // 再生準備完了後、呼ばれる
    // これ以降、requestPlay()等が実行可能
    onTimerReady: () => {
      console.log('TimerReady');
      $('#text').html('[再生開始]');
      player.requestPlay();
      // 定期的に呼ばれる各単語の "animate" 関数をセットする
      let w = player.video.firstWord;
      while (w) {
        w.animate = animateWord;
        w = w.next;
      }

この時点でようやく再生準備が完了。これ以降、requestPlay()など再生の操作ができる。

TextAlive App API「おまたせ、待った？」
俺「おせえよ！！　あとイベントの名前紛らわしいのやめろ！」

ひとまず再生準備が完了したら強制的に再生する仕様に。
チュートリアル通り、歌詞を単語ごとに表示するanimateWord関数を呼び出し。

// 単語ごとに歌詞を表示
const animateWord = (now, unit) => {
  if (unit.contains(now)) {
    $('#text').html(unit.text);
  }
};

animateWord関数は、チュートリアルにあるものと多少書き換えてますが、動作は同じ。
強いて言うなら、jQueryがないと動かないくらいかな。
いや、それを言うならここ以外もjQueryセレクタ使ってる箇所すべて動かないけどな

その他のイベント

　今回使用していないイベントについてはチュートリアル（App のライフサイクル）を参照のこと。

　ちなみに、実行中にRunを再度押下しても私の環境下（個人的に最強だと思ってるHTMLエディタBracketsのライブプレビュー機能）ではonAppMediaChangeイベントは発火しなかったので、やはりサンプルコードのように、楽曲URLはクエリパラメータta_song_urlで指定するのが推奨と言えるだろう。onAppReadyの説明に

ホストは App に対して再生したい楽曲の URL をクエリパラメータ ta_song_url で渡します。

とあり、onAppMediaChangeの説明には

ホストは App に対して再生したい楽曲の URL を更新することがあります。この際 App の再読み込みは行われません。 App 側では onAppMediaChange イベントが呼ばれるため、これで URL の変更を検知します。

とも書いてあるしな。。。

　なお今の所、クエリパラメータで指定するとしての実装・検証は行っていない。まあ動くんちゃう？知らんけど。

さいごに

　最後まで読んでくださり、ありがとうございます。今回実装した手法では楽曲URLの変更が感知できないなど問題がありすぎるので、実際にWebアプリケーションを実装する上では避けたほうがいいだろう。取り消し線でここに何か書こうとしてたけど、改めて書いた記事読み返してたら何したかったか忘れた。

　本記事を作成したのは、チュートリアルやサンプルコードをもとに、新規参入者さんたちによりわかりやすく伝え、導入段階の敷居を下げるためである。本記事に書いた私の失敗を踏み台にして、それならばどう実装して解決するのか、などはこんな拙い記事を最後まで読んでくれた貴方がた自身で考え、実装し、是非とも"初音ミク「マジカルミライ 2020」プログラミング・コンテスト"にご参加頂きたい。というのは建前で、この記事の読者がプログラミングコンテストの好敵手＜ライバル＞となりかねないからだ。あと「審査完了までソースコードを一般公開できない」という規約に抵触の恐れも無いとは言えないからな。

　今回のプロコンに関しては、審査完了後に成果物のソースコードの一般公開ができるので、コンテスト応募期間中に記事にしたい内容を書き溜めておき、コンテスト終了後、改めてソース公開とともに軽く解説記事でも書ければと思っている。プロコンに燃える同志よ、健闘を祈る。

P.S.

この記事書くのに4時間以上かかってた。いつのまにこんな時間に。。。

心の声（タグTextAliveAppAPIでどなたか有用な記事を投稿してくださることをひっそり祈っている。。。）

27
20
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
27
20

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?