2022/03/13 (日)

JSで何か作るよ(2) - 動画ビューア解説

●動画ビューアのソースコード

  • 前回の記事で作ったニコニコ動画視聴ツールの解説編です。
  • ツール名を「NicoNicoPlayer」とします。略してnnplay。
  • ブログだとソースが読みにくいので別ページに切り出しました。
  • 参照→ nnplay.html

  • GitHubにもソースコードを上げました。

●JavaScriptの解説

  • <div id=”nico_area”>は動画表示エリアです。
  • このnico_area内にニコニコ動画を埋め込むには、次のようなscript要素を挿入します。
    <script src=
      “https://embed.nicovideo.jp/watch/動画ID/script?w=幅&h=高さ”>
    </script>
  • ただしこれは「nico_area.innerHTML = ‘~’」ではうまくいきません。
  • 動的にscript要素を読み込ませるには「nico_area.appendChild()」を利用する必要があります。
  • それをおこなっているのが、show_video()関数です。

  • <select id=”nico_id”>は動画選択リストです。
  • ユーザーが動画タイトルを選択するとinputイベントが発生し、表示動画を変更します。
  • 動画リストは<select>内にハードコーディングしてあります。
  • この動画リストは、別ツール「nnlist」で取得できます。

  • <button id=”go_prev”><button id=”go_next”>は移動ボタンです。
  • クリックするとclickイベントが発生し、動画リストを前後に移動します。

●localStorageの利用

  • このスクリプトでは「前回表示した動画番号」を記録しています。
  • 記録場所としてlocalStorageを利用します。
  • これは「変数名, 値」のペアをローカルPCに保存する機能です。
  • 次のように使います。
    値の書き込み: localStorage.setItem(変数名, 値);
    値の読み出し: 値 = localStorage.getItem(変数名);

●HTML要素のidによる直接指定について

  • 「id=”識別名”」を持つHTML要素は「window.識別名」でアクセスできます。
  • たとえば<div id=”nico_area”>は「window.nico_area」です。
  • さらにWebページ内では、トップレベルの「window」は省略できるので、
  • <div id=”nico_area”>なら、単に「nico_area」でも指定できます。
  • 当ブログではこの方法を利用してスクリプトを簡略化しています。

  • ただしidによるHTML要素の直接指定は、一般に非推奨です。
  • うっかりidと同じ変数名などを使ってバグの元だからです(変数が優先)。
  • 推奨されるのは次のように明示的にオブジェクトを得る方法です。
    const nico_area = document.getElementById(’nico_area’);
    または
    const nico_area = document.querySelector(’div#nico_area’);