n8nを使ってノーコードでプルリクコメントを自動英訳してみた

nozomi yonezawa

Published in

nextbeat-engineering

18 min readNov 22, 2021

こんにちは！ネクストビートのエンジニアの米澤です。
業務では、宿泊業界特化の人材紹介サービス「おもてなしHR」の開発に携わっています。

今回は、ワークフロー自動化OSSのn8n (n-eight-n)を使ってノーコードで「プルリクにつけられたコメントを自動英訳する」ワークフローを作ってみたので、その手順をご紹介します。

n8n

Watch how simple it is to design a GitHub + Slack notification workflow With our fair-code license, you can run n8n…

n8n.io

基本機能にのみ触れているので、「どんな感じで使うのかな〜」と興味のある方の参考になれば幸いです。

やりたいこと

「プルリクにコメントが付けられたら、該当コメントを原文+英訳の内容に書き換える」ワークフローを作成します。

最終的なワークフローはこちらです。

Github Trigger：プルリクコメントをトリガーに設定
IF：条件指定
Google Translate：コメントを英語に翻訳
HTTP Request：「コメント原文+英訳文」に編集して投稿

「2. IF：条件指定」では、翻訳する/しないをユーザーが選択できるように、発火条件を「コメントが@translate_enで始まるかつ新規作成の場合」に設定しています。
また、コメントを乱立させないようにと見易さを考慮して、英訳文は「新規投稿」ではなく「編集して投稿」としました。

では早速作っていきましょう🚀

1. 事前準備

1–1. アカウントの用意

ワークフロー作成にあたり、以下のサービスへの登録が必要です。

n8nは、Dockerまたはnpmでインストールする場合はアカウント登録不要で利用できます。SaaSで利用する場合は登録が必要です。

この記事ではDocker Imageで導入するので、Dockerを入れていない方は事前のインストールをお願いします。

1–2. Dockerでn8n環境構築

以下のコマンドをターミナルで実行します。
ローカル実行時はn8n startのオプションに—-tunnelをつける必要があるので注意です。

docker run -it --rm \
 --name n8n \
 -p 5678:5678 \
 -v ~/.n8n:/home/node/.n8n \
 n8nio/n8n \
 n8n start --tunnel

http://localhost:5678/にアクセスして、n8nを開きましょう。
まっさらなワークフローが表示されました。

2. プルリクコメントをトリガーに設定

画面右側の「+」アイコンをクリックするとNodes Libraryが開きます。各サービスは「Node」と呼ばれ、ここからNodeを追加できます。

Nodes Libraryから「Github Trigger」を選択します。
ちなみに、もう一つ「GitHub」という名前のNodeがありますが、こちらはGitHub APIを利用する場合に選択します。Webhookとして利用したい場合は、Github Triggerを選択します。

Github Triggerダイアログが開くので、

2–1. 認証設定
2–2. リポジトリとイベントの設定

をしていきます。

2–1. 認証設定

認証方法には、GitHubの場合はAccess TokenまたはOAuth2のどちらかを選ぶことができます。
今回はAccess Tokenを使用します。後工程の「5.コメント原文+英訳文に編集して投稿」でも利用するためです。

GitHubのDevelopper settingsページでスコープを「repo」としたAccess Tokenを発行し、控えておきます。

次に、n8nのGithub Triggerダイアログに戻り、Authenticationに「Access Token」を指定します。

続いて、同じくダイアログ内のGithub APIを指定します。
ドロップダウンメニューから「Create New」を選択すると、トークン設定用のダイアログが開くので、以下の値を入力します。

User：GitHubのアカウントID
Access Token：先ほど生成したAccess Token

右上の「Save」ボタンから保存した後、ダイアログを閉じます。

2–2. リポジトリとイベントの設定

次に、トリガーの対象となるリポジトリとイベントの登録をします。

Repository Owner：GitHubのアカウント名
Repository Name：リポジトリ名
Events：pull_request_review_comment

2–3. テスト

ここまでの設定をテストしてみます。

Github Triggerダイアログの右上にある「Execute Node」ボタンを押し、Waiting状態にします。GitHubに移動し、登録したリポジトリのプルリクにコメントをつけます。

n8nに戻ると…プルリクコメントのデータが取得できました 🎉
bodyにコメントが入っています。

3. 条件指定

次にIF Nodeを追加します。

IFダイアログが開くので、ここに設定していきます。
今回は、次の2つの条件を指定します。

プルリクコメントが「@translate_en」で始まる場合
Github Triggerのactionが「created」の場合

まず、1点目のプルリクコメントの条件を指定していきます。

3–1. プルリクコメントの条件を設定

「Add Condition」ボタンを押し、比較条件に「String」を選択します。

