日本語の読み上げをするChrome拡張機能を作ってみた #JavaScript

.
同内容で画面キャプチャ付きの記事はこちらにあります。
.

長ったらしい業務メールや、読んでおきたいけど分量に及び腰になっちゃうBlog記事を、読み上げてもらって文章を眺めながら聞くというやり方で、集中力が低下している時にもとりあえず処理できるようにして生産性を上げたい（上がる？）。

ちょっとググるとなかなか良いサービスがある。
http://imtranslator.net/translate-and-speak/speak/japanese/

読み上げも我慢して使えるレベル。一昔前と比べるとかなり良くなった
読み上げのスピードを選べるところがGood
- ちんたら読まれたらイラつくからね
フォームにテキストをコピーして[Speak Japanese]をクリックすると、音声ファイルが生成されて画面上で再生可能となる
- ちょっと面倒臭い
（無料では）文字数制限がある。自動的に可能な範囲で良い上げてくれるのはGood
- 長文を読み上げたいという用途なので、かなり面倒臭い
僕には不要だが、複数言語に対応している

ということで、制限のないサービスを探そう。

かと思ったけど、無料で制限のないサービスなんて都合の良いものが存在するかわからないし、あったとしてもテキストをコピペして読み上げる形になるだろうから手間がかかってしまうイマイチ感は拭えない。

そしてちょっと調べただけでも自分で作ってしまえそうだったので、日本語を読み上げるGoogle拡張を作ってみた。Chrome拡張は作ったことなかったのだけど、とりあえず動くものなら意外に簡単にできた。

こんなものを作りたい

読み上げしたいテキストを選択する
右クリックメニューの「読み上げ」をクリック
オプションで読み上げの速度を変更可能

作るもの

適当にフォルダを作る。その中に以下のファイルを置く
icon16.png アイコンをPNGファイルで作る。自動で伸縮されるのでとりあえず適当でいい
manifest.json （後述）
options.html （後述）
background.js （後述）
options.js （後述）

manifest.json

Chrome拡張機能の基本動作や必要なファイルを定義する基本的な設定ファイル。
manifest_versionは必須項目。
今回はコンテキストメニュー（右クリックメニュー）を使うので、permissionsにeontextMenusを設定、オプション（設定画面）を使うのでoptions_pageを指定しているあたりがポイント。

manifest.json

{
    "name" : "Japanese Text to Speach",
    "version": "0.1",
    "manifest_version" : 2,

    "description": "選択したテキストを右クリックメニューの「読み上げ」から読み上>げます。日本語のみ対応。",

    "permissions": [
        "tabs", "http://*/*", "https://*/*", "contextMenus"
  ],

    "options_page": "options.html",

    "icons":{
        "16": "icon16.png"
    },

    "background": {
        "scripts": ["background.js"]
    }
}

options.html

図の通り、アイコンをクリック→オプションから開くオプション画面（設定画面）。
オプション画面の動作をscriptタグで指定しているoptons.jsに記述する。

options.html

<!DOCTYPE html>
<html lang="ja">
<head>
        <meta charset="utf-8">
</head>
<body>
        <h1>Japanese Text to Speach</h1>
        <input type="radio" name="rate" value="1"> Normal
        <input type="radio" name="rate" value="1"> Fast
        <input type="radio" name="rate" value="1"> Fastest
        <button id="save">保存</button>

        <script src="options.js"></script>
</body>
</html>

background.js

chrome.contextMenus.create({
        "title": "読み上げ",
        "type": "normal",
        "contexts": ["selection"],
        "onclick": function(info) {
                var synthes = new SpeechSynthesisUtterance(
                        info.selectionText
                );
                synthes.lang = "ja-JP";
                synthes.volume = 0.3;
                var rate = localStorage['rate'] ? localStorage['rate'] : '1.0';
                synthes.rate = parseFloat(rate);
                speechSynthesis.speak( synthes );
        }
});

options.js

オプション画面（options.html）の動作を記述する。localStorageを使って設定を保存する。未設定の状態で画面を開いた時の初期値の設定をしているのがポイントか。

myscript.js

var rate = document.getElementsByName('rate');

document.getElementById('save').onclick = function() {
    if (rate[0].checked) {
        localStorage['rate'] = '1';
    } else if (rate[1].checked) {
        localStorage['rate'] = '1.3';
    } else {
        localStorage['rate'] = '1.5';
    }
}

document.body.onload = function() {
    switch(localStorage['rate']) {
        case '1':
            rate[0].checked = true;
            break;
        case '1.3':
            rate[1].checked = true;
            break;
        case '1.5':
            rate[2].checked = true;
            break;
        default:
            rate[0].checked = true;
            break;
    }
}

自作した拡張機能を読み込む

メニュー[その他のツール]-[拡張機能]を開く。
[デベロッパーモード]にチェックを入れる。
[パッケージ化されていない拡張機能を読み込む]ボタンをクリック。
作成したフォルダをしてして開く。

使う

読み上げたいテキストを選択。
コンテキストメニュー（右クリックメニュー）の[読み上げ]をクリック。

読み上げられましたか？

自作した拡張機能を削除する

拡張機能の画面を開く。[ゴミ箱]アイコンをクリックして、不要となった拡張機能を削除する。

考えられる機能拡張

サクッと作った割にはなかなかの出来だと思うが、使ってみるとすぐに不満が出てくる。まず真っ先に気がつくのが読み上げの停止ができないこと（拡張機能のリロードを行うと止まるが...）。

読み上げの停止
読み上げ中に新たに読み上げを指定したら現在の読み上げを停止後にすぐ読み上げ
スピードの細かな調整
音量の調整
他言語対応
読み上げ言語自動判別

日本語の読み上げをするChrome拡張機能を作ってみた

こんなものを作りたい

作るもの

manifest.json

options.html

background.js

options.js

自作した拡張機能を読み込む

使う

自作した拡張機能を削除する

考えられる機能拡張

参考