WokwiのArduinoシミュレータをVS Codeで動かす

ブラウザベースのマイコンボードシミュレータWokwiでコンパイルに時間が掛かって実行できない場合に，ローカル環境でシミュレーションを実行する方法を説明する． Wokwiの解説ページに書かれている内容と同じ．

VS Codeをインストールする

公式サイトからインストーラをダウンロードし，Visual Studio Codeをインストールする．

つぎに，VS Codeを起動して拡張機能のWokwi Simulatorをインストールする

1. Ctrl+Shift+P (Cmd+Shift+P) → 拡張機能をインストール(Extensions: Install Extensions)を選択
2. 検索ボックスに「Wokwi」を記入
3. Wokwi Simulatorを選択してインストールする

VS Codeの日本語化

VS Codeのメニューを日本語化するには，拡張機能の「Japanese Language Pack for Visual Studio Code」をインストールしてから，VS Codeを再起動する． 再起動後に「Change Language and Restart」というボタンが表示されるのでそれを押す．

Arduino IDEをインストールする

Arduino IDEをインストールする．

1. 自分のPC環境に合ったDownload optionを選択する
2. 任意で寄付するか，寄付せず「JUST DOWNLOAD」からインストーラをダウンロードする
3. インストーラを起動してArduino IDEをインストールする
4. Arduino IDEを起動して，設定画面(Preference)を開く
5. 設定タブの「より詳細な情報を表示する」(Show verbose output during)の「コンパイル」(compile)にチェックを入れて「OK」

Wokwiのプロジェクトファイルを準備する

Arduino UnoにLEDとスライド抵抗を接続したサンプルプロジェクトのファイルはこちら↓

myproject.zip

自分でプロジェクトファイルを準備する場合は下記のとおり．

1. シミュレーションしたいWokwiのプロジェクトページにアクセスする

   • プロジェクトを新規に作成する場合は空のArduino Unoプロジェクトを開き，＋ボタンを押して必要な部品を配置して回路を組む

2. 左上の「SAVE」ボタンのオプションから「Download project ZIP」を選択してプロジェクトファイル一式をダウンロードする

3. ダウンロードしたZipファイルを展開し，sketch.inoとdiagram.jsonを作業フォルダ（仮にmyprojectとする）にコピーする

4. 作業フォルダmyprojectに下記テキストファイルをwokwi.tomlとして保存する

   [wokwi]
   version = 1
   firmware = 'sketch.ino.hex' # sketch.inoをコンパイルして生成したhexファイルのパス
   elf = 'sketch.ino.elf' # sketch.inoをコンパイルして生成したelfファイルのパス

Arduino IDEでスケッチをコンパイルする

1. ダウンロードしたWokwiプロジェクトファイルのZipを展開する

2. sketch.inoをArduino IDEで開く．フォルダを自動に作成するか？と聞かれるのでyes

3. 「ボードを選択」→「他のボードとポートを選択」→ボード「Arduino Uno」を選択して「OK」．ポートは選択しなくてよい

4. Arduino IDE左上の✔ボタンを押してコンパイルする

5. 正常にコンパイルできたら，下記のようなメッセージが表示されるはず

   win

   ...
   "C:\\Users\\myname\\AppData\\Local\\Arduino15\\packages\\arduino\\tools\\avr-gcc\\7.3.0-atmel3.6.1-arduino7/bin/avr-size" -A "C:\\Users\\myname\\AppData\\Local\\arduino\\sketches\\C935736F0A842F5A12D3938477EAEB16/sketch.ino.elf"
   最大32256バイトのフラッシュメモリのうち、スケッチが1984バイト（6%）を使っています。
   最大2048バイトのRAMのうち、グローバル変数が194バイト（9%）を使っていて、ローカル変数で1854バイト使うことができます。

   mac

   ...
   /Users/myname/Library/Arduino15/packages/arduino/tools/avr-gcc/7.3.0-atmel3.6.1-arduino7/bin/avr-size -A /Users/myname/Library/Caches/arduino/sketches/AEAF276E5C3B94E2BB709B5EBC40BF48/sketch.ino.elf
   最大32256バイトのフラッシュメモリのうち、スケッチが2224バイト（6%）を使っています。
   最大2048バイトのRAMのうち、グローバル変数が188バイト（9%）を使っていて、ローカル変数で1860バイト使うことができます。

   コンパイルメッセージにsketch.ino.elfが含まれるフォルダの場所が表示される． ファイルパスが表示されない場合は，Arduino IDEの設定で「より詳細な情報を表示する」の「コンパイル」にチェック

6. sketch.ino.elfを含むフォルダをエクスプローラ(ファインダー)で開く．

   • Windows: Win+Eでエクスプローラを開いて，Ctrl+Lでアドレス欄に移動先フォルダのパスをコピペする．フォルダの区切りが\\となっているので，\に修正する
   • macOS: ファインダーでCmd+Shift+G→移動先フォルダのパスをコピペする

7. sketch.ino.elfとsketch.ino.hexを作業フォルダmyprojectにコピーする

VS CodeでWokwiシミュレータを起動する

1. ブラウザでWokwiにアクセスし，右上の「SIGN UP/SIGN IN」ボタンからログインしておく．アカウントを作成していない場合は作成する

2. VS Codeで作業フォルダmyprojectを開く

3. diagram.jsonをVS Code上で開くとシミュレータ画面が表示される

4. ライセンスが無いという警告が表示されるので「Get your License Key」をクリックする

5. ブラウザでWokwiのページが開くので「GET YOUR LICENSE」を選択

   Caution

   商用利用の場合は有料ライセンスの購入が必要

6. ブラウザからVS Code画面に遷移して．．．

7. VS Code上でライセンスを受け入れるとシミュレータが起動できるようになる

Tip

スケッチファイルを編集するには，Arduino IDEやWokwiページでsketch.inoを編集する． 編集後のsketch.inoを上記の手順でコンパイルし，myproject以下のhexファイルとelfファイルを更新する． 回路を変更する場合は，Wokwiページで編集し，diagram.jsonを差し替える．