Scratch 3.0の拡張機能を作ってみよう/GUI側の設定のソースを表示

{{ひらがなヘッダ}}
[[Scratch 3.0の拡張機能を作ってみよう/下準備|下準備]]ができたら、次はscratch-guiをセットしよう。

== 絵を描く ==
png形式で絵を描いてみてね。600x372と80x80の2つが必要だよ。
[[ファイル:Newblocks.png|thumb|center|例]]

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

== index.jsxの編集 ==
同じフォルダにあるindex.jsxを編集する。
* 19行目に、上の例にならって、絵を読み込む命令を書こう。
* 30行目付近に、[[ペン拡張機能]]のコードをまねしてNew Blocks拡張機能のコードを書こう。

以下は参考例だ。
<syntaxhighlight lang="javascript">
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
    },
// 略
</syntaxhighlight>

なお、FormattedMessageはScratchの翻訳用のものなので、消しても良い。
<syntaxhighlight lang="javascript">
    {
        name: "New Blocks",
        extensionId: 'newblocks',
        iconURL: newblocksImage,
        insetIconURL: newblocksInsetImage,
        description: "New Extension",
        featured: true
    },
// 略
</syntaxhighlight>

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

[[カテゴリ:Scratch 3.0の拡張機能|作成]]

[[カテゴリ:開発]]
{{デフォルトソート:Scratch 3.0のかくちようきのうをつくつてみよう/GUIかわのせつてい}}