📝

様々な翻訳アプリの英訳をまとめて見れるアプリを作った(1/n)

2023/02/12に公開

React

Google翻訳、Deepl、GPT-3(text-davinci-003)のAPIを用いて翻訳アプリを作りました。

アイデアの発案から実装まで大まかに述べたいと思います。

(追記：2022/2/14)
OpenAIのAPIを叩いたときにエラーが出ることがあり、動作が不安定になっています。

同様のエラーを抱えている人がコミュニティにおり、サーバ負荷が高いことによるOpenAI側のエラーの可能性が高いです。

適切な例外処理を行いたいと思います。

概要

「Oneslate」という様々なアプリの翻訳結果を一つのページで確認できるサービスを作りました。

開発のきっかけ

・英語論文の執筆

普段、私は最適化アルゴリズムの研究をしています。

国際学会の予稿や英語論文を執筆する際に翻訳アプリには大変お世話になりましたが、

細かいニュアンスの違いや文章の読みやすさを意識すると一つの翻訳アプリでは事足りなくなっていました。

「Google翻訳だと伝えたいことと違うな…」「DeepLの翻訳では主語が長すぎるな…」

複数アプリにまたがって翻訳結果を得るのは非効率だと感じたため、全部一気に見れるようにしたい！と感じたのがきっかけです。（そのため開発に着手したのはだいぶ前）

・ chatGPTの盛り上がり

言わずと知れたチャットボット。

非常に世間を賑わせており、最近ではchatGPTを使った応用事例などが様々な媒体で量産されていることと思います。

英文執筆においてもその真価は発揮されるようで、chatGPTが良い翻訳を返してくれるというツイートも最近見かけるようになりました。

言語生成モデルであるため翻訳結果の真偽はさておき、「自然な or 読みやすい」 文章を得られるという点で理にかなってはいるのかもしれません。

(今回、厳密にはchatGPTのAPIを実装しているわけではなくGPT-3系の文章生成AIを使用しています。)

コンセプト

日本文を入力すると，複数アプリの翻訳結果を一度で見れる．

主なターゲットは

論文やメールを英語で書く機会のある人
様々な表現や言い回しを知りたい英語学習者

実際の操作画面

「2026年のFIFAワールドカップはカナダ・メキシコ・アメリカ合衆国の3カ国共同で開催します。」という日本語を入力しました。

結果が以下の通り

様々な表現や言い回しなどの違いを確認できると思います。

後述しますが、周りの方々に作成したアプリに関するヒアリングを行い、

英文の校正や編集機能が欲しいとお声を頂きましたので追加機能は追々。
(なので記事のタイトルは(1/n)としている)

プロダクト名

一気に(At Ones)翻訳(Translate)結果が見れる．....「Oneslate」

使用技術スタック

React
TypeScript
Tailwind CSS
Vite
AWS(S3)

レスポンスの取得

それぞれ翻訳結果を取得するためにAPIキーを発行し，３つのレスポンスを受け取っています。

以下のコードはDeepLのAPIからデータを取得したサンプルコードです。

    axios
      .get(
        `https://api-free.deepl.com/v2/translate?auth_key=${
          import.meta.env.VITE_DEEPL_AUTH_KEY
        }&text=${japSent}&source_lang=JA&target_lang=EN`
      )
      .then((res) => {
        setEnDeeplSent(res.data.translations[0].text);
        setEnDeeplSentActive(true);
      });

一つ注意
今回ビルドツールとしてViteを使用しています。

APIkeyは環境変数などに設定して使用する方法がありますが、今回は.envファイルに設定しています。

Viteは.envファイルに記述されたもののうち、VITE_で始まる変数だけを読み込む仕様になっているので設定したい変数の先頭にVITE_と記述するようにしてください。

以下は.envファイルのサンプルコードです。

+ VITE_AUTH_KEY = XXXXXXXXX
- AUTH_KEY = XXXXXXXXX

また読み込まれた値はimport.mata.envというオブジェクトに格納されるのでコード内でAPIkeyを用いる場合はそちらを参照してください。

以下はコード内で参照する際のサンプルコードです。

+ import.meta.env.AUTH_KEY
- process.env.AUTH_KEY

補足

ちょっと役に立ったのがこれ

cURLからNode.js用に整形してくれます。セキュリティ面は保証できないので、実際に使うときはAPIkeyを入れないようにしたほうがいいと思います。

デザイン

タグ内で記述が冗長になるのを避けてTailwind cssは使わず嫌いしていましたが、

慣れれば楽にスタイルを当てることができたので個人的にはアリだと感じます。

よりダイナミックなスタイルを実装するにあたって以下のサイトが役に立ちました。

細かいアニメーションなどを設定し、右上の</>のマークを押せばtailwind.config.jsに記述して使えるコードを生成してくれます。

今回のアプリでは翻訳結果が左からダイナミックに登場する仕様になっています。

以下は該当のスタイルコードです。

tailwind.config.cjs

module.exports = {
    theme: {
        extend: {
            animation: {
                "slide-right": "slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940)   both"
            },
            keyframes: {
                "slide-right": {
                    "0%": {
                        transform: "translateX(0)"
                    },
                    to: {
                        transform: "translateX(100px)"
                    }
                }
            }
        }
    }
}

他にも便利なライブラリがたくさんあるようなので試してみてはいかがでしょうか。

ビルド・デプロイ

Viteはホットリロードやビルドの速度が速いため、Webpackから移行する方々もいるかと思います。

比較対象として正しいのか微妙ですがnpm trendsを見るとViteはジリジリと人気を高めていることも分かります。

webpackはビルド時にモジュール全体をクロール、全ての依存関係を解消する必要があり、
Viteは依存関係とソースコードに分割し、事前バンドルする

簡単にいうとこのような違いがあるみたいです。

実際使ってみた結果、その速さを実感し開発体験が向上したように感じます。

ちなみにデフォルトのビルド出力場所はdistフォルダとなっていま下。これはbuild.outDirで出力ディレクトリを変更できます。

デプロイに関しては、クラウドに最近興味を持ったため勉強も兼ねてまずはAWS S3 (Simple Storage Service)を触ってみることにしました。

正直機能が多すぎてどこで何を設定すれば良いか分からなかったため、ここは今後勉強します。

デプロイできた経験だけでも今回はよしとします。

改善点

周りの方々にアプリを触ってもらい、もらった意見・それに対する今後のアクションをメモしておきます。

校正機能もつけて欲しい
→これは必須。GrammarlyやGPT系、最近ではDeepL Writeという文章を校正するだけでなく、言い回しや文体まで修正を提案してくれる機能が追加されました。
校正タブなどを追加し、モード切り替えすることで日本文→英文→英文修正までを一気に行うことができれば機能が充実するはずです。
デザインがシンプルすぎる。テンション上がらない。
→ボタンや翻訳待ちの画面は背景と一体感があって綺麗だと思っていましたが、翻訳結果が表示されるテキストエリアが野暮ったい雰囲気なのでオシャレにしたい。
編集エリアが欲しい
→せっかく手に入れた英文も、新しく翻訳を開始してしまうと全て消えてしまうのは勿体無い。そのため編集エリアで翻訳結果を保留しておける機能をつける。

まとめ

少しでも誰かのためになったり、作業が効率化できるようなアプリになればいいと思います。

レンダリングの最適化やstateの保持などは大規模なアプリになるにつれて重要になるため、

追加実装していく中で同時並行で修正を行いたいと思います。

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

概要