cangoxina

生産性向上見習いのブログ的な何かです

VS CodeのRemote Containerを使ってEV3RT開発環境をどこでも再現する【ETロボコン】

Docker ETロボコン ノウハウ プログラミング 生産性向上 作ってみた

f:id:korosuke613:20191208205042p:plain

みなさん、EV3RTの開発環境はどのように構築していますか？

王道はTOPPERS公式の方法ですよね。 Windows, Linux, macOSのそれぞれの方法が載っていますが、Windowsの場合Cygwinを入れなければならないなど、環境構築は正直めんどうです*1。

そこで、これまで、Windows向けにWSLを使った環境構築方法や、Dockerを使った環境構築方法を記してきました。

今回は、VS CodeのRemote Container機能を使ってEV3RT開発環境をどこでも再現する方法を記します。

ビルド環境ではなく、開発環境であることが本記事のミソです。

ETロボコン&EV3 Advent Calendar 2019 7日目の記事です*2。

目次

Remote Containerとは

VS CodeはMicrosoftが開発している多機能エディタです。VS Codeで使える拡張機能として、Remote Containerというものがあります。

Remote Containerは、開発環境を閉じ込めたDockerコンテナ上で作業できるというものです。チームメンバの開発環境の統一、新しいマシンでのすばやい環境構築、ホストマシンの環境を汚さない*3といった利点があります*4。

使い方

Remote Containerを有効にする

Remote Containerがまだ有効でない方は、下記のリンクからRemote ContainerをVS Codeにインストールして拡張機能を有効にしてください。

marketplace.visualstudio.com

etrobo-docker-devcontainer-templateリポジトリをclone

僕はetrobo-dockerというEV3RTビルド環境をコンテナ化したイメージを作っています。

そのイメージを利用してRemote Containerを使うことができるサンプルコードを用意しています。今回はそのサンプルコードを利用します。

こちらのリポジトリをローカルにcloneしてください。

(Use this templateをクリックして、リポジトリを複製することもできます。その後にcloneするのもおすすめです。)

git clone --depth=1 https://github.com/korosuke613/etrobo-docker-devcontainer-template.git

VS Codeでcloneしたディレクトリを開いてReopen in Containerする

clone先のディレクトリをVS Codeで開きましょう。

f:id:korosuke613:20191208192746p:plain

おそらく、このような画面になっているはずです。

もし、右下にReopen in Containerのボタンがあるなら、そのボタンをクリックしてください。

なければ、左下にある><のボタンをクリックし、

f:id:korosuke613:20191208193020p:plain

Reopen Folder in Containerを選択してください。

f:id:korosuke613:20191208193038p:plain

完了！

Reopen in Containerすると、.devcontainer/docker-compose.ymlを元に、etrobo-dockerイメージをプルし、コンテナを構築し始めます。（イメージサイズが600MB近くあるので、初回は少し時間がかかります。）

左下の><にDev Container: etrobo-dockerと表示されていれば、完了です。

f:id:korosuke613:20191208194226p:plain

機能

etrobo-docker-devcontainer-templateで使える機能を紹介します。

etrobo-docker-devcontainer-templateには、今すぐ使えるサンプルコードを内包しています。(HackEV向け) 以下の機能はサンプルコードを使って今すぐ試すことができます。実用する際は、カスタマイズしてください。

また、以下の拡張機能が初期状態でインストールされています。

EV3RTアプリのビルド

当たり前ですが、EV3RT向け実行ファイルのビルドができます。

ターミナルを起動して、以下のコマンドを実行してください。

etrobo@551ae4c20f5b:/home/hrp2/sdk/workspace/product$ ./make.sh

いつもの表示がでたあと、appという実行ファイルが生成されているはずです。

etrobo@551ae4c20f5b:/home/hrp2/sdk/workspace/product$ ls
LICENSE       README.md  app.cfg  app.h              include  src
Makefile.inc  app        app.cpp  class_diagram.png  make.sh

appをev3rt/appsにつっこむことで、実行できます。

C++ソースコードの自動補完

etrobo-docker-devcontainer-templateはms-vscode.cpptoolsという拡張機能を有効にしているため、以下の画像のように、C++の自動補完が有効になっています。（画像は上記リンクより引用）

f:id:korosuke613:20191208200704p:plain

C++ソースコードの保存時フォーマット

.vscode/settings.jsonに、

    "C_Cpp.clang_format_style": "file",
    "editor.formatOnSave": true,

という項目があります。この設定によって、ソースコードの保存時(Cmd + sなど)に自動でフォーマットしてくれます。

