Zenn
🐧

DeepLを使った大体無料の英語学習サイトを作った

2022/01/16に公開
#
英語
supabase
idea

作ったもの

https://deep-eisakubun.vercel.app/

経緯

今年の初めにQiitaでこんな記事を見つけた。
https://qiita.com/yuno_miyako/items/9996efe20880fda35d91

基本機能としては、

「ある質問に対して、日本語で意見を書く -> 英語で書いてみる -> 日本語で書いた意見に対するDeepLの回答を見比べる -> DeepLの回答を覚える -> DeepLの回答を自分で書いてみる」

という感じの流れ。日本語で言いたいことを自力で英語で表す時の実力とDeepLのそれなりに正しい英語を見比べることでそのギャップを埋めようという仕組みだ。

よく英作文や英会話を学ぶ時に市販のテキストなどを使って英文暗記をやることがある。英語の基本的な言い回しや表現のストックを増やすのが目的だ。しかしこのやり方だといざ自分が使おうと思った時に暗記したはずの言い回しが使えないことが多くないだろうか。原因は自分の思考から発せられる言葉に基づいた英文暗記ではないからだ。一般に個々人が日常でよく使う言い回しやフレーズにはそれぞれ癖がある。そういった普段使っている言い回しを英語で暗記していった方が実用的で効率が良さそうに思う。

日本語で意見を書く -> 英語で書いてみる -> 日本語で書いた意見に対するDeepLの回答を見比べる、という作業は自分の思考に見合った英文ストックを構築するのに適していると感じた。

ところで上記の記事にあるサービスはその当時無料であったわけだが、少々バズってしまったせいでほぼ有料での利用が推奨されるサービスになってしまった。DeepLの利用料もあるしサーバー費用もあるだろうしある程度のユーザーを抱えるとどうしても無料では運営できなくなる。仕方がないことであるし、それ自体は全然悪いことではないのだけど先に挙げた基本機能だけであれば自前である程度無料で用意できそうだなと思ったので自分用にカスタマイズしつつDeepLを使った英語学習環境を作ってみたわけだ。

機能

基本機能としては本家サイトの下記を搭載した上で、

  • ある質問に対して、日本語で意見を書く -> 英語で書いてみる -> 日本語で書いた意見に対するDeepLの回答を見比べる
  • 継続日数などの継続管理の仕組み

下記の機能は無くした。

  • 回答時間の制限
    • 自分のペースでやりたい
  • DeepLの文章を覚えて書くくだり
    • その場で覚えてもあんまり効果なさそうな気がした。あとで何度も見返せる方が良い

その上で新たに下記の機能を追加した(※本家サイト公開時点でなかった機能)。

  • 問題をレベル別で用意
    • 難しすぎる質問が出るとモチベーション落ちるので
  • 自分の回答とDeepLの回答と見比べるページで覚えておきたい良い表現をストックできる単語帳のような機能を追加
    • 自分がよく使う表現をピンポイントでメモできる
  • 解いた問題の履歴を保存できるようにする
    • DeepLの回答がたまに意味不明になることがあるので自分で選択して解いた問題を保存して見返せるようにしたかった
  • 音声認識による入力とDeepLの回答を読み上げる機能
    • たまに発音がわからない言葉とかが出てくるので読み上げで雰囲気を補完できる
    • ひよっこすぎてあんまり使わないかもしれないが音声で入力できると会話の練習にもなりそう

こうした機能のブラッシュアップをして自分用に作ったのが先のサイトである。

構成

次に上述の機能を搭載したサイトをどう構築したかについて書く。

その前に大体想定してる規模はこのくらい。本家サイトが大バズりしてUU1000人くらいらしいのでそれより1/10くらいになるとしてせいぜいこんなもんかなと踏んだ。それに英語学習なんてまず持って100人始めたら5人くらいしか続かないものなので万が一小バズりしてもMaxでこんな規模だろうと思う。

  • AuthenticationがMax1万人
  • UU100人くらい
  • 一人160文字/日くらい翻訳する想定

この規模であれば少なくとも1年は完全無料でサービス運用できる。

Supabase

https://supabase.com/

今回はバックエンドにSupabaseを使っている。

SupabaseはPostgresSQLを土台に据えたFirebase Alternativeとして始まったサービス。Firestoreのようにフロントエンドから扱えるDBやAuthentication等々のおなじみの機能がある。OSSでコードが公開されているので困った時はコードを読んで深掘りできて良い。

https://github.com/supabase

SupabaseはPostgresSQLの機能を存分に活用して各種サービスが構築されており、Firestoreで味わったNoSQL独特の難しさのようなものが一切ない。例えばFirestoreではSecurity Policyの設定を独自の記法で用意する必要があるがこれ相当の機能をPostgresSQLの標準のRLS(Row Level Security)という機能で実現していたりする。他にもalpha段階ではあるがTableへのinsertをフックにして他のテーブルに処理を施したりといったこともPostgresSQLの機能を活用して用意されていたりして中々便利である。

