Firebase + React でオンライン翻訳支援エディタ Phra Phra を作りました
作った Web サービスはこちら。
2018年11月現在、Phra Phra （プラ・プラ）はオープン・ベータ版です。
Phra Phra を作った動機
私は翻訳が趣味なのですが、本格的な翻訳支援ツールを使ったことはなく、テキストエディタだけを使っていました。短い文章を翻訳するにはそれで事足りるのですが、何千字も翻訳していると物足りなくなってきました。
テキストエディタで翻訳するときに感じるストレスのひとつに、「本文と訳文の間の視線移動」があります。
たとえばこのスクショは実際の翻訳作業ファイルですが、英語の本文を見てから日本語の訳文を書き込むのに、視線移動が生じるのがわかると思います。
私は英語がそんなに得意なわけではないので、ひとつの文を翻訳するのにも視線が本文と訳文の間を何度も往復します。長時間にわたる翻訳作業ではそれが意外とストレスで、なんとかならないものかと思っていました。
視線移動距離を短くする解決策としては、英語本文を文単位で区切って改行するスクリプトを書けばいい。そうすれば一文ずつ翻訳できます。さらに翻訳作業ファイルから訳文だけ抽出するスクリプトを書けば、翻訳作業中は目の前の一文ずつに集中できる。
この発想を Web サービス化したのが、オンライン翻訳支援エディタ Phra Phra です。
先程の翻訳テキストは Phra Phra のエディタ画面上でこのように表示されます。
本格的な翻訳支援ツールだと、翻訳フレーズをデータベースに保存したりしますが、Phra Phra は個人開発の Web サービスなので、そういう大きなツールは目指しません。解決する課題は小さく絞ったほうがいい。そこで、基本的な機能は以下にしました。
Phra Phra の技術的な話
バックエンドは Firebase、フロントエンドは React を使っています。サーバーレスなアプリケーションは初めて作りましたが、作りやすくていいですね。
ラピッドプロトタイピングで作りたかったので、最初はバックエンドのことは考えずに IndexedDB を使いました。オンラインテキストエディタのようなサービスはデータがユーザー空間で区切られていて、ユーザーをまたいだデータを考えなくていいので、データ操作のインターフェイスだけを先に実装しておいて、あとでクラウドにつなげることにしました。先に UI を React でガーッと作りました。
React の状態管理には Redux ではなく MobX を使いました。Redux を使うほど大規模なプロダクトではないけど、状態管理はコンポーネントと分離して行いたかったので。MobX はちょっと癖がありますが、デコレーターを使ってコンポーネントに状態を注入できるのが嬉しいです。
UI を作ったら次は Firebase の Realtime DB とつなげます。IndexedDB からの差し替えはわりと簡単でした。Realtime DB は実質 Mongo なので、データ設計とインターフェイスができていればあとは差し替えるだけでした。
Firebase で使っている機能は、Realtime DB、Hosting、Cloud Functions です。Cloud Functions は Google 翻訳 API を使うために必要でした。Google 翻訳 API は有料なので、ユーザー数が増えたら Phra Phra に課金の仕組みを作るかもしれません。
今後
自分で使いたくて作った Web サービスなので、とりあえず自分で使ってみながら機能を改善するつもりです。
