cordovaでAndroidアプリを作るとき、視覚障害者(全盲)の私が使えそうなプラグイン、TTS、device-motion、vibration

私は視覚障害者(全盲)で、「スクリーンリーダーNVDA」の音声読み上げを頼りにWindowsパソコンを使用しています。

Android端末は「Talkback」というユーザー補助(アクセシビリティ)機能と「ドキュメントトーカー」という日本語音声読み上げアプリを使って操作しています。

Androidのアプリを自分でも作れたらと思い、勉強中です。

「CordovaでAndroidアプリの作成 – Qiita」 などを参考にcordovaが使えるようになっている状況で、いくつかのプラグインの動作を確かめることができました。



テキスト読み上げ機能(TTS)を使う

「cordova-plugin-tts」というプラグインを使います。

「ttstest」というアプリを作ります。次のようにコマンドプロンプトで入力していきます。


>cordova create ttstest com.example.ttstest ttstest
>cd ttstest
>cordova platform add android
>cordova plugin add cordova-plugin-tts

wwwフォルダの中のindex.htmlにbuttonタグを追加して、クリックしたらしゃべるように書きます。


<button id="speak" onclick="TTS.speak('こんにちはTTS')">ここをタップ</button>

Android端末を接続して実行します。


>cordova run android

「ここをタップ」のボタンをタップすると「こんにちはTTS」と読み上げられます。



バイブレーションを使う

「cordova-plugin-vibration」を使います。

次のように入力していき、「vibratetest」というアプリを作ります。


>cordova create vibratetest com.example.vibratetest vibratetest
>cd vibratetest
>cordova platform add android
>cordova plugin add cordova-plugin-vibration

index.htmlの「Device is ready」の行の下に次を追加します。


<button id="vibrate" onclick="navigator.vibrate([1000, 1000, 500, 500, 2000])">ここをタップ</button>

1000や500という数字は振動するミリ秒と間をあけるミリ秒数を交互に書いたもので、この例では「1000ミリ秒振動、1000ミリ秒ポーズ、500ミリ秒振動、500ミリ秒ポーズ、2000ミリ秒振動」の指定になっています。

実行すると指定したパターンで端末が振動します。


>cordova run android



加速度計を使う

「cordova-plugin-device-motion」を使います。「acceltest」というアプリを作ります。

また値を読み上げさせるためにTTSプラグインも追加します。


>cordova create acceltest com.example.acceltest acceltest
>cd acceltest
>cordova platform add android
>cordova plugin add cordova-plugin-device-motion
>cordova plugin add cordova-plugin-tts

次にwwwフォルダの中のindex.htmlとさらにその中のjsフォルダの中のindex.jsの2つを編集します。

index.htmlに次のようなボタンを作ります。


<button id="getAcceleration">加速度をゲット</button>

index.jsの「onDeviceReady: function() {…}」の中に次を追加します。


document.getElementById("getAcceleration").addEventListener("click", getAcceleration);

そしてindex.jsのファイルの最後に次を追加します。


function getAcceleration(){
  navigator.accelerometer.getCurrentAcceleration(accelerometerSuccess, accelerometerError);
  function accelerometerSuccess(acceleration){
  TTS.speak('X '+ acceleration.x +'\n'+'、Y '+ acceleration.y +'\n'+'、Z '+ acceleration.z +'\n'+'タイムスタンプ '+ acceleration.timestamp +'\n');
  };
  function accelerometerError(){
  alert('onError!');
  };
}

実行して「加速度をゲット」のボタンを押すと、xがいくつ、yがいくつ、zがいくつ、タイムスタンプがいくつと読み上げられます。


cordova run android



参考



関連投稿