続いて、Value1には、Github Triggerで取得した「プルリクコメントのbody」の値を設定します。

ワークフローで取得したデータを利用する時は、Expressionの設定をします。入力ボックスの右側にある歯車アイコンから「Add Expression」をクリックします。

するとEdit Expressionダイアログが開きます。
左側には、現在のNodeのデータ（Current Node）と他のNodeのデータ（Nodes）がツリー状に表示されています。

「Nodes>Github Trigger>Output Data>JSON>body>comment>body」を指定し、Github Triggerで取得したbodyの値が入るようにします。
Github Triggerのテストを行ってない場合、Nodeツリーの状態が異なるので、値が見つからない時はまずテストを実行してください。

これでEdit Expressionダイアログの設定は終わりです。右上の「×」からダイアログを閉じます。
その他、OperationとValue2はそれぞれ以下のように設定します。

Operation：条件式を設定
ここでは「Starts With」を選択します。
Value2：比較する値2を設定
ここでは「@translate_en」を入力します。

3–2. Github Triggerのactionの条件を設定

続いて2点目の条件です。
「3–1. プルリクコメントの条件を設定」と同様に設定してください。

Value1：Add Expressionダイアログを開き、「Nodes>Github Trigger>Output Data>JSON>body>action」を指定。
Operation：Equal
Value2：created

4. コメントを英語に翻訳

Google Translate Nodeを追加します。

4–1. 認証設定

Google Translateの場合は、認証方法にService AccountまたはOAuth2のどちらかを選ぶことができます。今回はService Accountで設定します。

説明が長くなるので、Google Cloud Platform側の設定と、n8n側の設定で区切って紹介します。

4–1–1. Google Cloud Platform側の設定

Google Cloud Platformでは次の設定をします。

サービスアカウント発行と秘密鍵発行
Cloud Translation APIを有効にする

まずはサービスアカウントを発行します。
ハンバーガーメニューから「APIとサービス>認証情報」でページを開き、「認証情報を作成」ボタンから「サービスアカウント」を選択します。

サービスアカウント名を入力し「完了」ボタンを押します。

これで、サービスアカウントが発行されました。
認証情報ページに戻ると、サービスアカウントに今作成したアカウントが追加されています。ここに表示されているメールアドレスを、n8nの認証設定に利用します。

続いて、秘密鍵を発行します。
サービスアカウントのメールアドレスをクリックして詳細ページを開き、「鍵を追加」ボタンから「新しい鍵を作成」を選択します。

キーのタイプはJSONとして「作成」ボタンを押すと、秘密鍵のファイルがダウンロードされます。

これで、「1. サービスアカウント発行と秘密鍵発行」が完了です！

続いて、Google Translate APIを有効にします。
ハンバーガーメニューから「APIとサービス→ライブラリ」を選択してAPIライブラリページへ移動し、Cloud Translation APIを探します。

詳細ページの「有効にする」ボタンからAPIを有効化します。

以上でGoogle Cloud Platform側の設定は終わりです！

4–1–2. n8n側の認証設定

n8nのGoogle Translateダイアログに戻り、Authenticationに「Access Token」を指定します。
続いて、同じくダイアログ内のGoogle APIを指定します。
Create Newを選択すると、トークン設定用のダイアログが開くので、以下の値を入力します。

Service Account Email：GCPのサービスアカウントのメールアドレス
Private Key：秘密鍵ファイル内のprivate_key の値
以下のフォーマットに成形してから入力する必要があるので、注意です。

-----BEGIN PRIVATE KEY-----
KEY IN A SINGLE LINE
-----END PRIVATE KEY-----

「Save」ボタンを押し、接続が成功すると「Connection tested successfully」と表示されます。

これで認証設定は完了です！

4–2. 翻訳対象と言語を設定

引き続き、n8nのGoogle Translateダイアログでの操作です。
残りの以下の項目を設定してください。

Text：翻訳対象を設定
IF設定時と同様に、Github Triggerで取得した「プルリクコメントのbody」の値を、「Add Expression」メニューから設定します。
Translate To：翻訳先の言語
ドロップダウンメニューからEN（英語）を選択します。言語コードはGoogle Cloudのこちらのページで確認できます。
ドロップダウンメニューが表示されない場合は、歯車アイコンをクリックして表示される「Refresh List」から、リロードしてください。

4–3. テスト

ここまでの設定をテストしてみます。

手順は先ほどのGithub Triggerのテストと同様です。「Execute Node」ボタンを押してWaiting状態にしたあと、プルリクにコメントをつけます。
IF Node追加時に指定した条件を満たすようにコメントします。

次のようにコメントしてみました。

@translate_en
2回目のテストです。

n8nに戻ると、翻訳結果が表示されています。
いい感じですね！

