Help us understand the problem. What is going on with this article?

VS Codeで翻訳をする拡張機能を作成した

All About Group(株式会社オールアバウト) Advent Calendar 2019 17日目になりました。
16日目担当の@cflat0528です。つまるところ遅刻です。

弊社では、オフショア開発が行われており、最近ではソースコードのコメントが日本語であったり、英語であったり入り混じってきました。また、ライブラリ内のコメントなんかは日本語で書かれていることは殆どありません。

私、母国語が日本語であるため、それ以外の言語で書かれると読むのが少々面倒です。
そこで、その問題を技術で解決しようと試みました。

この記事の内容

本記事では、Visual Studio CodeにてGoogleの Cloud Translation APIを利用し、翻訳を行う拡張機能を作成した際の手順をまとめた記事となります。

拡張機能を作成したい、Cloud Translation APIを利用したい、という方に参考になるかもしれません。
なお、この記事は2019/12/16に作業した内容となりますので、それ以降に閲覧した場合、記事内容が古くなっている可能性があります。ご了承ください。

なお、この記事内に紹介する拡張機能のソースコードなどはGithub上に公開しております。

開発の流れ

今回の開発では大まかに以下の作業を行いました。

  1. Hello Worldのサンプル拡張機能作成
  2. Cloud Translation APIの利用方法調査
  3. 実装 & テスト
  4. 拡張機能のインストール

これを順を追って説明していきたいと思います。

1. Hello Worldのサンプル拡張機能作成

まず、初めに公式のサンプルである、Hello Worldの表示を行いました。(おそらく他の拡張機能作成の記事でも紹介されていると思います)

こちら、日本語の記事としては少し古めですがVisual Studio Code はじめての拡張機能開発が参考になるかなと思います。
ここについては私もこちらを参考にさせていただいたので行った作業の詳細は割愛いたします。

2. Cloud Translation APIの利用方法調査

こちらは、基本的にクイックスタートに従い動作方法の調査を行いました。
主な作業としてはクイックスタートのとおりですが、

  • サービスアカウント作成
  • GOOGLE_APPLICATION_CREDENTIALS環境変数を設定
  • 翻訳を行うコードの実行

を行いました。

以下に詳細を記載します。

サービスアカウントの作成

サービスアカウントの発行は以下のようにCloud Translation APIの認証情報の設定画面からサービスアカウントの作成を行いました。
スクリーンショット 2019-12-17 19.08.06.png

