表紙 NPO 法人 北摂 SITA micro:bit 使い方 入門ガイド 暫定版 準備からプログラム作成ツールの使い方まで 作成 YO_takatsuki 2018 年 10 月 14 日 1 / 31
1micro:bit の各部説明 内容 1 micro:bit の各部説明... 3 2 パソコンと micro:bit の接続方法... 4 3 プログラミング作成ツールの入手方法... 5 4 プログラム作成ツールの画面について... 6 5 プログラム作成ツールの使いかた... 7 6 シミュレーターで確認しよう... 9 7 プログラムをパソコンに保存する... 10 8 プログラムを micro:bit に送る方法... 12 はじめに micro:bit は英国で生まれた小中学校向けのコンピュータの仕組みやプログラミン グを勉強するためのコンピュータです 簡単にプログラムを作成することができ 親子でプログラムを学ぶための最適な教 材です 英国はもちろん 北欧 シンガポール スリランカまで広く世界中の学校で使われ ています 日本でも 2017年に発売され 現在では国内のプログラミング学校の 教材として広がりつつあります 本書は 初めて micro:bit を手に取られる方を対象に 準備からプログラミング作 成ツールの使い方までの必要な情報をまとめた内容になっています 本書がプログラミング学習に 貢献できれば幸いです 2 / 31
1micro:bit の各部説明 1 micro:bit の各部説明 ⑤リセットボタン ⑦無線アンテナ ④USB コネクタ ⑥電池用コネクタ ②LED(25 個) 光センサー ①ボタン ①プロセッサー(CPU) 温度センサー ②地磁気センサー ③加速度センサー 裏面 裏面 番号 ① ② ③ ④ 名称 プロセッサー CPU 地磁気センサー 加速度センサー USB コネクタ ⑤ ⑥ ⑦ リセットボタン 電池用コネクタ 無線アンテナ ③拡張端子 表面 説明 micro:bit の頭脳に相当する部分です ここにプログラムを書き込 みます 温度センサーもここに含みます 地球の磁気を測定するセンサーで 方角がわかります 本体の かたむき や 揺さぶり が検出できます パソコンとつないで プログラムを受け取るために使われます パソコンからの電源供給にも使われます プログラムを最初から実行することができます 電源を供給するための電池ボックスを接続します 他の micro:bit やパソコンとの無線通信に使うことができます 表面 番号 ① ② ③ 名称 ボタン LED 光センサー 拡張端子 3 / 31 説明 押しボタンスイッチとして使用します ボタン A ボタン B と2種類あります 5x5に並んだ LED 計25個 です 光センサーにもなり周囲の明るさがわかります 0 1 2は LED などを接続するための出力端子 または スイッチを接続するための入力端子にも使用できます 3V は 3V の電源が出力されます 他のボードへの電源供給のた めに使用できます GND は 他の端子に対し 電流の戻り道になります
2パソコンと micro:bit の接続方法 2 パソコンと micro:bit の接続方法 ①パソコンを起動し micro:bit を USB ケーブルで接続します ②パソコンが micro:bit を認識しているかを確認します Windows10 の場合 USB ケーブル MAC の場合 ア エクスプローラを起動 ア Finder を起動 クリック イ 左の欄の PC をクリックし 右の欄の デバイスとドライブ に MICROBIT の表示があれば OK クリック イ 左側のデバイス欄に MICROBIT の表示があれば OK "MICROBIT"の表示がなければ USB ケーブルを抜いて もう一度 接続してください イ 左側のデバイス欄に MICRO:BIT の 表示があれば OK 4 / 31
3プログラミング作成ツールの入手方法 3 プログラミング作成ツールの入手方法 Windows10 の場合 マイクロソフトストアから mocro:bit 用アプリ を入手 エ スタートボタンをクリック 入手したアプリを一覧から探す ア インターネットを接続し マイクロソフトストアをクリック イ 検索欄に"micro:bit"と入力 オ 右クリックメニューより スタートにピン留めする をクリック ウ 検索結果の"MakeCode for micro:bit"の 入手 をクリック カ スタートにピン留めされた Windows10以外のパソコン Windows7 8 MAC ア WEB ブラウザで下記の WEB ページを開きます https://makecode.microbit.org / イ 開いた後 次回 簡単に開けるように お気に入り登録します お気に入り登録 5 / 31
4プログラム作成ツールの画面について 4 プログラム作成ツールの画面について ⑦プロジェクト ②プログラミングエリア ③シミュレーター ①ツールボックス ⑥ ④ ⑤ ⑧ ⑨ 名前 ①ツールボックス ②プログラミングエリア ③シミュレーター ④プログラムの名前 ⑤保存 ⑥ダウンロード ⑦プロジェクト ⑧戻る 進む ⑨拡大 縮小表示 6 / 31 機能 プログラムのブロックが入っている ツールボックスの中のブロックを並べてプログラムを作成する プログラムの動作確認を行う プログラムの名前を入力します 作成したプログラムをパソコンに保存 Windows10 用 micro:bit アプリの場合 プログラムを micro:bit に送信する WEB ページの場合 ⑤の保存と同じ 新しいプロジェクトの作成 プログラムエリアを空っぽにする または パソコンに保存したプログラムを呼び出したりできる 作成中のプログラムを一つ前に戻す 進めることができます プログラミングエリアのブロックの拡大 縮小表示
5プログラム作成ツールの使いかた 5 プログラム作成ツールの使いかた 大きさが変わるハートマークを表示するプログラムを作ります ア 新しいプロジェクトを作成する イ ツールボックス の 基本 をクリ ック たくさんのブロ ックが表示され ます ウ アイコンを表示 と 一時停止 のブロック をプログラミングエリアへドラッグ ドロップ し ずっと に結合 ドラッグ ドロップ 補足 ア 新しいプロジェクトの作成方法 は次ページ メモ2 参照 ウ ドラッグ ドロップ とは ウ ブロックのくぼみの部分をあわせ ると自動的にブロック同士が結合し ます エ 同様の方法で 同じ2つのブロ ックをつなぐ オ ①クリックするとアイコン一覧を表示 ②小さいハートを選ぶ オ 小さいハートのアイコンに変更 数字を 200 に変更し 完成 ここをクリックし 数字を変更しま す 単位はミリ秒 200ミリ秒は 0 2秒 7 / 31
5 プログラム作成ツールの使いかた 新しいプロジェクトの作成方法 新しいプログラムを作成するときは 新しいプロジェクトを選択し プログラムエリアを空っぽにします メモ 1 ア ) プロジェクト を選択 イ ) 新しいプロジェクト を選択 ウ ) プログラムエリアが空っぽになった よく使うブロックの操作 ブロックの削除方法 ツールボックスア ) 削除するブロックの上にマウスカーサーを置きますイ ) ツールボックスにドラッグ & ドロップで削除されます 以下の方法でも削除できます右クリックメニューから削除 または左クリックで選択し DEL キー メモ 2 ツールボックスにドラッグで削除される ブロックの結合を外す方法 ア ) 外すブロックをドラッグ & ドロップ メモ 3 イ ) ブロックの結合が外れた 8 / 31
6シミュレーターで確認しよう メモ4 ブロックのコピー 複製 方法 ア コピーするブロック の上にマウスの カーサーを置いて 右クリック 右クリック メニュー イ 複製する をクリック ウ ブロックがコピーされた プログラミングエリアの拡大 縮小表示 メモ5 拡大 縮小 縮小 一部のブロックが表示できない 全ブロックが表示できた 6 シミュレーターで確認しよう シミュレーターで ハートの大きさが変わればプログラムは正常に動作 シミュレーター 9 / 31 くり返す
7プログラムをパソコンに保存する 7 プログラムをパソコンに保存する ア プログラムに名前を付けます どきどきハート とします "どきどきハート " エ 保存されているか確認します フォルダを開く を選択 オ 以下の名前のファイルがあれば保存され ています microbit-プログラム名.hex イ 赤枠のボタンをクリック ウ もし 以下のメッセージが出たら 完了 保存メッセージが出たら 保存 保存フォルダの場所は 今後も利用するた めメモするなど覚えておいてください 保存したプログラムは プログラミング作 成ツールから読み込むことができます メモ6 保存するフォルダを変更したいとき ウ の手順で A) B) とクリック 保存先のフォルダを 選び 保存 をクリッ ク 10 / 31 A) B
7 プログラムをパソコンに保存する 保存したプログラムを読み込む方法 新しいプログラムを作成するときは 新しいプロジェクトを選択し プログラムエリアを空っぽにします メモ 7 ア ) プロジェクト を選択 エ ) プログラムを選択し 開く をクリック イ ) ファイルを読み込む を選択 ウ ) つづける をクリック ウ ) 参照 をクリック 11 / 31
8 プログラムを micro:bit に送る方法 A Windows10 用 micro:bit アプリから送る方法 Windows10の micro:bit 用アプリ のみ可能な方法です ア micro:bit を接続した状態で ダウンロード をクリック イ プログラムエリアのプログラムが送信され micro:bit に書き込まれます 送信中はオレンジ色の オレンジ色 LED リセット ボタン LED が点滅します ウ 送信が完了すると プログラムは自動的にスタートします また リセットボタンを押すと再スタートします シミュレーターと同様にハートマークの大きさが変われば 成功です 送信が完了しない場合は 以下を試してください 一度 USB ケーブルを外し 再接続 一度 アプリを閉じ 再起動 B)プログラムファイルから転送する方法 この方法はどのパソコンでも可能です ア プログラムを保存したフォルダを開く イ 保存したプログラムの上にマウスカーサーを置き 右クリックメニューを表示し 送る MICROBIT を選択 ウ プログラムが送信されます 以降は A と同じです 右クリックメニュー 12 / 31
NPO 法人 北摂 SITA micro:bit で学ぶ はじめてのプログラミング 基本編 暫定版 準備からプログラム作成ツールの使い方まで 作成 YO_takatsuki 2018 年 10 月 14 日 はじめに 本書は micro:bit のスイッチ センサー 通信機能などの 基本機能のプログラミングの基本を学習します 13 / 31
内容 1 プログラム ボタン ON で文字表示 を作ろう... 15 (ア) 作成するプログラムの内容... 15 (イ) 完成したプログラム... 15 (ウ) プログラムの作成方法... 15 (エ) シミュレーターで確認しよう... 17 2 じゃんけんゲーム を作ろう... 18 (ア) じゃんけんゲームの内容... 18 (イ) 完成したプログラム... 18 (ウ) ジャンケンゲーム の作り方... 19 (エ) シミュレーターで確認しよう... 21 3 プログラム 温度計 と 照度計 を作ろう... 23 (ア) プログラムの内容... 23 (イ) 完成したプログラム... 23 (ウ) シミュレーターで確認しよう... 23 4 プログラム micro:bit に働く加速度を表示しよう... 24 (ア) プログラムの内容... 24 (イ) 完成したプログラム... 24 (ウ) micro:bit でプログラムの動作確認... 24 5 micro:bit の向きで表示が変わるプログラムを作ろう... 26 (ア) プログラムの内容... 26 (イ) 完成したプログラム... 26 (ウ) micro:bit を使ってプログラムの確認... 26 6 角度を測定するプログラムを作ろう... 27 7 コンパスを作ろう... 28 プログラムの内容... 28 (ア) (イ) 完成したプログラム... 28 (ウ) シミュレーターでの動作確認... 28 8 音を出すプログラムを作ろう... 29 (ア) プログラムの内容とスピーカーの接続方法... 29 (イ) 完成したプログラムとシミュレーターによる確認... 29 9 アニメーションと音を出すプログラムを作ろう... 30 (ア) プログラムの内容... 30 (イ) 完成したプログラムと シミュレーターでの動作確認... 30 10 micro:bit 同士で通信しよう... 31 14 / 31
1 プログラム ボタン ON で文字表示 を作ろう (ア) 作成するプログラムの内容 ボタン A を 押したとき A を表示 ボタン B を 押したとき B を表示 ボタン A と B を同時に押したとき A B を表示 (イ) 完成したプログラム (ウ) プログラムの作成方法 ① プロジェクト 新しいプロジェクト を選択 ②プログラム名を入力 ここでは "ボタン ON で文字表示 とします ③ 入力 をクリック ④ ボタン A が押されたと き をドラッグ ドロップ 15 / 31
8 プログラムを micro:bit に送る方法 5 基本 をクリック 6 文字列を表示 をドラッグ & ドロップし ボタン A が押されたとき につなげる 7 文字列を表示 の文字を A に変更する 表示する文字は半角にしてください 全角は表示できません 文字の変更方法 メモ 1 文字の上をクリック 文字背景に色がつくこの上をクリック 縦棒カーサーが現れ文字の変更が可能になる 8 作成したブロックをコピー ( 複製 ) します 16 / 31
⑨ボタン B に変更 メモ2参照 ⑩ B に変更 これでボタン B のプログラム完成 ボタンの変更方法 メモ2 ⑪ボタン A+B のプログラムを ⑧ ⑩と同様の方法で作成 以上で完成 (エ) シミュレーターで確認しよう シミュレーター上のボタン A,ボタン B,ボタン A+B をクリックし プログラムの動作確認をしてください A と B のボタン同時押しは ここをクリック 17 / 31
2 じゃんけんゲーム を作ろう (ア) じゃんけんゲームの内容 micro:bit を ゆさぶったら グー チョキ パーのいずれかをLEDに表示する グー チョキ パーのうち なにを表示するかはだれにもわからない LED に表示するグー チョキ パーの形は以下の通り グー チョキ (イ) 完成したプログラム ゆさぶった時に次のブロックを実行 変数に0 2の乱数を入れる 変数が0ならグーを表し 論理 ブロックを抜ける 変数が1ならチョキを表示 し 論理ブロックを抜け 変数が0でない または 1でないならパーを表示 し 論理ブロックを抜ける 論理ブロックを抜けた後 1 5秒間待つ そのあと LED 表示を消す 18 / 31 パー
(ウ) ジャンケンゲーム の作り方 ①新しいプロジェクトを選択し プログラムの名前を付けます ここでは名前を "じゃんけん"とします ②入力をクリック ③ ゆさぶられたとき をドラッグ ドロップ ④変数をクリック ⑤ 変数を0にする をドラッグ ドロッ プし つなぐ ⑥ 変数 の をクリック し 変数の名前を変更 をク リック 19 / 31 ⑦グーチョキパーと入力し OK をクリック
⑧ 計算 から 0 4の範囲 の乱数 をドラッグ ドロッ プし 変数の中に入れる ⑬ 変数 から グーチョキパー のブロッ クをドロップ ドラッグし 0 0 の 左側に入れる ⑨ 4 を 2 に変更 ⑩ 論理 から もし なら でなけ れば をドラッグ ドロップし つ なげる ⑭ 基本 から show leds のブロックをド ロップ ドラッグし なら につなげる ⑪ もし なら でなければもし なら でなければ のブロックに 変更 変更方法は メモ3の 新 しい論理ブロックを作る方法 を 参照 ⑮ show led をクリックし グーの形を作る ⑫ 論理 から 0 0 のブロック をドロップ ドラッグし もし に つなげる 20 / 31
⑯ 変数 から グーチョキパー のブロッ クをドロップ ドラッグし 0 0 の 左側に入れる 0 0 の右側は 1 を入れる ⑰ 基本 から show leds のブロックを ドロップ ドラッグし なら につなげ る show leds をクリックしハサミの形を 作る ⑱ 基本 から show leds のブロックを ドロップ ドラッグし でなければ に つなげる show leds をクリックし パーの形を 作る ⑲ 基本 から 一時停止 ミリ秒 のブ ロックをドロップ ドラッグし つなげ る 時間は1500にする ⑳ 基本 から show leds のブロックをド ロップ ドラッグし つなげる (エ) シミュレーターで確認しよう ゆさぶられたとき ブロックを使用すると シュミレータ上に SHAKE ボタンが現れます これをクリックすることで動作確認ができます 21 / 31
新しい論理ブロックを作る方法 元の論理ブロック 作成した新しい論理ブロック 作成方法 ②論理ブロック作成エリア が表示される ① 歯車マークをクリック ③左側の else if をドラッグ ドロップし 右側の if と else if の間に入れる ④ 歯車マークをクリック 完成 22 / 31 メモ 3 分
3 プログラム 温度計 と 照度計 を作ろう (ア) プログラムの内容 ボタン A が押されたとき 明るさ 0 255 を表示 ボタン B が押されたとき 温度 を表示 ボタン A+B を押したとき 表示を消す (イ) 完成したプログラム ツールボックスの 入力 からドラッグ ドロップ (ウ) シミュレーターで確認しよう 明るさや温度を変えながら 動作を確認することができます ドラッグで明るさを変更できる ドラッグで温度を変更できる 23 / 31
4 プログラム micro:bit に働く加速度を表示しよう (ア) プログラムの内容 ボタン A で X 方向の加速度を表示 Y( ) Z( ボタン B で Y 方向の加速度を表示 ボタン A B で Z 方向の加速度を表示 X( X 方向へゆさぶったら X 方向の加速度を表示 Z( X( Y( ) (イ) 完成したプログラム ブロックはツールボッ クスの 入力 からドラ ッグ ドロップします (ウ) micro:bit でプログラムの動作確認 micro:bit にプログラムを送り micro:bit で確認します シミュレーターでは動作確認できません ①A B A+B の3種類のボタンで それぞれ数値が表示されることを確認します 次の図Ⅰ 図Ⅱは micro:bit の向きと重力加速度の値の関係です micro:bit の向きを変えて この図の数値と近い値になることを確認します 図Ⅰ X -512-1023 -512 Y -512 0 512 1023 Z 0 0 0 0 24 / 31 0 512 1023 512 512 0-512 0 0 0
8 プログラムを micro:bit に送る方法 図 Ⅱ X Y 表裏 0 0 0 0 0 0 0-512 0 512 1023 512 0-512 Z 512 1023 512 0-512 -1023-512 2X 方向に micro:bit を手で振り X の値を確認してください 右側に振ると プラスの値になり 左側に振るとマイナスの値になります 振る強さが強いほど 値が大きくなります X の値から振った方向と大きさがわかります この方向から見た図です 1 の値の範囲は 1023~+1023 2 は値の範囲は -2027~2027( 振った加速度が加わるため 1 より大きくなります ) micro:bit 加速度センサーの予備知識 メモ 4 モノを落とすと下に落ちます これはモノに下向きの力が働いているためで この力を重力といいます micro:bit も重力が働いています micro:bit では加速度センサーで重力を X Y Z の 3 方向 ( 右図 ) で測定し それを加速度ブロック X,Y,Z の値とします 物を落とすと下に落ちるにに 重力 下の図 A~ 図 C を使って考えてみます 図 A では Y(+) 方向は重力の方向と同じ下向きなので Y の値は重力加速度の値 ( 約 1023) となります また X と Z の値は X と Z の方向には 下方向の重力が働かないためゼロになります 図 B では 同様に Z の値が重力加速度の値になりますが マイナス方向の Z( ) のため Z の値は約ー 1023 とマイナスの値になります X Y の値は図 A と同様の理由でゼロになります 図 C は Y(+) と X(+) の両方に分散して重力が働くため X Y の値は 重力加速度を分散した値 ( 約 512) になります Z の値は図 A と同様にゼロになります X,Y,Z の値がわかれば micro:bit の向きや角度がわかります これを利用したブロックがすでに用意されていますので 事項で学習します 図 C 図 A 図 B 表面が上 重力 Y(+) Z(+) Y(+) X(+) 25 / 31
5 micro:bit の向きで表示が変わるプログラムを作ろう (ア) プログラムの内容 加速度センサーを使ったブロックを使用します ゆさぶられたら マークを表示 ロゴが上になったら うれしい顔を表示 ロゴが下になったら 悲しい顔を表示 画面が上になったら 寝てる顔を表示 画面が下になったら おこり顔を表示 左に傾けたら 大きいハートを表示 右に傾けたら 小さいハートを表示 (イ) 完成したプログラム ゆさぶられたとき はツールボックスの 入力 からドラッグ ドロップ 他のブロックは ゆさぶられたと き のブロックの をクリック し メニューから選択します (ウ) micro:bit を使ってプログラムの確認 micro:bit にプログラムを送信し micro:bit で確認します 26 / 31
6 角度を測定するプログラムを作ろう 作成中 27 / 31
7 コンパスを作ろう (ア) プログラムの内容 北側 北側を向いたときに N の文字を表示します 北側以外の向きの時は マークを表示します 北側の範囲は 315度を超える または (イ) 完成したプログラム (ウ) シミュレーターでの動作確認 ドラッグで角度を変更し 確認します 28 / 31 45度未満 315 0 45
8 音を出すプログラムを作ろう (ア) プログラムの内容とスピーカーの接続方法 ボタン A を押すと ハッピーバスデーの曲が流れる ボタン B を押すと ドレミの音がでる (イ) 完成したプログラムとシミュレーターによる確認 シミュレーター上で音の確認ができます 29 / 31
9 踊るアニメーションのプログラムを作ろう (ア) プログラムの内容 顔はロゴ を使用 手足を少しづつ動かした絵を準備し 順番に表示 A ボタンを押すと曲を流す (イ) 完成したプログラムと シミュレーターでの動作確認 最終形 30 / 31 シミュレーター
10 作成中 31 / 31 micro:bit 同士で通信しよう