Tinkercad Circuits で Arduino 入門～作成したプログラムのダウンロードと公開～

# 概要

[Tinkercad Circuit](https://www.tinkercad.com/)（Aruduino＆回路シミュレータ）で作成したArduinoプログラム（`.ino`ファイル）を **PCにダウンロードする方法** と、ウェブ上で **公開（共有）する方法**（公開URLの取得）について解説します。

- ダウンロードしたプログラム（`.ino`ファイル）は、[Arduino IDE](https://www.arduino.cc/en/main/software)（Arduinoの統合開発環境）で読み込んで、**コンパイル** ＆ **Arduino（実機）に書き込み** することができます。


また（学校の課題などで）GoogleClassroomに、公開URLを提出する方法についても紹介します。

# プログラムをダウンロードしてArduino実機に書き込み

まずは、[Tinkercad Circuit](https://www.tinkercad.com/) で回路とプログラムを作成して、シミュレーションで問題なく動作することを確認しておきます。

1. **コードエディタパネル** を開いて、［**コードをダウンロード**］のボタンを押下します。<br><img width="771" alt="2020-05-07_09h39_46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152805/e791d8bc-1f6d-db5f-073e-0c302f031d68.png">
2. ブラウザを通してファイル（`.ino`ファイル）がダウンロードされます。基本的に「回路名」が「ファイル名」となりますが、回路名に日本語を使っていると、その部分はアンダーバーで置き換えられます。例えば、回路名が「ミニ信号機（演習6）」だと「`_6_1.ino`」というファイル名になります。<br><img width="565" alt="2020-05-07_10h07_50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152805/4ea1207a-2aec-37d5-812b-9e591d74d6de.png">
  - <font color='blue'>**学校の課題などで「プログラムファイルを提出してください」と指示されている場合は、このファイルを提出してください**</font>。必要に応じてファイル名は変更してください。
3. （[Arduino IDE](https://www.arduino.cc/en/main/software) がインストールされている前提です）<br>Arduino IDE を起動して、メニューから［**ファイル**］－［**開く**］を選択して、先ほどダウンロードをしたファイルを開きます。次のダイアログが表示されたら **OK** を選択します。<br><img width="534" alt="2020-05-07_09h42_08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152805/8c07d17a-9b3c-5d66-9f15-81755c686b94.png">
4. 次のように、Arduino IDE にプログラムが読み込まれます。<br><img width="641" alt="2020-05-07_10h17_35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152805/2dd2e0a4-2de1-e714-08c6-94b7deff4f6e.png">
5. 回路を実装します。<br><img width="601" alt="2020-05-07_10h42_58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152805/8b30f5aa-df58-e020-9553-a13e8ea65a59.png">
6. Arduino と PC を USBケーブルで接続して、Arduino IDE からプログラムをマイコンに書き込みます（自動的にコンパイルもされます）。<br><img width="386" alt="2020-05-07_10h45_50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152805/1c1af7ba-6e9c-24b9-2f8a-f5873c66831f.png">
7. 実際の回路で動作を確認します。<br>![20200507_094425.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152805/8f59a572-d7e8-8a7e-e248-37d0d685f49c.jpeg)

# 回路＆プログラムをウェブに公開

自分で作成した回路とプログラムは、デフォルトでは自分しか閲覧できませんが、これを**他者に公開することもできます**。<br><img width="503" alt="2020-05-07_11h27_16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152805/9cd952fc-eefc-3ae0-0738-ec9e14a986f6.png">

1. 回路一覧の画面で、公開したい回路の右上にカーソルをあわせると **歯車マーク** が表示されるので、クリックして、**プロパティ** を選択します。<br><img width="502" alt="2020-05-07_11h29_22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152805/624a0b90-ccf5-703c-5eb9-f47893eacd3e.png">
2. ダイアログが表示されるので、プライバシーの項目を **公開** に切り替えます。<br><img width="318" alt="2020-05-07_11h32_55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152805/6451e3cc-d6ac-3b9d-6630-9d78582e84d4.png">
3. 必要に応じて、回路の説明を記述します。日本語も利用可能です。<br><img width="369" alt="2020-05-26_13h36_42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152805/ba5d8526-859b-6384-7bb0-2e6512c5d5a1.png">
4. ダイアログ下部の「**変更を保存**」をクリックします。
5. 表示が「**公開**」に切り替わります。公開URL を取得するために、この**「公開」の文字をクリック**してください。<br><img width="507" alt="2020-05-07_11h35_16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152805/e0b2b60d-aa6a-12ef-3cd2-cc34581e2ae6.png">
6. ダイアログが表示され、そこで **公開用のURL** を確認することができます。
  - **<font color='blue'>学校の課題などで「回路を公開に切り替えて URL（リンク）を提出してください」と指示されている場合は、この URL を提出してください。</font>**<br><img width="699" alt="2020-05-07_11h40_31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152805/1d7d87dc-de8e-c109-582f-159226742168.png">
7. 回路を公開にすると、**設計者の氏名も表示されるので、必要に応じて氏名を ニックネーム や イニシャル に変えておきます**。氏名の変更は、ダッシュボードの右上のアイコンをクリックして「**プロファイル**」から行なうことができます。<br><img width="390" alt="2020-05-07_11h47_50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152805/be08a427-b35a-6cb3-9f4a-b10b7d8966eb.png">
8. 公開に切り替えた回路が、**他者から、どのように見えるのか？** を確認したい場合は、Chrome の**シークレットウィンドウモード** を利用します。Chrome の右上の「・・・」をクリックして「**シークレットウィンドウを開く**」を選択します。黒背景の Chrome が開くので、そこに公開URL を貼り付けると、第3者からアクセスしたときにどのように見えるかが確認できます。<br><img width="327" alt="2020-05-07_11h55_25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152805/461af94b-9dec-98fd-10fc-2fd3380f3571.png">

# GoogleClassroomにリンクを提出する

学校の課題などで「[Tinkercad Circuit](https://www.tinkercad.com/) で作成した回路の公開URLを GoogleClassroom に提出してください」のように指示されている場合は、次の手順で提出してください。

1. GoogleClassroomの課題ページに移動し、「**＋追加または作成**」を選択します。<br>
<img width="360" alt="2020-05-26_13h40_18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152805/16610644-823c-c6c1-4e46-3356ba37c141.png">
2. ドロップダウンリストから「**リンク**」を選択します。<br>
<img width="348" alt="2020-05-26_13h41_00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152805/c9c8474b-7bf4-c02c-1ef4-ff18a18b403c.png">
3. 先ほど取得した公開URLをテキストボックスに貼り付けて「**リンクを追加**」をクリックします。<br><img width="429" alt="2020-05-26_13h42_23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152805/e8e6dc1c-c0bc-3bc9-7d70-d0f3a88f5473.png">
4. 「**提出**」をクリックします。<br><img width="335" alt="2020-05-26_13h45_02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152805/8f850e52-cefa-d6a3-9c74-c68179e7e303.png">

以上で、提出完了となります。