はじめに

動画を見ていて横向きの動画を縦長に表示された経験はありませんか？例えばこんな感じです。

こんな感じで（上の画像はあたりさわりのない画像をとってきてるので縦横もくそもありませんが…）横に黒い空白ができてうざいという悩みを解決する機能を、拡張機能として実装していきます。

やること

筆者はGoogle Chromeを使っているのでChrome用の拡張機能を作っていきます。ちなみにブラウザはChromeがおススメです。なぜなら拡張機能を入れるのがすごく簡単だからです（後述）。

概要としてはctrl+矢印キーで操作をしたいと思います。右を押したら右回りに90度回転、左を押したら左に90度回転した状態になるようにする、そして上を押したら回転を戻すように書いていきます。

設定

まずはjsonファイルを書いていきます。これは拡張機能の全般的な設定をするところです。
名前やバージョン、実行の仕方及びファイルを書いていきます。ここでは自分用にローカルで実行するだけなので、最低限書くべきものを書きます。

manifest.json


{
    "manifest_version": 2,
    "name": "rotate",
    "version": "1.0",

    "browser_action": {
        "default_title": "rotate"
    },
    "content_scripts": [
        {
          "matches": ["http://*/*", "https://*/*"],
          "css": ["rotate.css"],
          "js": ["rotate.js"]
        }
    ]
}

"content_scripts"というところにファイルを記述すると、ウェブページのhtmlに対して操作を行うcss,jsファイルを指定できます。ページはすべてのページに対して行うように設定しています。

CSS

CSSでは回転したときに指定するクラスを書いていきます。回転角は右回りで指定します。

rotate.css


.rotate-right{
    transform: rotate(90deg);
}

.rotate-left{
    transform: rotate(270deg);
}

JavaScript

JSではキーが押されたときにCSSで設定したクラスを付与するようにします。キーの同時押しを認識しなければなりませんが、ctrlキーに関してはevent.ctrlKeyでT/Fが返ってくるのでそれを使います。

rotate.js


var video = document.querySelector('video');

document.addEventListener('keydown', function(event) {
    if (event.ctrlKey){
        if (event.keyCode == 37){ //左
            video.classList.add("rotate-left")
            video.classList.remove("rotate-right")
        } else if (event.keyCode == 39){ //右
            video.classList.add("rotate-right")
            video.classList.remove("rotate-left")
        } else if (event.keyCode == 38){ //上
            video.classList.remove("rotate-left")
            video.classList.remove("rotate-right")
        }
    }
});