「ものづくり:make」を楽しみながら学ぶ人へ向けた独習サポートサイト。

micro:bit Lab.【マイクロビット】

micro:bit Lab.では、micro:bit【マイクロビット】に関する情報を紹介しています。

キーボードを使ったブロックベースコーディング
付録1-13

キーボードコントロールでドキドキハート

2025-07-252025-07-25

ブロックベースコーディングのアクセシビリティ向上の一環として、マウスを使わずキーボードだけでコーディングが可能となるキーボードコントロールがリリースされました。ドキドキハートのプログラムを作りながら、キーボード操作を紹介します。

キーボードコントロール(Keyboard Controls)

Micro:bit教育財団(Micro:bit Educational Foundation)では、ブロックベースコーディングのアクセシビリティ向上に努めており、その一環として、マウスを使わずキーボードだけでコーディングが可能となるキーボードコントロール(keyboard Controls)をリリースしました。キーボードコントロールを有効にすることで、ブロックの選択や移動だけでなく、ワークスペースやシミュレーターなどのエリア間の移動もキーボードから行えます。

本記事では、micro:bitのLED画面に小さいハートと大きいハートを交互に表示する「ドキドキハート」というプログラムを作りながら、キーボード操作を紹介します。なお、PC環境はWindows、ブラウザーはGoogle Chromeです。Macでの操作やより詳しい情報は「MakeCode keyboard controls guide」をご覧ください。

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

ブラウザーの起動後、Microsoft MakeCode for micro:bitへアクセスします。[Tab]を押すと、画面の上部に「新しいプロジェクト」と表示されるので、そのまま[Enter]を押します。

過去に作ったプロジェクトを開くには

過去に作ったプロジェクトを開くには[Tab]を2回押して「プロジェクトを読み込む」を選択して[Enter]を押します。ファイル・共有プロジェクトのURL・GitHubリポジトリーから読み込むことができます。

また、画面中段に表示されているマイプロジェクトから選択する場合は[Tab]を複数回押して、対象のプロジェクトまで移動した後[Enter]を押します。

図1-1.[Tab]で「新しいプロジェクト」を選択して[Enter]
図1-1.[Tab]で「新しいプロジェクト」を選択して[Enter]

名前を入力して[Enter]を押します。

図1-2.名前を入力して[Enter]
図1-2.名前を入力して[Enter]

新しいプロジェクトのエディター画面が開きました。ようこそ!の画面が表示された場合は、[Tab]で×印、または「次へ」を選択して[Enter]を押します。

図1-3.[Tab]で×印を選択して[Enter]
図1-3.[Tab]で×印を選択して[Enter]

キーボードコントロール(Keyboard Controls)を有効にする

エディター画面が開いた直後に[Tab]を押すと、画面の上部に「Enable blocks keyboard controls」と表示されるので、そのまま[Enter]を押します。

図1-4.[Tab]で「Enable blocks keyboard controls」を選択して[Enter]
図1-4.[Tab]で「Enable blocks keyboard controls」を選択して[Enter]

キーボードコントロールが有効になると、右側にショートカットの一覧が表示されます。[↑][↓]で上下にスクロールできます。

図1-5.キーボードコントロールのショートカット一覧
図1-5.キーボードコントロールのショートカット一覧

この一覧は[Ctrl]を押しながら[/]を押すことで、表示・非表示を切り替えることができます。

図1-6.[Ctrl]を押しながら[/]を押して表示・非表示に切り替え
図1-6.[Ctrl]を押しながら[/]を押して表示・非表示に切り替え

エリア間を移動するには

MakeCodeのエディター画面は、5つのエリアで構成されています。上段のメインメニュー、中段のシミュレーター・ツールボックス・ワークスペース、下段のツールバーです。このエリア間を移動するには[Ctrl]を押しながら[B]を押して、エリアメニューを表示します。

図1-7.[Ctrl]を押しながら[B]を押してエリアメニューの表示
図1-7.[Ctrl]を押しながら[B]を押してエリアメニューの表示

それぞれのエリアに番号が表示されるので、移動したいエリアの番号を押します。または[Tab]でエリアを選択した後[Enter]を押して移動することもできます。

