Tinkercad Circuits で Arduino 入門2～ビルトインLEDの点滅～

# 概要

第2回目です。前回の「[Tinkercad Circuits で Arduino 入門1](https://qiita.com/code0327/items/121327756d77953ee6f8)」では、Tinkercad のユーザー登録と、公式チュートリアル（レッスン）の進め方を紹介しました。

今回は、Arduino ボード上に実装されている **オレンジ色のLED**（Light Emitting Diode：発光ダイオード）をチカチカと点滅させる処理（そのための**ブロックプログラミング**）について体験・勉強していきます。いわゆる **<font color='red'>Lチカ</font>** とよばれているものです。<br>![2020-04-17_11h24_38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152805/d0bb7a81-dce2-6a8e-d782-6ca7b5981130.png)

# 準備

https://www.tinkercad.com/ にアクセスして、ログイン（サインイン）してください。その後、次のようにダッシュボード（ユーザーのホーム画面）に移動して、「**Circuits**」、「**新しい回路を作成**」を順に選択していきます。

![2020-04-14_09h59_15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152805/d24d127c-50b6-f6e8-3740-1d62bbd25c7e.png)

# 回路の名前変更

回路を作成・編集する画面に移動します。回路を新規作成すると、回路には**ランダムに英単語を組み合わせた適当な名前**が付けられます。<br>![2020-04-17_11h40_52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152805/f043f3d2-d3c5-1d4d-f88d-36c25ab5c5e4.png)

あとで困らないように、**自分で分かりやすい名前**に変更します。ここでは「ビルトインLEDの点滅制御」と変更します（**日本語が利用できます**）。マウスでクリックして変更することができます。<br>![2020-04-17_11h44_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152805/022ca1c3-fe63-3b35-0c62-85cf286e40d2.png)

# Arduino（ボード）の配置

右側のコンポーネントのリストから「**Arduino Uno R3**」を探して、ドラッグ＆ドロップで作業領域に配置します（この操作は、やや処理が重たく環境によっては数秒程度の時間がかかります）。<br>![2020-04-17_11h49_54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152805/19a4a775-6ba2-f477-c7fb-4d5aa8578edc.png)

実は、この時点で **<font color='red'>Arduino には、ビルトインLEDを2秒周期で点滅（1秒点灯・1秒消灯）させるためのプログラムが書き込まれています</font>**。

# シミュレーションの実行

作業領域に配置した時点で Arduino には、ビルトインLEDの点滅プログラムが設定されています。実際に、シミュレーションを実行して確認していきましょう。

画面上部の「**シミュレーションを開始**」をクリックするか、**キーボードの [S] キー** を押下してシミュレーションを開始します（ **Simulation** の [**S**] と覚えてください ）。<br>![2020-04-17_12h00_27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152805/a34a0a19-faca-8a95-e6e3-6a6bb73e73da.png)

ビルトインLED（オレンジ色）の点滅が確認できたと思います。確認できたら、一旦、シミュレーションを停止します。

# プログラミングの確認

点滅処理が書かれたプログラムの中身を確認してみましょう。画面上部の「**コード**」をクリックするか、**キーボードの [E] キー** を押下して**<font color='red'>プログラムを編集するためのコードエディタパネルを開きます</font>**（ **Edit（編集）** の [**E**] と覚えてください ）。

![2020-04-17_12h12_22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152805/80c8d9f4-9443-67a1-320e-dc28f10dfc5a.png)

次のように、**コードエディタ**が開きます。<br>![2020-04-17_12h15_27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152805/8809fe5b-89af-8f31-75c8-595c68d40c7d.png)

Tinkercad Circuit では、**ブロックプログラミング環境（ビジュアルプログラミング環境）**がデフォルトとなっています。次のようにドロップダウンリストからモードを変更すれば「**ブロック＋テキストプログラミング環境**」や「**テキストプログラミング環境**」に切り替えることができます（**<font color='red'>テキストプログラミング環境に切り替えると、現在の点滅プログラムが消えてしまうので注意してください</font>**）。<br>![2020-04-17_12h20_14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152805/15349465-5e3f-801c-65a1-af83b00603a5.png)<br>※「**ブロック＋テキスト**」のモードでは、プログラムコードを直接編集することはできません。コードを直接編集したい場合は「**テキスト**」に切り替えてください。

今回は、**ブロックプログラミング環境**で進めていきます。

# ブロックプログラムの処理の流れ

配置されたブロックは、**<font color='red'>上から順番に実行**</font>され、**<font color='red'>末尾に到達すると自動的に先頭に戻ります</font>**（自動的に無限ループします）。<br>![2020-04-17_12h54_38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152805/d92c56cf-1b3e-f7a4-c64f-ecc07d8419ec.png)

そのため、上記のブロックプログラムは、次のように動作します。

1. **ビルトインLEDを <font color='red'>高</font> に設定**<br>（LEDへの入力を **<font color='red'>HIGHレベル（5V）</font>** にする、その結果、LEDが **<font color='red'>点灯</font>** する）
2. **1秒を待機**<br>（LEDが **<font color='red'>点灯</font>** したまま1秒が経過する）
3. **ビルトインLEDを <font color='blue'>低</font> に設定**<br>（LEDへの入力を **<font color='blue'>LOWレベル（0V）</font>** にする、その結果、LEDが **<font color='blue'>消灯</font>** する）
4. **1秒を待機**<br>（LEDが **<font color='blue'>消灯</font>** したまま1秒が経過する）
5. **ビルトインLEDを <font color='red'>高</font> に設定**
6. **1秒を待機**
7. **ビルトインLEDを <font color='blue'>低</font> に設定**
8. **1秒を待機**
9. **ビルトインLEDを <font color='red'>高</font> に設定**
10. （・・・以下、繰り返し・・・）

# 演習1：ブロックプログラムの編集

「**<font color='red'>2秒</font>**周期で点滅（1秒点灯、1秒消灯）」を「**<font color='red'>0.5秒</font>**周期で点滅（0.25秒点灯、0.25秒消灯）」に変えて、その動作をシミュレーションで確認してみましょう。

## ヒント

- ブロック内のテキストボックスやリストボックスからプログラムを編集します。
- テキストボックスには **半角** で数字を入力します。
- 0.25秒は「250ミリ秒」として表現できます。

## 解答例

![2020-04-17_13h28_56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152805/1ee95f97-1fe6-52a1-5647-436e3376840f.png)

# 演習2：ブロックプログラムの作成

配置されているブロックを、一旦、**すべて削除してから**、自分でブロックを新規追加して、**2秒周期で点滅（1秒点灯、1秒消灯）する処理**をつくってみましょう。また、シミュレーションを実行して、その処理を確認してみましょう。

## ヒント
- ブロックは、**ゴミ箱**にドラッグ＆ドロップすることで削除できます。（一番上のブロックをドラッグ＆ドロップすれば、グループ全体をまとめて削除できます）<br>![2020-04-17_13h34_45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152805/e861e6d7-4b9b-aa85-3bbb-92bc92f387f4.png)
- ブロックは、カテゴリを選んで目的のものを探して、ドラッグ＆ドロップで作業領域に追加します。<br>![2020-04-17_13h38_34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152805/d9e34eee-04e8-f068-8ed1-ebcf3a262f0f.png)
- 「**ビルトインLEDを XX に設定**」は「**出力**」のカテゴリ、「**XX 秒を待機**」は「**コントロール**」のカテゴリに入っています。
- 各カテゴリにどんなブロックが含まれているのか眺めておきましょう。

# 演習3：ブロックとコードの対応確認

モードを「**ブロック + テキスト**」に変更し、ブロックで構成したプログラムと、プログラムコード（テキスト）で記述したプログラムがどのように対応しているのか確認してみましょう。<br>![2020-04-17_13h46_52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152805/e4190eba-af60-3043-80b4-c3a57f8e9432.png)

しっかりと対応を見ていけば、きっと **？？** となる不明点がでてくるハズです（例えば「コードのなかの `13` という数字は何？」など）。

まずは、自分で検索して解決してみましょう（「`Arduino ビルトインLED 13`」などを検索キーワードに）。また、調べても解決しない場合は、何が分からないのか頭のなかを整理してメモしておきましょう。