Visual Studio Code快適テクニカルノウハウ大全2019@FinGATE KAYABA https://algyan.connpass.com/event/137379/ の資料

1. 2019年8月22日
1
TOPPERSプロジェクト
ホーム・ネットワークWG 主査
長島 宏明／コアーズ株式会社
とぱめ

2. このスライドについて
2019/7/27にALGYANで開催した
「PinKitプレゼント付き！
TOPPERSカーネル＋Azure IoT 体験ハンズオン@横浜」
で使用したVSCodeの環境を構築する際に、
つまずいた点などをまとめた資料です。
2

3. TOPPERSプロジェクトとは?
 プロジェクトの活動内容
 ITRON仕様の技術開発成果を出発点として、組込みシステム構築の基盤と
なる各種の高品質なオープンソースソフトウェアを開発するとともに、そ
の利用技術を提供
 プロジェクトの推進主体
 産学官の団体と個人が参加する産学官民連携プロジェクト
 2003年9月にNPO法人として組織化
3
組込みシステム分野において、広く使われる
オープンソースのリアルタイムOSの構築を目指す！

4. H-IIB（JAXA)
キザシ (スズキ)
OSP-P300
(オークマ)
ひとみ(JAXA)
提供：JAXA，イラスト：池下章裕
スカイラインハイブリッド (日産)
SoftBank
945SH
（シャープ） PM-A970(エプソン)
UA-101 (Roland)
4
IPSiO GX e3300 (リコー)
開発成果物の主な利用事例

5. IoT関連で注目されるRTOS
AWS
 FreeRTOSを開発している組織ごと買収し、
組込み機器で使いやすいライセンスに見直して提供
arm
 Mbed OSとしてRTOSやドライバを含むソフトウェアを提供
The Linux Foundation
 組込み向けRTOSのZephyr OSを開発
5
IoTにはRTOSも必要

6. ハンズオン
 GR-PEACHで
Azure IoT Centralに
テレメトリーを
送信した様子
 対応プロトコルは
 HTTP
 MQTT
 MQTT over WS
6

7. VSCodeを使った経緯
 ハンズオンに使ったPinKitは、ArmのCPUを載せたGR-PEACHとセン
サーボードを合わせたもの
 組込み開発という分野で、開発言語はC言語
 GR-PEACHの開発はRenesas純正のEclipse IDE「e2studio」を使用
 Macユーザーにも参加してもらえるようVSCodeで開発環境を構築
 コンパイラのgccとデバッガのOpenOCDは、
同じ提供元で同じバージョンがWindows/Mac/Linuxに対応
7
VSCodeにすることで、IDEもWindows/Mac/Linux対応に！

8. VSCodeの魅力
 Windows/Mac/Linuxに対応
 豊富な拡張機能
 標準でGitと連携できる
 マークダウンのプレビューができる
 Githubを使うのに便利！
8
C/C++をビルドする仕組みと、
デバッグする仕組みが、
拡張機能として提供されている！
しかも組込みでも使える！

9. GR-PEACHの開発環境を整えるにあたって
 TOPPERSを使ったハンズオン
 標準のビルド手順のMakefileを使ったビルド
 使用したソースはhttps://github.com/h7ga40/azure_iot_hub_peach
 makeもgccも、UNIX系のコマンド
 Mac/Linuxではフツーに使える
 Windowsでは少し考慮が必要
 Makefileには、gccの実行だけでなく
 フォルダを作ったり、ファイルを消したりといった操作もある
 ファイル操作は、UNIX系のコマンドで記述されている
 mkdirやrmなどのコマンドも必要
9

10. コマンドシェル
 Windowsでmakeを実行するのに使われるものに
 cygwinやmsysがある
 Linuxと互換性の高いwslもある
 元々e2studio用にgccとOpenOCDをインストールしている
 このツールはmsysでビルドされたもの
 これに合わせてmsysを使うことにした
 cygwin、msys、wslの違いは
 makeを使う上で気を付けたいのは、パス表現
10

