キーボード ナビゲーション

このガイドでは、現在 Blockly に実装されているデフォルトのキーボード ナビゲーションの使用方法について説明します。

キーボード ナビゲーションの使用

キーボード ナビゲーションを正常に行うには、ユーザーが次のタスクを実行できる必要があります。

  • ワークスペース内を移動する
  • ワークスペースでブロックを接続する
  • ワークスペースにブロックを追加する
  • ブロックの接続を解除
  • ツールボックスを操作する
  • フライアウトを操作する
  • フライアウトからブロックを挿入する

以下では、Blockly のデフォルトのキーボード ナビゲーションでこれらのタスクを行う方法について説明します。

キーボード ナビゲーションの有効化

キーボード ナビゲーションを有効または無効にするには、Shift+Ctrl+K キーを押します。キーボード ナビゲーションが最初に有効になると、点滅する赤い線がワークスペースに表示されます。これがカーソルです。ユーザーの現在地と、ユーザーがワークスペース内を移動すると最新情報が表示されます。
ユーザーがシフト コントロール K を押すと、点滅する赤い線が画面に表示されます。これがカーソルです。

Enter キーを押すと、ユーザーのマーカーを表す青い線が現在地に作成されます。マーカーは、ブロック挿入のターゲット位置を示します。ワークスペース内でカーソルを動かしても更新されません。
ユーザーがタップすると、青い線が画面に表示されます。これがマーカーです。

デフォルト カーソルの使用

ワークスペースは、入力、フィールド、接続、ブロック、ワークスペース座標で構成されます。デフォルトのカーソルは、すべてのコンポーネントを異なるレベルに分割することで、ワークスペース内を移動します。

レベル間を移動するには、A キーと D キーを使用します。レベル内を移動するには、W キーと S キーを使用します。

Workspace レベル

Shift+Ctrl+K を押してキーボード ナビゲーション モードを開始します。これにより、カーソルがワークスペースまたはワークスペースの最初のブロックに移動します。カーソルがブロック上にある場合は、A を 2 回押してワークスペース レベルに移動します。ワークスペース上でカーソルを移動するには、Shift+WASD キーを押します。スタックレベルに移動するには、D キーを使用します。
ユーザーが Shift キーと W A S D キーを押すと、Blockly のワークスペース上のカーソルが移動します。ユーザーが d をタップすると、カーソルが最初のブロックのスタックを囲む長方形として表示される

スタックレベル

スタックレベルでは、W キーと S キーを使用して、ワークスペース上のブロックのスタック間を移動できます。このレベルでは、カーソルはスタック内のすべてのブロックを囲む赤い実線の長方形で表示されます。選択したスタック内の最初のブロックに移動するには、D キーを使用します。
キーを押すと、カーソルが次のブロックのスタックに移動します。ユーザーが d を押すと、選択したスタック内の最初のブロックの上にカーソルが点滅する赤い線として表示されます。

ブロックとコネクション・レベル

このレベルには、ブロックと、そのブロック上のすべての外部接続が含まれます。デフォルトのカーソルは、前の接続または出力接続がある場合はブロックをスキップするように設定されています。どちらも存在しない場合、以下に示すようにカーソルがブロックに移動します。

ユーザーが D キーを押すと、カーソルが積み重ねられたブロックを囲む赤い長方形から、最初のブロックを囲む長方形の半分に移動します。

考えられる 3 つの外部接続を以下に示します。
赤い線は外部接続の 3 つの可能性を示しています。ブロック上の前、次、出力の接続です。

ブロックレベルと接続レベルでは、W キーと S キーを使用して外部接続を移動できます。このレベルでは、現在の接続の輪郭が赤色で点滅してカーソルが表示されます。最初のフィールドまたはブロックの入力に移動するには、D キーを押します。
S キーを押すと、ブロックの次のコネクションでカーソルが赤色の点滅線として表示されます。D キーを押すと、カーソルがブロックの最初のフィールドの周りに赤い長方形の形で表示されます。

フィールドと入力レベル

このレベルでは、ブロックのすべてのフィールドと入力が保持されます。フィールドと入力の表示例を以下に示します。
ブロックの入力とフィールドの例が赤い長方形でハイライト表示されています。
このレベルでは、W キーと S キーを使用して、現在のブロックの編集可能なフィールドと入力間を移動できます。フィールドの場合、カーソルは赤色の塗りつぶしの長方形になります。入力の場合、カーソルは点滅する赤いパズルのピースになります。カーソルが入力にある場合は、D キーを押して、接続されたブロックに移動します。

ユーザーが S キーを押すと、カーソルがブロックの入力とフィールドの間を移動します。接続されたブロックの入力で d を押すと、接続されたブロックの上にカーソルが点滅する赤い線として表示されます。

