見出し画像

ノーコードで作る!Macショートカット×OpenAIで自分専用翻訳ツール

iPhoneとかMacにショートカットってあるじゃないですかあ。

こういうの。

これ、Siriで他のアプリ立ち上げたり動かすことができたりして結構便利なのですが、httpリクエストが送れるってご存知でしたか?僕は知らなかったです。

この手法を使えば、今流行りのLLMモデルのAPI(OpenAI, Gemini, Claudeなど)を組み込んだ簡単なアプリノーコードで作ることができるのです。わーい

友人がこの手法でメールの返信文を素早く作る仕組みとかを作り込んでいて衝撃を受けたので、自分でも何か作ってみることにしました。今回は日本語・英語のテキストを識別して翻訳するショートカットアプリを作ってみます。


どういう人向けの記事か

今回のショートカットを作るのにプログラマー的な知見はほとんど必要ありません。以下のような人たちにとって役立つコンテンツかもしれません。

  • 非エンジニアだがLLM系のAPIで何か気軽に作ってみたい人

  • 普段ChatGPTに毎回「翻訳して」って頼んでる人

  • 自分で自由にカスタマイズできる翻訳アプリを作ってみたい人

用意するもの

Macbook(かiPhone, iPad)

iPhoneでも今回紹介するワークフローを作ることは理論上可能ですが、小さい画面だと少し作業しづらいと思います。僕はSequoia 15.2が搭載されたMacbookを使って作業しました。

OpenAI APIキー

今回はOpenAIのAPIを使ってみます。もちろん他のAIモデルを使うことも可能ですが、その場合後述するAPIリクエストの内容を調整する必要があります。執筆時点(2025年1月)ではGemini系のAPIがほぼ無料で使えるので、そちらを選ぶのもアリです。

以下の手順でOpenAI PlatfromでAPIキーを取得します。

  1. OpenAI Platformを開く

  2. サイドバーの「API Keys」をクリック

  3. 「Create new secret key」をクリック

  4. Name欄にキーの名前を入力する

    • 「ショートカットで翻訳」とかでおk

  5. Permissionsは「All」のままでいいと思います

  6. 「Create secret key」をクリック

  7. シークレットキーが表示されるのでコピーして大事に保管

より具体的なHow Toはこちらがわかりやすいかもしれません。

実現したいこと

僕は普段、翻訳にはDeepLを使っています。同サービスは以下の点において優れていると感じていました。

  • ショートカット(cmd + c,c)で起動するシームレスな体験

  • 翻訳元のテキストの言語を自動検出してくれる

これらにできるだけ近いUXを実現したかったので、以下のポイントを実現できるか念頭に置きながら進めることにしました。

  • ショートカットで起動できる

  • テキストの言語を勝手に識別してくれる

  • 翻訳結果がスムーズにクリップボードに保存できる

ショートカットを作る

早速ショートカット作成に入ります。ウインドウ右上の+ボタンをクリックして、新規ショートカットを作成します。

SwitchBotでライトつけたり消したりとかにもショートカットを使ってます。

今回作るショートカットは大きく以下の5つのパートで構成されています。

  1. ショートカットキーで立ち上がる

  2. APIリクエストの材料を用意する

  3. APIリクエストを作る

  4. レスポンス内容を加工する

  5. 翻訳結果を表示する

1. ショートカットキーで立ち上がるようにする

作成したショートカットはキーボードショートカットキーで実行することができます。先ほど言及したDeepLの「cmd + ccで立ち上がる」みたいな体験を作ることができるということです。

今回は翻訳(Translate)からとって、「ctrl + t」でショートカットが起動するようにしてみます。

ウインドウ右上の「i」ボタンをクリック
キーボードショートカットを追加 > 「次で実行」の欄に好きなコマンドを入力

そうすると、ショートカットの冒頭に以下のようなステップが追加されます。

次に、アクションから「クリックボードにコピー」を検索してステップに追加します。

ここまでの実装で、テキストを選択して「ctrl + t」を入力すると、選択した文字列がクリップモードに保存されるようになりました。

2. APIリクエストの材料を用意する

OpenAIさんに翻訳を頼むには、最低限以下の3つの材料を用意する必要があります。

  1. APIキー

  2. 翻訳したい文章

  3. 2を含めたGPTへのプロンプト

1は既に「用意するもの」パートで取得したのでそれを使います。実は、2も既にクリップボードの中にあります。

まず「テキスト」を追加して、APIキー(1)を入力します。

次に、「クリップボードを取得」を追加して、翻訳したい文章(2)を取得します。取得した文章を調整したい場合があるので、「入力を要求」アクションを入れて、テキスト入力画面を表示します。「デフォルトの回答」に「クリップボード」を入れておくことで、冒頭に選択したテキストを編集できるようにします。

最後に、翻訳したい文章を含めたGPTへのプロンプトを作ります。「テキスト」を追加してこんな感じで送りたいプロンプトを入力します。ここは、「カジュアルに!」とか「ビジネスライクに!」みたいに柔軟に作り変えることで自分のニーズに即した翻訳を返してくれるようになると思います。「入力を要求」の部分は、「入力」まで入力すると変数が提案されるのでそれをクリックして挿入します。