11. パス表現の違い
 cygwinとmsys版のコマンドの場合
 Windowsのパス表現「C:¥temp¥temp.c」→OK
 UNIXのパス表現「/c/temp/temp.c」 →OK
 ２つが混ざった「C:¥temp/temp.c」 →OK
 wslのコマンドの場合
 コマンド自体は、Linux向けのバイナリそのまま
 つまり、受け入れられるのはUNIXのパスだけ
11

12. パス表現の違いの問題
 VSCodeがファイルを開く際のパス
 コンパイラの出力（エラーや警告）に含まれるパス
 バイナリに含まれるデバッグ情報のソースコードのパス
12
これはWindowsのパス表現でなくてはいけません！
たぶん…

13. cygwinとmsysの違い
 ドライブパスに違いがある、「C:」であれば
 cygwinでは「/cygdrive/c/」
 msysでは「/c/」
 msysには本家？と分家？がある
 新しいバージョンコマンドや64bit版がある分家の方msys2を選択
13
パスの問題を避けるため、
手元のツールに合わせてmsysを選択

14. ツールについて
 msys2
 https://www.msys2.org/
 64bit版のインストール先「C:¥msys64」、bashは「C:¥msys64¥usr¥bin¥bash.exe」
 arm-none-eabi-gcc
 https://developer.arm.com/tools-and-software/open-source-software/developer-
tools/gnu-toolchain/gnu-rm/downloads/6-2017-q2-update
 インストール先「C:¥Program Files (x86)¥GNU Tools ARM Embedded¥6 2017-q2-
update」
 OpenOCD
 https://github.com/gnu-mcu-eclipse/openocd/releases/tag/v0.10.0-12-20190422
 インストール先「C:¥Program Files¥GNU MCU Eclipse¥OpenOCD¥0.10.0-12-
20190422-2015」
 詳しいインストール方法などは、ALGYAN運営の高瀬さんのQiitaの記事を参考に
https://qiita.com/takasehideki/items/59e3d179d462142a8633
14

15. ツールについての覚え書き
 msys2
 パッケージマネージャ「pacman」で、システムの更新や追加パッケージ
のインストールが可能
 TOPPERSではコンフィギュレーション用に「ruby」をインストール
 arm-none-eabi-gcc
 この資料のバージョンより新しいものがある
 OpenOCD
 この資料ではunofficial版を使っていた
 official版はhttp://openocd.org/getting-openocd/
 ターゲット設定のスクリプトに互換性がないかも…
15

16. 開発環境を整えよう！
WindowsでVSCode、GR-PEACHの開発環境を整えよう！
16

17. フォルダ構成
 ソースファイルやMakefile、出力先などのフォルダ構成
 e2studioで扱っていたフォルダ構成をそのまま適用
17
ワークスペース
プロジェクト
src
ソースファイル
Debug
Makefile ビルド結果出力先
自前／Eclipse CDEが自動生成 ビルド構成「Debug」の場合
VSCodeではMakefileの位置など、別のフォルダ構成が良い場合もあるかもしれません

18. VSCodeの操作手順
1. VSCodeのターミナルに設定
 settings.json
2. ビルドタスクを作成
 tasks.json
3. コンパイラの出力（警告やエラー）の処理を設定
 tasks.json/problemMatcher
4. デバッグの設定
 launch.json
18

19. 1.VSCodeのターミナルに設定
 VSCodeは開発ツールに応じてコマンドの実行環境を設定できる
 ターミナルでコマンドを実行するシェルを変更できる
 Windowsでの規定のシェルはPowerShell
 今回は、msysのシェル「bash」に変更
 msysをターミナルに設定する際、参考になったサイト
https://qiita.com/yumetodo/items/42132a1e8435504448aa
19

20. 作業をするフォルダを開く
 e2studioからの以降の場合
 下の図の「プロジェクト」の
フォルダをVSCodeで開く
 空のフォルダでも可
20
ワークスペース
プロジェクト
src
ソースファイル
Debug
Makefile ビルド結果出力先
ここ

21. ワークスペースの設定を開く
 Ctrl+,で「設定」画面を開き
