GR-CITRUSの動作確認&圧力センサーFSR406でアナログ値を取得するまでの奮闘記

GR-CITRUSを試しに軽く動かしてみようと思ったのですが、
恥ずかしながらアナログ値取得に辿り着くまでに時間がかかったので、
備忘録として導入手順を記載しておきます。

# 環境・材料
- MacOS Mojave 10.14.6
- Visual Studio Code 1.39.1 → 1.30.2（後述します）
- [GR-CITRUS-FULL](http://akizukidenshi.com/catalog/g/gK-10281/) × 1
- [圧力センサーFSR406](http://akizukidenshi.com/catalog/g/gP-04158/) × 1
- 抵抗10kΩ × 1
- ブレッドボード × 1
- ジャンパーワイヤ  × 必要な分（私は3本使いました）

# 躓きポイント①：VSCodeにRubicをインストールする
VSCodeからRubyで開発を行うために、拡張機能であるRubicをインストールします。
左の一番下のアイコンをクリックし、「Rubic」を検索してインストールします。
<img width="1300" alt="Rubicインストール.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256451/bf8474da-f866-b654-500e-de66bae8d303.png">
そのまま書いてあるクイックスタートに従います。
>1.VSCodeで、作業するフォルダを開きます。
>2.F1を押し、「Rubic」と入力します。
>3.「Rubicのボードカタログを開く」を選びます。

適当にフォルダーを作ってVSCodeで開き、中に「**main.rb**」というファイルを一つ作っておきます。
F1を押して「Rubic」と入力します。
<img width="627" alt="Rubicのボードカタログを開く.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256451/2ae71d07-0bc2-4d3a-16e3-8efab86a2f3d.png">
サジェストが出てきたので、押しました。
<img width="461" alt="extension.rubic.showCatalog is not Found.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256451/f536e86e-7560-06f9-2488-cb8356fd5772.png">
>command 'extension.rubic.showCatalog' not found

**右下にエラーが出ました。**
### インストールが不十分だった？
インストールで失敗したのかな？と思い、Rubicをアンインストール→再インストールしましたが、結果は変わらずです。
アンインストールした後、User配下の隠しフォルダ.vscodeに拡張機能のデータが残っているという話も聞いたので、
そこのデータも削除して再度インストールしてみましたが、エラーのままでした。

### ①の解決策：VSCodeのバージョンに気を付ける
何が原因なのか分からなかったので、Rubicの説明ページの一番下に載っているGitHubページに飛んでみました。
（フィードバックの項の「不具合報告は〜」のところです）
すると、一番上の質問が目に入りました。
<img width="1167" alt="VSCode1.31.0でRubicが使用できない.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256451/5dcfc5c3-b373-255a-6b66-f3e4ab6022b4.png">
**Rubicは、VSCode 1.31.0以降は対応していない**とのこと。
あれ？　今の自分のVSCodeバージョンいくつ？　と確認してみたところ、**1.39.1**でした。
[VSCode 1.30.2](https://code.visualstudio.com/updates/v1_30)をインストールしてきて解決しました。

# GR-CITRUSにファームウェアを書き込む
無事エラーが出なくなったので、GR-CITRUSをPCに接続します。
接続できると、GR-CITRUSのLEDが赤く光ります。
光らない場合はリセットボタンを押して待つと光る場合があります。
![GR-CITRUS接続.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256451/fc2bcb5f-3a4e-9e08-dd50-8e6db82799f5.jpeg)
Rubicコマンドでボードカタログが開けたと思うので、ハードウェア情報を順に設定していきます。
大体一番上のものを選べば大丈夫です。

| 項目名 | 選択するもの |
|:-:|:-:|
| ボード | GR-CITRUS |
| リポジトリ | wrbb-v2lib-firm |
| リリース | Release v2.50 |
| バリエーション | 最小構成版 |
ここまで選ぶと詳細という項目になります。
「接続先」でGR-CITRUSのUSBデバイス名を選びましょう。
（/dev/tty.usbmodem〜みたいな名前だと思います）
ちなみに、この状態で「接続テスト」を押しても、デバッグコンソールでエラーメッセージが出ると思います。
右下に「デバイスの構成設定を保存しますか？」というポップアップが出てくるので
保存して、詳細項目の「ファームウェアをボードに書き込む」というボタンを押します。
案内に従って、リセットボタンを押したりして書き込みが終わるのを待ちましょう。
書き込みが終わった後、「接続テスト」を押すとファームウェア識別子が表示されると思います。
<img width="1304" alt="ファームウェア書き込み後.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256451/5b51679a-fc57-ce99-e7a8-cdae3cb72603.png">

# コードを書く（Hello World）
コードを書きます。
先ほど作っておいたmain.rbに、以下のコードをコピペします。

```ruby:main.rb
usb = Serial.new(0)
usb.println("Hello World")
```
簡単にHello Worldを出すコードです。
再びRubicのクイックスタートに従って進めます。
>9.実行したいコードを、main.rb(mrubyの場合)/main.js(Duktapeの場合)に記述してください。
>10.F5を押し、「Rubicデバッガ」を選ぶと、デバッグ設定が作成されます。
>　(このとき「launch.json」が自動的に開かれますが、編集する必要はありませんので閉じて下さい。)
>11.もう一度F5を押すと、あなたの書いたプログラムがボードに転送され、実行されます。

上書き保存した後、F5を押してデバッグを開始します。
初回はデバッガの選択肢が出てくると思いますので、「Rubic デバッガ」を選択してください。
「デバッグファイルが作成されました」というメッセージが出たので、もう一度F5を押してみました。
しかし、**先ほどと同じデバッガの選択肢が出てきて、何も起きませんでした。**

# 躓きポイント②：デバッグが開始されない
「おかしいなあ」と同じ操作を何度も繰り返す中、ふとクイックスタートの文字が目に入りました。
>　(このとき「launch.json」が自動的に開かれますが、編集する必要はありませんので閉じて下さい。)

開いたフォルダの構成を見ても、launch.jsonが存在しませんでした。

### ②の解決策：launch.jsonをデバッガに認識させる
F1を押してlaunch.jsonを探そうとすると、「launch.jsonを開く」というサジェストが出てきたので、
それを選択してみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256451/73612eff-902b-474d-243a-95b366769648.png)
こんなファイルが開かれました。
その上でもう一度main.rbに戻り、F5を押してみると、デバッグが開始されました。

# 結果
コンソールに「Hello World」が表示されました。
よく見ると、左のデバッグバーで「Launch」が選択されているのが分かります。
<img width="1310" alt="デバッグ画面.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256451/7f755058-2b91-f900-9151-a76457c5ec23.png">
また、フォルダ構成を見ると、「main.mrb」というファイルが新しく作成されているのも確認できました。

# コードを書く（圧力センサー値取得）
先ほどと同じ作成手順を踏んで、今度は圧力センサーFSR406のアナログ値をGR-CITRUSで取得します。
下記のコードをmain.rbにコピペして保存してください。

```ruby:main.rb
usb = Serial.new(0)
analogReference(2)  # アナログ値範囲0〜1023
pinMode(14, INPUT)
100.times do        # 100回データを取得したら終了
    usb.println(analogRead(14).to_s)
    delay(100)
end 
```

# 配線
圧力センサーFSR406をGR-CITRUSと接続します。
<img width="815" alt="スクリーンショット 2019-10-30 12.38.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256451/505cbc50-b4ee-cc8a-eb10-c2dae3c8d4fa.png">
![MicrosoftTeams-image (62).jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256451/da8addac-f417-ea83-3167-5fe517545ee0.jpeg)
# 結果
デバッグを開始して圧力センサーを曲げると、値が変化するのが分かります。
<img width="1311" alt="圧力センサーFSR406.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256451/ef275dca-4ce2-cf81-15dd-da5723f95103.png">

# まとめ
説明文を読むことや、環境の調査をしっかり行うことは大切だな、と痛感しました。
初めてRubyを触りましたが、これからGR-CITRUSでの開発を通じて
どんどんコードを書けるように頑張りたいと思います。