僕は発展途上技術者

GitHub Actions で独自 Scratch を動かす

機械学習を始め様々な機能を拡張機能として使えるようにしたカスタマイズされた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」などを参照してください。

英語力を手軽に測ることができる CASEC をアラフィフになって受けた話

Maker Faire、特に海外での開催のときにいつもお世話になっている高須さんのFacebookでの投稿かなにかで知った1回4000円弱、40分ほどで英語力を判定できるCASECを先日受験してみました。クレジットカードでチケットを買って自宅からすぐ受けられて便利です。

CASECについて詳しくは高須さんが書いたブログを参照してください。

» ギークのかなり偏った英語学習の話

問題に正解したかどうかで、次の問題の難易度が変わるようになっているらしく、だから短時間で終わるようになっています。もしTOEICや英検を受けた場合はこのくらいですよ、というのも示してくれるので自分の英語力が伸びているか落ちているかがわかります。忙しい人にはうってつけだし、TOEICとか受ける人も、何度も受けると受験料もバカにならないのでこれで英語力を計っておいて、目標とする点数に届きそうだなってレベルになったら受けにいくという使い方もできると思います。

僕の結果は 827/1000、TOEICスコア目安910とのことでした。

学術文献や専門的な発表の大意までは把握できるけれど、詳細を理解するところまでは達していないレベル、ということでほぼ自分の現状を表していてなかなか正確に判定できているんじゃないかと思います。問題をやってて思ったのが、会話文でちょっとしゃれた表現がでてくると、あれれ?聞いたことないな、ってなってしまっていたので、もっと Netflix のドラマや映画を英語で観たり、技術書とかでなく小説を英語で読んだりしないといけないのだろうなあ、と思いました。

2000-2004年までカリフォルニアで生活し、現地の会社に勤めていた割には点数が低いとも言えますし、それからブランクが15年以上あって、まあまあ良くキープしているなとも言えるといったあたりが自己評価です。

若干釣り気味のタイトルですが今年49歳になる身で受けてみて痛感したのは、テストを受けるには体力が必要だということです。40分で終わるのでギリギリもった感じですが、後半に向けてみるみる集中力が落ちていると感じました。ヒアリングは、確かに聴き取れてはいるのだけれど、ちょっと長い文章だと前半何言ってうたか忘れてしまいそうになっていました。また小さな文字が読み取りにくく疲れるという思わぬハンデもあります。年齢のせいにすることは好きではないし、何歳になっても新しく何かを学ぶことはできるとは思っていますが、テストを受ける場合はこうしたハンデがあることを知った上で、若いうちに伸ばせるだけ伸ばしておいたほうがいいと思います。

これは何でもそうだと思うのですが、何かに上達していく過程で、最初の初心者の時期というのは大抵つまらないものです。ゴルフを覚えたてのときは、ボールにろくにクラブが当たらず、当たりはじめてもまっすぐ遠くに飛んでいくことはほとんどないし、テニスにしても、まともに当たることはありません。それと同じように英語を勉強し始めのときには、登場するほとんどの英単語は初見で、毎回辞書を調べながら読み進めていくのは面倒で苦痛だったことを記憶しています。そんなとき、高校生のときだったと思うのですが、スティーブン・キングの小説(日本語に訳されているもの)を読むのが好きで、ある日友人に誘われ紀伊國屋書店の洋書のコーナーに行ったときのことだったと思うのですが、その頃まだ日本語に未翻訳のスティーブン・キングの原書を手に取り、英語ができればこれを読めるのだと知ってワクワクしたのを覚えている。結局スティーブン・キングの小説はちょっとレベルが高くてほんの数ページで断念したと思うのですが、代わりに当時映画化されていたミヒャエル・エンデの「The NeverEnding Story」を 辞書を引き引き最後まで読み終えることができました。今調べたら原書はドイツ語ということですが、当時は英語が原書と思い込んでいたので、このことは大きな成功体験で、その後は、英語を勉強することは苦痛ではなく楽しみとなったように思います。今にして思えば、同時にこうしたモチベーションを作り出すことが学ぶことのコツだということを自分のなかで発見できたのかもしれません。

プロフィール

株式会社まちクエスト代表、つくる社LLC代表。

Scratchで楽しく学ぶ アート&サイエンスRaspberry Piではじめる どきどきプログラミングを書きました。

オンラインコンテンツ: 大人のためのScratch

Amazonから図書館検索 Libron、iPhoneアプリ ひらがなゲーム かなぶん を作っています。

Email: webmaster at champierre dot com

Twitter @jishiha

最近のエントリー

アーカイブ