Roo Code + GPT-4o mini + Raycastで翻訳機能を作ってみた

はじめに

こんにちは！普段はQAエンジニアとして働いているRaBitです。今回は、Roo Code、GPT-4o mini、そしてRaycastを組み合わせて、日英翻訳ツールを作った話をシェアしたいと思います。💻✨

翻訳ツールを作るきっかけ

エンジニア業務だけでなく、オンラインの友人とのやり取りなどでも日本語と英語を行き来する機会が増え、ブラウザやアプリを開いてDeepLやGoogle翻訳にアクセスしてコピペする手間が地味にストレスになっていました。
もっとシームレスに翻訳できないかな〜🤔と思いRoo Codeの力で自分好みの翻訳ツールを作ることにしました！

使用技術の紹介

今回のプロジェクトでは以下の技術を組み合わせました：

🚀 Raycast拡張機能フレームワーク

Raycastはmac OS向けのランチャーアプリで、生産性向上のためのさまざまな機能を持っています。特に良いのが拡張機能のエコシステム。React + TypeScriptベースで拡張機能を開発できるので、Webフロントエンドの知識がそのまま活かせます。

🧠 GPT-4o mini

OpenAIが提供する最新モデルの一つであるGPT-4o mini。大規模言語モデルの中でも特に翻訳能力が高く、自然な翻訳を可能にします。コスト効率も良く、APIを利用した翻訳機能の実装にぴったりです。

🤖 Roo Code

VSCode拡張機能として提供されており、プロンプトを入力するだけでコードを生成したり、既存のコードを修正したりできます。
ディレクトリの命名やコマンド実行も可能で、モード切り替えを行うことでシステムの構造や設計パターンを分析し、技術的なアドバイスを求めることも可能です。
今回はClaude-3.7-sonnetを使用しました。

開発環境のセットアップ

Raycast拡張機能の作成

Raycastから直接拡張機能を作成する方法を紹介します。

1. 拡張機能開発の準備

   • Raycastを起動（⌘ + スペース）
   • "Extensions"と入力
   • "Create Extension"を選択

2. プロジェクトの設定

   • Extension Name: honyaku-konnyaku（好きな名前を設定）
   • Display Name: ほんやくこんにゃく
   • Description: Translate selected text between Japanese and English
   • Category: Applications
   • Template: Show Detail
   • Location: プロジェクトを保存する場所を選択

3. 開発環境の設定

   • 生成されたプロジェクトをVSCodeで開く

開発手順

1. プロンプトを渡す

まず、Roo Codeに基本的な機能を実装してもらいます。最初は以下のようなプロンプトを使用しました：

Raycastの拡張機能として、選択したテキストを日本語と英語の間で相互に翻訳する機能を実装してください。
以下の要件を満たすようにしてください：

1. 基本機能:
   - OpenAIを使用して翻訳を行う（最新の有効なモデル「gpt4o-mini」を使用）
   - 選択されたテキストの言語を自動検出（日本語/英語）
   - 検出された言語に応じて、反対の言語に翻訳

2. 技術要件:
   - Raycastの preferences機能でAPIキーを管理
   - TypeScriptの型定義を適切に行う
   - Enter押下時に翻訳結果の文字列を元のアプリケーションに貼り付ける

3. UI要件:
   - 原文と訳文を明確に区別して表示
   - 翻訳結果をEnterキーで元のアプリケーションに貼り付ける
   - 翻訳を再実行できるボタン（ショートカットキー: Cmd+R）

4. パフォーマンス要件:
   - レスポンシブな UI/UX

5. コード品質:
   - クリーンで保守性の高いコード構造
   - 適切なコメント
   - TypeScriptの型安全性の確保

使用するべき主要なライブラリとバージョン:
- @raycast/api
- openai
- react

コードは、Raycastの拡張機能の規約に従い、src/translate.tsxとして実装してください。

2.理想と実装の差を埋めるやり取り

今回の翻訳機能ではとにかく手順を少なくし快適なユーザ体験を得ることが目的だったので、Enterキーを押下するとすぐに翻訳結果が貼り付けられることが理想でした。

が、どうしても一度クリップボードに貼ってユーザーが貼り付ける必要がある実装になってしまったため修正の指示をします。

指示：翻訳結果をEnterで貼り付ける機能ではRaycastのAction.Pasteを使用してください

<Action.Paste
        title="翻訳結果を貼り付け"
        content={translationResult.translatedText}
        icon={Icon.CopyClipboard}
 />

いい感じです。

今度は存在しないアイコンを持ってきてしまうのでこのように指示をしました。

指示：正しいアイコン名を使用してください（Icon.Text, Icon.CopyClipboard, Icon.ArrowClockwise）

<Action
      title="翻訳を再実行"
      icon={Icon.ArrowClockwise}
      onAction={retranslate}
      shortcut={{ modifiers: ["cmd"], key: "r" }}
/>

他にも細かい指示はありましたが大まかにした指示はこれだけです。
想定通りの実装になったように見えるので実際に動かしていきます。

3.ホットキーの追加

Raycastの設定からホットキーを追加することで、より素早く翻訳機能を呼び出すことができます：

1. Raycastを開く（⌘ + スペース）
2. 歯車アイコン（⚙️）もしくは⌘ + ,でsettingsへ移動
   3."Extensions"を選択
3. 作成した拡張機能の"Hotkey"セクションで任意のキーボードショートカットを設定
   • 今回は⌘ + shift + Eにしました。
   • テキストを選択した状態でこのホットキーを押すと、即座に翻訳が開始されます。

実際の動作画面

1. 翻訳したいテキストを選択
2. 拡張機能のホットキーを押す（例： ⌘ + shift + e）
3. 翻訳結果が表示されるので、Enterキーで即座に貼り付け

動きました🥳

まとめと振り返り

要件をまとめたプロンプトを作ってRoo Codeに渡すと数回のやりとりで実用的なツールが作れてしまい、Roo Codeがどんどん引っ張っていってくれる開発体験は非常に快適でした。
今回は.clinerulesを使用せずに開発したので、使用すればやりとりや試行錯誤の回数も減らせたのかなと思います。

参考文献とリソース

• Raycast Extensions API
• OpenAI API Documentation
• Roo Code