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

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

をご覧ください。

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

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

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

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

キーボード ナビゲーションを有効にする

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

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

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

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

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

ワークスペース レベル

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

スタックレベル

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

ブロックと接続レベル

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

ユーザーが d キーを押すと、カーソルはブロックのスタック全体を囲む赤い長方形から、スタック内の最初のブロックを囲む長方形の半分に変わります。

外部接続には次の 3 種類があります。
3 つの可能な外部接続が赤い線でハイライト表示されています。これらは、ブロックの前の接続、次の接続、出力接続です。

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

フィールドと入力レベル

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

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

カーソルがフィールド上にある場合は、Enter キーを押して編集します。

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

ワークスペースでブロックを接続する

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

入力接続には、マークされていることを示す青い点が表示されます。ユーザーが有効な接続で 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 キーボード ナビゲーション コードラボをご覧ください。

他にもテストしたい領域があり、Google がサポートできる場合は、こちらのフォームにご記入ください。

よくある質問

Q: キーボード ナビゲーションに矢印キーを使用しなかったのはなぜですか？
A: スクリーン リーダーでは通常、矢印キーが使用されます。これを妨げないように、WASD キーを使用することにしました。
ただし、ユーザーのニーズはそれぞれ異なるため、キーマッピングを簡単に変更できるようにすることを強くおすすめします。

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

制限事項

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