## 3.2.1 About MakeCode

⚠️ **以下の手順は Windows システム（Google Chrome または Microsoft Edge ブラウザ）向けに適用されますが、他のシステムを使用している場合の参考にもなります。**

**MakeCode プログラミング：**

オンライン版 Makecode を開きます: [https://makecode.microbit.org/](https://makecode.microbit.org/)

MakeCode:

![Img](./media/A637.png)

コード編集領域には常に 2 つのブロック「**on start**」と「**forever**」があります。**電源投入／リセット後、“on start” の中のコードは一度だけ実行され、“forever” の中のコードはループして実行されます。**

「**JS JavaScript**」をクリックして JavaScript 言語を確認します。

![Img](./media/A754.png)

矢印をクリックして「**Python**」言語に切り替えます。

![Img](./media/A814.png)

**インターフェイスの言語を選択：**

![Img](./media/Animation-3.gif)

詳細手順：

(1) settings をクリック：

![Img](./media/A301.png)

(2) 「Language」をクリック：

![Img](./media/A302.png)

(3) 自分の使いやすい言語を選択します。ここでは「English」に設定します。

![Img](./media/A303.png)

## 3.2.2 MakeCode Extensions

### 3.2.2.1 Add an Extension

⚠️ **各プロジェクトの hexadecimal コードファイル（.hex）を提供しています。これを直接 MakeCode にインポートするか、コードブロックを手動で作成してください。手動で作成する場合はライブラリファイルを追加する必要があります。**

⚠️ **<span style="color: rgb(255, 76, 65);">注意：</span>** 拡張機能ページで次のリンクを検索してください: `https://github.com/keyestudio/pxt-environment-kit-master`

![Img](./media/Animation-4.gif)

詳細手順：

1\. MakeCode を開き、![Img](./media/A806.png)(settings) をクリックして「**Extensions**」に入ります。

![Img](./media/A842.png)

または、**Advanced** の上にある「**Extensions**」をクリックします。

![Img](./media/A900.png)

2\. 読み込みたい拡張機能のキーワードまたは GitHub リンクを検索します。

![Img](./media/A909.png)

3\. ここでは `https://github.com/keyestudio/pxt-environment-kit-master` を検索します。![Img](./media/A3257.png) をクリックすると「**Environment-and-Science**」が表示されます。

![Img](./media/A306.png)

4\. 読み込みます。

![Img](./media/A3316.png)

5\. 読み込まれました：

![Img](./media/A335.png)

### 3.2.2.2 Update/Delete Extensions

⚠️ **通常は拡張機能を追加した後に削除する必要はありません。以下は不要な拡張機能を削除する方法を学ぶための手順です。**

![Img](./media/Animation-4.gif)

詳細手順：

1\. 「**JavaScript**」をクリックしてテキストコードに切り替えます。

![Img](./media/A724.png)

2\. 「**Explorer**」をクリックします。

![Img](./media/A749.png)

3\. 「**Environment-and-Science**」を見つけ、![Img](./media/A813.png) をクリックして削除します。

![Img](./media/A824.png)

4\. 「**Remove it**」。

![Img](./media/A727.png)

## 3.2.3 MakeCode Code Download

### 3.2.3.1 Import Code

ここでは「**heartbeat**」プロジェクトを例に、MakeCode へコードをインポートする方法を紹介します。

![Img](./media/Animation-2.gif)

詳細手順：

1\. USB ケーブルでボードをコンピュータに接続します。

![Img](./media/A800.png)

ボード裏面の赤い LED が点灯していれば電源が供給されています。コンピュータが USB ケーブルを通じてメインボードと通信すると、黄の LED が点滅します。

その後、micro:bit ボードはコンピュータ上で「MICROBIT」というドライブとして表示されます。これは下図のような通常の USB ディスクではないことに注意してください。

![Img](./media/A849.png)

2\. Web 版の MakeCode または Windows 10 アプリを開いてプログラミングし、「**Import**」をクリックします。

![Img](./media/A956.png)

3\. 「**Import File...**」

![Img](./media/A042.png)

4\. 「**Choose File**」。

![Img](./media/A06.png)

5\. 開きたいコードファイルを選択します。ここでは「**heartbeat.hex**」を選びます。

![Img](./media/A28.png)

6\. 「**Go ahead √**」で MakeCode にインポートします。

![Img](./media/A149.png)

また、ファイルを直接 MakeCode にドラッグすることもできます。

![Img](./media/A202.png)

7\. インポートされました：

![Img](./media/A217.png)

### 3.2.3.2 Download Code (WebUSB)

Google Chrome / Microsoft Edge の WebUSB が有効になっている場合、オンラインページから直接 micro USB ハードウェアデバイスにアクセスできます。したがって、「**Download**」をクリックするだけでコードを micro:bit ボードにダウンロードできます。

![Img](./media/Animation.gif)

詳細手順：

#### 3.2.3.2.1 Devices Pairing

1\. USB ケーブルでボードをコンピュータに接続します。

![Img](./media/A951.png)

2\. 「**...**」をクリックして「**Connect device**」を選びます。

![Img](./media/A028.png)

3\. 「**Next**」。

![Img](./media/A046.png)

4\. 「**Pair**」。

![Img](./media/A104.png)

5\. 対応する「**device**」を選択して「**Connect**」。

![Img](./media/A127.png)

6\. 「**Done**」。

![Img](./media/A144.png)

#### 3.2.3.2.2 Download Program

接続後、「**Download**」をクリックします。![Img](./media/A212.png) すると ![Img](./media/A220.png) に変わります。

![Img](./media/A232.png)

⚠️ **注意：**

選択できるデバイスが表示されない場合は、次のリンクのトラブルシューティングを参照してください：

[https://makecode.microbit.org/device/usb/webusb/troubleshoot](https://makecode.microbit.org/device/usb/webusb/troubleshoot)

micro:bit ボードのファームウェアを更新する必要がある場合は、次を参照してください：

[https://microbit.org/guide/firmware/](https://microbit.org/guide/firmware/)

### 3.2.3.3 Download Code (non-WebUSB)

1\. USB ケーブルでボードをコンピュータに接続します。

![Img](./media/A800.png)

ボード裏面の赤い LED が点灯していれば電源が供給されています。コンピュータが USB ケーブルを通じてメインボードと通信すると、黄の LED が点滅します。

その後、micro:bit ボードはコンピュータ上で「MICROBIT」というドライブとして表示されます。これは下図のような通常の USB ディスクではないことに注意してください。

![Img](./media/A849.png)

2\. 別のブラウザでコードをインポートした場合は、次に従ってください：

![Img](./media/Animations-1.gif)

詳細手順：

① 「**Download**」をクリックして「**.hex**」ファイル（micro:bit が読み取れる形式）を保存します。その後、それを micro:bit ドライブにコピー＆ペーストします。

Windows では、「**Send to → MICROBIT**」を選択して「**.hex**」を micro:bit にコピーすることもできます。この操作中、ボード裏面の黄のインジケータが点滅します。完了すると点滅が止まり点灯したままになります。

![Img](./media/A319.png)

![Img](./media/A449.png)

または、直接「**.hex**」を MICROBIT にドラッグします。

![Img](./media/A341.png)

![Img](./media/A345.png)

② コードを micro:bit ボードにアップロードすると、オンボードの 5×5 LED マトリクスが ![Img](./media/A903.png) と ![Img](./media/A910.png) をループ表示します。

![Img](./media/A22.png)

⚠️ **ヒント 1：** Windows 10 システムでは、MakeCode Windows 10 アプリを選ぶこともできます。プログラミングのために [Get Windows 10 App](https://apps.microsoft.com/detail/9nmqdq2xzkwk?hl=en-gb&gl=CN) をクリックし、その後「**Download**」をクリックするだけで micro:bit ボードにコードを保存できます。

⚠️ **ヒント 2：** プログラミングするたびに、MICROBIT ドライブが自動的にポップアップして戻りますが、そこにコピーした hexadecimal（**.hex**）ファイルは表示されません。ボードは最新のアップロードされたファイル（**.hex**）のみを受信して実行しますが、保存はしません。