見出し画像

youtubeを使った英語学習アプリがないから作っちゃった話


日本に生の英語を扱う参考書や教材が少ない

もう形式ばった英語は飽きたし本場の英語で勉強するぞ~!
って難易度上がりすぎじゃね?
TEDは教材として最高だけど正直、科学も政治もあんまり興味持てないんだよな~。やっぱドラマとかyoutubeの映像を見ながら楽しめるコンテンツがいいんですよ。でも、そうなると楽しむためのコンテンツなので学習者向けの環境はないんですよね。

と、なったので作ります。

ディクテーションを打ち込んでやりたい

まず聞き取れなきゃいけないからディクテーションをしたい。でも紙に書くのはめんどくさいのでwebアプリケーションを作りましょう。

作成

HTMLで構成を決める

こんな感じ?



ここに動画で話された内容を打ち込んでいく。ちょとCSSで見た目を整えていきます。

動画を読み込ませたい

URL指定でHTMLの<iframe>タグを使って動画を埋めこんでみよう。

動画が再生されるようになった

このままだと再生したら勝手に動画が垂れ流しになるだけ。

動画のスクリプトをダウンロードして読ませてみる

Downsubという開発者ツールをつかってこのアプリの字幕をダウンロード。
ダウンロードできたけどすっっごい使いづらい形式だったのでpythonでjson形式に変換しました。

JSON

各字幕の時間も設定できたのでこれで一行ごとに処理ができそう。

なんかいっぱい処理した

詳しく書くと日が暮れるので省略しますが、字幕をヒントを出しながら表示できるようにしました。

完成図

まだうまく機能はしませんが(バグが多すぎて)、こんな感じでyoutubeの動画を使ってディクテーションできるwebアプリが完成しました。

完成

まだ好きな動画なんでもってわけにはいかないけどいい感じにyoutubeみながらディクテーションできそうです。

今のところ収益が見込めないので公開予定はありませんが、評判がよさそうでしたら考えます。

いいなと思ったら応援しよう!

この記事が参加している募集