#禁断の速読術の習得方法

速読のアプリというのは、大体高額のセミナーに参加したり、速読をするための訓練が必要な事がほとんどだと思います。
そんな中無料でアプリをリリースしたので、皆さんに使って貰いたいので、記事を書く事にしました。

まずリリースしたアプリはこちら

現在は、google playストアにしかリリースしていません。
androidユーザーが登録してくれたら、iOS版版も出そうと思っています。

##開発環境はMonacaです

Monacaとは、「ハイブリッドアプリ」を作成することができるWEBサービスです。ネット上にアプリの開発環境を用意してくれるので、面倒な環境構築は一切必要ありません。

また、サンプルのアプリもいくつか用意されているので、簡単にアプリ開発を体験することができます。

私はここの最小限のアプリケーションを作るから、JQueryとFont Awesomeをダウンロードして
www配下に設定してアプリケーションを作成しました。

ハイブリッドアプリとは「iOS」「Android」「WEB」のどのデバイスでも動作するWEBアプリのことです。「HTML5」「CSS」「JavaScript」の3つのWEBプログラミング言語を使ってアプリを作ります。

興味がある方は、Monacaおススメです。

##使い方

使い方は簡単で、再生ボタンを押したら、速読が始まります。
実際に操作している動画はこちら

読み上げる間隔を変更する場合は、読み上げる間隔左ほど早くなりますのしたのバーを一番左にすると、
速読する速度が変わります。
速度を変更するには、バーを動かして、再生ボタンを押すことで、速度の調整が出来ます。

このバーがとても便利で、HTMLのタグ< input type="range" >
と入力するだけで、速度などの値を変更することが出来ます。

詳細な使い方は、下記のようになります。
下に使い方のリンクも張っているので、気になる方は要チェックです。

<div>
  <input type="range" id="volume" name="volume"
         min="0" max="11">
  <label for="volume">Volume</label>
</div>

##要望受け付けます

文字の色も変更出来ます。もっと色の種類が必要だという声があったら、追加しますので、こちらにコメントして下さい。
速読する文字の大きさも変更出来ます。
これは、文字の大きさのバーを右にする程大きくなります。
速読の再生をしている場合でも色の変更と文字の大きさの変更は出来ます。

色の種類は現在Black、Red、Blue、Greenの4種類があります。

##文字の大きさを変えるコードの説明

文字の大きさは最大100PXまで大きく出来ます。
コード的には、スライダーが変更される毎にmain_nowのIDの文字サイズを変更しています。

<input type="range" id="text-slider" value="30" min="1" max="100" step="1" oninput="onTextSliderInput(this.value)">
<!-- 変更する文字の出力先 -->
<div id="main_now" class="main_now"></div>

function onTextSliderInput(size) {
  textSize = size;
  document.getElementById("text-slider").value = textSize;
  document.getElementById("main_now").style.fontSize = textSize + "px";
}

##HTMLの参考例

一番簡単な文字のサイズを変えるコードはこちら
下のHTMLをコピーして、HTMLファイルにすると実際に文字の大きさを変える事が出来ます。

<html>
<head>
</head>
<body>
<script>
function onTextSliderInput(size) {
  textSize = size;
  document.getElementById("text-slider").value = textSize;
  document.getElementById("main_now").style.fontSize = textSize + "px";
}
</script>
<input type="range" id="text-slider" value="30" min="1" max="100" step="1" oninput="onTextSliderInput(this.value)">
<!-- 変更する文字の出力先 -->
<div id="main_now" class="main_now">大きくするテキストの例</div>
</body>
</html>

使ってみて、こんな機能があったら良いなどの要望がありましたら、コメントしてくれると嬉しいです。
Androidユーザーは是非とも速読体験をして下さいね。