LoginSignup
2
1
@ooooooooookawainプロトアウトスタジオ

活字読めない人間なので読み上げアプリに助けてもらう

Last updated at Posted at 2023-11-20

活字が苦手です・・・

私は活字を読むことが苦手です・・・ ので昔から本が読めません・・・
それにより現在ひとつの問題を抱えております。
それは 大好きなラグビーのルールが覚えられない！！ という事です。

のっとりりーすざぼーる？のっとろーるあうぇい？？のっとすとれーと？？？
似てる名前のルールが多いし、文章で読んでもよくわからん！となっております。

という事でそんな自分を助ける為に、JavaScriptとWeb Speech APIを使って、ラグビーのルールを読みあげてくれるアプリを作ってみました！

ゴールの設定

今回作成するアプリでは以下の点をゴールに設定して実装していきます！
言語切り替え機能は、審判が英語で話す事への対策としておまけで実装します！

・ ルール名のボタンを押すと説明を読みあげてくれるアプリを作る
・ 日本語と英語の切り替え機能を付ける

完成品はコチラ！

作成したアプリはこちら！紹介動画と共にご覧ください！
※音がでるので注意してください※

■Netlifyページ

■Codepen

See the Pen ラグビールールブック by oooookawa (@oooookawa) on CodePen.

■QRコード

QRコードを読み取ればスマートフォンからもお試しできます！
QR.png

環境準備

今回使用した環境は以下の通りです。
・CodePen
・HTML
・CSS
・JavaScript
・Web Speech API

実装ポイント

①必要情報を配列で定義

後述するメイン画面と読み上げ処理で使用する為の情報を定義し、配列で格納します。
カンマ区切りで、画像,日本語ルール名,英語ルール名を定義しております。

const data = [
  ["https://i.gyazo.com/33d60b1e06928f907ba59471a45a62d2.png", "ノックオン", "Knock on"], 
  ["https://i.gyazo.com/6f72346514acc6808e511d913ff8c4bb.png","スローフォワード", "Throw forward"],
  ["https://i.gyazo.com/d9becac679efd7eeaa759635809eb77a.png", "ノットリリースザボール", "not-release-the-ball"],
  ["https://i.gyazo.com/e6e6fe788b300ca9979c4b0ab592f8e6.jpg", "ノットロールアウェイ", "not-roll-away"],
  ["https://i.gyazo.com/51f739eef1e4c25ac6f20cc29f105909.png","コラプシング", "Collapsing"],
  ["https://i.gyazo.com/dcd47355dbca76c8eea3b77a2f813c8d.jpg", "50-22", "fifty-twenty two"],
  ["https://i.gyazo.com/1d81f79f12ad8535e1cfa47ec380f01b.png", "オブストラクション", "Obstruction"],
  ["https://i.gyazo.com/111a5473c21e6a4bc4b25711c12625da.jpg", "ノットストレート", "not-straight"]
];

②メイン画面の生成

①の配列で定義した情報を使用して、メイン画面のカード部分を作成します。
配列から画像URLと日本語ルール名を取得し、[カード内容の表示]箇所で画面を生成しております。

/* メイン画面のカードを8個作成 */
window.onload = function () {
  for (let i = 0; i < 8; i++) {
    create(i);
  }
}
 
/* メインカードの作成 */
function create(i) {

  /* メインカードの成形 */
  let main = document.createElement("div")
  main.className = "main";
  main.onclick = function () {
    
    //事前に作成したデータを使用して選択
    speak(data[i][select.selectedIndex + 1], select.value);    
  }

  let image = new Image();
 
  //data内の画像を表示
  image.src = data[i][0];         

  //配列内の日本語文字列を表示
  let comment = document.createElement("p");
  comment.className = "comment";
  comment.append(data[i][1]);

  //カードの表示
  main.appendChild(image);
  main.appendChild(comment);

  document.getElementById("container").appendChild(main);
}

③読み上げ処理

HTMLで選択した[日本語・英語]の言語情報から元に配列から取得した文字列によって、説明文をテキストに格納して読み上げを行っております。

/* 音出力 */
function speak(text, language) {
  window.speechSynthesis.cancel(); // 初期化

  /* 選択内容の説明文をテキストに変換 */
  if(text == "ノックオン"){
    text = "ノックオン。ボールを前に落とす反則のこと。相手ボールのスクラムから試合が再開される。";   
  }else if(text == "Knock on"){
    text = "Knock on. One of the most common fouls in rugby, dropping the ball forward. The match restarts with a scrum of the opponent's ball.";
　～省略～
  
  const speechMsg = new SpeechSynthesisUtterance();
  speechMsg.lang = language;      //言語設定
  speechMsg.text = text;          //投稿設定

  window.speechSynthesis.speak(speechMsg);   //音出力
}

あとがき

本当は今回の内容にプラスαで以下の内容を実装したかったのですが、時間が足りずにギブアップしてしまいました・・・・・この点は今後の課題という事で実装したいと思います。

・ 言語の切り替えでメイン画面のルール名も英語に変更したかった
・ メイン画面にルール解説の動画リンクを付けたかった

また、前回作成したラグビーメンバー紹介アルバムと合体させて、それっぽいラグビー専門サイトを作ってみるのも面白そうだなと思ってます！これも今後やってみようと思います！

最後までご覧頂きありがとうございました！

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
1