まだプログラマーですが何か?

プログラマーネタ中心。たまに作成したウェブサービス関連の話も https://twitter.com/dotnsf

タグ:vscode

人気のテキストエディタである Visual Studio Code(以下 "VSCode")の機能を独自に拡張するプラグインの開発に挑戦してみました。以下で紹介するプラグインの開発は主にこのページにかかれている内容を参照し、参考にさせていただきました。ありがとうございます:
Visual Studio Codeの拡張機能を一通り触って自分用に公開するまで


作った拡張機能は MOTD(Manhole of this day) といいます:
https://marketplace.visualstudio.com/items?itemName=dotnsf.manholeofthisday

2020062305


機能は名前そのままですが、拙作マンホールマップの機能の1つである「今日のマンホール」を VSCode 内に表示する、というマンホーラー向けのものです。

VSCode にこのプラグインをインストールするには左ペインから「拡張機能」を選ぶか、Ctrl + Shift + X を押して拡張機能画面に移動し、検索バーに "manholeofthisday" と入力します("manholeof" あたりまで入力すると、検索候補が一つになります)。そして「インストール」と書かれた箇所をクリックしてインストールします:
2020062301


インストール後、実際に MOTD 機能を利用する場合は Ctrl + Shift + P でコマンドパレットを開き、このパレットに "MOTD" と入力してコマンドを検索し、最後に見つかった MOTD 部分をクリックします:
2020062302


MOTD コマンドを実行した日(月&日)のマンホールがマンホールマップの「本日のマンホール」に記録されて存在していた場合は VSCode 内の新しいタブが一つ追加され、その中で「本日のマンホール」画像と説明が表示されます。なおこの機能の実現には Webview API を使っています:
2020062303


画像部分をクリックすると、ブラウザで該当マンホールのマンホールマップ内ページが開き、より詳しい情報を参照することができる、というものです:
2020062304



この MOTD プラグインのソースコードはこちらで公開しています。開発言語として TypeScript を選ぶこともできましたが、今回は JavaScript で開発しました。この手軽さもハードル低くていいですね:
https://github.com/dotnsf/manholeofthisday

 

このエントリの続きです:
Visual Studio Code Live Share でモブプログラミング(1)


前回 VSCode LiveShare を使うまでの準備段階とその手順を紹介しました。今回は実際に VSCode LiveShare を使ってモブプログラミングを行うまでの手順と、使っている時の様子を紹介します。

なお VSCode LiveShare を使う場合、開発画面を提供する人(ホスト、1名)と、ホストの開発画面を使って開発に参加する人(ゲスト、1名以上)それぞれで手順が異なります。以下順を追って紹介しますが、ホスト側の手順はこの色で、そしてゲスト側の手順はこの色でそれぞれ紹介していきます。


【ゲストの招待】
まずはホストとなる人からゲストとなる人へ、Live Share に参加するための URL を送信する必要があります。このホストとなる人の VSCode の環境(ファイルシステム、ファイル)を共有することになる点にご注意ください。この手順は前回紹介した準備手順が全て完了している状態から続けて以下を行います。


まず VSCode を開き共有するプロジェクトを1つ作成して開きます。ここで開いている画面を共有することになる点に注意してください。したがって関係のないプロジェクトフォルダが含まれるような画面ではなく、共有するプロジェクトフォルダだけが開いているような画面にしておくのがよろしいと思います:
2020042008


なお、この例ではフォルダの中に README.md ファイル1つだけが入っている状態からスタートする例を紹介します:
2020042105



プロジェクトの準備ができたら VSCode 画面左下の、ログインしている自分のアカウント名をクリックします:
2020042006


メニューが表示されたら一番上の Invite Others(Copy Link) と書かれた部分をクリックします。これで招待用 URL がクリップボードにコピーされた状態になります:
2020042007


そのままメールやメッセンジャーなどを使って、招待するゲストの人達全員に先程コピーした内容をペーストして共有 URL を送信します:
2020042009


ホスト役の人の作業はいったんこれで完了です。次はゲスト役の人達の作業となります。


【ゲストとしてプロジェクトに参加】
ゲスト役の人達は上述の最後の手順で送信された共有 URL 付きのメッセージを受け取ったら、そのリンクをクリックします:
VSCLS00



