サービス概要
Youtubeの字幕を見て、分からない単語を即座に調べることができる英語学習アプリです。学習をサポートする多数の機能があります。
機能①リアルタイム字幕:
動画視聴中にリアルタイムで字幕を表示。ユーザーは字幕をタップして単語やフレーズの意味を確認できます。
機能②全ての字幕の表示、自動スクロール:
動画の全字幕を一覧で見ることができます。
動画の再生位置に自動スクロールもできるため、前後の文を確認しながら動画を視聴することができます。
機能③字幕クリックで再生:
字幕のスピーカーボタンをクリックすると、字幕の位置で自動再生されます。
機能④辞書機能:
分からない単語があった場合、字幕をクリックすると、単語の英訳が表示されます。単語の音声再生もあり、リピートして繰り返し聞くことで音声認識能力の向上をサポートします。
開発した経緯
実は、Language ReactorというChrome拡張機能があります。
しかし、スマホアプリ版が存在せず気軽に使えないという難点があるため、今回開発することにしました。
使用技術について
【プログラミング言語】
・Python
・Typescript
・CSS
【使用技術】
・React-native
・AWS Lambda(Youtube字幕取得)
【処理フロー】
アプリ起動後の画面でYoutubeのURLを入力し、AWS Lambdaから、API通信でYoutubeの字幕データを取得します。
取得したYoutube字幕を基に画面UIをレンダリングします。字幕クリックすると、辞書APIで単語の辞書データを取得して表示します。
※辞書APIは、「jisho」という無料サービスを使用しています。
Github:https://github.com/Kyamada2001/language_reactor_app
開発後の感想
今回、Youtube字幕や辞書などのデータを、完全無料のAPIで取得してサービスを作りました。無料のものを使っているので、翻訳精度はあまりよくありませんでした。
本サービスの品質は、APIで取得したデータにかなり依存しているため、必然的にサービスの品質は悪くなっています。
当たり前の話ですが、無料でできることには限りがあるなという感想でした。自分で一から全て作るのでしたら良いのですが、既存のサービスを使ってサービスを作るなら、まずはそっちの徹底的な下調べが必要でしたね。