英文高速リーディングの仕組みでさだまさしの名曲を体感する

# 英文高速リーディングでさだまさしの名曲を再生する

記事を読む前に動作するサンプルを準備したので以下URLで挙動をご確認下さい。曲は関白宣言 / 案山子 / 防人の詩 / 秋桜 の4つを準備しました。

http://tkosuga.github.io/spritz-jp-sample/spritz2.html

この記事はサンプルの実装方法と背景についての説明です。

# クリスマス後が本番。1/1は毎年恒例「今夜も生でさだまさし」

今年も残り少なくなってきました。こうやって毎日カウントダウンされてるとクリスマスまで楽しみになります。

そしてクリスマスが過ぎるとファンにとってのメインイベント、毎年恒例「[今夜も生でさだまさし](http://www.nhk.or.jp/masashi/)」の生放送があります。来年2016年の放送は1月1日0:25～ですので除夜の鐘を聴いて年越しした後はそのままTVの前にかぶりつきましょう。

# 英文高速リーディングのSpritzと歌詞のインプリンティング

定期的に話題に上がる[Spritz](http://spritzinc.com/)は英文を高速に読むために単語を整えて連続して表示するツールです。

単語の中心が揃って表示されるため、視点を動かさずに済むため文字を追いかけると言った顔や眼球の移動が大幅に減るため文字が頭に入ってくる仕組みです。

物事を記憶する基本的な方法の1つに「ひたすら繰り返して読む」があります。視点の移動を減らしてひたすら高速で歌詞を読み続ければ、頭の中で曲がすごい勢いで再生されて記憶に焼き付けられ遺伝子レベルでさだまさしの歌詞が刷り込まれて行くはずです。

# Spritzのフリーライセンス版Glance

[Glance](https://github.com/Miserlou/Glance)はSpritzをオープンソースに移植したものです。実際の挙動は[glance.wtf](http://glance.wtf/)をご確認下さい。

コードを見てみるとブラウザ上で動作する1つのjavascriptファイルで完結しています。このツールを日本語対応すれば歌詞の高速リーディングを実現できそうです。

# Spritzを日本語対応する

英文は空白と記号で単語が区切られているため単語を簡単に抽出できますが、日本語は単語が空白や記号で区切られているケースの方が少ないです。

有名な例文の「にわにわにわにわとりがいる」では何十通りもの意味の捉え方が出来ます。

このような文章の解析には分かち書き / 形態素解析を使います。フリーで使える形態素解析を行うツールには[MeCab](http://taku910.github.io/mecab/)がありますが、今回はブラウザ上のJavascriptで完結させる仕組みにします。

# 日本語分かち書きのTinySegmenter

[TinySegmenter](http://chasen.org/~taku/software/TinySegmenter/)はJavascriptだけ書かれた極めてコンパクトな日本語分かち書きソフトウェアです。

今回はこのツールを歌詞を解析するのに利用しました。

さだまさしの名曲「関白宣言」の前半をこのツールに掛けると以下のように単語が分割されます。いい感じですよね。歌詞全文は[こちら](http://j-lyric.net/artist/a0004ab/l001229.html)からご確認下さい。
`
お前 | を | 嫁に | | もらう | 前 | に | | 言っ | て | おき | たい | | 事 | が | ある | | かなりきびしい | | 話 | も | する | が | | 俺 | の | 本音 | を | | 聴い | て | おけ | | 俺より | 先 | に | | 寝て | は | いけ | ない | | 俺より | 後 | に | | 起き | て | もいけ | ない | | めし | は | 上手 | く | 作れ | | いつ | もきれい | でいろ | | 出来る | 範囲 | で | | 構わ | ない | から | | 忘れ | て | くれる | な | | 仕事 | も | 出来 | ない | 男 | に | | 家庭 | を | 守れる | | はず | など | | ないって | こと | を | | お前 | に | は | | お前 | に | しか | | でき | ない | 事 | も | ある | から | | それ | 以外 | は | | 口出 | しせ | ず | | 黙っ | て | 俺 | に | | ついて | こい | | お | 前 | の | 親 | と | | 俺 | の | 親 | と | | どちら | も | | 同じ | だ | 大切 | に | しろ | | 姑小 | 姑 | | かしこく | こなせ | | たやすい | は | ず | だ | | 愛すれ | ば | いい |`

これを文字数を一定に揃えて前項のGlanceを組み合わせればさだまさしの歌詞を高速リーディング出来そうです。

# さだまさしの歌詞を高速再生するツール公開

そういうわけで前項のGlanceとTinySegmenterを組み合わせたツールをGitHub上に設置しました。

http://tkosuga.github.io/spritz-jp-sample/spritz2.html

歌詞を選んだ後に再生速度を選択すると歌詞の自動再生が始まります。五感で感じ取れる速度でさだまさしの名曲を体感してもらえればと思います。

# 技術的に対応した事

等幅フォントにしないと文字が中心からずれる、区切り文字と流れの変更、分かち書きにTinySegmenterを採用、英単語の自動調整をオフにする、と言った対応を行いました。

後はsetIntervalを使われていたのを、文字を読む時間を揃えたかったため表示されてからの時間が一定になるようにsetTimeoutへ変更しました。

以下はTinySegmenterを使って日本語を抜き出すコードです。改行を全て消してそのままTinySegmenterに分かち書きしてもらいます。

```js
 input = statement.replace(/[\r\n]+/g, "");
 var segmenter = new TinySegmenter(); 
 var words = segmenter.segment(input);
```

後は分割された単語を一定の長さで繋げて配列に格納して行きます。ヤッツケで書きました。

```js
 var result = [];
 var tmp = "";
 var currWord;
 var nextWord;
 for (var i = 0; i < words.length; i++){
  currWord = words[i];
  nextWord = words[i + 1];
  tmp += currWord;

  if ((currWord == "。" || currWord == "？" || currWord == "?") && nextWord != "」") {
   result.push(tmp);
   tmp = "";
   continue;
  }

  if ((currWord == "、") && tmp.length > 5) {
   result.push(tmp);
   tmp = "";
   continue;
  }
  if (nextWord == "「" || nextWord == " " || nextWord == "　") {
    result.push(tmp);
    tmp = "";
    continue;
  }
  if (tmp.length > 6) {
   if (nextWord && nextWord.length == 1) {
    //
   } else {
    result.push(tmp);
    tmp = "";
    continue;
   }
  }
 }
 if (tmp != "") {
  result.push(tmp);
 }
 return result;
```

# アクセシビリティの視点

自動再生される文字と言えばマーキー（横に流れる文字）ですが、このSpritz / Glance では場所が一定で連続再生される点が異なります。

もしかするとアクセシビリティの視点からこの方法で再生されるブラウザとかあると首や目にハンディキャップがある方の役に立てるのかも知れませんね。

# さいごに

質問などあればコメント欄にお願いします。直接メッセージや質問をしたい方は[Twitterアカウント](https://twitter.com/tkosuga)宛てにお願いします。

※誤字脱字が多かったので修正しました。