【マイクロビット】MakeCode(メイクコード)エディターの使い方

この記事では、MakeCodeエディターの基本的な使い方を紹介します。

 

MakeCode(メイクコード)エディターは、
ブラウザベースで利用できるmicro:bit(マイクロビット)の開発環境のひとつ。

あらかじめ用意されたブロックをつなぎ合わせてプログラミングします。
なので直感的に操作できて、プログラムの内容も理解しやすいのが特徴です。

 

プログラミング経験のない初心者さんにも分かるように、
手順をひとつひとつていねいに解説していきます!

 

スポンサーリンク

MakeCodeエディターを開く

MakeCodeエディターのサイトにアクセスし、ホーム画面を表示します。

ホーム画面を表示する

  1. ブラウザ(EdgeやGoogle Chrome、Safariなど)を起動する。
  2. MakeCodeエディターのサイトにアクセスする。
  3. MakeCodeエディターのホーム画面が表示される。

 

 

Internet Explorer(IE)はサポートされていません。
サポートされているブラウザはこちらからご確認ください。

 

ホーム画面の見かた

MakeCodeホーム画面

 

マイプロジェクト

新しくプログラムを作る場合は、「新しいプロジェクト」をクリックします。

新しいプロジェクトの右側には、ブラウザに保存されているプログラムが表示されます。
保存されているプログラムをクリックすると続きからはじめることができます。

さらに下の方にはチュートリアルがあります。

 

「読取」ボタン

パソコンに保存した.hexファイルや、
公開されたプロジェクトの共有URLからプログラムを読み取ります。

 

プログラミングしてみよう

新しいプロジェクトを作成する

プロジェクトを作成

  1. ホーム画面で、「新しいプロジェクト」をクリックする。
  2. プロジェクト名を入力し、「作成」ボタンをクリックする。
  3. プログラミング画面が表示される。

 

プログラミング画面の見かた

MakeCodeプログラミング画面

  • プログラミングエリア
    プログラムをつくる場所です。
     
  • ツールボックス
    プログラミングで使うブロックが機能別に分類され、置かれています。
     
  • シミュレーター
    作ったプログラムの動きを画面上で確認する場所です。
     
  • 「ダウンロード」ボタン
    プログラムをマイクロビットに転送します。
     
  • プロジェクト名、「保存」ボタン
    プログラムの名前を入力して「保存」ボタンをクリックすると、
    プログラムをパソコン上に保存します。
     
  • 「元にもどす」「やり直し」ボタン
    プログラミングエリアを1つ前の状態にもどしたり、
    もどしたことを取り消したりします。
     
  • 「拡大表示」「縮小表示」ボタン
    プログラミングエリアを大きく表示したり(拡大)、
    小さく表示したり(縮小)します。
     
  • 「エディター切りかえ」ボタン
    プログラムの表示をブロック⇔JavaScriptで切りかえます。
     
  • 「共有」ボタン
    プログラムをクラウドに保存し インターネット上に公開します。
     
  • 「ホーム」ボタン
    ホーム画面へもどります。

 

プログラムを作る

プログラミング画面を表示すると、
最初から「最初だけ」「ずっと」のブロックが置かれています。
必要ない場合は消しましょう。

ブロックの消し方

ブロックの消し方

ブロックをクリックして「Delete」キーを打つ。
または
ブロックをツールボックスへドラッグアンドドロップする。

 

ブロックを出して組み立てる

ブロックを組み立てる

ツールボックスから必要なブロックを
ドラッグアンドドロップでプログラミングエリアに持ってきて
プログラムを組み立てます。

 

JavaScriptのコードを見る

エディターを切り替える

「エディター切り替え」ボタンで
プログラムの表示をブロックとJavaScriptで切り替えることができます。

最初はブロックが選ばれている状態です。

 

JavaScriptでどう書くのか知りたい場合や、コーディングしたい場合以外は、
とくにさわる必要はありません。

 

スポンサーリンク

シミュレーターで確認する

シミュレーター