「ワークスペース」タブを選択
 「Terminal > Integrated >
Shell: Windows」の左をマウス
ポインタでポイントすると出る
歯車アイコンをクリックすると
表示される「JSONとして設定を
コピー」を選択
 「shell」で検索すると早い
21

22. settings.jsonを編集
 「settings.jsonで編集」をク
リック
 Ctrl+Cで貼り付け
 msysのbashへのパスを設定
 bashの引数を「--login -i」に
22
{
…
"terminal.integrated.shell.windows":
"C:¥¥msys64¥¥usr¥¥bin¥¥bash.exe",
"terminal.integrated.shellArgs.windows": [
"--login",
"-i"
]
…
}

23. 環境変数の設定
 msysの動作を設定するための環境
変数を設定
 「settings.json」に追記
 「PATH」にGCCへのパス
 「MSYSTEM」に32bit版なら
「MINGW32」、
64bit版なら「MINGW64」
 「CHERE_INVOKING」にmsysの
作業ディレクトリ関連の動作設定
 「MSYS2_PATH_TYPE」にmsysの
PATH関連の動作設定
23
{
"terminal.integrated.shell.windows":
"C:¥¥msys64¥¥usr¥¥bin¥¥bash.exe",
"terminal.integrated.shellArgs.windows": [
"--login",
"-i"
],
"terminal.integrated.env.windows": {
“PATH": "C:¥¥Program Files (x86)¥¥GNU Tools
ARM Embedded¥¥6 2017-q2-update¥¥bin",
"CHERE_INVOKING": "1",
"MSYS2_PATH_TYPE": "inherit",
"MSYSTEM": "MINGW64",
},
…
}

24. ターミナルを表示
 Ctrl+@でターミナルを表示
 ターミナルを初めて表示したと
きに通知出る
 必ず「許可」を選択
 一度「許可しない」としてしま
うと二度と使えません！
24
対処法知っている方いませんか？

25. ターミナルを再表示
 Ctrl+@でターミナルを再表示
のような表示が出れば成功
（少し時間がかかります）
25
user@PC-NAME MINGW64 /d/projects/Algyan
$

26. 2.ビルドタスクを作成
 makeコマンドを呼び出すビルドタスクを作る
 ビルドと出力ファイルを削除する動作２つを作る
 ビルドはターミナルで「make -j all」と入力するのと同じ動作とする
 「build app」という名前とする
 出力ファイルを削除するにはターミナルで「make -j clear」と入力する
のと同じ動作とする
 「clear app」という名前とする
 ちなみに「-j」はCPUのコア数分で並列実行するための指定
 マルチコアなPCでは、makeが高速になる
 弊害として、並列に実行したコンパイラの出力が混ざってしまい、ファイルパスが
特定できないことがある
26

27. タスクの作成
 Ctrl+Shift+Bで「ビルド タスク
の実行」を行う
 「tasks.json」ファイルがないと、
「実行するビルド タスクがあり
ません。ビルド タスクを構成す
る」が表示されるので、選択
27

28. ビルドタスクをテンプレートから追加
 「テンプレートから tasks.json
を生成」が表示されるので、選
択
28

29. ビルドタスクを任意のコマンドから追加
 テンプレートがいくつか表示さ
れるので、「Others 任意の外部
コマンドを実行する例」を選択
29

30. ビルドタスク設定
 「.vscode」フォルダに
「tasks.json」ファイルが生成さ
れ、開かれる
 例は「echo Hello」を実行する
タスク
30

31. タスク「echo」を実行
 メニューから「ターミナル」→
「タスクの実行」を選択
 出力のスキャンについて聞かれ
るので
「今後このタスクの出力はス
キャンしない」を選択
 ターミナルに結果が表示される
31
> Executing task: echo Hello <
Hello
ターミナルはタスクで再利用されます、閉じるには任意のキーを
押してください。

32. tasks.jsonの内容
 ターミナルで「echo Hello」と
入力したのと同じ動作になる
 「echo ${selectedText}」など
