Englishes 英文構文ハイライトアプリの画面

Englishes
構文を「色」で掴む英語リーディングアプリ

Englishesは、「英文をGPTで構文色分け → 保存 → 過去ログ表示 → TTSで読み上げる」英語学習アプリです。
that節・so ... that・関係代名詞・分詞構文など、塊で読めるようになりたい構文を GPT API に解析させて色分けし、 そのまま保存・復習・音声再生まで一気通貫で行えるようにしました。

作品の説明

英文を一語一語追うのではなく、「構文のまとまり」で読む癖をつけたい。 そのために、英文を入力するとGPTが構文ブロックを抽出し、 アプリ内でブロックごとに色分けして表示する仕組みを作りました。

解析した結果はRoomデータベースに保存され、後から過去ログとしていつでも開けます。 各ログはTTS(TextToSpeech)で読み上げもできるので、 「視覚的な構文の塊」と「音声」を同時に使って、論文やニュース記事を読む力を底上げしていくことを目指しています。

  • ① 英文を入力(またはペースト)
  • ② GPT APIに構文解析+ブロック情報をリクエスト
  • ③ 構文ブロックごとに色分けして表示(SpannableString)
  • ④ 解析結果をRoom DBに保存
  • ⑤ 過去ログ画面でいつでも再表示
  • ⑥ TTSで英文を読み上げ(ハイライトと同期)

システム概要

Englishesシステム構成図

Androidアプリ(Kotlin)がユーザーの入力文を受け取り、 GPT APIに構文解析を依頼します。返ってきたJSON形式のブロック情報を、 アプリ内でSpannableStringに変換して色分け表示。 同時に、原文・ブロック情報・タイムスタンプをRoom DBに保存します。 TTSモジュールは、表示中の英文を読み上げ、カーソル位置と連動してブロックを強調表示できます。

技術スタック

  • App: Kotlin, Android, Jetpack (ViewModel / LiveData or StateFlow)
  • UI: TextView + SpannableString / (一部Composeへの移行を想定)
  • Backend: OpenAI GPT API(構文ブロック抽出), OkHttp / Retrofit
  • Storage: Room DB(英文・構文ブロック・メモ)
  • Audio: Android TextToSpeech(TTS)

主要コンポーネント

  • ParseRequestView: 英文入力・送信ボタン・構文解析の進捗を扱う画面。
  • HighlightRenderer: GPTから返ってきたブロック情報をSpannableStringに変換し、構文ごとに色分け・下線・太字などのスタイルを適用。
  • LogList / LogDetail: 過去の解析結果を一覧・詳細表示する画面。検索・タグ付けにも対応予定。
  • TTSController: 現在表示中の英文を読み上げ、読み上げ中のブロックをハイライトするための制御クラス。

技術解説

SYNTAX BLOCKS

GPTによる「構文ブロック」抽出

so ... that, not only A but also B, that節、分詞構文、関係詞節などを「塊」として認識したいので、 GPTに対して「英文を構文ブロックに分割し、各ブロックの種類と文字位置を返す」ようなプロンプトを設計しました。
返却フォーマットは、[{ type: "THAT_CLAUSE", start: 10, end: 35 }, ... ] のようなJSON配列で、 App側はこの位置情報をもとに、TextView内の対応部分をハイライトします。

例: "so ... that" 構文 → type="SO_THAT", "either A or B" → type="EITHER_OR" など、学習したい構文ごとにラベル分け。
ANDROID UI

SpannableStringで構文ごとに色・形を変える

構文ブロックごとに色やスタイルを変えるために、AndroidのSpannableStringを使用しています。 that節は薄い青、関係代名詞は緑、so ... that構文はオレンジ、など構文の種類ごとに色を固定することで、 新しい英文でも一瞬で「どこからどこまでが同じ役割か」が視覚的にわかるようにしました。

setSpan(ForegroundColorSpan(color), start, end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE) + UnderlineSpan / StyleSpan(Typeface.BOLD) などを組み合わせて表現。
STUDY LOG

