ブロック設計

長年にわたり、Blockly チームは独自のブロックを多数設計し、他のユーザーがブロックを設計できるよう支援してきました。以下に、学んだ教訓をいくつか示します。

上位レベルのブロックを優先する

実行パフォーマンスや柔軟性が低下する場合でも、可能な限り上位レベルのアプローチを採用する必要があります。次の Apps Script 式について考えてみましょう。

SpreadsheetApp.getActiveSheet().getDataRange().getValues()

すべての潜在的な機能を保持する 1:1 マッピングでは、上記の式は 4 つのブロックを使用して構築されます。ただし、Blockly はより高レベルを目標としており、式全体をカプセル化する 1 つのブロックを提供します。残りの 5% が難しくなる場合でも、95% のケースを最適化することが目標です。Blockly は、テキストベースの言語に代わるものではなく、ユーザーがテキストベースの言語を使用できるように、最初の学習曲線を克服できるようにすることを目的としています。

推奨事項: API 全体をブロックに変換しないでください。

ユーザー入力の選択肢を検討する

プルダウン、数値フィールド、値入力の 3 つの繰り返しブロックで、数値を入力するさまざまな方法を示しています。

ユーザーからパラメータを取得する方法は 3 つあります。プルダウンは最も制限が厳しく、シンプルなチュートリアルや演習に適しています。入力フィールドを使用すると自由度が高まり、より創造的なアクティビティに適しています。値ブロック入力(通常はシャドウ ブロックを使用)を使用すると、静的な値ではなく値(乱数生成など)を計算できます。

推奨事項: ユーザーに適した入力方法を選択してください。

条件ブロックとループ ブロックを別々に使用する

if/then ブロックと while ブロックが同じカテゴリにあることを示す反例。

新規ユーザーにとって最も難しいブロックは、条件文とループです。多くのブロックベースの環境では、これらのブロックの両方が同じ「コントロール」カテゴリにグループ化され、両方のブロックの形状と色が同じになります。新規ユーザーが 2 つのブロックを混同するため、ユーザーの不満につながることがよくあります。Blockly では、条件文とループを「論理」と「ループ」の個別のカテゴリに移動し、それぞれ異なる色で表示することをおすすめします。つまり、これらは、形状は似ているものの、動作が異なる明確に異なるアイデアです。

推奨: 条件とループを分離する。

可変数の入力を処理する

一部のブロックでは、入力の数を変更する必要がある場合があります。例: 任意の数値のセットを合計する加算ブロック、任意の elseif 句を含む if/elseif/else ブロック、任意の数の初期化要素を含むリスト コンストラクタ。いくつかの戦略があり、それぞれに長所と短所があります。

a)最も簡単な方法は、ユーザーが小さなブロックからブロックを作成できるようにすることです。たとえば、2 つの 2 桁の数値の加算ブロックをネストして、3 つの数値を加算します。別の例として、if/else ブロックのみを提供し、ユーザーがそれらをネストして elseif 条件を作成する方法があります。

ネストされた加算ブロック: 1 +(2 + 3)。

このアプローチの利点は、(ユーザーとデベロッパーの両方にとって)最初はシンプルであることです。ネストが多数ある場合、コードが非常に煩雑になり、ユーザーが読みやすく保守しづらくなるというデメリットがあります。

b)別の方法として、ブロックを動的に拡張して、常に 1 つの空き入力が最後に残るようにすることもできます。同様に、末尾に 2 つの空き入力がある場合、ブロックは最後の入力を削除します。これは、App Inventor の最初のバージョンで使用されていたアプローチです。

4 つの値入力を追加するブロック(最後の入力は空)。

自動的に増加するブロックは、いくつかの理由から App Inventor のユーザーに不評でした。まず、常に自由な入力があり、プログラムは決して「完成」しませんでした。2 つ目は、編集の下のすべての要素を切断して再接続する必要があるため、スタックの中央に要素を挿入するのが面倒でした。ただし、順序が重要ではなく、ユーザーがプログラムの穴を気にしない場合は、非常に便利なオプションです。

c)穴の問題を解決するために、一部のデベロッパーは、入力を手動で追加または削除する +/- ボタンをブロックに追加しています。Open Roberta では、このようなボタンを 2 つ使用して、下部から入力を追加または削除します。他のデベロッパーは、スタックの中央からの挿入と削除に対応できるように、各行に 2 つのボタンを追加しています。他にも、スタックの並べ替えに対応できるように、各行に 2 つの上下ボタンを追加する方法もあります。

3 つの外部値入力を追加するブロック。入力を追加または削除するためのプラスボタンとマイナスボタンがあります。

この戦略は、ブロックごとに 2 つのボタンから行ごとに 4 つのボタンまで、さまざまなオプションがあります。一方では、ユーザーが必要なアクションを実行できない危険性があり、もう一方では、UI がボタンでいっぱいになって宇宙船エンタープライズのブリッジのように見える可能性があります。

d)最も柔軟な方法は、ブロックにミュータブル バブルを追加することです。これは、そのブロックの構成ダイアログを開く単一のボタンとして表されます。要素は自由に追加、削除、並べ替えることができます。

3 つの値入力を追加し、値入力の追加または削除を行うミュータタを持つブロック。

この方法の欠点は、初心者ユーザーにとってミュータタが直感的ではないことです。ミューテータを導入するには、なんらかの形式の指示が必要です。低年齢の子どもを対象とする Blockly ベースのアプリでは、ミュータタを使用しないでください。一度習得すれば、パワーユーザーにとって非常に有用です。

推奨事項: 各戦略には長所と短所があります。ユーザーに適したものを選択してください。