マイクロビットへ転送する前に、シミュレーターで思った通りに動くかテストしましょう。

マイクロビットのAボタン・Bボタンをクリックすると、
ボタンがおされたときの動きを確認できます。

センサーを使った場合は、テストできるようにコントローラーが出てきます。

 

シミュレーターの下にあるボタンの機能は下の通りです。

  • 停止/開始
  • シミュレーターを再起動する
  • スローモーション
  • オーディオをミュートにする/ミュートの解除
  • 全画面表示にする

 

プログラムをマイクロビットに転送する

パソコンとマイクロビットを接続する

パソコンとマイクロビットをUSBケーブルでつなぎます。

USBの規格は、パソコン側がUSB TypeA、マイクロビット側がMicro USB TypeBです。

 

.hexファイルをダウンロード

Makecodeエディターの「ダウンロード」ボタンをクリックすると、
プログラムがコンパイルされ、.hexファイルをダウンロードします。

コンパイルとは、プログラム言語をコンピュータが理解できる言語に変換することです。

 

.hexファイルをマイクロビットに転送

ダウンロードした.hexファイルを「MICROBIT」ドライブに保存することで、
プログラムをマイクロビットに書き込むことができます。

 

プログラムの転送中は、マイクロビットの裏にある黄色いLEDが点滅し、
転送が完了すると、プログラムが自動的に実行されます。

この時、「MICROBIT」ドライブからファイルが消えたように見えますが正常です。

 

ブラウザや設定によって多少手順がちがうので、
ブラウザ毎のくわしい転送の手順はこちらを参考にしてください。

また、Windows10専用アプリの場合、
「ダウンロード」ボタンをクリックすると、プログラムが直接マイクロビットに書き込まれます。

 

プログラムを保存する

プログラムは、Cookie(クッキー)という仕組みを使って自動的にブラウザに保存されています。

Cookie(クッキー)とは、Webサイトがブラウザを通じて
ユーザーのコンピュータにデータを一時的に保存させる仕組みのことです。

 

同じパソコン・同じブラウザを使えば、続きを作ることができますが
別のパソコンで続きを作りたい場合は不便です。

また、Cookieはずっと保存されているものではなく
ブラウザのキャッシュと一時ファイルをクリアすると消えてしまうので
プログラムはパソコン上に保存しておくことをオススメします。

 

プロジェクト名を入力し、
「保存」ボタンをクリックするとパソコン上に.hexファイルを保存することができます。

「保存」で保存された.hexファイルもマイクロビットへ転送することができます。

 

プログラムを共有する

「共有」ボタンをクリックすると、プロジェクト(プログラム)はクラウドに保存されます。

プロジェクトを共有

  1. 「共有」をクリックする。
  2. プロジェクトの名前を入力する。
  3. 「プロジェクトを公開する」をクリックする。
  4. 共有URLが表示される。

 

共有URLが表示される

共有URLがあれば、ホーム画面の「読込」ボタンから誰でもプロジェクトを見ることができます。

 

プログラムを読み込む

プロジェクトの読取

「読取」ボタンをクリックすると、
パソコン上に保存した.hexファイル共有URLからプロジェクトを読み込むことができます。

 

.hexファイルを読み込む

hexファイルの読取

  1. 「読取」をクリックする。
  2. 「ファイルを読む…」をクリックする。
  3. 「ファイル選択」をクリックし、ファイルを選択する。
  4. 「つづける」をクリックする。

 

公開されたプロジェクトを読み込む

共有URLからプロジェクトを読み込む

  1. 「読取」ボタンをクリックする。
  2. 「URLからの……」をクリックする。
  3. 共有URLを入力し、「つづける」をクリックする。

 

プログラムを削除する

プロジェクトを削除

「歯車」ボタンをクリックして、
「プロジェクトを削除する」を選ぶと現在表示されているプロジェクトを削除できます。

 

まとめ

MakeCodeエディターの使い方について紹介しました。

まずはホーム画面にあるチュートリアルをやってみて、操作になれましょう。

 

 

タイトルとURLをコピーしました