sti320a

勉強したことのまとめ

VSCodeから直接コードを共有できる拡張機能 Harigami for VSCodeを作った

先日、Qiitaで紹介したWebサービス「Harigami」のVSCode拡張を作成したので、開発でハマった部分を含め、共有します。

Harigamiとは

Harigamiは、ログインや新規登録不要で、ソースコードを共有できるWebサービスです。

Harigami

f:id:sti320a:20190103182425p:plain

トップページの入力フォームに共有したいソースコードを入力し、言語を選んで送信します。 すぐにURLが発行され、モーダルに表示されるので、それをコピーして共有します。

f:id:sti320a:20190103182512p:plain

そのままTwitterやLINEで共有することもできます。

詳しくはこちらの記事をご覧ください。

ログイン不要／最短15秒でソースコードを共有できるWebアプリ「Harigami」を作った

HarigamiのVSCode拡張

今回紹介するHarigami for VSCodeは、Harigamiのコード共有機能を、Visual Studio Codeから利用可能にしたものです。 操作はとても簡単で、以下の動画のように、VSCodeでコードを書き、コマンドパレットから「Harigami for VSCode」を選択して実行するだけです。


Harigami VSCode拡張機能 サンプル

すぐにURLが発行され、ポップアップに表示されるので、それをコピーして共有することができます。 共有時に、ブラウザでHarigamiを開く必要がありません。

拡張機能開発の流れ

VSCodeの拡張機能の開発は簡単でした。 おおまかな流れは以下のようなものです。

  1. generatorをインストールする

    npm install -g yo generator-code

  2. 下記コマンドで雛形を生成。対話形式で初期設定を行う

    yo code

  3. 生成されたextension.tsを編集して開発する

    • extension.tsを編集する。
    • VS Code APIを利用して、ポップの表示を制御したり、エディタの記述内容、言語の取得ができる。
    • HarigamiへのPOST Requestには、Node.jsのrequestモジュールを利用した。

  4. package.jsonを編集する

    • 拡張機能の名前や説明を記述する
    • 拡張機能をactivateしたときに実行するコマンドを設定する
    • version情報を記述する
    • dependenciesを記述する（←重要：当たり前だが、これを忘れていたために、開発環境で動くのに本番でエラーが発生してハマった。詳細は後述。）
    • Marketplaceで公開するには、別途、Azure DevOpsにて、publisherの登録が必要。登録後にjsonにも記述する

  5. vsce publishでMarketplaceに公開する

    • 基本的には下記の１コマンドで公開できる（かんたん） vsce publish

    • vsce publish のあとに、「major」「minor」「patch」を指定することにより、バージョンを上げてくれる

    • majorは「1.0.0」、minorは「0.1.0」、patchは「0.0.1」の単位でバージョンを更新する
    • 公開から数分以内でMarketplaceに反映される

Harigami for VSCodeの仕組み

Harigami for VSCodeは、VSCodeでアクティブなエディタの内容を取得して、Harigamiに送信します。 VS Code APIの、window.activeTextEditor.document.getText()で、アクティブなエディタに記述されているテキストを取得できます。

また、window.activeTextEditor.document.languageIdで、言語の情報を取得できます。 取得できる言語のIdは「python」のように、言語名の先頭が小文字になっているものがほとんどです。

そのため、表記がHarigamiに登録されているものと異なる場合には、修正してHarigami側の言語名に置き換えるようにしました。

取得したテキストと言語情報を、Node.jsのrequestモジュールを利用してHarigamiに送信します。

Harigamiのサーバーサイドに、専用のAPIを用意し、そこにPOST Requestを送信しています。

APIは、Harigamiのサーバーサイドで発行したURLを返します。ユーザーはそのURLを利用してコードを共有することができます。

ハマったところ

基本的にローカルの環境では、難しいことはありませんでした。 VS Code APIは使いやすく、デバッグも簡単に行えるので、スムーズに開発ができました。

個人的にハマったのは、Marketplaceに公開した後に、vscode extension develop running the contributed command: 'extension.submit2harigami' failed.というエラーが発生し、利用できなくなることでした。開発環境で同様のエラーは発生せず、本番環境のみ、エラーが発生しました。

本番環境でデバッグ機能は使えないため、window.showInformationMessage()という、ポップアップに任意のメッセージを表示するAPIを利用し、printデバッグのようにして原因を特定しました。

エラーの原因は、単純で、package.jsにdependenciesを書き忘れていたことでした。package.jsには、devDependenciesという項目があり、こちらには依存関係を記述していましたが、dependenciesは空になっていました。よって、ここにdevDependenciesと同様の依存関係を記述することにより、エラーが解消されました。