構文付きログとして保存し、いつでも復習

単なる一時表示ではなく、「構文付き英文ノート」を増やしていくイメージで設計しています。 解析済みの英文は、原文・構文ブロック・補足メモ・日付などと一緒にRoom DBへ保存。 後から「so ... that構文を復習したい」「この論文の一節だけ見直したい」と思ったときにすぐに検索・再表示できます。

Entity: Sentence(id, text, createdAt, note) Entity: Block(sentenceId, type, start, end, colorTag)
TTS

TTS読み上げと構文ハイライトの同期

AndroidのTextToSpeechを使って、表示中の英文を読み上げます。 再生位置(読み上げ中のインデックス)に応じて、 現在読んでいる構文ブロックを少し濃い色で強調することで、 「耳で聞きながら構文の塊を追う」感覚を作っています。
将来的には、再生スピード・リピート回数・シャドーイングモードなども追加予定です。

TTS.onUtteranceProgressListener → コールバックで現在のチャンク位置を受け取り、 対応するブロックのみ色を変えて再描画。

利用イメージ・課題

構文ハイライト画面

実際の論文の一文や、TOEIC / 英検レベルの長文を入力し、 構文ブロックの色分けが読みやすさにどう影響するかを確認しました。

構文色分け前の英文表示
(a) 通常の単色表示
構文色分け後の英文表示
(b) 構文ごとに色分けした表示

現在の課題

現在のプロトタイプでは、1文ごとの解析を前提にしているため、 段落レベルの長めのテキストでは挙動を調整中です。
また、GPTの応答コストを抑えるために、 「構文ブロックとして特に覚えたいものだけに絞るプロンプト」の設計も課題です。

段落レベルの長文対応は調整中 プロンプト最適化でトークン節約

動画リンク

英文入力 → GPT解析 → 色分け表示 → ログ保存 → TTS再生までの流れを録画したデモ動画です。

Englishes 一連の操作デモ

まだできていない部分と今後

「読む・聞く・話す」がつながった英語ノートへ

将来的には、構文の色分けに加えて、 自分の音読を録音してスペクトログラムや発音スコアと紐づけることで、 「読む・聞く・話す」が一つのノート上で循環するようなアプリにしたいと考えています。

  • 短期: 段落レベルの長文対応・構文種ごとのフィルタ表示(特定の構文だけ強調)
  • 中期: 音読録音+簡易発音フィードバック機能の追加
  • 長期: 研究用論文の読解や、試験対策(TOEIC/英検/大学の英語)の「構文ノート」として使えるレベルまで拡張

これからの改善点と開発計画

構文カバレッジ・UX・コストの3軸で改善を進めます。

  • 構文カバレッジ: よく出る構文を優先的にルール化し、色の設計を安定させる。
  • UX: ワンタップで「構文別に例文をまとめて表示」する画面の追加。
  • コスト: プロンプト設計とキャッシュで、1文あたりのAPI利用量を削減。
17
18
19
20
21
22
23
24
25
26
27
28
29
30
構文タイプと色の最終決定
段落レベル処理の実装とテスト
構文別一覧・検索画面

このプロジェクトを通して

感じていること

構文を色分けする仕組み自体はシンプルですが、 「どの構文を、どの色で、どのくらい主張させるか」を決めるのは意外と難しく、 自分の英語観そのものが試されている感覚がありました。
ただ、色分けされた英文を眺めていると、 中高で積み上げてきた文法知識が「視覚的なパターン」として再整理されていく手応えがあり、 自分自身のリーディングにもかなり効いていると感じています。

今の自分へのメモ

  • ・色を増やしすぎない。最小限の構文から丁寧にチューニングすること。
  • ・「自分が読めるようになった英文」を必ずログに残しておくこと。あとで必ず財産になる。

リファレンス & リンク

リファレンス

  • 英文法書(総合英語系:構文・例文の参考)
  • OpenAI API Documentation(GPTによる構文解析)
  • Android Developers – TextToSpeech / SpannableString

リンク