【スマホアプリ】海外映画の英語と日本語の同時字幕を表示するスマホアプリを作ってみた話（Flutter）

はじめに

初めまして、 junと申します。
先日退職届けを出した関係で、現在有休消化期間中であり、少し時間があったので、スマホアプリの開発に挑戦してみました。

初めてスマホアプリの開発をしてみたので、これからスマホアプリ開発に挑戦してみようと思う人に向けて、工夫した点や苦労した点を書いてみようと思います！

目次

1. アプリについて
2. アプリを作成した背景
3. アプリの機能について
4. 使用している技術
5. 工夫したこと
6. 後悔していること
7. 今後について
8. 最後に

1. アプリについて

duosub - 海外映画の英語&日本語字幕の同時表示アプリ

このアプリは英語学習者向けのサポートアプリです。
機能は以下の3つです。

1. 字幕データの検索
   世界最大級の字幕データベースから、ユーザーが観たい映画の字幕を検索し、ダウンロードします。
2. 二カ国語字幕の同時表示
   英語と日本語の字幕を同時に表示することができます。これにより、ユーザーは海外映画を視聴しながら、両言語の字幕を比較して学習することができます。
3. 英単語の意味を表示
   英語字幕の中で登場する英単語の意味をすぐに確認出来るため、語彙力の向上に繋がります。

2. アプリを作成した背景

私自身、英語の学習をする中で、海外映画を観ることで、リスニング練習や英語に慣れる習慣を作ってきましたが、最初から英語字幕のみで映画の内容を把握することは難しく、知らない英単語や表現と遭遇するたびに、その意味をネットで調べるといった、とても煩わしい作業をしていました。

実際、海外映画の英語と日本語の同時字幕表示ツールはこれまでにも存在していましたが、既存の同時字幕表示ツールはいずれもPCでしか利用できないツールであり、chromeの拡張機能やPC用ソフトを使用するものしかありませんでした。

PCツールでは、映画を観ようとするタイミングでPCを立ち上げる必要があったり、出先で見ることが難しいなど、 気軽にどこでも利用できるといったものでなかったため、スマホアプリを開発しようと思いました。

参考までに、PCツールでの同時字幕ツールは以下のものがあります。

1. Language Reactor
2. eJOY English
3. Hulu 同時字幕で英語学習

3. アプリの機能について

最初の画面では字幕の検索を行います。

海外の字幕提供サービスのAPIを利用することで、字幕データのダウンロードリンクを取得しています。そのため、字幕データはアプリ側で保持しておらず、検索される度に字幕のダウンロードリンクを提供する仕様となっています。

映画のポスター画像やタイトルなどの情報は、映画情報のデータベースサービスであるTMDBのAPIを使用し、取得しています。

次は字幕の表示画面です。

画面上部にピクチャーインピクチャー機能で再生している動画をセットします。
画面下部に取得してきた字幕を表示しています。

iOSの制限により、他のアプリで再生中の動画の再生時間などの情報を取得することができません。そのため、このアプリでは動画と字幕を自動で同期させることができませんでした。
この制約を克服するため、本アプリでは以下のような方法を採用しています：

1. ユーザーが現在再生されている字幕をタップすることで、表示する字幕の位置を設定
2. 字幕がタップされると、そのポイントから自動的に字幕がスクロール

この方法により、ユーザーは簡単な操作で字幕を動画と同期させることができ、スムーズな視聴体験を得ることができます。

最後に、英語字幕の翻訳画面です。

映画を観ている中で、意味を知らない英単語や表現があったときは、字幕エリアの右側にある緑色のボタンを押します。

ボタンが押されると、対象の字幕の日本語字幕と各英単語の意味を表示します。
この翻訳は、翻訳AIのAPIを使用することで表示しています。

4. 使用している技術

項目	使用技術
フロントエンド	Flutter
バックエンド	なし
データベース	なし
その他	映画情報取得API、字幕情報取得API、翻訳API

現時点ではiOSのみのリリースとなっていますが、今後、Android版を作成する可能性を考慮し、フロントエンドはFlutterにしました。

また、今回は開発期間が１ヶ月しかなく、初めてのアプリ作成だったため、なるべく簡易的に早く完成させることを目標とし、バックエンドやデータベースを使用しない設計にしました。

5. 工夫したこと

1. こだわりすぎない
   細かいところまでこだわると時間が足りなくなるため、最低限の機能のみを実装し、なるべく早いリリースを目指しました（開発期間も１ヶ月と限られていたため）。
2. キャッチアップの時間を短く
   Flutterでの開発は初めてでしたが、Flutterのキャッチアップに時間をほとんど割きませんでした。今はChatGPTを使うことで、ある程度のコード生成やエラー解決はサポートしてもらえるので、最初に軽くFlutterの学習をした後は、すぐにアプリ制作に着手しました。
3. AI系ツールを使う
   App Storeに提出する上で必要となる、アプリのアイコンやモック画像の素材などはAI系ツールを使って生成することで時間短縮に繋げました。

6. 後悔していること

コードを綺麗に書いていなかった

とりあえず早くリリースする意識が強かったため、コードをあまり綺麗に書いていなかったです。スピードを重視するなら多少やむを得ないところもありますが、今後のメンテナンスのことを考えると、もう少し綺麗に書くべきでした（後から読み直しても、すぐに内容が分かるように…）。

7. 今後について

とりあえず、最小限の機能でリリースを行なっているため、機能拡充と宣伝活動に力を入れたいと思っています。

今後導入しようと思っている機能は以下の4つです。

1. 英単語帳の作成機能
   海外映画を観ている中で登場した、自分が知らない英単語を単語帳に登録し、後から復習できるようにしたいと思っています。
   映画を観る時以外でも、英語力の向上に繋がるような機能を追加することで、日常的に使ってもらえるアプリを目指します。
2. アカウント作成機能
   上記の英単語帳機能のように、ユーザーに紐付く情報の登録系の機能を今後導入することを考えると、アカウント作成機能が必須になるので、早めに実装しようと思います。
3. 英単語データベースの導入
   現在は各英単語の意味をAI翻訳のAPIによって取得していますが、複数の意味を持つ英単語でも、意味を一つしか取得できず、場合によっては正しく翻訳できていなかったりすることがあるので、より正確かつ情報量を増やすためにも、英単語のデータベースを用意し、データベースから英単語情報を取得しようと思っています。
4. 広告の導入
   現時点では広告を入れておらず、API料金分が赤字となっているので、アプリ運営のために広告を入れる予定です。

8. 最後に

初めてのアプリ開発で、うまく実装できなかったり、想定外のiOSの機能制限があったりなど、スムーズにいかないことも多々ありましたが、一旦リリースまですることができて一安心です。

本記事が、これからアプリ開発をしてみようと思う人の参考に少しでもなればと思います。

最後まで読んでいただき、ありがとうございました。

最後に、アプリをダウンロードして、実際に使っていただけると嬉しいです！
duosub - 海外映画の英語&日本語字幕の同時表示アプリ