はじめに

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

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

やること

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

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

設定

まずは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-right{
    transform: rotate(90deg);
}

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

JavaScript

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

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")
        }
    }
});

丁寧に書くならremoveの前にcontainsで有無を確かめるべきかもしれませんが、これで動くので十分でしょう。

Chromeの設定

まずは右上の拡張機能のアイコン（？）を押して一番下の拡張機能を管理を押します。

次に右上のデベロッパーモードを有効にしてパッケージ化していない拡張機能を読み込むを押します。するとフォルダを選択できるので、manifest.jsonがあるフォルダを指定すると読み込まれます。簡単でしょ

拡張機能を更新したときはこのページで読み込みボタンを押してページをリロードすれば適用されます。

表示はこのようになりました。大きさについては複数のページに対応させたい関係上指定していませんし、回転中心も中心のままなので周囲に枠ができちゃっていますが、許容範囲でしょう。もしこのページだけに使いたいみたいなことであれば、ピッタリになるように設定してもよさそうです。

参考文献

• Chromeブラウザの拡張機能を作ってみたい初心者向けに開発方法を紹介！【サンプルあり】