【Google Blocklyを使って遊ぼう】AbstractBlocklyActivityを使う

このエントリーを Google ブックマーク に追加
Pocket
[`yahoo` not found]

Blocklyを使ったアプリケーションを開発するときは通常のActivityではなく、AbstractBlocklyActivityを使用します。

AbstractBlocklyActivityの抽象メソッド

AbstractBlocklyActivityは名前の通り抽象クラスです、下記の抽象メソッドは実装する必要があります。

メソッド名 説明
abstract protected List getBlockDefinitionsJsonPaths 使用するブロックはXMLファイルで定義します。 XMLファイルはassets内に配置します、このメソッドで返した文字列はassets内のパスになります。
abstract protected String getToolboxContentsXmlPath 使用するブロックを選択するツールボックスはXMLファイルで定義します。 XMLファイルはassets内に配置します、このメソッドで返した文字列はassets内のパスになります。 assets
abstract protected List getGeneratorsJsPaths カスタムブロックから生成するコードはJavascriptファイルで定義します。 XMLファイルはassets内に配置します、このメソッドで返した文字列はassets内のパスになります。
abstract protected CodeGenerationRequest.CodeGeneratorCallback getCodeGenerationCallback コードジェネレーターからのコールバックを受け取るためのコールバックインターフェースを返却します。

AbstractBlocklyActivityを継承する

AbstractBlocklyActivityを継承したMainActivityを定義します。
このクラスを実装していきます。
public class MainActivity extends AbstractBlocklyActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @NonNull
    @Override
    protected String getToolboxContentsXmlPath() {
        return null;
    }

    @NonNull
    @Override
    protected List<String> getBlockDefinitionsJsonPaths() {
        return null;
    }

    @NonNull
    @Override
    protected List<String> getGeneratorsJsPaths() {
        return null;
    }

    @NonNull
    @Override
    protected CodeGenerationRequest.CodeGeneratorCallback getCodeGenerationCallback() {
        return null;
    }

    @Override
    protected void onInitBlankWorkspace() {
    }
}

AbstractBlocklyActivity#getBlockDefinitionsJsonPathsの実装

AbstractBlocklyActivity#getBlockDefinitionsJsonPathsは使用するブロックが定義されたJSONファイルのリストを返却するように実装します。
今回はBlocklyライブラリですでに用意されている基本的なブロックが定義されているjsonファイルを返却するようにしておきます。

    private static final List<String> BLOCK_DEFINITIONS_JSON_PATHS = Arrays.asList(
            "default/list_blocks.json",
            "default/logic_blocks.json",
            "default/loop_blocks.json",
            "default/math_blocks.json",
            "default/text_blocks.json",
            "default/variable_blocks.json",
            "default/colour_blocks.json"
    );

    @NonNull
    @Override
    protected List<String> getBlockDefinitionsJsonPaths() {
        return BLOCK_DEFINITIONS_JSON_PATHS;
    }

AbstractBlocklyActivity#getToolboxContentsXmlPathの実装

ツールボックスはXMLファイルで定義します、今回は簡単な定義にします。
ファイル名を「toolbox.xml」とし、assetsフォルダ内のdefaultフォルダに保存します。

<toolbox>
    <block type="controls_if"></block>
    <block type="controls_whileUntil"></block>
</toolbox>

次に定義したツールボックスXMLファイルのパスをAbstractBlocklyActivity#getToolboxContentsXmlPathが返却するように実装します。

    private final static String TOOLBOX_ASSETS_NAME = "default/toolbox.xml";

    @NonNull
    @Override
    protected String getToolboxContentsXmlPath() {
        return TOOLBOX_ASSETS_NAME ;
    }

AbstractBlocklyActivity#getGeneratorsJsPathsの実装

Blocklyのブロックは文字列に変換されます、この変換はJavascriptで行っています。
この変換に使用するJavascriptファイルはassetsフォルダに保存します。
AbstractBlocklyActivity#getGeneratorsJsPathsではこれらのパスを文字列のリストとして返却します。
また、ここで返却するものはカスタムブロックを変換するためのものであり、 Blocklyライブラリで定義されているブロックについてはすでに読み込まれています。
今回は、カスタムブロックを使用しないので空のリストを返却します。


    private static final List<String> JAVASCRIPT_GENERATORS = Arrays.asList(
    );

    @NonNull
    @Override
    protected List<String> getGeneratorsJsPaths() {
        return JAVASCRIPT_GENERATORS;
    }


AbstractBlocklyActivity#getCodeGenerationCallbackの実装

AbstractBlocklyActivity#getCodeGenerationCallbackはCodeGenerationRequest.CodeGeneratorCallbackを返却するメソッドです。
CodeGenerationRequest.CodeGeneratorCallbackはブロックからコードが生成された時のコールバックを受け取るためのインターフェースです。
今回はLoggingCodeGeneratorCallbackを返却します、LoggingCodeGeneratorCallbackは変換されたコードをログキャットに出力し、さらにToastで表示します。


    CodeGenerationRequest.CodeGeneratorCallback mCodeGeneratorCallback =
            new LoggingCodeGeneratorCallback(this, "LoggingTag");

    @NonNull
    @Override
    protected CodeGenerationRequest.CodeGeneratorCallback getCodeGenerationCallback() {
        return mCodeGeneratorCallback;
    }


まとめ

今回はAbstractBlocklyActivityに定義されている抽象メソッドを実装しました。
アプリケーションの使い方は下記の通りです。
  1. Blockタブをクリック
  2. ブロックを配置する
  3. アクションバーからRunをクリックする

toolbox.xml
<toolbox>
    <block type="controls_if"></block>
    <block type="controls_whileUntil"></block>
</toolbox>

MainActivity.java

public class MainActivity extends AbstractBlocklyActivity {

    private final static String TOOLBOX_ASSETS_NAME = "default/toolbox.xml";

    private static final List<String> JAVASCRIPT_GENERATORS = Arrays.asList(
    );

    private static final List<String> BLOCK_DEFINITIONS_JSON_PATHS = Arrays.asList(
            "default/list_blocks.json",
            "default/logic_blocks.json",
            "default/loop_blocks.json",
            "default/math_blocks.json",
            "default/text_blocks.json",
            "default/variable_blocks.json",
            "default/colour_blocks.json"
    );

    CodeGenerationRequest.CodeGeneratorCallback mCodeGeneratorCallback =
            new LoggingCodeGeneratorCallback(this, "LoggingTag");

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @NonNull
    @Override
    protected String getToolboxContentsXmlPath() {
        return TOOLBOX_ASSETS_NAME ;
    }

    @NonNull
    @Override
    protected List<String> getBlockDefinitionsJsonPaths() {
        return BLOCK_DEFINITIONS_JSON_PATHS;
    }

    @NonNull
    @Override
    protected List<String> getGeneratorsJsPaths() {
        return JAVASCRIPT_GENERATORS;
    }

    @NonNull
    @Override
    protected CodeGenerationRequest.CodeGeneratorCallback getCodeGenerationCallback() {
        return mCodeGeneratorCallback;
    }
}