LINEチャットで毎回コピペ翻訳するのが面倒だったので、リアルタイム翻訳を作った話（Electron実践）
海外ユーザーや日本の顧客とLINEでやり取りするとき、ずっと同じ問題がありました。
メッセージをコピー
翻訳サイトを開く
翻訳
戻って貼り付ける
また返信を待つ
短いやり取りでも、この往復がかなり多い。
そこで、「送信時に自動翻訳」「受信時に自動翻訳」ができる仕組みを Electron で作ってみました。
作りたかったこと
目標はシンプルです。
入力した原文を送信時に自動翻訳
相手のメッセージを自動翻訳表示
アプリを切り替えない
コピペしない
複数言語対応
最終的なイメージ：
自分が入力（中国語）
↓
自動翻訳
↓
LINEへ送信（日本語）
相手の返信（日本語）
↓
自動翻訳
↓
画面表示（中国語）
Electron を選んだ理由
Electron を選んだ理由は以下。
デスクトップ常駐が簡単
WebView 制御がしやすい
クロスプラットフォーム対応
IPC 通信が扱いやすい
特に複数ウィンドウや翻訳プロセス分離では、Electron の IPC が便利でした。
実装でハマったポイント
- 翻訳APIを毎回叩くと遅い
最初は毎回翻訳APIを呼んでいました。
問題：
レスポンス待ち
同じ文章を何度も翻訳
コスト増加
そこで簡単なキャッシュを追加。
const cache = new Map();
function translate(text){
if(cache.has(text)){
return cache.get(text);
}
const result = callTranslator(text);
cache.set(text,result);
return result;
}
体感速度はかなり改善しました。
- UI切り替えが多いと集中が切れる
翻訳ツールを別ウィンドウにすると、結局 Alt+Tab が増えます。
そのため、
入力中に翻訳
オーバーレイ表示
最小クリック数
を優先しました。
- 短文チャットは精度より速度
チャットは長文翻訳と違い、
「速く返す」
方が重要でした。
多少の精度差より、待ち時間削減の方がUX改善につながりました。
実際に使って感じたこと
一番変わったのは、
「翻訳する」という意識が減ったこと。
チャットが普通の会話に近くなります。
特に、
海外顧客対応
多言語コミュニティ
ゲーム仲間との会話
越境ECサポート
では効果が大きかったです。
まとめ
リアルタイム翻訳は技術的には難しくありません。
難しいのは、
「翻訳を意識させない体験」
を作ることでした。
もし同じように多言語チャットで毎回コピペしている人がいたら、こういうアプローチもありだと思います。
ちなみに今回の仕組みはツール化して、LINE や他のチャットアプリでも使えるようにしています。