C_Cpp.clang_format_styleをfileにしているので、.clang-formatのフォーマット設定に合わせてフォーマットしてくれます。

カスタマイズ方法

このテンプレートをもっとそれぞれのチームにあったものにカスタマイズできます。

例えば、新たな拡張機能を有効にしたり、シェルをzshにしたり...

どこをいじればどこが変わるかを記します。

拡張機能を追加したい

拡張機能を追加したい場合、左サイドバーのExtensionsからインストールするだけでは不十分です。再びコンテナを作成した場合に、新しく追加した拡張機能は反映されません。

.devcontainer/devcontainer.jsonに追記することで永続的に反映できます。

例えば、Material Iconをインストールする場合、そのIDはpkief.material-icon-themeになります。

{
    "name": "etrobo-docker",
    "dockerComposeFile": "docker-compose.yml",
    "extensions": [
        "formulahendry.terminal",
        "ms-vscode.cpptools",
        "streetsidesoftware.code-spell-checker",
        "pkief.material-icon-theme"
    ],
    "service": "etrobo-docker",
    "workspaceFolder": "/home/hrp2/sdk/workspace/product",
    "shutdownAction": "stopCompose"
}

extensionsにIDであるpkief.material-icon-themeを追加するとうまくいきます。

シェルを変えたい（コンテナをいじりたい）

シェルを変えるなどのコンテナそのものをいじりたい場合は、etrobo-dockerイメージを改良すればそれができます。

.devcontainer/docker-compose.ymlには、image: korosuke613/etrobo-docker:7.3-1と記されており、このimageをベースにするという風になっています。なので、ここを変更することでコンテナのカスタマイズができます。

今回は、oh-my-bashをインストールする改良をやってみます。

Dockerfileの追加

etrobo-dockerをベースにして、oh-my-bashをインストールするDockerfileを.devcontainer/Dockerfileに追加します。

FROM korosuke613/etrobo-docker:7.3-1

USER etrobo

RUN sh -c "$(wget https://raw.githubusercontent.com/ohmybash/oh-my-bash/master/tools/install.sh -O -)"

ベースイメージの変更

.devcontainer/docker-compose.ymlのimage: korosuke613/etrobo-docker:7.3-1をbuild: .に変えました。これで、同ディレクトリ内のDockerfileをベースにコンテナを作成します。

version: "3"
services:
  etrobo-docker:
    build: .
    command: sleep infinity
    volumes:
      - ../:/home/hrp2/sdk/workspace/product
      - ~/.gitconfig:/home/etrobo/.gitconfig
      - ./.bashrc:/home/etrobo/.bashrc
    environment:
      SHELL: "/bin/bash"
      HOME: "/home/etrobo"

こんな感じ

f:id:korosuke613:20191208203209p:plain
oh-my-bashをインストールできました。カラフルになりましたね。 実際にカスタムした例がこちらです。

以上のような感じでetrobo-dockerに＋α任意の機能を追加することができます。

VS Codeのautosaveを有効にしたい(VS Codeの設定を変えたい)

ファイルをいちいちCmd + Sで保存...というのは面倒だし、ビルド後に保存してなかった！という事態が予想できます。

自動保存を有効にしたい場合は、.vscode/settings.jsonをいじってVS Codeの設定を変えましょう。

    "files.autoSave": "afterDelay",

これでチームメンバ全員が自動保存してくれるようになります。

デバッグ方法

すみません。需要があればいつか書きます*5。方法はあります。

おわりに

いかがだったでしょうか？

VS CodeとRemote Containerを組合せることで、簡単に開発環境を構築、統一できます。

これにより、チームメンバの開発環境の統一が簡単にできるようになり、コード整形ツールインストール講習会をする必要は無くなりましたね。

ぜひ活用し、生産性を上げていきましょう！

（もし、うまく動かない！など困ったことがあれば、コメントしてください...）

2019/12/09追記

oh-my-zshとoh-my-bashを間違えていました...

そういえば、ETロボコン2019で使ってたときにzsh入れたいけどzsh入れると重そう？とかいう謎の理由でoh-my-bashをインストールしていたのでした。

俺は何を見てたんだ

*1:毎年、1年生数人を対象にMindstormを動かしてもらうのですが、はじめは公式の方法で環境構築をやりました。同じWindowsを使っているくせに全員すんなりできることはなかったです。

*2:一日遅くなってしまいました...すみません....

*3:VS Codeの拡張機能も閉じ込めることができるので、左サイドバーに拡張機能アイコンがずらりと並ばなくてすみます。

*4:もっとうまく説明できればいいのですが...

*5:そろそろ疲れてきた...


スポンサーリンク