Scratch 3.0の拡張機能を作ってみよう/GUI側の設定

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

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

下準備ができたら、次はscratch-guiをセットしよう。

絵を描く

png形式で絵を描いてみてね。600x372と80x80の2つが必要だよ。

例

絵はscratch-gui\src\lib\libraries\extensionsにPNG形式で保存しよう。名前は「newblocks.png」「newblocks-small.png」にする。

index.jsxの編集

同じフォルダにあるindex.jsxを編集する。

• 19行目に、上の例にならって、絵を読み込む命令を書こう。
• 30行目付近に、ペン拡張機能のコードをまねしてNew Blocks拡張機能のコードを書こう。

以下は参考例だ。

import newblocksImage from './newblocks.png'
import newblocksInsetImage from './newblocks-small.png'

// 略

export default [
    {
        name: (
            <FormattedMessage
                defaultMessage="New Blocks"
                description="Name for the 'New Blocks' extension"
                id="gui.extension.newblocks.name"
            />
        ),
        extensionId: 'newblocks',
        iconURL: newblocksImage,
        insetIconURL: newblocksInsetImage,
        description: (
            <FormattedMessage
                defaultMessage="New extension"
                description="Description for the 'New Blocks' extension"
                id="gui.extension.newblocks.description"
            />
        ),
        featured: true
    },
// 略

なお、FormattedMessageはScratchの翻訳用のものなので、消しても良い。

{
        name: "New Blocks",
        extensionId: 'newblocks',
        iconURL: newblocksImage,
        insetIconURL: newblocksInsetImage,
        description: "New Extension",
        featured: true
    },
// 略

iconURLとinsetURLは上記で指定した変数をかけばいい。extensionIdは今後も使うので、とりあえずそのままにしよう。