調査アンケート: Blockly のご利用体験についてお聞かせください
アンケートを開始
カスタム ブロック
このドキュメントは、Blockly 内で新しいブロックを作成するデベロッパーを対象としています。ユーザーが編集可能な Blockly のローカルコピーを持っており、通常は Blockly の使用方法に精通しており、JavaScript の基本的な知識があることを前提としています。

Blockly には事前定義されたブロックが多数用意されています。数学関数からループ構造まで、あらゆるものが揃っています。ただし、外部アプリケーションと連携するには、カスタム ブロックを作成して API を形成する必要があります。たとえば描画プログラムを作成する場合、「半径 R の円を描画する」ブロックの作成が必要になることがあります。
ほとんどの場合、最も簡単な方法は、すでに存在する非常によく似たブロックを見つけてコピーし、必要に応じて変更することです。次のドキュメントは、さらにサポートが必要な場合を対象としています。
ブロックを定義する
まず、ブロックを作成し、その形状、フィールド、接続ポイントを指定します。Blockly Developer Tools を使用すれば、このコードを記述するのが最も簡単な方法です。
→ Blockly Developer Tools の詳細
API について学習した後、このコードを手動で記述することもできます。
→ ブロックの定義の詳細...
高度なブロックは、ユーザーやその他の要因に応じて動的に形状が変化する場合があります。
→ Mutators の詳細...
コード生成
次に、ブロックコード生成ツールを作成し、新しいブロックをプログラミング言語(JavaScript、Python、PHP、Lua、Dart など)にエクスポートします。
→ ブロックコード ジェネレータの詳細
新しいブロックを使う
ブロックを作成したら、ツールボックスに追加するか、ワークスペースで使用することを忘れないでください。
→ カスタム ブロックの追加に関する詳細
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2024-06-28 UTC。
[null,null,["最終更新日 2024-06-28 UTC。"],[[["This documentation guides developers on creating custom blocks within Blockly, assuming basic JavaScript knowledge and Blockly familiarity."],["Developers can create new blocks by defining their shape and connections using Blockly Developer Tools or by manually coding them using the API."],["Custom blocks require code generators to translate them into target programming languages like JavaScript or Python."],["After creation, custom blocks need to be integrated into the Blockly toolbox or workspace for usage."]]],["Developers creating custom blocks in Blockly should first define the block's shape, fields, and connections, ideally using Blockly Developer Tools. Next, a block-code generator is needed to translate the block into a programming language. Advanced blocks can use mutators to dynamically change shape. Finally, the new block must be added to the toolbox or used in a workspace for it to be accessible within the application. The document assumes the user has a local copy of Blockly and a basic Javascript knowledge.\n"]]