Blockly アプリケーションの概要

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 は次のようになります。

エディタ、出力パネル、実行ボタンを備えた迷路アプリケーションの UI。

一部の Blockly アプリケーションでは、「実行」ボタンが省略され、ユーザーが変更を行うたびに出力パネルが更新されます。たとえば、Blockly のサンプルにある グラフ アプリケーションには、グラフと方程式の 2 つの出力パネルがあり、変更があるたびに更新されます。

グラフ アプリケーションの UI。エディタ、ユーザーが作成した方程式の出力パネル、その方程式のグラフの出力パネルが表示されています。

一部のアプリケーションには出力パネルがありません。これは、ロボットのプログラミングなどのハードウェア アプリケーションで最も一般的です。これらのアプリケーションの一部にはハードウェア シミュレータが含まれていますが、多くの場合、ユーザーは生成されたコードをダウンロードして、ターゲット デバイスで直接実行できます。

追加の UI コンポーネント

ほとんどのアプリケーションには、追加の UI コンポーネントがあります。ユーザーの作業の保存など、一般的なニーズを満たすものもあれば、GUI の設計など、アプリケーション固有のニーズを満たすものもあります。次に例を示します。

  • アニメーションやビデオゲームを作成するアプリケーションである Scratch には、グラフィック エディタとサウンド エディタ、新しいスプライトと背景を作成するパネル、ファイル メニュー、編集メニュー、設定メニューがあります。

    Scratch のユーザー インターフェース。

  • MakeCode Arcade は、ビデオゲームを作成するためのアプリケーションです。出力コントロール、コード エディタ、グラフィック エディタ、設定メニュー、ダウンロード ボタン、保存ボタンがあります。出力パネルは、携帯型ゲーム コントローラをシミュレートします。

    MakeCode Arcade のユーザー インターフェース。

  • スマートフォン アプリを作成するためのアプリケーションである MIT App Inventor には、GUI デザイナーと Blockly エディタの画面が別々に用意されているほか、ファイル、接続、ビルド、設定のメニューもあります。出力パネルの代わりに、ユーザーは生成されたコードをスマートフォンでテストします。

    App Inventor ユーザー インターフェースの GUI デザイナー App Inventor のユーザー インターフェースの Blockly エディタ

含めるべき追加コンポーネントは、アプリケーションの目標とユーザーの能力によって異なります。一般的なコンポーネントは次のとおりです。

  • 管理:

    • ファイル管理(新規作成、開く、保存、名前を付けて保存、削除)
    • アカウント管理(作成、ログイン、ログアウト)
    • 設定(言語、UI 構成)
  • プログラミング:

    • 編集コマンド(元に戻す、やり直す、コピー、切り取り、貼り付け、複製)
    • GUI デザイナー
    • グラフィック エディタとサウンド エディタ
    • コードエディタまたは読み取り専用のコード表示
  • テスト

    • 出力構成(開始/停止、再生速度、音量、スクリーンショットなど)
    • デバッガ(ブレークポイント、実行、ステップ、ブロックのハイライト表示)
    • テスト パラメータを設定する
  • ハードウェア

    • 接続(USB、Bluetooth、QR コード)
    • 構成(モデルの選択、アクセサリの選択、コンポーネント名の割り当て)
    • 制御(ロボットを手動で制御し、ロボットの位置を記録する)
    • コードをダウンロードする
  • ヘルプ

    • ドキュメント
    • インタラクティブ チュートリアル
    • コンテキストに応じたヘルプ

今後の対応を教えてください。

アプリケーションについてまだ検討中の場合は、設計上の考慮事項について引き続きお読みください。

シンプルなアプリケーションの作成を体験したい場合は、Blockly のスタートガイドの Codelab をお試しください。

アプリケーションの作成準備が整ったら、次の手順を行います。