はじめに
英文を読んでいて知らない単語に出会ったとき、そのままGoogle翻訳やDeepLに投げて終わり…になっていませんか。単語だけ調べても、その文の中でどう使われているかまで理解しないと、結局よく意味が掴めないまま終わってしまいます。
そこで、「英文中の単語を選択するだけで、AIが文脈込みで解説してくれて、そのままNotionの単語帳に登録・復習できる」Webアプリを開発しました。さらに、ブラウザを開かなくても、Claudeなどのチャット中に出てきた単語をその場で単語帳に登録できるMCPサーバーも実装してみました。
下記が利用している技術です。
- Gemini API(文脈込みの単語解析、構造化出力)
- Notion API(単語帳データベースそのもの)
- AWS Lambda + API Gateway(SAM)(バックエンド)
- MCP(Model Context Protocol)(AIチャットからの単語登録)
- Vite + Tailwind CSS(フロントエンド、フレームワークなし)
- Terraform(S3 / CloudFront / Route53 などの配信基盤)
この記事では、どのような機能を構築したか、その設計の背景等を中心に紹介します。
作った背景・課題感
通常のWeb検索や辞書に感じていた不満は主に3つでした。
- 文脈がない — 単語単体の意味だけ調べても、どの意味で使われるかが分からない
- データを自由に扱えない — 覚えた単語を蓄積したいが手作業で構造化するのは大変
Notionを普段使いしており「単語帳もNotionのデータベースとして持てば、ビューやフィルタが自由に使えて一石二鳥では」と思ったのが今回の設計の出発点です。
全体アーキテクチャ
大きく分けて2つの利用経路があります。Web UIから使う経路と、Claudeなどのチャットから直接単語登録する経路です。
| レイヤ | 技術 | 役割 |
|---|---|---|
| フロントエンド | Vite + Tailwind CSS(素のJS) | 単語選択UI・クイズUI |
| バックエンド | Python 3.11 Lambda(AWS SAM) | 単語解析・登録・クイズ・MCP |
| データストア | Notion API | 単語帳データそのもの(単語の内容はすべてここに保存) |
| DB(補助) | DynamoDB(1テーブル) | MCPのOAuthクライアント登録情報のみ。単語データは持ちません |
| AI | Gemini(gemini-3.5-flash-lite) |
文脈込みの単語解析(構造化出力) |
| AIエージェント連携 | MCP(Model Context Protocol) | チャットからの単語登録 |
| 配信基盤 | Terraform管理(S3 / CloudFront / Route53) | フロント配信・CDN |
インフラは役割で管理ツールを分けていて、Lambda・API GatewayはSAM、S3・CloudFront・Route53などの配信基盤はTerraformで管理しています。
MCPだけ他の3つのLambdaと別のAPI Gateway(REST APIではなくHTTP API)を使っているのには理由があります。フロント用のドメインはCloudFront経由でBasic認証と日本国内限定のgeo-restrictionがかかっており、そのままではMCPを日本国外のクライアントから使えなくなってしまう可能性があるからです。
機能ごとの実装解説
1. 文脈込みで単語を解析する仕組み(Dictionary機能)
まず英文を貼り付けると、単語や句がクリックできるチップに分割されます。開始位置と終了位置をクリックするだけで範囲選択でき、選択が終わると自動でAI解析が走ります。
「空白のかたまり」「英数字とアポストロフィ/ハイフンの連続(don'tやit'sはこれで1トークンになります)」「それ以外の1文字(句読点など)」の3パターンで分割しているだけです。
ポイントは、選択した単語をそのまま送るのではなく、文全体の中で [word] のように角括弧で囲んで送ることです。これにより、多義語やイディオムでも文脈から正しい意味をAIに解釈させられます。
2. Notionを単語帳データベースとして使う設計
単語データの保存先には、DynamoDBやRDSではなくNotion APIそのものを採用しました。理由はシンプルで、Notionをデータベースにしておけば、ユーザーは自分でビューを作ったり、フィルタをかけたり、他のNotionページにリンクしたりと、"無料の管理画面"を最初から手に入れられるからです。
3. 復習のための簡易スペースドリピティション
クイズ機能では、Notion上の NextReviewedAt が現在時刻以前になっている単語だけを取得し、例文の空所補充問題として出題します。
また、クイズは選択肢のある四択形式ではなく、例文の空所を自由入力で埋める形式です。ヒントとして文字数(スペース・ハイフンの位置つき)だけを表示しています。
4. MCPサーバーでAIとの会話からそのまま単語登録
Web UIを開かなくても、Claudeなどと会話していて知らない単語が出てきたら、その場で単語帳に追加したい——という発想で、register_word というツールを公開するMCPサーバーをLambda上に実装しました。
Notionへの書き込みロジック自体は register_api とほぼ同じ内容ですが、あえてMCPサーバー内に別実装として持たせています。Lambda関数ごとにコードを共有せず複製する、というこのリポジトリの方針に合わせた形です。
使い方のイメージはこうです。
会話の流れを切らずに単語登録できるのが体験として大きく、Web UIとは別の"入口"を増やせたのが今回のMCP実装の狙いです。
まとめ
- 「文中の単語を選択→AIが文脈込みで解説→Notionに保存→間隔反復で復習」という一連の流れを、Gemini・Notion API・AWS Lambdaだけで実装できた
- Notionをそのまま単語帳データベースとして使うことで、独自の管理画面を作らずに済んだ
- MCPサーバーを実装したことで、AIとの会話からそのまま単語登録できる"もう一つの入口"を作れた