5. HTTP Request：「コメント原文+英訳文」に編集して投稿

最後のステップです！
HTTP Request Nodeを追加します。

記事の途中で少し触れましたが、n8nにはGitHub API Nodeも用意されていて、これでは基本的なAPIが取り扱われています。
今回利用したいエンドポイントは対象外のため、フレキシブルな設定でHTTPリクエストを実行できるHTTP Request Nodeを利用します。

5–1. 認証設定

GitHub DocsのREST APIのページをを確認すると、認証には次の設定が必要なことがわかります。

Authorizationヘッダを使用してトークンを送信する方法が推奨
→ ヘッダに“Authorization: token OAUTH-TOKEN" を追加
利用するAPIバージョンをAcceptヘッダで指定する
→ヘッダに"Accept: application/vnd.github.v3+json" を追加

これらをn8nのHTTP Requestダイアログで設定していきます。
1点目のAuthorizationヘッダは、以下の手順で、それぞれの項目を設定します。

Authentication：Header Authを選択
Header Auth：Header Auth accountを選択
※Github Triggerの認証設定方法にAccess Tokenを選択していない場合は、新規登録する必要があります。「2. プルリクコメントをトリガーに設定 > 2–1. 認証設定」で紹介した手順を参考にTokenを発行/登録してください。

2点目のAcceptヘッダは、Headers項目に値を入力します。

Name：Accept
Value：application/vnd.github.v3+json

これで認証設定は完了です！

5–2. エンドポイント設定

GitHub Docsを確認すると、エンドポイントはこちらになることがわかります。

PATCH /repos/{owner}/{repo}/pulls/comments/{comment_id}

また、APIホストは共通でhttps://api.github.com です。

まず、Request Methodに「PATCH」を指定します。
URLには、Github Triggerで取得したデータを使うので式を追加します。歯車アイコンを押して、Edit Expressionダイアログを開きます。

以下の手順で設定します。

Expressionの入力エリアにエンドポイントのベースを入力
https://api.github.com/repos/{owner}/{repo}/pulls/comments/{comment_id}
{owner}に、GitHubアカウントIDを指定。
変数を利用する場合は、Variable Selectorツリーから「Nodes>Github Trigger>Parameters>owner」を選択
{repo}に、リポジトリ名を指定。
変数を利用する場合は、Variable Selectorツリーから「Nodes>Github Trigger>Parameters>repository」を選択
{comment_id}に、コメントIDを指定。
変数を利用する場合は、Variable Selectorツリーから「Nodes>Github Trigger>Output Data>JSON>body>comment>id」を選択

完了したら「×」をクリックしてダイアログを閉じます。

5–3. bodyを設定

以下の形式で投稿されるように指定します。

{コメント原文}
--- Translated Text ---
{英訳文}

ダイアログ内のBody Parametersセクションの「Name」に「body」と入力します。また、「Value」は歯車アイコンからAdd Expressionをクリックして、式を設定します。

{コメント原文}に、Variable Selectorツリーから「Nodes>Google Translate>Parameters>text」を指定
{英訳文}に、Variable Selectorツリーから「Nodes>Google Translate>Output Data>JSON>translatedText」を指定

6. ワークフローを実行してみる

ここまでの設定で、このようなワークフローが完成しました！
「Execute Workflow」ボタンを押して実行してみましょう。

ボタンの文字が「Waiting for Webhook-Call」に変わり、Waiting状態になります。

GitHubに移動し、プルリクに「@translate_en」から始まるコメントをつけてみます。
n8nに戻ると…成功メッセージが表示されてますね！

再びGitHubに戻ってリロードしてみると、無事元のコメントが編集されていました 🎉

成功ですね！お疲れさまでした🍵

感想

「プルリクコメントを自動翻訳できたら便利だったりしないかな〜」とアイディアドリブンで始め、どう作ろうか調べる中でn8nを知りました。
ツールチップが適所に設置してあったり、エラーが起きた時に公式ドキュメントの関連リンクをさっと表示してくれたり、飛び先のドキュメントも綺麗に整ってたりで、初見でもすんなり利用できました。

今回利用したGitHub、Google Translateの他にも、Slack、Jira、Salesforce、AWSなど、多くのサービスに対応しています。アイディア次第で業務効率化が捗りそうです。

ここまで読んでいただきありがとうございました！

We are Hiring!

株式会社ネクストビートでは

「人口減少社会において必要とされるインターネット事業を創造し、ニッポンを元気にする。」
を理念に掲げ一緒に働く仲間を募集しております。

バックエンドにはPlay Framework（言語はScala）、フロントエンドの開発には主にAngularを用いています。フルスタックに開発したい！という方のご応募をお待ちしております。