以下のテキストの言語を識別してください。
英語であれば日本語に、日本語であれば英語に翻訳してください。前置きや結びの文章は不要です。

```
{入力を要求} 
```

3. APIリクエストを送る

次に、APIリクエストを作成して送信する部分を作ります。ここが一番複雑な作業です。まず、「URL」を追加して、以下のURLを設定します。

https://api.openai.com/v1/chat/completions

次に、「URLの内容を取得」を追加して、リクエスト文を作っていきます。今回はOpenAIのドキュメント冒頭に記載されているサンプルをベースに、APIキーuserのcontent(すなわちプロンプト)のみを変更したリクエストを投げることにします。

最終的な設定内容は以下の通りになるのですが、ヘッダーのAuthorizationの部分とuserのcontentの部分に以下のように変数を設定するのには少しコツが要ります。

  1. 入力欄に「テキスト」と入力する

  2. 「テキスト」を挿入する提案が表示されるのでそれをクリックする

  3. 挿入された「テキスト」がこれまでに設定したAPIキーなのか、プロンプトなのかわからない…

  4. 挿入された「テキスト」をクリックし「表示」をクリック

  5. 該当するテキストがホバーされる

  6. 内容によって各変数名を変更する

    • ここではプロンプトにあたるテキストを「Prompt」、APIキーにあたるテキストを「Secret」と命名しています

今回はmodelに「gpt-4o-mini」を使っていますが、ここはお好みです。早さ重視であればgpt-4o-mini、精度を高めたいのならgpt-4o、みたいに柔軟に変更できます。

モデル一覧:https://platform.openai.com/docs/models

APIが正しくレスポンスを返してくれるかどうかは「結果を表示」アクションを追加してショートカットを実行するとテストできます。

こんな感じで結果が返ってきたら成功です。よく見ると、「こんにちは、世界」と翻訳してくれています。

4. レスポンス内容を加工する

上みたいな感じでJSONで渡されても困るので、余計なところを除きます。「辞書の値を取得」を繰り返し行うことで、入子状になっている値を取得し、最終的にmessage内のcontentをクリップボードにコピーします。以下のようにステップを追加していきます。

「_content」みたいに設定しているのはどこを参照しているか分かりやすくするためです。この通りに設定しなくても正常に動作します。

5. 翻訳結果を表示する

最後に、クリップボードにコピーした内容を表示してもらいます。「入力を要求」アクションを追加して、「デフォルトの回答」に「_content(すなわち翻訳結果)」を入れておきます。最後にもう一度「クリップボードにコピー」を追加して、ショートカット構築は完了です。

最後の出力表示を「クリップボード」にコピーで挟んでいるのは、ちょっとした一工夫です。まず翻訳結果が返ってきた直後にコピーしておくことで、その出力結果を手動でコピーすることなく他の場所にペーストできます。

翻訳結果が気に入らなかった場合は出力結果を編集して「完了」 を押すことで、編集済みの翻訳結果が自動的にクリップボードに保存されます。ちなみに、ショートカットの一連の流れにおける「完了」ボタンの押下は「cmd + enter」で置き換えることができます。

翻訳結果が出力された後、編集して「完了」を押すと、編集後の文字列を保存できます。

以下、ショートカットの全体像を再掲します。

↓に続く

実際に使ってみて

結果的に冒頭に挙げた要件を全て満たすことができ、かなり実用性の高いショートカットを作ることができました。特に気に入ったのは、以下のポイントです。

  • キーボードショートカットでシームレスに翻訳できる

  • アプリの移動がない

  • ニーズによってモデルやプロンプトを柔軟に変更できる

課題に感じたポイント

かなり簡易的なアプリなのでもちろん実現できていないこともあります。

  • 翻訳結果が気に入らなかった時の体験がデザインされていない

    • 翻訳元のテキストを編集してリアルタイムに翻訳結果を返すとか、翻訳結果に対してフィードバックすることでリライトしてもらう、みたいな体験は実装されていません

  • 待機画面が実装されていないので、長文の翻訳をリクエストした時に不安になる

などです。もしかしたら複数のショートカットを組み合わせてこの辺りの機能を実現することもできるかも。

加えて、Macのショートカットアプリ自体の仕様にも少し癖がありました。Zapier等を普段から使っている身からすると、作業に少し苦戦する部分がありました。

  • 変数を呼び出す際にアクション名を部分的に入力しなければならない

  • 変数を呼び出した後しか各変数名を変更できない

まとめ

以上のようなちょっとした課題はあるものの、かなり実用性の高いショートカットをMacのデフォルトのアプリとOpenAI APIで簡単に作ることができました。

「翻訳が必要だけど、いちいちアプリを切り替えるのは面倒」「ChatGPTに毎回お願いしていることがあるけど、もっとスムーズにできないかな?」と思ったら、ぜひ今回の方法を試してみてください。

不便に感じるところがあればどんどんカスタマイズし、自分に最適な形を模索してみるのもまた楽しいと思います。最初は少し戸惑うかもしれませんが、慣れてしまえば「もっと早くやっておけばよかった!」と感じるはず。ぜひこの機会に、あなた専用のAIショートカットを作ってみてください!

いいなと思ったら応援しよう!

この記事が参加している募集