ゆるプロ日記ゆるっとプログラミングがんばる日記。2021年01月25日16:37この記事は約3分で読めます。音声読み上げ機能を追加するにはスタートボタンの配置メニュー画面のレイアウトスペースキー押下時に画面スクロールしないようにするには今後についてはじめに今回もTOEFLタイピングアプリの進捗を報告していきます。今回はなかなか良い機能を追加できました。タイピングアプリはこちらから遊ぶことができます。最新のタイピングアプリはこちらです。今回は以下の機能を追加しました。音声読み上げ機能を追加するには英語学習で必須ともいえる、音声を追加しました。タイピングしながらリスニングできるようになりました。これでかなり実用性が上がったのではないでしょうか。読み上げにはブラウザのAPIを呼び出して使っています。text;//読み上げたい単語を代入speechSynthesis.speak(speech);ただし、呼び出す際はユーザー操作(ボタン押下などのイベント)からでないと警告が発生するようです。このアプリも警告が出ているので、今後修正していきます。スタートボタンの配置ゲーム開始時のボタンを用意しました。音声の注意喚起などが目的です。ボタンの位置は、cssで直接変えられないので<div>タグで囲んで領域を設定するなど、レイアウトの工夫が必要です。メニュー画面のレイアウトリストタグ<ul><li>を使って整えました。今後cssファイルから、デザインを整えていく予定です。スペースキー押下時に画面スクロールしないようにするには一通りの単語をタイピングし終わったら、スペースキーで最初に戻るようにしていました。スペースキーを押すと画面がスクロールしてしまうという問題があります。そこで、以下のコードをタイピング後の処理に書くことで解決しました。}今後についてタイピングゲームの本機能をもう少し修正したら、コースを増やしていきたいです。イラストや写真も一緒に見れるようにすることも検討中です。以上、daigoroでした。次の記事はこちら【第五回】JavaScript初心者が最強のTOEFLタイピングアプリを作りたい【画像追加】JavaScript初心者が、TOEFL学習用タイピングアプリを作っていきます。(第五回目)yurupro.cloud2021年03月16日15:43daigoro大阪のエンジニアが書いているブログ。関連記事JavaScript【Node.js】Node.jsのバージョンを複数インストール・切り替える方法【Nodebrew】nodebrewというローカルのnode.jsのバージョンを自在に管理できる、Nodebrewというツールを紹介します。(Macユーザ向け)プログラミング【褒める】リーダー必見”アメとムチ”の正しい使い方【叱る】チーム開発において、効果的な褒め方と、叱り方について解説していきます。JavaScript30秒でdocusaurusを立ち上げて、ドキュメントサイトを作成する方法30秒でdocusaurusを立ち上げて、ドキュメントサイトを作成する方法を解説します。私は普段Webエンジニアとして活動していますが、時々人事活動に携わることがあります。そんな時「残念だな、、、」と思う履歴書に出会うことがあります。そんな失敗例をここにまとめておきますので、是非手元の履歴書を確認してみてください。React.js,TypeScript,TailwindCSSで環境構築についての備忘録です。【プログラミング初心者向け】データベースについてわかりやすく解説します。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。yurupronikkidaigoro大阪のエンジニアが書いているブログ。最高の拡張機能20選まとめ。最高の拡張機能10選まとめ。最高の拡張機能10選まとめ。o=t(s.addedNodes).find(e),n=0,l=o.length;n。