Blockly と Blockly のゲームチームは長年にわたり、Blockly ベースのアプリケーションを開発する人に役立つ多くの教訓を学んできました。以下は、Google が犯した誤りと、他の人がよくある間違いをまとめたものです。
これらは Blockly のビジュアル スタイルを使用して習得した一般的な教訓であり、すべてのユースケースやデザインに当てはまるわけではありません。他のソリューションが存在する場合もあります。また、これはユーザーが直面する可能性のある問題とその回避方法を網羅したリストではありません。すべてのケースは若干異なり、独自のトレードオフがある場合があります。
1. 枠線スタイル
2000 年代は「アクア」のような外観が特徴で、画面上のオブジェクトはすべてハイライトとシャドウで装飾されていました。2010 年代は「マテリアル デザイン」の外観が採用され、画面上のすべてのオブジェクトが、すっきりした平坦で枠線のない形状に簡略化されています。ほとんどのブロック プログラミング環境では、各ブロックの周囲にハイライトとシャドウがあります。そのため、今日のグラフィック デザイナーは、こうした古い装飾を取り除くことでしょう。
上の 5 つのブロック（scriptr.io から）の例からわかるように、同じ色の接続されたブロックを区別するには、こうした「古い装飾」が不可欠です。
おすすめの方法: Blockly をリスニングする場合は、最新のファッションによってアプリが壊れることがないようにしましょう。
2. サブスタックのネスト
C 字型のブロックの場合は、必ず内側にコネクタがありますが、中には内側の下部にコネクタがあるものもあります（Wonder Workshop など）。他の環境（Blockly や Scratch など）にはコネクタがありません。ほとんどのステートメント ブロックには上部と下部の両方のコネクタがあるため、一部のユーザーには、下部にコネクタがない「C」にステートメントが収まることをすぐに確認できないことがあります。
1 つのステートメント ブロックが「C」の中に収まるとわかったら、その 1 つのステートメントも適合することを理解する必要があります。環境によっては、最初の文の下位のつながりを「C」の一番下にネストする環境（Wonder Workshop や Scratch など）もあれば、小さなギャップが残る環境（Blockly など）もあります。ぴったりのネスト構造の場合、それ以上のブロックを積み重ねられる可能性は示されません。
この 2 つの問題は相互にうまく関係しています。下部のコネクタが存在する場合（Wonder Workshop）、最初の文の接続はわかりやすくなりますが、スタックを検出することはできません。下部コネクタが存在しない場合（Blockly）、最初のステートメントの接続は自明ではありませんが、スタックは検出可能です。下部に内部コネクタがなく、ステートメントの下部コネクタ（スクラッチ）をネストすると、Blockly でテストしたときに、検出可能性が最も悪くなりました。
私たちの経験では、最初の文のつながりは、スタックを発見するよりもユーザーにとって課題が少ないというものでした。発見されると前者は決して忘れられませんが、後者にはプロンプトが必要です。Blockly はワンダー ワークショップと Scratch アプローチの両方を試し、ある日レンダリング バグが発生し、小さなギャップが生まれました。このバグにより、Blockly ではユーザー調査が大幅に改善されました（現在は「機能」となっています）。
おすすめの方法: Blockly をリスニングする場合は、既存のスタック UI をそのままにします。
3. 対称接続
Blockly には、横型のパズルシェイプと縦型の積み重ねノッチの 2 種類の接続タイプがあります。優れたユーザー インターフェースには、デザイン要素の数を最小限に抑える必要があります。そのため、多くの設計者は両方の接続タイプを同じように見えるようにしようとします（下記参照）。
そのため、互換性のない接続に適合するようにブロックをローテーションする方法を探す新規ユーザーの間で混乱が生じます。Blockly はプログラミング要素を視覚的かつ具体的に示すものであるため、サポートされていないユーザー操作を意図せず提案することに注意する必要があります。
そのため、Blockly は、値のつながりにぴったり合うパズル形状を使用し、ステートメントの積み重ねには視覚的に区別できる配置用ノッチを使用します。
おすすめの方法: Blockly をリスニングする場合は、水平方向と垂直方向の接続が異なっていることを確認してください。
4. 変数名と関数名
プログラマーの初心者は、location_X と location_x が異なる変数であるとは想定していません。そのため、Blockly は BASIC と HTML と同様に、変数と関数で大文字と小文字を区別しないようにしています。Scratch では、より細かなアプローチ（右の例を参照）を使用します。変数名の大文字と小文字は区別されますが、等価性チェックでは大文字と小文字が区別されません。
また、変数と関数が一般的な [_A-Za-z][_A-Za-z0-9]* スキームに準拠している必要もありません。変数に List of zip codes や רשימת מיקודים という名前を付ける場合は、まったく問題ありません。
おすすめの方法: 大文字と小文字を区別せずに、任意の名前を許可します。
5. グローバル変数
また、プログラマーの初心者にとっても、スコープの把握が難しくなります。その結果、Blockly はすべての変数をグローバルにして、Scratch に先駆けてすべての変数をグローバルに展開します。グローバル変数の唯一の欠点は、再帰が複雑になることです（変数をリストにプッシュ / ポップする必要がある）。ただし、このプログラミング手法は Blockly のターゲット ユーザーの範囲を超えています。
推奨事項: スコープは対象範囲外であるため、後で使用するために残す。
6. 手順
Blockly Games は独学で学べるように設計されています。教師や授業計画は必要ありません。そのため、Blockly Games の最初のバージョンではレベルごとに説明が用意されていました。ほとんどの生徒には読まないでしょう。1 つの文にまとめ、フォントサイズを大きくして、黄色のふきだしでハイライト表示しました。ほとんどの生徒には読まないでしょう。手順を示すモーダル ポップアップを作成しました。ほとんどの生徒たちは、ポップアップを目立たないうちに閉じてしまい、しまいました。
最後に、閉じることができないポップアップを作成しました。これらのアプリは、生徒の操作を監視し、生徒が必要な操作を行った場合にのみ閉じるようにプログラムされています。このようなコンテキストアウェアなポップアップは、プログラミングには困難ですが、非常に効果的です。また、ワークスペースを妨げずに画角内にいることも重要でした。
おすすめの方法: 手順は簡潔で永続的にする必要がありますが、煩わしくありません。
7. コードの所有権
特定の概念を教えるために設計された演習では、多くの場合、部分的な解答が得られますが、学生はそれを望ましい効果を得るために修正する必要があります。これをサポートするために、編集不可、移動不可、削除不可のブロックのクラスが Blockly に作成されました。しかし、この穴埋め問題は生徒にとって嫌いでした。 ソリューションに対する当事者意識がありません。
同じ概念を教える自由形式の演習を設計することは、より困難です。効果が実証されている手法の 1 つは、ある演習で、学生独自のソリューションを次の演習の出発点として使用することです。
おすすめの方法: ユーザー向けのコードを記述しないでください。
8. ワークスペースのレイアウト
画面を左から右にレイアウトするには、次の 2 つの方法があります。1 つは、左側のツールバー、中央のワークスペース、右側の出力の可視化から始まります。このレイアウトは、Scratch のバージョン 1 と Made with Code で使用されます。
もう一つは左側の出力の可視化、中央のツールバー、右側のワークスペースから始まります。このレイアウトは、Scratch バージョン 2 と大部分の Blockly アプリで使用されます。
いずれの場合も、ワークスペースは利用可能な画面サイズを占めるように引き伸ばす必要があります。ユーザーは、プログラムできるスペースを十分に確保する必要があります。上のスクリーンショットからわかるように、最初のレイアウトではユーザーのコードと出力の可視化が分離されているため、ワイド画面ではパフォーマンスが低下します。2 つ目のレイアウトでは、3 つのセクションをすべて近づけながら、より大きなプログラム用のスペースを確保できます。
また、ユーザーがまず解決しようとしている問題を検討し、提供されるツールを確認してからプログラミングを始めることも理にかなっています。
もちろん、アラビア語とヘブライ語の翻訳では、注文全体を入れ替える必要があります。
使用するシンプルなブロックの数が少ない場合などは、ツールボックスをワークスペースの上または下に配置することをおすすめします。Blockly はこれらのケースについてツールボックスでの水平スクロールをサポートしますが、慎重に使用する必要があります。
推奨事項: プログラムのビジュアリゼーションをツールバーの横に配置してください。
9. 終了戦略
多くの場合、ブロックベースのプログラミングはプログラミングの出発点になります。コンピュータ プログラミングを教えるという観点から見ると、これは、生徒が中毒になってからより難しい問題に移る前の、ゲートウェイ ドラッグです。このブロックベースのプログラミング期間の長さは学生にとってどれほどの時間を使うべきか、活発に議論されていますが、プログラミングを教えることが目的であれば、これは一時的なものであるべきです。
そのため、教育用プログラミングではブロックベースのプログラミング環境を 生徒に適した独立した場所とする必要がありますBlockly Games には 4 つの戦略があります。
- ブロック上のテキスト（「if」、「while」など）はすべて、テキストベースのプログラミング言語に合わせて小文字になります。
- 受講生のコードの JavaScript 版は、各レベルの後に必ず表示されるため、内容に慣れることができます。
- 最後から 2 番目のゲームでは、ブロック テキストが実際の JavaScript に置き換えられます（右を参照）。この時点では、生徒は JavaScript でプログラミングをしています。
- 最終的なゲームでは、ブロック エディタがテキスト エディタに置き換えられます。
教育用プログラミングに使用されるブロックベースのプログラミング環境では、学生を卒業するための具体的な計画が必要です。また、確固たる終了戦略は、ブロックベースのプログラミングが「真のプログラミング」ではないと主張する人々を食い止めるうえでも大いに役立ちます。
おすすめの方法: ユーザーの最終目標と適切なデザインを考慮します。