に変更すると、
VSCodeで用意されている変数の
内容が確認できる
32
{
// See
https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "echo",
"type": "shell",
"command": "echo Hello“,
"problemMatcher": []
}
]
}
 変数の種類については下記参照
https://code.visualstudio.com/docs/editor/variables-reference

33. ビルドのためのタスク追加
 ビルド タスク
 「make –j all」コマンドを実行するタスク
 「group」に「build」を指定すると「ビルド タスク」になる
33
{
…
"tasks": [
{
"label": "build all",
"command": "make.exe"
"args": [ "-j", "all" ],
"group": {
"kind": "build",
"isDefault": true
}
},
…
makeコマンドを指定
makeコマンドの引数を指定

34. 出力ファイルを削除のためのタスク追加
 出力ファイルを削除するタスク
 「make –j clean」コマンドを実行するタスク
 ビルドタスクのコピぺでコマンド引数を変える
34
{
…
"tasks": [
{
"label": "clean all",
"command": "make.exe"
"args": [ "-j", “clean" ],
"group": "build",
},
…

35. 3.コンパイラの出力の処理を設定
 コンパイルエラーなどの出力を解析する
 「problemMatcher」を「$gcc」にすればGCCの出力を処理できる
 少し違った動作をさせたいときは、下記のように記述
35
…
"problemMatcher": {
"owner": "cpp",
"fileLocation": [
"relative",
"${workspaceFolder}/Debug"
],
"pattern": {
"regexp": "^(.*):(¥¥d+):(¥¥d+):¥¥s+(warning|error|fatal error):¥¥s+(.*)$",
"file": 1, "line": 2, "column": 3, "severity": 4, "message": 5
}
},
…
Makefileのあるフォルダ
Makefileからの相対パス

36. Makefileの位置とスキャンパス
 Makefileでは、ソースコードへの相対パスでgccなどのコマンドを呼ぶ
 GCCの出力は「Makefile」からの相対パスでソースコードが指定される
 スキャン結果と合うよう「fileLocation」は「Makefile」の位置にする
36
app
src
main.c
Debug
Makefile main.o app.elf
fileLocation
../src/main.c:100:4: error: undefined symbol
${workspaceFolder}/Debug/../src/main.c
workspaceFolder

37. 4.デバッグの設定
 GBDとOpenOCDを使ってデバッグする設定をする
 GDBはarm-none-eabi-gccに付属するarm-none-eabi-gdb
 GR-PEACHとはOpenOCDで繋げる
 VSCodeはGDBと対話してソースコードデバッグができる
 GDBはデバッグサーバーとしてOpenOCDと接続する
37
CMSYS-DAP OpenOCD TCP:3333 GDB

38. デバッグ画面の表示
 サイドバーのデバッグアイコン
を押し「デバッグ」画面を表示
38

39. ビルド設定ファイルの作成
 歯車ボタンを押し、
「C++(GDB/LLDB)」を選択
 「.vscode¥launch.json」が作
成さる
39

40. launch.jsonの内容
 作成されたlaunch.jsonの内容
 GDB向けのテンプレートが作成される
 GDBやOpenOCDの*.exeへのパスをフルパスで設定
 OpenOCDはコマンド引数にターゲット用のスクリプトファイルを設定
40
{
// IntelliSense を使用して利用可能な属性を学べます。
// 既存の属性の説明をホバーして表示します。
// 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "(gdb) Launch",
"type": "cppdbg",
"request": "launch",
"program": "enter program name, for example ${workspaceFolder}/a.exe",
…

41. GDBとOpenOCDの起動設定
 「launch.json」の下記の部分を書き換え、または追加
41
{
…
"program": "${workspaceFolder}/Debug/${workspaceFolderBasename}.elf",
"args": [],
"stopAtEntry": false,
"cwd": "${workspaceFolder}/Debug",
"environment": [],
"externalConsole": false,
"targetArchitecture": "ARM",
"MIMode": "gdb",
"miDebuggerPath": "C:¥¥Program Files (x86)¥¥GNU Tools ARM Embedded¥¥6 2017-q2-update¥¥bin¥¥arm-none-
eabi-gdb.exe",
"debugServerPath": "C:¥¥Program Files¥¥GNU MCU Eclipse¥¥OpenOCD¥¥0.10.0-12-20190422-
2015¥¥bin¥¥openocd.exe",
"debugServerArgs": "-f interface/cmsis-dap.cfg -f target/renesas_rza1h_swd.cfg",
"setupCommands": [
{
…
ビルド結果へのパス
作業フォルダ
GR-PEACHのCPU、ARMを指定
GCCのインストールパス
にあるGDBを指定
OpenOCDの
インストールパス
OpenOCD起動時の引数
ターゲットデバイス固有の
スクリプトファイルを指定

42. GDBとOpenOCDの起動設定（続き）
 GDBのセットアップコマンドを追加
42
{
…
"setupCommands": [
{
"text": "-target-select remote localhost:3333",
"ignoreFailures": false
},
{
"text": "-enable-pretty-printing",
"ignoreFailures": false
},
{
"text": "symbol-file ${workspaceFolderBasename}.elf",
"ignoreFailures": false
}
…
GDBからOpenOCDへの接続
バイナリコードと
ソースコードの対応付け情報のみ設定
GR-PEACHはバイナリをCMSYS-DAP経由で書き込めないため「symbol-file」
書き込めるデバイスは「-file-exec-and-symbols ${workspaceFolderBasename}.elf」

43. マルチワークスペースについて
 アプリで使うライブラリを別途ビルドしておきたいことがある
 アプリもライブラリも、それぞれのワークスペースとしたい
 Makefileが異なる
 ビルド時間の短縮
 「.vscode」の配下の設定ファイルはそのまま有効
43
マルチワークスペース
アプリのワークスペース
.vscode src
ソースファイル
Debug
Makefile
ライブラリのワークスペース
.vscode inc
ヘッダーファイル
src
ソースファイル
Debug
Makefile

44. マルチワークスペースへの変更
 メインのフォルダを開く
 アプリをメインとする
 アプリのワークスペースのフォ
ルダを開く
44

45. ライブラリのワークスペースを追加
 ライブラリのワークスペースを
追加
 「ファイル」メニューの「フォ
ルダーをワークスペースに追
加」で、ライブラリのワークス
ペースのフォルダを開く
45

46. マルチワークスペース
 アプリとライブラリを持つマル
チワークスペースになった
46

47. マルチワークスペースを保存
 ワークスペースを保存
 「ファイル」メニューの「名前
を付けてワークスペースを保
存」で、ワークスペースを保存
 ファイル名に「*.code-
workspace」の拡張子が付いた
ファイルに保存される
 以降このファイルを開くとマル
チワークスペースで開くことが
できる
47

48. マルチワークスペースの注意
 スキャンパスを注意したMakefileにする
 ライブラリのヘッダーファイルの参照などワークスペースを跨ぐ参照があ
る
 GCCの出力するパスをワークスペースのフォルダ名を含む形にする
48
マルチワークスペース
lib1
inc
lib1.h
src
lib1.c
Debug
Makefile
lib2
inc
lib2.h
src
lib2.c
Debug
Makefile
app
src
main.c
Debug
Makefile
../../lib2/inc/lib2.h:200:8: warning: macro redefined
../../app/src/main.c:100:4: error: undefined symbol
workspaceFolder
fileLocation

49. 最後に
 外部ツールが使える
 VSCodeが知らないツールを使ってユーザーが機能拡張できる
 ユーザー環境に依存するパスを設定する必要がある
 WindowsでUNIX系のツールを使う
 パス表現の違いに注意する
 CPUメーカ純正開発環境にあってVSCodeにないもの
 ディスアセンブルやレジスタ表示がない
 外部ポートのレジスタ表示がない
49
SONYはSPRESENSE向けVSCodeの開発環境提供を発表
今後他のメーカーも対応してくれることを期待
Cortex-Debugはまだ試してません
本日更新のC/C++ ver.0.25では動かないことが判明…

50. 50

51. 51

52. 52
ありがとうございました