ゲストのログインが環境していない場合、ウェブブラウザで VSCode LiveShare を使うためのアカウントログインを行います。以下は GitHub を使って OAuth ログインする場合の画面です。必要であればアカウントにログインします:
VSCLS01


そして OAuth を行うため、内容を確認して Authorize ボタンをクリックします:
VSCLS02


ログインが完了すると以下のようなダイアログが表示され、Visual Studio Code が選択されていることを確認して「リンクを開く」ボタンをクリックします:
VSCLS03


この際に Live Share プラグインがこの URI を開くことを許可するか?と聞かれたら、OK をクリックして許可してください:
VSCLS04


またゲストが Windows を使っている場合、初回だけは Visual Studio Live Share Agent の実行をファイアウォールに許可する必要があります。以下の画面が出たら「アクセスを許可する」を選択してください:
VSCLS05


ここまで成功すると、ゲストの VSCode でホストの VSCode プロジェクトが共有されている状態になります。ホストが共有したプロジェクトをゲストの VSCode 内でも開いていることを確認してください:
20200421001


【ゲストがプロジェクトを編集】
ここから先の作業はホストでもゲストでもいいのですが、今回はゲストがプロジェクトを中心的に作っていくものとして紹介します。というわけで引き続きゲスト側の作業となります。

ゲストの VSCode 内で新規にファイルをプロジェクトに追加したり、そのファイルを編集したり保存したりすることができます。これらの変更はあくまでホストのファイルシステムに対する変更ですが、その作業はゲスト側から行うことができるようになっています:
20200421002


なお、このゲストが行った変更はホスト側の VSCode でもリアルタイムに変更が反映されます:
2020042101


更に同時にホストも、また他のゲストもプロジェクトの同じソースコードに対して変更を行うことが可能です。Google Drive の同時編集機能を使ったことがある人であれば、あれのソースコードプロジェクト版だと理解いただくとわかりやすいかもしれません。また他のファイルを編集することも可能ですが、共有される画面はあくまで1つ(ホストのもの)であることに注意してください。

このような共同作業を通じてプロジェクトを作っていきます。


【ターミナルの共有】
ある程度プロジェクトができあがると動作確認をしたくなります。VSCode LiveShare ではホストのターミナル(Shell や PowerShell)を共有してコマンドを実行することで動作確認作業を共有することが可能となっています。

実際にターミナルを共有するにはホスト側で再度画面左下の自分の名前をクリックし、表示されるメニューから Share Terminal を選択します:
2020042102


ターミナルに対するゲストの権限を指定します。"Read-only" はターミナル自体はホストだけが作業をして、ゲストはターミナルの様子を見ることができる、というモードです。一方 "Read/write" はゲストもターミナルに対してコマンドを実行することができるモードです。ターミナルはかなり強い権限で実行され、想定外のコマンドを指定されてもそのままホストのPC上で実行してしまうので、よほど信頼できる相手と共有している場合のみ後者を選ぶべきだと思います:
2020042103


ターミナルを共有すると、ホストの PC が Windows であれば PowerShell、それ以外であれば Shell 画面が VSCode 画面内に表示されます(ターミナルアプリを WSL などにを変更することも可能です 参照):
2020042104


同時にゲストの VSCode 画面内にも同じターミナルが表示されます。モードによってはゲストからこのターミナルにコマンドを指定して実行することも可能です:
20200421003


このターミナルから Node.js などのコマンドを実行するなどしてテストや動作確認を行い、その結果を全員が共有することが可能です。



と、このような形で VSCode LiveShare を使うことができます。実際にはこの機能とウェブ会議システムを併用して、ホスト役の人が行う内容をプレゼンテーションと音声で共有しつつ、実際のプログラミング時には VSCode LiveShare の画面を共有する形でモブプログラミングを進める、といったことができそうです。

この方法であれば、従来の画面共有だけを使ったモブプログラミングと比較して、エラーが発生した時の内容を共有しやすいという大きなメリットが挙げられます。ホスト役でない人の PC で発生したエラーの内容をホストやサポート役の人が把握するのが難しいのですが、VSCode LiveShare を使っていると、エラーの様子も共有されることになり、その内容からどこをどう直せばよいか、というアドバイスもしやすくなると考えられます。


