発音聞き分けサイト作る、の巻
最近「超低速メソッド」の本を買ったのですが、あまりにも聞き分けができないのでカッとなって聞き分けチェックするサイトを作ってしまいました。
以下詳細など
きっかけはこちらの記事
「rock」と「lock」を録音した音声を聞いてもらうというものだった。(中略)
ボタンを押した直後にコンピュータ画面で正否を知らせた。(中略)
20分の実験を3回終えると、被験者の脳の配線は見事に変わっていた
なるほど、 最小限の聞き分けをするテストを正誤つきで何度も繰り返せばいい と。
ただし、本付属のCDでは圧倒的に量がたりません。毎回同じ順番では意味がない。
もちろんアプリも探しましたが、L/Rぐらいしかない上に有料なものが多くどうも使う気になれませんでした。
なら作ればいいじゃない
幸いにも、最近のブラウザは「音声合成機能」があります。日本語や文章だと怪しそうですが、英語で単一の単語ぐらいならある程度正確に発音してくれるでしょう。
これを使えば「音声の収録」が不要です。技術ってすばらしい。
そんなわけでサクっと作りました。
こちらからどうぞ。iOS-Safariで動くよう調整しました。たぶんAndroidは動きません...
技術解説
解説、というほど複雑なサイトではありませんが設計方針などなど。英語がメインで非プログラマの方は以下スルーしてください(笑)
選定技術は以下の通り
- React (Hooks)
- Material (React用)
- TypeScript
当初はPlainJSでライブラリなどを使わずで適当に組む予定だったのですが、単純なデザインは面白くないので material はやろうと。デザインこりたいですし。
となると Drawer を使いたい → すっぴんJSではつらい → 状態管理ライブラリいれるか。という流れです。
で Elm/Angular/Vue/React からどれ選ぶか考えたところ
- Elm
- 好きですがMaterialがつらそうなので却下
- 既存JSライブラリとの接続がやっぱり面倒ですね、Elmは
- Angular
- いくらなんでも重厚長大すぎるので却下。そこまで大きくない
- Vue
- 色々な組み方ができるのがメリット＆デメリットか
- 自分の嗜好が「簡単にかけるより多少難解でもいいから一貫性がある」なのでどうも性に合わず
そんなわけで半分消去法で React をチョイスしました。そしてTypeScriptを選択。Cでこの世界に入った都合、型のない世界はつらい。事前型検査がないと組めません。
あとは普通ですね。規模小さいですし(笑)
消去しておいてなんですが、この程度の規模なら Vue のほうがサクっと書ける気がします。
ただHooksは親子関係でどう扱えばいいかがまだ良くわからない。NativeAppのViewModel感覚で組むとちょっとがずれる。が、技術としては非常に面白く今後はこのパターンが主流になるでしょう。
まだ良くわかってないのが音声合成部分。voiceオブジェクトを設定するとなぜか動かない。PC-Chromeだと逆だったのですが。とりあえず今はスマホ特化させました。Androidはまた違うらしいので組み分ける必要がありそうですね。
今の所単語データは固定。気が向いたらFirebaseStoreで管理させると面白いかも。
まぁ気が向いたらやります。まずは単語の増加と自身の学習ですね。
