NBA Rakutenが使いづらいのでChrome拡張機能でショートカットキーを追加してみた。

# はじめに

楽天が運営している[NBA Rakuten](https://nba.rakuten.co.jp/)。
日本のNBAファンは基本的にここ以外でNBAを見る方法はないのだが

<b>このサイト、使いづらすぎる</b>

いろいろと気に入らない部分はあるが、なによりショートカットキーが全く設定されていないのだ。
YouTubeを代表とする他の動画サイトでは
スペースキー で 再生/停止
←/→ で ◯秒戻す/◯秒進む
等のショートカットキーが設定されているものだが、それが全くない。

ということで誰か作ってないかなーとググってみると、あった。

https://chrome.google.com/webstore/detail/rakuten-nba-keyboard-shor/jjkadadlmljhbfldlgcppgbkckpggepb

使ってみた。

キーの設定が思ってたのと違う・・・
他のショートカットキーも欲しい・・・

ということで勉強がてらにChrome拡張機能を作ることにした。

## 機能

実装するショートカットキーは下記。
| キー | 機能 |
|:-:|:-:|
|矢印キー左 |10秒戻し|
|矢印キー右|10秒スキップ|
|, (コンマ)|30秒戻し|
|. (ドット)|30秒スキップ|
|スペースキー|停止/再生|
|F|全画面表示|
|M|ミュート切替|
|1~4|各クォーターに移動||


## ディレクトリ構成
~~~
ChromeExtensionTest
  ├─ manifest.json
  └─ main.js
~~~

#### manifest.json

1つ目のファイルは拡張機能の設定をする`manifest.json`
このファイルはファイル名固定。

~~~manifest.json
{
  "name": "Add shortcut key to NBA Rakuten",
  "version": "0.0.1",
  "manifest_version": 3,
  "description": "Chrome拡張機能を自作してみるテスト。",
  "content_scripts": [
    {
      "matches": ["https://nba.rakuten.co.jp/games/*"],
      "js": ["main.js"]
    }
  ]
}
~~~

`matches`に対象とするサイトを記載する。
すべてのページに適用させたい場合は、下記でいけるらしい。
~~~
"matches": [<all_urls>]
~~~

`js`には追加する機能のjavascriptファイルを記載する。
今回は`main.js`とした。

#### main.js

ここで追加する機能を作っていく。

~~~main.js
window.onload = function() {
    window.onkeydown = function(e) {
        if (e.isComposing || e.keyCode === 229) {
            return;
        }
        // spaceで再生/停止
        if (e.keyCode==32){
                const buttons = document.querySelectorAll(".playButton");

                // NodeListを配列に変換
                const buttonsArray = [].map.call(buttons, (ele) => ele);

                // 表示されている要素のみ抽出
                const button = buttonsArray.filter(
                    (ele) => ele.style.display !== "none"
                );

                button[0].querySelectorAll(".playButton-background")[0].click();

                return false;
        }

        // →で10秒スキップ
        if (e.keyCode==39){
            document.querySelectorAll(".icons-ff-10s")[0].click();
        }
        // ←で10秒戻す
        if (e.keyCode==37){
            document.querySelectorAll(".icons-rew-10s")[0].click();
        }

        // >(,)で30秒スキップ
        if (e.keyCode==188){
            document.querySelectorAll(".icons-rew-30s")[0].click();
        }
        // <(.)で30秒戻す
        if (e.keyCode==190){
            document.querySelectorAll(".icons-ff-30s")[0].click();
        }

        // fで全画面表示
        if (e.keyCode==70){
            document.querySelectorAll(".icons-screen-full")[0].click();
        }

        // mでミュート切り替え
        if (e.keyCode==77){
            document.querySelectorAll(".volume-icon")[0].click();
        }

        // 1で1Q
        if (e.keyCode==49|e.keyCode==97){
            document.querySelectorAll(".quarterSkip-list-item")[0].click();
        }
        // 2で2Q
        if (e.keyCode==50|e.keyCode==98){
            document.querySelectorAll(".quarterSkip-list-item")[1].click();
        }
        // 3で3Q
        if (e.keyCode==51|e.keyCode==99){
            document.querySelectorAll(".quarterSkip-list-item")[2].click();
        }
        // 4で4Q
        if (e.keyCode==52|e.keyCode==100){
            document.querySelectorAll(".quarterSkip-list-item")[3].click();
        }
    };
};
~~~

基本的には最初に紹介した[Rakuten NBA Keyboard Shortcuts](https://chrome.google.com/webstore/detail/rakuten-nba-keyboard-shor/jjkadadlmljhbfldlgcppgbkckpggepb)のコードを参考にした。

コードの構成としては、
1.指定したキーが押されたときに
2.指定したクラスを持つ要素にclick()
という処理をそれぞれ設定している形になる。

キーの指定はキーボードの各キーに割り当てられているキーコード(数字)で行う。
キーコードは[キーコード一覧](https://web-designer.cman.jp/javascript_ref/keyboard/keycode/)で調べることができる。


# 拡張機能の追加方法

Chromeの[拡張機能管理画面](chrome://extensions/)を開くと、左上に「パッケージ化されていない拡張機能を読み込む」というボタンがあり、それを押すとディレクトリ選択を要求される。
そして、作成したディレクトリを選択すれば拡張機能一覧に追加される。

## 参考
[今から3分でChromeブラウザの独自アドオンを自作してみよう](https://language-and-engineering.hatenablog.jp/entry/2015/10/22/%E4%BB%8A%E3%81%8B%E3%82%89%EF%BC%93%E5%88%86%E3%81%A7%EF%BC%8CChrome%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%AE%E7%8B%AC%E8%87%AA%E3%82%A2%E3%83%89%E3%82%AA%E3%83%B3%E3%82%92%E8%87%AA)
[Chrome拡張の作り方 (超概要)](https://qiita.com/RyBB/items/32b2a7b879f21b3edefc)