【個人開発】海外ユーザーのフィードバックから「Google翻訳連携ボタン」を爆速実装した話

こんにちは！個人開発で [Free] Lesson Message Generator というWebアプリを運営している者です。

前回の記事に引き続き、今回は海外プラットフォーム（Product Hunt）でいただいたユーザーからのフィードバックをきっかけに、1クリックでGoogle翻訳へテキストを送信して即席多言語化（スペイン語対応）を行う機能を実装した背景とコードをまとめました。

1. きっかけ：海外ユーザー（Product Hunt）からのリアルな声
   Product Huntに掲載したところ、スペイン語圏の生徒や家族を持つユーザー（Berivanさん）から以下のような温かいフィードバックをいただきました。

「送信前の生成メッセージを、生徒の母国語（スペイン語）に自動翻訳できる機能があったら最高なのに！私の家族の多くはスペイン語しか読めないから、毎回Google翻訳にコピペするのは大変なんだ。」

「それなら、今できる最短ルートで解決しよう！」と思い立ち、すぐに改修に取りかかりました。

1. 実装方針：複雑なAPI連携ではなく「Google翻訳へ即ジャンプ」
   重厚な翻訳APIを組み込むことも考えましたが、まずは「ユーザーの手間（コピペ）を最小限にする」ことを最優先とし、ワンクリックでGoogle翻訳にテキストを渡す仕様に決定しました。

UIイメージ
生成結果画面の上に Switch to Spanish or another language(Google) というボタンを配置しました。
このボタンは英語版のみ実装です。

このボタンを押すと、自動的に別タブでGoogle翻訳が立ち上がり、瞬時に翻訳結果が表示されます。

1. 実装コード（Laravel / JavaScript）
   Laravel（Blade）側で出力されたテキストエリアの文字列を取得し、URLエンコードしてGoogle翻訳のURLパラメータに渡すシンプルなJavaScriptを記述しました。

JavaScript
  function translateToSpanish() {
            const textArea = document.getElementById('lineText');
            if (!textArea) return;

            // テキストを取得して前後の余分な空白や改行を綺麗にする
            const messageText = textArea.value.trim();

            if (!messageText) {
                alert('No hay texto que traducir.');
                return;
            }

            // URL用にエンコード
            const encodedText = encodeURIComponent(messageText);

            // Google翻訳のURLを作成
            const googleTranslateUrl = `https://translate.google.com/?sl=auto&tl=es&text=${encodedText}`;

            // 新しいタブで開く
            window.open(googleTranslateUrl, '_blank');
        }

Bladeビュー側（HTML）

<!-- 翻訳ボタン -->
<button type="button" onclick="translateToSpanish()" class="btn-translate">
    Switch to Spanish or another language(Google)
</button>

1. まとめ：個人開発における「ライトな機能拡張」の価値
   多言語対応というと「国際化ライブラリの導入」や「有料翻訳APIの契約」などを大掛かりに想像しがちですが、今回のように「外部サービス（Google翻訳）への導線を1つ作る」だけでも、ユーザーの課題は十分に解決できました。

ユーザーの声に素早く反応し、小さく作って価値を届けるという個人開発ならではのスピード感を改めて実感できた事例です。

サービスURL（英語版）: [Free] Lesson Message Generator (https://class-msg-generator.com)

サービスURL（日本語版）: 【無料】個人教室専用LINE案内文メーカー (https://class-msg-generator.com)