フィールドにカーソルを合わせ、Enter キーを押して編集します。

カーソルは、フィールドを囲む赤い長方形で表示されます。ユーザーが入力するとプルダウンが開きます。S キーを押してプルダウンで値を選択し、Enter キーを押してプルダウンを閉じます。

Workspace でブロックをつなぐ

  1. WASD キーを使用して、移行先の接続に移動します。
  2. Enter キーを使用して接続をマークします。
  3. WASD キーを使用して有効な接続ポイントに移動する
  4. I キー（挿入用）を使用して 2 つのブロックを接続します

入力接続は青い点でマークされています。ユーザーが有効な接続で i を押すと、ブロックはマークされた接続ポイントに移動します。

ワークスペース上でのブロックの移動

通常 Blockly では、ブロックをワークスペースに移動し、目的の位置にドラッグして離します。キーボード ショートカットを使用すると、目的の場所をマークして、移動するブロックに移動してから移動するように指示できます。

  1. Shift+WASD キーを使用して、ワークスペース上の位置に移動します。
  2. Enter キーを使用して、ワークスペース上の場所にマークを付けます。
  3. WASD キーを使用して、移動するブロックに移動します。
  4. I キーを使用して、マークした場所にブロックを移動します。

Blockly ワークスペースにカーソルが表示されます。ユーザーが Enter キーを押すと、現在地にマークが付けられ、その場所に青い線が表示されます。WASD キーを使用して、カーソルをブロックの外部接続に移動します。ユーザーが i を押すと、ブロックがマークされた位置に移動します。

ブロックのデタッチ

通常、Blockly では、下位のブロックを選択して親ブロックからドラッグすることで、2 つのブロックを切り離します。キーボード ショートカットを使用すると、解除する接続にカーソルを合わせた状態で X キーを押すことで、ブロックを切断できます。

  1. WASD キーを使用して、切断する接続に移動します。
  2. X を使用して接続を切断する

画面上の 2 つのブロックが接続され、中央にカーソルが表示されています。[X] キーを押すとブロックが解除されます。

ツールボックスからブロックを挿入する

  1. T キーを押してツールボックスを開きます。
  2. カテゴリ間を移動するには W キーと S キーを使用します
  3. D キーを押すと、フライアウト内のブロックに移動します。
  4. W キーと S キーを使用してブロック間を移動します
  5. Enter キーを押して、フライアウトからブロックを挿入します

T キーを押すとツールボックスが開き、さまざまなカテゴリのブロックが表示されます。S を押すと、別のカテゴリに移動します。ユーザーが d を押すと、そのカテゴリの最初のブロックがハイライト表示されます。Enter キーを押すと、ワークスペースにブロックが配置され、ツールボックスが閉じます。

テスト

ユーザーが興味を持つ可能性が高い 4 つの主な領域は次のとおりです。

  1. キーマッピング: どのキーをどのアクションにマッピングするか。
  2. スクリーン リーダー/ロギング/警告のテキスト: スクリーン リーダーがカーソルの位置やエラー、警告を読み上げる方法。
  3. ワークスペースのナビゲーション: ワークスペース上のさまざまなブロック、フィールド、入力、接続の移動方法。
  4. カーソルの外観: カーソルとマーカーの表示形式。

これらの API の使用方法について詳しくは、Blockly Keyboard Navigation の Codelab をご覧ください。

テストしたいと思われる領域が他にある場合は、フォームにご記入ください。

よくある質問

Q: キーボード操作に矢印キーを使用しなかったのはなぜですか？
A: スクリーン リーダーは通常、矢印キーを使用します。干渉する意図がないため、WASD 鍵を使用することにしました。
ただし、ユーザーごとにニーズが異なるため、キーマッピングを簡単に変更する方法を作成することを強くおすすめします。

Q: かなり複雑に見えますが、なぜ別のレイヤが必要なのですか？
A: キーボード ナビゲーションについて考えるとき、さまざまなブロック、接続、フィールド、入力、ワークスペース座標間を移動するための構造化された方法が必要でした。
内部的には、これを抽象構文ツリー（AST）で表現します。デフォルトのカーソル実装はこのモデルからそれほど離れていません。これは、デベロッパーが基盤となるアーキテクチャをより深く理解できるようにするためのものです。他にもエンドユーザーにとってわかりやすいcursorsがあります。

制限事項

ブロック以外のコンポーネント（ゴミ箱、ズームボタン、フライアウト ボタンなど）への移動はまだサポートされていません。制限事項の詳細については、オープン キーボード ナビゲーションのbugsのリストをご覧ください。