Scratch3.0の拡張機能を作ってみる - #0 環境整備
きっかけ
Scratch、とてもいいサービスだと思いますが、カスタムしてできるのは「ブロック」の定義のみなので値を返す文字列や真偽を返すレポーターが作れないんですよね。
そこで数学系のレポーターやインプットマネージャみたいなのを作れればいいなー、と思った次第です。
開発の準備
1.必要なソフトのインストール
Scratchの日本語Wikiの拡張機能開発についての記事を参考にソフトのインストールをします。
ja.scratch-wiki.info
具体的には、Node.js
nodejs.org
それと、Git
git-scm.com
この2つをインストールします。
Node.jsはnvmやnodebrew、nodistを使う方法がありますが、とりあえず自分は公式サイトのインストーラを使いました。また、先程の日本語ScratchWikiではバージョン8を勧めていましたが、自分が使っているNode.jsは10.16.0です。
今のところ開発している分には、全く支障はないのでとりあえず手軽なインストーラで良いかと思います。
念の為、ちゃんとインストールされているか確認もしましょう。
$ node -v $ npm -v $ git --version
2.Scratch3.0を動かす準備から、実際に動かすまで
ソフトのインストールが確認できたら、Scratch3.0を構成するファイルをダウンロードさせ、npmに設定します。ディレクトリは自分のアカウントのフォルダ(/Users/xxxx)直下にしてますが自由です。
自分はMacですが、他OSの方も手順はさほど変わらないと思います。
$ git clone --depth 1 https://github.com/llk/scratch-vm.git $ git clone --depth 1 https://github.com/llk/scratch-gui.git
以降、Windows以外のOSではnpmのコマンドに「sudo」(管理者権限で実行)を最初につける必要があるので注意。
$ cd scratch-vm $ npm i $ npm link $ cd ..\scratch-gui $ npm i $ npm link scratch-vm
これで必要なファイルは揃いました。以下のコマンドを打って実行してみましょう。
$ npm start
途中、Replace Autoprefixer browsers option to Browserslist config.みたいに出るけど動作に支障はないのでとりあえず無視して待ちます。何か分かり次第対処します。
ℹ ｢wdm｣: Compiled successfully.
とでれば成功です。http://localhost:8601/にアクセスしてみましょう。
終わりに
実はもう既に環境構築し開発していたのですが、どうもうまく起動しなくなったので再構築も兼ねて記事にしました。
どうでもいいけど、npmで起動したScratch3.0GUIのアイコン、Scratch3.0正式リリースの前のベータ版のアイコンと同じですね。
次回は簡単な拡張機能を作り、実行させる予定です。
次回→まだ