主に利用するのはDatabaseとAuthenticationであるが、Pricingを見ると現在無料範囲ではDatabaseが500MBまででAuthenticaitonは1万人までだ。自分+α(UU100人)くらいの利用者なら十分であろう。仮にユーザー爆増になったとしてもProプランが1Project $25/月で8GBまで容量を増やせるのでテキスト中心のサービスならこれで十分なはず。

このあたりFirestoreだとread/write課金なのでクエリ取得の独特なコツを意識したり急なアクセス増に怯えたりといったことが起きなくて良い。

とはいえまだalpha/betaな機能もあるので痒いところに手が届かないこともある。supabase - GitHubにコードが公開されているのでそちらを参照することもまぁまぁあるだろう。実際Authentication周りで困ってGoTrueのコードを結構追ったりした。

あとはローカル環境の構築でもそれなりにハマる部分がある。Supabaseで実際に開発する時のローカル環境構築については下記に書いたので困ったら参考にしてほしい。
https://zenn.dev/razokulover/articles/db984ebfcf4bf6

Vercel

https://vercel.com/

フロントエンドはNext.jsで構築しVercelにデプロイしている。Next.jsをVercelにデプロイするのは簡単すぎて何も説明要らないと思うが、一応重い画像を配信したり時間のかかる処理をAPIでさせたり特別なことはしていない。なのでよっぽどのことがない限り多分無料でいけるはず。書くことほぼない。

Pixela

https://pixe.la/ja

継続日数などの継続データ管理にpixelaを採用した。自前でログデータを保持するということも考えたがそうするとSupabaseのDB容量の制限にすぐ引っかかってしまう可能性がある。それは出来るだけ避けたいのでPixelaを使うことにした。PixelaはいわゆるGitHubでいうところの草を生やして継続管理を簡単にできるAPIを提供してくれるサービス。

Pixelaを使った方法ではAPIでまずユーザーを作成し、そのユーザーのGraphIdを作成し、そのユーザーとGraphIdでもってユーザーのアクションをフックに草を生やしていくという流れになる。

今回実現したい機能であれば無料で十分使える。ログデータやグラフ作成を全てPixelaに丸投げできたのでバックエンドもフロントエンドもかなりライトにできた。ありがたい。もしユーザーが増えてしまったらタダで使うの申し訳ないのでPatreonからサポーターになる予定。

ドメイン

独自ドメインは事業化しようというモチベーションがあるならやればいいけど特に基本は個人用途なので取ってない。 このサービスだとhttps://deep-eisakubun.vercel.appだけど、ランダム文字列になったりしてないし気にしなければそんなに悪いドメインでもないと思う。ということでドメイン管理費用も無し。

DeepL

https://www.deepl.com/

DeepLは言わずと知れた高精度の翻訳サービス。DeepLはこの翻訳機能をAPI化して提供してくれている。無料でもなんと50万文字/月まで使える。

50万文字/月というとほぼ制限なしじゃないかと思われるかもしれないが、冒頭の想定で書いた通りUU100人で160文字*30日で計算すると48万文字となり少しユーザーが増えたり英語強者が数千字とか書き続けた瞬間に終わる(そんなことできる人はこのサービスいらないだろうが……)。

よって今回の無料制限サービス構築の中で一番の鬼門がこのDeepLなのだ。本家サイトがすぐに有料プランを用意したのもこのあたりが大きいと思っている。

とはいえ50万文字制限に対する対策はそんなに無いのだけど、一つだけDeepLのAPI利用に必要な認証キーを各自で登録できる機能を追加した。

自分の認証キーで他の人の翻訳をやっているからすぐに制限にぶつかるのであって個々人が用意してくれれば問題はなくなる。↓のような感じで登録できるフォームを用意した。キーはもちろん生で保存せずsalt付きで暗号化していて、バックエンド側でのみ復号して利用するようにしている。

認証キーは登録しなくとも使えるがヘッダーの右上に残り翻訳可能文字数を表示しているのでやばくなってきたら最悪自分で認証キーを登録すればサービスを使い続けられるようになる。

ただし俺だけサービスを使えなくなるのでその時は650円/月を支払って翻訳可能文字数を増やさないといけなくなりそう。フリーライダーが増えないことを祈るしかない…

まとめ

  • DeepLを使って日->英の能力を鍛えるための英語学習サイトを自分向けにカスタマイズして作った
  • Supabase・Vercel・Pixelaなどを駆使して、できる限り無料で運用出来るように工夫している
  • DeepLの無料使用枠は思ったよりも制限がきつめなので良心のあるフリーライダー向けの機能も用意した

https://deep-eisakubun.vercel.app/

最後に本家サイトのEngisterというサービスのリンクを貼っておく。知り合いでも何でもないけど頑張って毎日開発してるっぽいし課金しても問題ないという人はこっちを使った方が良い。
https://english.yunomy.com/

Discussion