Blockly アプリケーションは、Blockly エディタ(ワークスペース)を含むウェブ アプリケーションです。このドキュメントでは、Blockly アプリケーションの用途の例と、一般的な UI 機能について説明します。
まだお読みでない場合は、このドキュメントに進む前に、ビジュアル用語集と基本的な申請手順を必ずお読みください。
Blockly アプリケーションの機能
Blockly アプリケーションを使用すると、ユーザーはビデオゲームからロボット工学、データ分析まで、さまざまな分野でプログラムを作成できます。ユーザーはブロックを使用してプログラムを作成します。アプリケーションは、このブロックを使用して JavaScript や Python などのテキストベースのコードを生成します。アプリケーションは、生成されたコードを直接実行するか、ユーザーがダウンロードして別のプラットフォームで実行します(ロボットや携帯型ゲーム コントローラなど)。
Blockly アプリケーションでユーザーが作成するプログラムの例を次に示します。
パズルの解答、アニメーション、音楽: 生成されたコードは、パズル(迷路など)を解いたり、アニメーションを表示したり、音楽を再生したりします。例については、Code.org の Music Lab をご覧ください。
ビデオゲーム: 生成されたコードでビデオゲームを実行します。たとえば、MakeCode Arcade で「モグラたたき」の最初の 2 つのレベルを作成し、コントローラにゲームをダウンロードするか、シミュレータでプレイします。
ロボット工学: 生成されたコードがロボットを制御します。たとえば、Ozoblockly でロボットをプログラミングして、実際のロボットにダウンロードしたり、シミュレータで実行したりできます。
図面: 生成されたコードは、2D または 3D の図面を描画します。例については、BlocksCAD をご覧ください。
データ分析: 生成されたコードはデータを分析し、グラフを作成します。例については、Dialogic プラットフォームのデモをご覧ください。
アプリケーション固有のコード: 生成されたコードは、特定のアプリケーションに固有のタスクを実行します。たとえば、Blockly Developer Tools は、新しい Blockly ブロックを設計するためのツールです。ブロック定義コードが生成され、ユーザーがそれをコピーして独自の Blockly アプリケーションに貼り付けます。
ユーザー インターフェース
Blockly アプリケーションの一般的なコンポーネントを理解するのに最適な方法は、ユーザー インターフェースを確認することです。
基本的な UI コンポーネント
Blockly アプリケーションのほとんどは、Blockly エディタ(ワークスペース)、出力パネル、[実行] ボタンといういくつかの基本コンポーネントを共有しています。たとえば、Blockly Games の Maze の UI は次のようになります。
一部の Blockly アプリケーションでは、「実行」ボタンが省略され、ユーザーが変更を行うたびに出力パネルが更新されます。たとえば、Blockly のサンプルにある グラフ アプリケーションには、グラフと方程式の 2 つの出力パネルがあり、変更があるたびに更新されます。
一部のアプリケーションには出力パネルがありません。これは、ロボットのプログラミングなどのハードウェア アプリケーションで最も一般的です。これらのアプリケーションの一部にはハードウェア シミュレータが含まれていますが、多くの場合、ユーザーは生成されたコードをダウンロードして、ターゲット デバイスで直接実行できます。
追加の UI コンポーネント
ほとんどのアプリケーションには、追加の UI コンポーネントがあります。ユーザーの作業の保存など、一般的なニーズを満たすものもあれば、GUI の設計など、アプリケーション固有のニーズを満たすものもあります。次に例を示します。
アニメーションやビデオゲームを作成するアプリケーションである Scratch には、グラフィック エディタとサウンド エディタ、新しいスプライトと背景を作成するパネル、ファイル メニュー、編集メニュー、設定メニューがあります。
MakeCode Arcade は、ビデオゲームを作成するためのアプリケーションです。出力コントロール、コード エディタ、グラフィック エディタ、設定メニュー、ダウンロード ボタン、保存ボタンがあります。出力パネルは、携帯型ゲーム コントローラをシミュレートします。
スマートフォン アプリを作成するためのアプリケーションである MIT App Inventor には、GUI デザイナーと Blockly エディタの画面が別々に用意されているほか、ファイル、接続、ビルド、設定のメニューもあります。出力パネルの代わりに、ユーザーは生成されたコードをスマートフォンでテストします。
含めるべき追加コンポーネントは、アプリケーションの目標とユーザーの能力によって異なります。一般的なコンポーネントは次のとおりです。
管理:
- ファイル管理(新規作成、開く、保存、名前を付けて保存、削除)
- アカウント管理(作成、ログイン、ログアウト)
- 設定(言語、UI 構成)
プログラミング:
- 編集コマンド(元に戻す、やり直す、コピー、切り取り、貼り付け、複製)
- GUI デザイナー
- グラフィック エディタとサウンド エディタ
- コードエディタまたは読み取り専用のコード表示
テスト
- 出力構成(開始/停止、再生速度、音量、スクリーンショットなど)
- デバッガ(ブレークポイント、実行、ステップ、ブロックのハイライト表示)
- テスト パラメータを設定する
ハードウェア
- 接続(USB、Bluetooth、QR コード)
- 構成(モデルの選択、アクセサリの選択、コンポーネント名の割り当て)
- 制御(ロボットを手動で制御し、ロボットの位置を記録する)
- コードをダウンロードする
ヘルプ
- ドキュメント
- インタラクティブ チュートリアル
- コンテキストに応じたヘルプ
今後の対応を教えてください。
アプリケーションについてまだ検討中の場合は、設計上の考慮事項について引き続きお読みください。
シンプルなアプリケーションの作成を体験したい場合は、Blockly のスタートガイドの Codelab をお試しください。
アプリケーションの作成準備が整ったら、次の手順を行います。