Scratch 3.0をmodしてみよう/ステージの画像を取得しよう

このきじは ひらがなでよめません。ごめんなさい。編集者向け:作成する

(ひらがな記事(きじ)について)

ここでは、Scratch 3.0を改造(mod)して、ステージの画像が取得できるようにする。

ステージの画像を取得する方法

Scratch 3.0のステージの管理は、「scratch-render」によって行われる。「scratch-vm」は、Scratchの全体を管理し、「scratch-gui」が、画面に表示される部分を担当する。今回、準備するときに「scratch-vm」と「scratch-gui」を見たかもしれない。あのとき、ソースコードをダウンロードしていたのだ。

Scratch VMが取得できれば、vm.rendererでscratch-renderにアクセスできる。

scratch-renderには、PNG形式で画像を取得するrequestSnapshotというメソッドがあるので、これが使える。

コード

今回は、「ファイル」メニューからステージの画像を取得するようにする。まず、scratch-gui\src\components\menu-bar\menu-bar.jsxを開く。

先頭に以下をコピペする。これらは、ダウンロードのときに必要となる。

import dataURItoBlob from '../../lib/data-uri-to-blob';
import downloadBlob from '../../lib/download-blob';

155行目付近に'handleClickThumbnail',をコピペする。

そして、

handleRestoreOption (restoreFun) {
        return () => {
            restoreFun();
            this.props.onRequestCloseEdit();
        };
    }

を

handleRestoreOption (restoreFun) {
        return () => {
            restoreFun();
            this.props.onRequestCloseEdit();
        };
    }
    handleClickThumbnail () {
        this.props.vm.renderer.requestSnapshot(dataURI => {
            const blob = dataURItoBlob(dataURI);
            downloadBlob('stage.png', blob);
        });
        this.props.vm.renderer.draw();
        this.props.onRequestCloseEdit();
    }

にする。

const newProjectMessage = (
            <FormattedMessage
                defaultMessage="New"
                description="Menu bar item for creating a new project"
                id="gui.menuBar.new"
            />
        );

を

const newProjectMessage = (
            <FormattedMessage
                defaultMessage="New"
                description="Menu bar item for creating a new project"
                id="gui.menuBar.new"
            />
        );
        const thumbnailMessage = (
            <FormattedMessage
                defaultMessage="Save picture of stage"
                description="Menu bar for saving the picture of stage"
                id="gui.menuBar.saveThumbnailStage"
            />
        );

にする。 490行目付近に

<MenuSection>
                                    <MenuItem
                                        isRtl={this.props.isRtl}
                                        onClick={this.handleClickThumbnail}
                                    >
                                        {thumbnailMessage}
                                    </MenuItem>
                                </MenuSection>

を挿入する。コマンドプロンプトやターミナルで「npm start」を実行する。

MenuItemは、メニューの項目で、クリックするとonClickに指定したものが動く。thumbnailMessageは、ボタンの名前。onRequestCloseEditは、編集メニューを自動的に閉じるために使う。