機械学習を始め様々な機能を拡張機能として使えるようにしたカスタマイズされたScratch を Stretch3 と名付けて GitHub 上で公開しています。自分が開発した拡張機能に加え、Scratch コミュニティの他の開発者の方々が作った拡張機能も使えるようにしており、各々の拡張機能のバージョンアップがあるたびにその変更を取り込みビルドし直して公開するのが面倒だったため、GitHub Actions を使って自動的にビルドするようにしています。独自の拡張機能を作って追加した Scratch を公開したいという場合に参考になると思うので、その方法を紹介したいと思います。

なお、Scratch を自分のマシン上で動かす方法や、改造方法、拡張機能の作り方についてもっと知りたいという方は、「Scratch を改造しよう - 大人のためのScratch」を参照してください。有料コンテンツとして公開しているのですが、Scratch を自分のマシンで動かしブロックの見た目を少しだけ変えるところまでの最初の3章だけは無料で公開しています。

テンプレートプロジェクトを fork し、git clone する

独自の拡張機能を作って追加した Scratch を簡単に公開できるようにテンプレートとなるサンプルプロジェクトを用意したので、これを fork して git clone します。

% git clone git@github.com:<あなたのGitHubアカウント>/scratch3_extension_template.git

scratch_extension_template 以下のフォルダ構成は以下の通りです。

scratch_extension_template
├── install.sh - 各ファイルを適切な場所に配置するインストールスクリプト
├── scratch-gui
│   └── src
│       └── lib
│           └── libraries
│               └── extensions
│                   └── hello - 拡張機能の名前。ここでは hello と仮で名付けています。
│                       ├── hello-small.png - 拡張機能一覧に表示されるアイコン画像
│                       └── hello.png - 拡張機能一覧に表示されるバナー画像
└── scratch-vm
    └── src
        └── extensions
            └── scratch3_hello - scratch3_<拡張機能名> という名前でフォルダを用意する。
                └── index.js - 拡張機能本体

GitHub Actions で自動ビルド

このプロジェクトに git push するたびに、自動ビルドをおこなう GtiHub Actions が実行されるのですが、ビルドした結果を GitHub Pages で公開する際にデプロイ用の公開鍵/秘密鍵が必要になります。

これらは、

ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages -N ""

を実行することで作成することができます。

作成される gh-pages.pub が公開鍵で、gh-pages が秘密鍵です。

GitHub の自分の scratch3_extension_template プロジェクトの Settings > Deploy keys を選び、Add deploy key ボタンをクリックし、以下のように公開鍵 gh-pages.pub の内容を貼り付けます。Title は任意ですが、github actions としておきます。Allow write access のチェックボックスにはチェックを入れます。

次に Settings > Secrets を選び、New repository secret ボタンをクリックし、秘密鍵 gh-pages の内容を貼り付けます。Name は ACTIONS_DEPLOY_KEY (必須) とします。

また、scratch_extension_template の下で、

% git co -b gh-pages
% git push origin gh-pages

を実行して gh-pages ブランチを作っておいた上で、Settings の画面の下の方、GitHub Pages のセクションで、以下のように gh-pages ブランチをソースにしてページをビルドするように設定します。

サンプルの拡張機能付きのオリジナルのScratch3を公開するための手順としては以上になります。

ファイルを何か修正して git commit & git push すれば GitHub Actions が実行されます。

試しに、install.sh の 7行目

COLLABORATOR=champierre

の champierre の部分を自分の名前、あるいは GitHub のアカウント名に変えてみてから git commit、git push してみましょう。

GitHub の Actions タブを選ぶと、git push をトリガーとして実行される GitHub Actions のステータスを見ることができます。

上記のようにすべてのステップが完了してチェックマークがつけばデプロイ完了です。

https://<自分のGitHubアカウント名>.github.io/scratch3_extension_template/

にアクセスするとカスタマイズされた Scratch3 を開くことができます。

「拡張機能を選ぶ」画面にはオリジナルの拡張機能である Hello という拡張機能を選ぶことができ、その「協力」のところにはさきほど書き換えた自分の名前もしくは GitHub アカウント名が表示されるはずです。

Hello 拡張機能を選んで追加すると、任意の文字列のアラートを表示するオリジナルブロックを使えるようになります。

GitHub Actions でおこなっていること

GitHub Actions で具体的には何をおこなっているかをみてみます。

GitHub Actions で自動実行するタスクは以下の .github/workflows/deploy.yml で定義しています。

name: Deploy
on:
  push:  -- (1)
    branches:
      - master
    tags:
      - "!*"

jobs:
  build-deploy:
    runs-on: ubuntu-latest  -- (2)
    steps:
      - uses: actions/checkout@v2  -- (3)
        with:
          repository: LLK/scratch-gui
          ref: develop
      - run: npm install  -- (4)
      - uses: actions/checkout@v2  -- (5)
        with:
          path: ./hello
      - run: sh ./hello/install.sh  -- (6)
      - run: npm run build  -- (7)
      - uses: peaceiris/actions-gh-pages@v3  -- (8)
        with:
          deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
          publish_dir: ./build

(1) では、タスクが実行される条件を定義しています。ここでは master ブランチに git push されたときに実行されるよう定義しており、タグへの push はすべて無視するようにしています。

(2) はタスクを実行する環境です。ubuntu-latest は ubuntu の最新版を意味します。

(3) 以降では実行するタスク内容を順に定義しています。(3) では、Scratch のソースコードである https://github.com/LLK/scratch-gui の develop ブランチを checkout しています。

次に (4) で npm install を実行し、必要なライブラリなどをインストールします。

(5) では、自分自身、つまり https://github.com/<あなたのGitHubアカウント>/scratch3_extension_template を hello というディレクトリに checkout しています。

(6) で、scratch_extension_template 以下の install.sh を実行します。install.sh は scratch_extension_template 以下の各ファイルを Scratch のソースコードの適切な場所に配置したり、ソースコードの一部を変更するシェルスクリプトです。

(7) で npm run build を実行することでカスタマイズされたオリジナルの Scratch をビルドしています。

最後に (8) で、https://github.com/peaceiris/actions-gh-pages で公開されている GitHub Pages にデプロイできる GitHub Action を使ってビルドした Scratch をデプロイしています。このように他の開発者が作った GitHub Action を利用することができます。publish_dir: ./build で、デプロイするフォルダとして build を定義しています。デプロイに必要となる秘密鍵に Settings > Secrets で設定した ACTIONS_DEPLOY_KEY を使用しています。

オリジナルの拡張機能を作ってみよう

テンプレートの各フォルダやファイルを修正することでオリジナルの拡張機能を追加できる Scratch をビルドすることができます。

テンプレートでは hello となっている拡張機能名やフォルダ名をオリジナルのものに変更します。

以下の install.sh の冒頭の部分も変更します。

EXTENSION_NAME=Hello
EXTENSION_ID=hello
COLLABORATOR=champierre
EXTENSION_DESCRIPTION="Scratch Extension Template"

scratch-gui/src/lib/libraries/extensions/<拡張機能の名前>/ 以下の画像を替えることで、拡張機能一覧に表示されるバナー画像、アイコン画像を差し替えることができます。差し替えるときは同じサイズの画像と差し替えてください。

scratch-vm/src/extensions/scratch3_hello/index.js は拡張機能本体のファイルです。これを変更することで、オリジナルの拡張機能を作ることができます。拡張機能の作り方については、Sctatch 日本語 Wiki ページの「Scratch 3.0の拡張機能を作ってみよう」や、 「Scratch を改造しよう - 大人のためのScratch」などを参照してください。