Scratch 3.0をmodしてみよう/ライブラリーをいじくろう

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

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

ここでは、Scratch 3.0のスプライトライブラリーを改造してみる。

完成図

下準備

Scratch 2.0 オフラインエディターをダウンロード・インストールする。サクラエディタなどのテキストが編集できるソフトウェアか、AtomなどのIDEをインストールする。

7-zipなどのzipファイルを解凍できるソフトウェアがあれば望ましいが、Windowsの解凍機能も使える。

スプライトを設計する

ここでは、Scratch Wikiのロゴを使う。もし自分のものを使う場合、それでもいい。

Scratch 2.0 オフラインエディターを開き、スプライトを作る。スプライト名やコスチューム、音などを調節したあと、「ファイル」メニューからWebサイトにアップロードする。（まずは、共有をしないでアップロードのみ行う。できなければプロジェクトを共有する）(アップロードしないと素材がサーバー上で利用できない。また、2.0オフラインエディターの代わりにScratch 3.0は利用できない。)

その後、スプライトを右クリックし、スプライトを書き出す。プロジェクト一式を書き出してもいいが、スプライトを書き出すほうが簡単である。

スプライトの情報を取り出す

スプライトファイルをzipとして解凍した後は、sprite.jsonをテキストエディタで開く。また、scratch-gui\src\lib\libraries\sprites.jsonも開く。

sprites.jsonの最初の{の**後**に、以下のコードを置く。

{
        "name": "<ここにobjNameをコピーする>",
        "md5": "<ここにMD5をコピーする>",
        "type": "sprite",
        "tags": [
            "<タグ1>",
            "<タグ2>",
            "<タグ3>",
            "<タグ4>"
        ],
        "info": [
            0,
            1,
            1
        ],
        "json": <ここにコピペ>
    },

まず、sprite.jsonの中身で「<ここにコピペ>」を置き換える。その後、sprite.jsonの"objName": "<ココ>"の、ココの部分で「<ここにobjNameをコピーする>」を、"baseLayerMD5": "<ココ>"のココの部分で「<ここにMD5をコピーする>」を置き換える。最後は、「<タグ1>」～「<タグ4>」を書き換える。4つも不要な場合は行を消してもいいし、増やしてもいいが、最終行以外にはすべてカンマ(,)を置くように注意する。

以下のようになった。

{
        "name": "Wiki Ball",
        "md5": "593c625562db52f28a9b81e236e18f9a.png",
        "type": "sprite",
        "tags": [
            "logos",
            "encyclopedia",
            "tutorials",
            "cat"
        ],
        "info": [
            0,
            1,
            1
        ],
        "json": {
            "objName": "Wiki Ball",
            "scripts": [[29, 36, [["whenClicked"], ["playSound:", "Wand"], ["say:duration:elapsed:from:", "Hello Scratchers!", 2]]]],
            "sounds": [{
                "soundName": "Wand",
                "soundID": 0,
                "md5": "d182adef7a68a5f38f1c78ab7d5afd6a.wav",
                "sampleCount": 47447,
                "rate": 22050,
                "format": "adpcm"
            }],
            "costumes": [{
                "costumeName": "Wiki Ball",
                "baseLayerID": 0,
                "baseLayerMD5": "593c625562db52f28a9b81e236e18f9a.png",
                "bitmapResolution": 2,
                "rotationCenterX": 134,
                "rotationCenterY": 132
            }],
            "currentCostumeIndex": 0,
            "scratchX": 0,
            "scratchY": 0,
            "scale": 1,
            "direction": 90,
            "rotationStyle": "normal",
            "isDraggable": false,
            "indexInLibrary": 100000,
            "visible": true,
            "spriteInfo": {
            }
        }
    },

この段階で、コマンドプロンプトやターミナルで「npm start」を実行する。localhost:8601とブラウザのアドレスバーに入力し、そのページに行く。初回の読み込みには時間がかかる。(もし白い画面がずっと続いていたら、コードにミスがあってビルドできていない。)

スプライトライブラリーを開き、Wikiのスプライトがあれば成功だ。コマンドプロンプトは、開いたままにしておいてもいいし、Ctrlで閉じることもできる。

タグでグループ分けする

「tags」は、検索時に使われるだけでなく、グループで分けるときにも利用できる。今回は、「Logos」グループを作って、ロゴのスプライトだけを表示できるようにする。

sprites.jsonと同じフォルダに、tag-messages.jsがある。それを開き、最終行が

letters: {
        defaultMessage: 'Letters',
        description: 'Tag for filtering a library for letters',
        id: 'gui.libraryTags.letters'
    }
});

となっているのを

letters: {
        defaultMessage: 'Letters',
        description: 'Tag for filtering a library for letters',
        id: 'gui.libraryTags.letters'
    },
    logos: {
        defaultMessage: 'Logos',
        description: 'Tag for filtering a library for logos',
        id: 'gui.libraryTags.logos'
    }
});

にする。defaultMessageにはLogosを使ったが、日本語がいい場合はロゴでもよい。

そのあと、sprite-tags.jsを開き、

{tag: 'letters', intlLabel: messages.letters}
];

を

{tag: 'letters', intlLabel: messages.letters},
    {tag: 'logos', intlLabel: messages.logos}
];

にする。これで、タグ「logos」があるスプライトがLogosグループに表示されるようになった。他のタグで行う場合は、logosをタグの名前に置き換えるとよい。

同様にしてスプライトライブラリーを見ると、Logosの項目が増えている。クリックするとWiki Ballのスプライトがある。