サービスアカウントを作成時、以下のように、サービスアカウントにCloud Translation APIの権限を付与します(今回であればCloud Translation APIユーザー
設定しないと、PERMISSION_DENIED: Cloud IAM permission 'cloudtranslate.generalModels.predict' denied.で弾かれるかと思います。
スクリーンショット 2019-12-17 19.27.09.png

設定後、サービスアカウントのJSONファイルをダウンロードします。

余談ですが、オールアバウトの開発用GCPではIAM設定がSRE管理であるため設定ができず開発中に一度詰みました。
会社の環境を利用する、という方はあまりいないとは思いますがご注意ください。

環境変数の設定

先程、作成したサービスアカウントのJSONファイルを環境変数に指定します。

export GOOGLE_APPLICATION_CREDENTIALS="/home/user/Downloads/サービスアカウントの.json"

私は今後も利用するため.zshenvに設定しました。また、Downloadsディレクトリ内のjsonファイルを参照するのはどうかと思ったため適当なディレクトリにjsonファイルは移動しております。

コード実行

上記設定後、
npm install --save @google-cloud/translate
を適当なディレクトリで実行、ライブラリをインストールし、サンプルのコードを多少変更したものを実行しました。

const projectId = 'hogehoge'; // 利用するGCPのプロジェクトID
const text = 'Hello World !';

const {TranslationServiceClient} = require('@google-cloud/translate').v3beta1;

// Instantiates a client
const translationClient = new TranslationServiceClient();
async function translateText() {
  // Construct request
  const request = {
    parent: translationClient.locationPath(projectId, 'global'),
    contents: [text],
    mimeType: 'text/plain', // mime types: text/plain, text/html
    sourceLanguageCode: 'en-US',
    targetLanguageCode: 'sr-Latn',
  };

  // Run request
  const [response] = await translationClient.translateText(request);

  for (const translation of response.translations) {
    console.log(`Translation: ${translation.translatedText}`);
  }
}

translateText();

うまく行けば以下のようになるかと思います。変な日本語です。

$ node test.js
Translation: こんにちは世界 !

3. 実装

ここまでで、開発に必要そうな情報がある程度揃ったため実装を行いました。
実装についてはgithub上に公開してありますので、そちらを御覧ください。

基本は、調査した翻訳機能の利用、Hello Worldのときに利用したshowInformationMessageの利用、後はテキストの選択範囲の取得を行っています。
また、翻訳の際に利用するGCPのプロジェクトは、vscodeの設定画面で設定できるようにしています。

選択範囲の取得及び、設定画面からのデータ取得はVSCode拡張機能開発で次の一歩を参考にしました。ありがとうございます。

4. 拡張機能のインストール

ここまでで機能自体は完成したため、これを実際にエディタにインストールしたいと思います。
今回は公開せず、個人的にインストールできるようにパッケージ化してインストールを行いました。
ここでは以下の作業を行います。

  • Azure DevOpsでのトークン発行
  • vsce(VS Code Extension Manger)でのパッケージ化
  • 拡張機能のインストール

なお、基本的に作業はPublishing Extentionsを参考にしました。

Azure DevOpsでのトークン発行

まずAzure DevOpsでのトークン発行を行います。これは、次のパッケージ化を行う際に必要になります。
まず、Azure DevOps登録、サインインを行います
その後、右上のPersonal access tokensNew Tokenからトークン発行を行います。
スクリーンショット 2019-12-17 20.10.10.png
スクリーンショット 2019-12-17 20.12.12.png

発行時の注意はOrganizationの設定をAll accessible organizationsとすることです。
しないとError: Failed Request: Unauthorized(401)とエラーが返ります。(返りました)
また、トークンは作成時にしか表示されないので忘れないように注意が必要です。

vsceでのパッケージ化

次に、拡張機能のインストールに必要なvsixファイルの作成を行います。
ここで行う作業は以下の通りです。

  • vsceのインストール
  • Publisherの作成
  • vsixファイルの作成

まず作成するためにvsce(VS Code Extension Manger)のインストールを行います。

$ npm install -g vsce

次に、Publisherの作成を行います。
vsce create-publisher (Publisher名) を実行するとメールアドレスやアクセストークンなどが聞かれるため、自身のアドレスや先程取得したアクセストークンを設定します。
この時、(Publisher名)はpackage.jsonに設定されているpublisherと同じである必要があるため注意が必要です。(設定されていない場合は設定しましょう)

$ vsce create-publisher testPublisher
Publisher human-friendly name: (testPublisher) 
E-mail: hoge@example.com
Personal Access Token: 取得したトークン

これができたら、後はvsixファイルを作成します。

$ vsce package

実行後、ディレクトリ内に(拡張機能名)-(バージョン名).vsixというファイルが作成されます。
package.json内などに設定項目が足りないとWARNINGが出ますが今回は無視しています。
(今回はWARNINGとしてA 'repository' field is missing from the 'package.json' manifest file.が表示されましたが、この拡張機能の公開予定が現在なかったため一旦無視しました)

インストール

作成された、vsixファイルのインストール方法は、以下の画像の通り、拡張機能のメニューにvsixファイルからのインストールがあるため、そこからインストールすることで利用が可能になります。
スクリーンショット 2019-12-17 21.56.04.png

結果、以下の様に動作します。わりと嬉しいです。便利かは、まだ分かりませんが。
翻訳拡張2.gif

余談:公開

今回、作成した拡張機能は未公開ですが、公開するのであれば、

$ vsce publish

と実行すれば公開されるかと思います。(試していません)
詳細はPublishing Extentionsを御覧ください。

今後の課題

今回、これで動作するところまではできましたが、まだまだやれることは残っているなと感じます。
例えば、

  • 翻訳結果が右下に出てくるので画面サイズ次第だが見づらい
    • 選択した文字の近くとかに出したい
  • 設定してるGoogleのCredentials情報が変えられない
    • $GOOGLE_APPLICATION_CREDENTIALSの値を読んでいるが、別のサービスアカウントを利用しようとすると翻訳できなくなる
  • 翻訳元言語は何でもいいが、翻訳先言語は日本語に限定されている
    • 設定画面に追加したほうが良い
  • 拡張機能のアイコンの設定などは行っていない

この辺の課題を解決してもう少し利便性を上げていけるといいかなと思っております。

まとめと感想

今回、初めて拡張機能を作成しましたが、小規模な拡張機能なら開発は結構簡単に終わりました。(が文章が間に合わず遅刻しました)
ちょっとしたもので、欲しいけども見当たらない、というような機能があれば作成されるのも一つの手段かと思います。
気が向いたら作成してみてはいかがでしょうか。

なお、類似の拡張機能がたくさんあるようなので現状では公開予定はありませんが、機能追加後、良さそうなら公開しても良いのかなと思います。

その他参考資料

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした