Longan Nanoを使ってみる 1 ～ビルド環境の構築～

# ビルド環境の構築

ここでは、Longan Nanoの説明と開発環境のインストール、サンプルの書き込みと実行を行う。

# 全体の目次
[Longan Nanoを使ってみる 1 ～ビルド環境の構築～](https://qiita.com/BUBUBB/items/7ce85ada67a3f6d1944d)
[Longan Nanoを使ってみる 2 ～デバッガの環境設定～](https://qiita.com/BUBUBB/items/864b2ef9404453810d5f)
　[Sipeed RISC-V Debugger](https://qiita.com/BUBUBB/items/61316a4df1d9f81e2864)
[Longan Nanoを使ってみる 3 ～デバッガの使用方法～](https://qiita.com/BUBUBB/items/8efa5989e7f16f67672e)
[Longan Nanoを使ってみる 4 ～printfを使ったデバッグ～](https://qiita.com/BUBUBB/items/b607a3eedc4b66e7a74f)
[Longan Nanoを使ってみる 5 ～ゲームのプロジェクトを作成～](https://qiita.com/BUBUBB/items/98d9c25120c0955d5200)
[Longan Nanoを使ってみる 6 ～文字出力～](https://qiita.com/BUBUBB/items/8dee2eabe78f38364674)
　[Longan Nanoを使ってみる ～FONTX2ファイルを作る～](https://qiita.com/BUBUBB/items/8760ac886423bf06be68)
[Longan Nanoを使ってみる 7 ～外枠とブロックを書く～](https://qiita.com/BUBUBB/items/96abb1158b413c9efd27)
　[Longan Nanoを使ってみる ～謎の画像表示関数～](https://qiita.com/BUBUBB/items/40b99468839e1daeebfb)
[Longan Nanoを使ってみる 8 ～ボールを動かす～](https://qiita.com/BUBUBB/items/92f4816af3c41ea13b9e)
[Longan Nanoを使ってみる 9 ～A/Dコンバータから入力～](https://qiita.com/BUBUBB/items/311c179f7d3a0e30495d)
[Longan Nanoを使ってみる 10 ～パドルを動かす～](https://qiita.com/BUBUBB/items/eb8149c68f6e5456e7ca)
[Longan Nanoを使ってみる 11 ～ボタンの入力](https://qiita.com/BUBUBB/items/2445940a6b0d2110ee04)
[Longan Nanoを使ってみる 12 ～ボールのロス～](https://qiita.com/BUBUBB/items/f8c6ff860de127c93cb9)
[Longan Nanoを使ってみる 13 ～ステージの遷移とゲームオーバー～](https://qiita.com/BUBUBB/items/f1ae81b835f55abe319e)
[Longan Nanoを使ってみる 14 ～PWMとサウンド～](https://qiita.com/BUBUBB/items/3b592078d30cfed0ec53)
[Longan Nanoを使ってみる 15 ～音楽を鳴らす～](https://qiita.com/BUBUBB/items/adb35e02209ad78dfa9b)
[Longan Nanoを使ってみる 16 ～とりあえずのまとめ～](https://qiita.com/BUBUBB/items/ba782ccc80f50b7ab8c3)

# 注意
このページは、quiita.com で公開されています。URLがqiita.com以外のサイト、例えばjpdebug.comなどのページでご覧になっている場合、悪質な無許可転載サイトで記事を見ています。正しいURLは、https://qiita.com/BUBUBB/items/7ce85ada67a3f6d1944d です。
無許可転載サイトでの権利表記（CC BY SA 2.5、CC BY SA 3.0とCC BY SA 4.0など）は、不当な表示です。
正確な内容は、qiitaのページで参照してください。

# Longan Nanoとは
Longan Nanoは、sipeed 社の作ったGD32VF103CBプロセッサを搭載した開発用の小型ボード。フルカラーのLEDと小型のカラーTFT液晶を搭載して 800円前後（ [秋月電子・2022/2/10現在](https://akizukidenshi.com/catalog/g/g114678/)）と非常に安いのが特徴。
<img width="30%" alt="longanNANO.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2096509/ae624383-fc46-4485-a75f-260b5535093b.jpeg">



デバッガも1000円程度（[千石通商](https://www.sengoku.co.jp/mod/sgk_cart/detail.php?code=EEHD-5JEA)）で売られており、デバッガを使用するとソースコードレベルでのデバッグができるようになり、PC感覚でマイコンを使用できる。

追記：どこも最近は売り切れか取り扱い終了のようだった。[マルツ](https://www.marutsu.co.jp/pc/i/33122581/)では購入できそうだが、中の人はDigikeyらしい。 回路自体は秋月電子で売られている [FD2232D USB シリアル2ch変換モジュール](https://akizukidenshi.com/catalog/g/gM-02990/)とほぼ同じなので、代用可能かもしれない。(未確認）その場合、結線については、[このページ](https://qiita.com/BUBUBB/items/864b2ef9404453810d5f)や、[このページ](https://qiita.com/BUBUBB/items/61316a4df1d9f81e2864)を参考にしてほしい。Windowsのデバイスドライバなどは、どちらも同じチップなのでそのまま使用できるはず。結線だけは考えないといけないので、[シリアル2ch変換モジュールの回路図](https://akizukidenshi.com/goodsaffix/AE-FT2232_AE-FT2232withEEPROM_20211124.pdf)と、[Sipeedの回路図](https://github.com/kprasadvnsi/tang-doc/releases/download/1.0.0/FT2232D.Schematic.pdf)を比べて試行錯誤すること。

[USB接続(簡易)JTAG Debugger を作る](https://www.gniibe.org/memo/development/gnuk/hardware/diy-jtag-debugger-ftdi2232.html)という記事がほぼそのまま使用できる


2,000円でおつりがくる程度で試せるのでダメ元でも壊しても懐はたいして痛まないだろう。
（実際に遊ぶゲームを作るには、ブレッドボード、圧電スピーカーなど、多少の追加が必要だが）

下の写真がゲームを開発して動かすために必要な部品の全て。すでに、半田ごてなどがあれば、部品代は本体、デバッガを含めて3,000円はかからない。

<img width="50%" alt="DEV.JPG" src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2096509/cb70fcad-0c84-49c5-ce4b-32306faf35f5.jpeg">





というわけで買ってきてからゲームが動くようになるまでを記録していこうと思う。

# 用意するもの
このページで用意が必要なものは次の通り

- Windows PC (Windows10/11)
- Longan Nano 本体
- microSD (16GBytes程度あれば十分すぎる)
- USB Type-Cケーブル （PCとLongan Nanoを接続する）



# 開発環境の構築

Longan Nanoでは、開発にPlatform IOを使用する。一般的には、Visual Studio Codeのプラグインとして使用されているようだ。

## Visual Studio Codeのインストールと日本語化

[Visual Studio code](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)をダウンロード、インストール。インストールが終わったら起動し、左側の [Extensions]をクリック、上にあるテキストボックスに [Japanese Language Pack]と入力、表示された [Japanese Language Pack for Visual Studio Code]をクリック、右側ペインで[Install]をクリックする。

<img width="50%" alt="vscode1.png" src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2096509/ce4afd57-c0d3-dd9f-17cd-988af472be36.png">

インストールが終わると再起動を促されるので、VSCodeを再起動。日本語化されて起動されてくる。

<img width="50%" alt="vscode2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2096509/da8343e0-2b64-6390-963c-4a9ae03b5e89.png">


## Platform IOのインストール
Platform IOも、日本語化の言語パックと同じようにExtensionで作成されているので、手順は同じ。
左側の [Extensions]をクリック、上にあるテキストボックスに [PlatformIO]と入力、表示された [PlatformIO IDE]をクリック、右側ペインで[Install]をクリックする。

<img width="50%" alt="vscode3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2096509/19fab57e-9232-15dd-01d6-6d7c6b59af63.png">

インストールはすぐ終わる・・・ことはなく、画面右下ペインに進捗状況が表示されている。それなりに早いネットワークでも10分程度はかかるので、ウインドウを閉じずに待つ。

<img width="50%" alt="vscode4.png" src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2096509/f68584ba-947b-865f-9ebb-f732021fd82d.png">

インストールが終了すると、VSCodeの再起動を促されるので再起動する。

再起動すると、VSCodeにPlatformIOが追加されている。左側バーの蟻？のようなアイコンと、ステータスバーの部分の家のマークが、PlatformIOの機能を呼び出すボタンとなる。
<img width="200" alt="vscode5.png" src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2096509/d4a5629e-0fec-3ff8-30a3-92ec82e78f4a.png">

ステータスバーの家のアイコンをクリックし、PlatformIOのホーム画面を表示、Project Examplesをクリックする。

<img width="50%" alt="vscode7.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2096509/ee9885ab-dee5-5666-a912-9ac9fa3ce1f2.png">

初期状態では、Examplesが空なので、次のダイアログが表示される。Install Embedded Platformをクリック。

<img width="50%" alt="vscode8.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2096509/79a4b2c3-a55e-7e52-78c1-a46915604bfa.png">

テキストボックスに、GD32Vと入力、検索するとGigaDevice GD32Vが表示されるので、デバイス名をクリック。

<img width="50%" alt="vscode9.png" SRC="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2096509/c2865540-dc6c-f60c-70b3-cea55122e692.png">

プラットフォームの一覧が表示される。この中にLongan NanoとLongan Nano Liteがあることを確認し、Installをクリック。

<img width="50%" alt="vscode10.png" SRC="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2096509/b7b35165-af91-db82-c27e-a3bf8a9175e8.png">

インストールには時間がかかるので、気長に待つ。インストールが終了すると、ダイアログが表示される。OKを押して閉じる。
<img width="30%" alt="vscode11.png" SRC="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2096509/cb64d76e-1e37-f9ac-7a80-2d16ca3fb802.png">

ホームボタンを押し、Platform IOのホームを表示させる。ProjectExamplesをクリック。
<img width="50%" alt="vscode7.png" SRC="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2096509/02caa40c-e763-6e87-29d9-993bea67243f.png">

Exampleの一覧に、Longan Nanoがあることを確認しておく。確認が終わったら、ダイアログはXを押して閉じてよい。

<img width="50%" alt="vscode12.png" SRC="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2096509/3055ec9a-9a25-7936-264d-4741cc322c5f.png">

これで、Platform　IOの基本的な設定は終了。



# USBからの書き込み
このページは、Sipeed RV Debuggerを使用するが、使用しないでLongan Nanoに書き込むようにできるようにしておく。トラブルがあったとき、デバッガが悪いのか、本体が悪いのかなど切り分ける必要があるため。
このモードでの書き込みはDFUモードというらしい。（Device Firmware Updateのことかな？）

## 書き込みツールのダウンロード
[Sipeedのツールダウンロードページ](https://dl.sipeed.com/LONGAN/Nano/Tools)から、GD32_MCU_Dfu_Tool_V3.8.1.5784_1.rarをダウンロードする。（ファイル名はバージョンにより異なるかもしれない）

中には次のようなファイルが含まれている。

```
ルート
 +--GD32 MCU Dfu Drivers_v1.0.1.2316
 |      +--x64
 |          +--GD32 MCU Dfu Drivers.exe    64bit Windows用ドライバ
 |      +--x86
 |          +--GD32 MCU Dfu Drivers.exe　　多分32bit用ドライバ？
 |    
 +--GD32 MCU Dfu Tool_v3.8.1.5784
            +-- GD32 MCU Dfu Tool.exe　　　書き込みツール
            +-- GD_MCU_DLL.dll
            +-- GigaDevice Dfu Tool User Manual.pdf
```

書きこむ対象のファイルも必要なので、サンプルをダウンロードする。
[Sipeedのファームウェアダウンロードページ](https://dl.sipeed.com/LONGAN/Nano/Firmware)から、BadApple_demmo.zipをダウンロードしておく。

中には、次のようなファイルが含まれている。

```
badapple_demo.bin　　…プログラム本体。今回書き込む対象のファイル
bmp.bin …　データファイル。microSDのルートディレクトリに配置
logo.bin …　データファイル。microSDのルートディレクトリに配置
```

microSDカードをFAT32でフォーマット、bmp.bin と logo.binをルートフォルダにコピーし、Longan Nanoに挿入しておく。

## ドライバのインストール

ダウンロードした rarファイルに含まれている、GD32 MCU Dfu Drivers.exe　を管理者権限で実行する。右クリックメニューから、「管理者として実行」を選択。

![driver1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2096509/44fe57ad-7de5-5234-30d7-88848df851bb.png)

インストールするかの確認ダイアログが表示されるので[インストール]をクリック。

<img width="50%" alt="driver2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2096509/6b537f45-66e6-7488-b1ec-0c04ec3c9b11.png">

インストールはすぐに終了する。ウインドウに GD32 MCU driver has been successfully installと表示されたら、正常に導入が完了。[Cancel]をクリック。
<img width="50%" alt="driver3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2096509/4e33f3ac-4196-8444-dfcb-6c7ac5ac185f.png">

## ドライバの導入確認
Longan nanoを実際に接続し、ドライバが正しく動作しているかを確認する。

LonganNanoをPCのUSBに接続する。この段階では、LonganNanoは電源供給を受けているだけで、PCからはアクセスできない。Longan NanoをDFUモードで再起動するため、次の操作を行う

1. BOOT0ボタンを押しっぱなしにする
1. RESETボタンを押す
1. RESETボタンを離す
1. BOOT0ボタンを離す

<img width="50%" alt="driver5.png" SRC="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2096509/40a8626c-e22d-29e2-46d0-714cd5cb7baa.png">
この小さいボードで、難しそうな操作だと思ったが、実際にはそこまでシビアではなく、２～３回練習すると、指一本の角度で「モゾモゾ」と操作できるようになる。（表現が難しいが）

デバイスが接続されると、Winodwsの音が鳴り、デバイスが接続されたことが確認できる。　デバイスマネージャ（管理ツールのもの）から、GD32 Device in DFU Mode　というデバイスが登録されていれば成功。

<img width="50%" alt="driver4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2096509/6699b193-0e08-f510-8540-f6afcf9d5806.png">
（この、ちゃんとしたデバイスマネージャが起動できない場合、コマンドプロンプトから　devmgmt.msc　と入力すると起動できる）

## デバイスへの書き込み

GD32_MCU_Dfu_Tool_V3.8.1.5784_1.rarを解凍した　GD32 MCU Dfu Tool_v3.8.1.5784フォルダ内の GD32 MCU Dfu Tool.exe　を実行する。
起動時に必ず、A software update is available for your product! Do you want to download it?　というダイアログが表示されるが、[いいえ]や[No]で良い。（はい、とやっても404のエラーになるだけでダウンロードできない）

起動したら、DFU Deviceに今接続したデバイス（１台しかない）を選択、Download to Device (デバイスに書き込む）を選択、openボタンを押して、ダウンロードしたサンプルファームウェアのbaddapple_demo.binを選択。

<img width="50%" alt="driver6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2096509/f3490c86-f979-4c30-21d1-cda225e753eb.png">

入力が終わったら[OK]を押して書き込み開始。

書き込みが終わったら、Longan NanoのRESETボタンを押すと、デモが開始される。bmp.bin と logo.binが入ったmicroSDを挿入しておくのを忘れないようにすること。デモは ~~白黒のアニメーションで、女の子がリンゴを食べてホウキに乗って飛んでいく？というもの~~ Bad Appleという有名なものらしい。思ったよりずっと高速で動く。

![demo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2096509/0e5b8892-f5d2-ec19-b81b-ed39e48be36c.png)


## DFUモードが不安定
私の環境だけかもしれないが、DFUモードに切り替えると、3回に１回くらいはPCがブルースクリーンで落ちてしまう。あまりに生産性が悪い。デバッガで接続し、書き込む分には全く安定しているので、DFUモードの相性なのかもしれない。（AMD Ryzen 9 + Windows 11)

そのため、今では、DFUモードはほとんど使用していない。



# ここまででできたこと

PCに開発環境をインストールし、DFUモードでLongan Nanoにプログラムを書き込むことができるようになった。


# 次の記事に進む
[Longan Nanoを使ってみる 2](https://qiita.com/BUBUBB/items/864b2ef9404453810d5f)を参照してください