提供: Japanese Scratch-Wiki

< 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は、編集メニューを自動的に閉じるために使う。