デバイスを使ったプログラミング学習にmicro:bitはいかが? 〜MakeCodeエディター〜

スポンサーリンク

MakeCodeエディターでプログラミング

前回、開封の儀を行なったmicro:bit。

デバイスを使ったプログラミング学習にmicro:bitはいかが? 〜紹介と開封の儀〜
micro:bitとはなんぞや?とにかく小さく色々と楽しめるコンピュータなんですが、とりあえず公式サイトを紹介します。そして基本的な情報はやはりWikipediaが詳しいので、引用します。BBC Micro...

早速、簡単なプログラムを組んでみたいところですが、まずはプログラミングの仕方を学んでみましょう。

一番最初はやっぱりmicro:bitの「売り」であるMicrosoft社の「MakeCodeエディター」でプログラミングしてみたいので、まずはこちらの使い方を見てみます。

MakeCodeエディターは、ブロック状のプログラムを組み合わせていくだけなので、初心者でも簡単にプログラミングできます。

まずはMakeCodeエディタのサイトにアクセス。

Microsoft MakeCode for micro:bit
A Blocks / JavaScript code editor for the micro:bit powered by Microsoft MakeCode.

するとこんな画面が出るかと思います。

新しく自分でプログラミングするときは、「新しいプロジェクト」をクリック。

ちなみに下の方へスクロールすると、チュートリアルだったり、プログラム例があります。

興味があるものがあれば、試してみてもいいでしょう。

とりあえず今回は適当に動かしてみたいので、「新しいプロジェクト」でいきます。

スポンサーリンク

エディタ画面を覗いてみる

「新しいプロジェクト」をクリックすると、こんな画面が表示されます。

とりあえず上から見ていきましょう。

左上の家のマークは「ホームに戻る」で、最初の画面に戻ります。

ですが、プロジェクト名が変更されていないと、名前が無いよ、名前を付けてね!と言われます。

次に「共有」は、他の人にこのプロジェクトを公開して、シェアをするボタンです。

クリックすると「共有するには公開するけどいいかい?」と確認を促されます。

次は「ブロック {}JavaScript」と書かれているここ。

クリックするとブロックエディタとJavaScriptエディタが切り替わります。

画面左側のmicro:bitが表示されているところは、シミュレータになります。

このボタンは左から「シミュレータの開始・停止」、「シミュレータの再起動」、「スローモーション」、「音のON・OFF」、「全画面表示」です。

画面の真ん中から少し左にあるここがブロックが格納されているリストです。

機能によって分類されているので、とりあえず「基本」をクリックしてみると、こんな感じでブロックが表示されます。

流石に全部は解説できないので、使うときに随時紹介していきますね。

画面右側がブロックを組み合わせて、プログラムを作成していくエディタ部です。

左下のボタンは、シミュレータを格納するボタンです。

格納すると、エディタ部が広くなるので、プログラミングしやすくなりますね。

「ダウンロード」というこのボタン。

プログラムが出来たら、押すボタンです。

完成したプログラムが自動でダウンロードされ、それをmicro:bitにコピーしててねと優しい解説が表示されます。

やはり子供向けということで、分かりやすいですね。

「題名未設定」とあるここは、このプログラム(プロジェクト)の名前を入れるところです。

プログラム名を入れる横にあるのはフロッピーマーク。いわゆる保存です。

昔はデータをフロッピーというプラスチックの板に入った記憶装置を使っていたのですが、今の子は分かるんでしょうか?

ともかくこのフロッピーマークをクリックすると、データがPCに保存されます。

次に右下。

左から「元に戻す(アンドゥ)」、「やり直す(リドゥ)」、「拡大」「縮小」ボタンです。

右上に行って「?」マークはヘルプです。

クリックすると「ヘルプメニュー」が表示されます。

「サポート」をクリックするとQ&Aのページが開きます。でも英語です。

「リファレンス」は各ブロックの解説が開きます。

「ブロック」も各ブロックの解説が開く…ブロックの機能によって分類されているようです。

「JavaScript」はJavaScriptのプログラムの解説ですね。

「ハードウェア」はmicro:bitのハード部分の説明ですが、残念ながら英語です。

ここは重要だから、日本語にしてほしいなぁ。

「買う」をクリックすると、micro:bit用アクセサリの紹介や、micro:bit本体、アクセサリがどこで買えるかというページが開きます。

国を選ぶと日本での代理店が表示されますね。

最後に右上の歯車マーク。これは設定に関してですね。

クリックすると「設定メニュー」が表示されます。

「プロジェクトの設定」では、現在のプロジェクトをmicro:bitで使用する際の無線(Bluetooth)での接続の仕方に関してです。

上から「ペアリングはいらない。誰でも接続可能」、「JustWorksペアリング(標準):ペアリングは自動で行われる」、「6桁の数字を使ったペアリング」となっています。

「拡張機能」は拡張機能の紹介が表示されます。

「プロジェクトを削除する」はそのままプロジェクトを削除するときに使います。

クリックすると確認ウインドウが表示されます。

「不正使用の報告」は何か悪いことをしているプロジェクトを見つけたら、報告するためのボタンです。

押してみるとこんなウインドウが表示され、詳しく教えてくれと言われます。

「言語を変える」では、変更可能な言語の一覧が表示されます。

英語の勉強も兼ねるため、「English」にしてみるのもいいかもしれませんね。

「ハイコントラストをオンにする」をクリックすると、全体が黒くなって、色のコントラスト比が高くなり、より鮮明に見えるようになります。

ただ人によっては見辛くなるので、これはお好みで。

「リセット」は全てのデータが削除されてしまうようです。

使うときには注意してください。

「このアプリについて…」では現在のバージョンを確認することができます。

さらに「試験中の機能」をクリックすると、現在、開発されている新機能を見て、さらに試すことができるようです。

できる限りエディタ画面を紹介してみました。

途中で書いたように、ブロックの全てを紹介するのは、かなり大変なので、使いつつ、紹介できればいいなと思っています。

次はMakeCodeエディターを使って、簡単なプログラミングをしてみます。

MakeCodeエディターでプログラミングしてmicro:bitを動かしてみた!〜LED点灯と温度表示〜
今回やることと準備前回は、micro:bitのMakeCodeエディターの紹介と解説を行いました。さてさて今回は「MakeCodeエディター」を使って、簡単なプログラムを作ってみましょう。今回はA、Bボタン...

ということで今回はこんな感じで。

コメント

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