普段のエディタは Vi(m) か ATOM(+vi プラグイン)を気に入って使ってます。軽量で使いやすく、vi の慣れたキーバインドで使えるという点にメリットを感じています。 が、最近になって Visual Studio Code(以下 VSCode)を vi キーバインドで使うという選択肢も気になっています。特に後述する Visual Code Live Share(以下 VSCode LiveShare)は、今日のようなオンライン中心のイベントや勉強会で使える共同開発ツールとしてポテンシャルを感じています。そんなわけで、このブログでも VSCode LiveShare を使ったモブプログラミング(共同開発作業)を紹介しようと思いました。まず今回は環境準備の説明です。


【前提条件】
Windows 7 以上、64 bit Linux、 または macOS 10.13 以上 を使っている必要があります。VSCode 自体は Raspberry Pi などの他環境向けにも提供されていますが、後述する VSCode LiveShare プラグインは動作環境が限られているようで、現時点(2020/04/20)では Windows, Linux または macOS を使う必要があるようです。


【VSCode のインストール】
VSCode の公式サイトから VSCode をダウンロードして(普通に)インストールしてください。なお、VSCode LiveShare を使う場合はバージョン 1.22 以上が必要です。


【VSCode LiveShare プラグインのインストール】
VSCode LiveShare は VSCode を使ったコーディングの共同作業を行うツールです。それを実現するための拡張機能が VSCode LiveShare プラグインです。このプラグインは共同作業におけるホスト役の人(自分のコードを他の人に編集させる人)だけでなく、ゲスト役の人(他の人のコードを編集する人)の環境にも両方にインストールが必要です。

インターネットに接続された状態で VSCode を起動し、画面左のメニューから Extension タブを選び、検索フィールドに Live Share と入力して検索します。その名の通りの Live Share プラグインが見つかるのでこれをインストールします:
2020042001


プラグインのインストールの最後にリロードを促されるのでリロードします。この後バックグラウンドで依存ライブラリのインストールが始まり、完了まで少し待ちます。

プラグインのインストールが完了すると画面左下が以下のようになり、Live Share が利用可能になっていることがわかるようになります:
2020042002


なお、VSCode に(日本語化パックや VIM など)他のプラグインを使う場合はこのタイミングで必要なものを導入しておいてください。


【ログイン】
VSCode LiveShare で共同作業する際、「誰が」コードを編集しているのかがわかりやすいようにログインする必要があります。VSCode LiveShare の場合、Microsoft アカウントまたは GitHub アカウントで OAuth 認証を行う必要があります。以下は GitHub アカウントを使ってログインする例を紹介します。

上述画面の Live Share と白抜きで表示されている部分をクリックしてログインします。下図のような表示になるのでログインに利用するアカウントを選んで進めます(以下は "Sign in with GitHub" を選んだものとして説明を続けます):
2020042003


選択したアカウントの OAuth 認証の画面が表示されます。内容を確認して、許可(Authorize)するボタンをクリックします:
2020042004


プログラムを起動するダイアログが表示されたら、"Visual Studio Code" が洗濯されていることを確認して「リンクを開く」をクリックします:
2020042005


再び VSCode の画面に戻ります。この時点で画面左下にログインしたアカウントのユーザー名が表示され、VSCode LiveShare を利用するための準備も完了しています:
2020042006


これで VSCode LiveShare を使う準備ができました。次回はこの続きで実際に VSCode LiveShare を使う様子を紹介する予定です。


(2020/04/23 追記 続きはこちら)
http://dotnsf.blog.jp/archives/1077356596.html


ラズベリーパイをデスクトップ用途で使う場合のテキストエディタとしては現時点でこれが最適かなあ、と思うのが Visual Studio Code です。ラズベリーパイ環境にもインストールできるようになっていました。


導入にあたり、まずは GPG Key をインストールしておく必要があります:
$ wget -qO - https://packagecloud.io/headmelted/codebuilds/gpgkey | sudo apt-key add -

その後、root で Visual Studio Code の Community Build をインストールします:
$ sudo su
# . <( wget -O - https://code.headmelted.com/installers/apt.sh )
# exit

導入後はメニューから code-oss を選択するか、コマンドラインから以下を実行して起動します:
$ code-oss

2019-01-13-093932_1184x624_scrot
 

普段が vi 使いなので比較の対象としてアレですが、複数ファイルを開いて切り替える使いやすさとか、補完機能とか、いわゆる「モダンな」機能が満載で、それでいてそんなに重いわけでもなく、いい感じ。


このページのトップヘ