図1-8.エリアの選択
図1-8.エリアの選択

では、3番のツールボックスに移動しましょう。ツールボックスに移動すると、基本カテゴリーのブロックが表示されているので、その中から「アイコンを表示」を選択します。操作は[→][↓][↓][↓]で移動した後[Enter]を押します。

図1-9.ブロックの選択
図1-9.ブロックの選択

ブロックを選択すると、ワークスペースへ移動します。この時、ブロックの右上にアイコン(上下左右の矢印)が表示され、移動モードであることが示されます。

[↑][↓][←][→]を使って目的の位置へ移動した後[Enter]で決定します。ここでは「ずっと」ブロックの中へ移動します。

図1-10.ブロックの移動(移動モード)
図1-10.ブロックの移動(移動モード)

[T]を押してみましょう。これは、直接ツールボックスへ移動するショートカットです。ツールボックスへ移動した後「アイコンを表示」を選択して、ブロックをつなげます。

図1-11.[T]でツールボックスへ移動
図1-11.[T]でツールボックスへ移動

ワークスペースが選択されているとき、操作の対象となるブロックを示すフォーカス(黄色い枠)を[↓][↑]で移動することができます。

上側の「アイコンを表示」をフォーカスして[→]を押します。そのブロックのパラメーターにフォーカスが移動するので、そのまま[Enter]を押します。

図1-12.ブロックの選択とパラメーターの変更
図1-12.ブロックの選択とパラメーターの変更

アイコンの一覧が表示されるので[→]で「小さいハート」を選んで[Enter]を押します。

図1-13.パラメーターの選択
図1-13.パラメーターの選択

これで「ドキドキハート」の完成です。マウスに触れることなく、キーボードの操作だけでコーディングができました。

図1-14.ドキドキハートの完成
図1-14.ドキドキハートの完成

ここで紹介したショートカット以外にも、ブロックの削除・移動・複製など、さまざまな操作がキーボードからできます。下の図で一例を紹介します。

図1-15.その他のショートカット
図1-15.その他のショートカット

プログラムをダウンロードする

[Ctrl]を押しながら[B]を押して、エリアメニューを表示します。[5]を押して、下段のツールバーへ移動します。

図1-16.[Ctrl]を押しながら[B]を押してエリアメニューの表示・ツールバーの選択
図1-16.[Ctrl]を押しながら[B]を押してエリアメニューの表示・ツールバーの選択

ダウンロードボタンが選択されているので、そのまま[Enter]を押します。

図1-17.ダウンロードボタンの選択
図1-17.ダウンロードボタンの選択

[Tab]で「次へ」を選択して[Enter]を押します。

図1-18.「次へ」の選択
図1-18.「次へ」の選択

[Tab]で「ペア」を選択して[Enter]を押します。

図1-19.「ペア」の選択
図1-19.「ペア」の選択

この手順は使用するブラウザーによって異なる場合があります。Google Chromeの場合、[Tab][↓]の順に押すと、一覧から「BBC micro:bit」が選択できるので、そのまま[Enter]を押します。

図1-20.「BBC micro:bit」の選択
図1-20.「BBC micro:bit」の選択

[Tab]で「ダウンロード」を選択して[Enter]を押します。あとは、ダウンロードが完了するのを待つだけです。

図1-21.「ダウンロード」の選択
図1-21.「ダウンロード」の選択

ホームへ戻る

[Ctrl]を押しながら[B]を押して、エリアメニューを表示します。[1]を押して、上段のメインメニューへ移動します。

図1-22.[Ctrl]を押しながら[B]を押してエリアメニューの表示・メインメニューの選択
図1-22.[Ctrl]を押しながら[B]を押してエリアメニューの表示・メインメニューの選択

[Tab]で「ホーム」を選択して[Enter]を押します。

図1-23.「ホーム」の選択
図1-23.「ホーム」の選択

ホームへ戻りました。

図1-24.ホーム画面
図1-24.ホーム画面
この記事を読んだ人は、こんな記事にも興味があります。
スポンサーリンク
TOPへ移動
目次へ移動