はじめに

この記事は、Xcratch の独自拡張機能を、VSCode の「built-in port forwarding」を活用して一時的に準備するという話です。

●Xcratch
　https://xcratch.github.io/index-ja.html

●xcratch/xcratch.github.io: Extendable Scratch3 Programming Environment
　https://github.com/xcratch/xcratch.github.io

今回用いるもの

VSCode の built-in port forwarding

Xcratch の独自拡張機能を準備するために、以下の記事に書いていた「VSCode の built-in port forwarding」を用います。それにより、ローカルに用意した独自拡張機能を Xcratch から読み込めるようにします。

●VSCode の「built-in port forwarding」と「ローカルの WebSocketサーバー」を組み合わせたインターネット側からのアクセス - Qiita
　https://qiita.com/youtoy/items/9b72d6ecb34ba55fdabe

●VSCode の新機能「built-in port forwarding」を使いローカルサーバーにインターネット側からアクセス - Qiita
　https://qiita.com/youtoy/items/56e48c84d6a2f0549155

また、これを適用して利用するのは機能をテストする時の、一時的な対応という想定で進めます。

Xcratch の独自拡張機能を準備する

Xcratch の独自拡張機能のコード

Xcratch の独自拡張機能を PC内で準備します。具体的には、 my-extension.mjs というファイルを用意します。その際、以下のリポジトリにある内容を参考にしました。

●xcratch/xcx-example: example extension for Xcratch
　https://github.com/xcratch/xcx-example

今回用意したコードは、以下のとおりです。ここで用意するブロックは、2つの数の足し算と 3つの数の足し算の 2つです。

const EXTENSION_ID = 'xcratchAddThree';
const EXTENSION_NAME = '3つの数の足し算';
const EXTENSION_DESCRIPTION = '3つの数を足す';
const ADD_THREE_TEXT = '[A] + [B] + [C]';
const ADD_TWO_TEXT = '[A] + [B]';
let extensionURL = 'my-extension.mjs';

const iconURL = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' rx='18' fill='%2357c957'/%3E%3Cpath d='M40 18v44M18 40h44' stroke='white' stroke-width='10' stroke-linecap='round'/%3E%3C/svg%3E";

const toNumber = value => {
  const number = Number(value);
  return Number.isNaN(number) ? 0 : number;
};

const entry = {
  name: EXTENSION_NAME,
  extensionId: EXTENSION_ID,
  extensionURL,
  collaborator: 'xcratch',
  iconURL,
  insetIconURL: iconURL,
  description: EXTENSION_DESCRIPTION,
  tags: ['calculation'],
  featured: true,
  disabled: false,
  bluetoothRequired: false,
  internetConnectionRequired: false
};

class ExtensionBlocks {
  constructor(runtime) {
    this.runtime = runtime;
  }

  getInfo() {
    return {
      id: EXTENSION_ID,
      name: EXTENSION_NAME,
      extensionURL,
      blockIconURI: iconURL,
      showStatusButton: false,
      blocks: [{
        opcode: 'add-two',
        blockType: 'reporter',
        blockAllThreads: false,
        text: ADD_TWO_TEXT,
        func: 'addTwo',
        arguments: {
          A: {
            type: 'number',
            defaultValue: 1
          },
          B: {
            type: 'number',
            defaultValue: 2
          }
        }
      }, {
        opcode: 'add-three',
        blockType: 'reporter',
        blockAllThreads: false,
        text: ADD_THREE_TEXT,
        func: 'addThree',
        arguments: {
          A: {
            type: 'number',
            defaultValue: 1
          },
          B: {
            type: 'number',
            defaultValue: 2
          },
          C: {
            type: 'number',
            defaultValue: 3
          }
        }
      }],
      menus: {}
    };
  }

  addTwo(args) {
    return toNumber(args.A) + toNumber(args.B);
  }

  addThree(args) {
    return toNumber(args.A) + toNumber(args.B) + toNumber(args.C);
  }

  static get EXTENSION_ID() {
    return EXTENSION_ID;
  }

  static get EXTENSION_NAME() {
    return EXTENSION_NAME;
  }

  static get extensionURL() {
    return extensionURL;
  }

  static set extensionURL(url) {
    extensionURL = url;
    entry.extensionURL = url;
  }
}

export { ExtensionBlocks as blockClass, entry };

ローカルサーバーを準備する

ここで、PC内で以下のコマンドを実行し、ローカルサーバーを準備します。この時、Xcratch から以下の内容を読み込めるように --cors のオプションをつけておきます。

npx http-server . -p 8000 --cors

上記のコマンドを実行すると、以下のようにローカルサーバーが立ち上がります。

ローカルサーバーを VSCode の built-in port forwarding と組み合わせる

上記のローカルサーバーを、VSCode の built-in port forwarding と組み合わせます。以下のように、ローカルサーバーのポートを「表示範囲：公開」で転送します。

この時に、「転送されたアドレス」に出ている URL は、この後で使います。

Xcratch上で拡張機能を読みこむ

先ほど、VSCode の built-in port forwarding で準備した「転送されたアドレス」に出ている URL を、Xcratch上で読み込みます。読み込みを行うのは、以下の「拡張機能を読み込む」という名前の拡張機能です。

この読み込みを行った後の Xcratch の状態は以下となります。

上記のブロックを用いて、問題なく足し算が行えるかを確認してみます。以下のように、2つの数の足し算と 3つの数の足し算が行えていることが確認できました。