Scratch-guiのデフォルトプロジェクトを置き換える方法
※ 当ページには【広告/PR】を含む場合があります。
2020/08/20
前置き
https://scratch.mit.edu
scratch-gui
github.io
スクラッチのプロジェクトファイルの構造
sb3
[ファイル] --> [コンピューターに保存]
sb3
sb3
zip
.sb3
.zip
project.json
svg
wav
デフォルトプロジェクトの置き換え
scratch-gui
scratch-gui/src/lib/default-project
$ tree -s scratch-gui/src/lib/default-project
scratch-gui/src/lib/default-project
├── [ 560] 83a9787d4cb6f3b7632b4ddfebf74367.wav
├── [ 37420] 83c36d806dc92327b9e7049a565c6bff.wav
├── [ 6081] b7853f557e4426412e64bb3da6531a99.svg
├── [ 202] cd21514d0531fdffb22204e0ec5ed84a.svg
├── [ 6058] e6ddc55a6ddd9cc9d84fe0b4c21e016f.svg
├── [ 1803] index.js
└── [ 4472] project-data.js
default-project
default-project
default-project
jsファイル
import projectData from './project-data';
//フォルダ内のリソースをインポート
import popWav from '!arraybuffer-loader!./83a9787d4cb6f3b7632b4ddfebf74367.wav';
//...他のリソースは省略
const defaultProject = translator => {
//...中略
const projectJson = projectData(translator);
return [
{
id: 0,
assetType: 'Project',
dataFormat: 'JSON',
data: JSON.stringify(projectJson)
},
{
id: '83a9787d4cb6f3b7632b4ddfebf74367',
assetType: 'Sound',
dataFormat: 'WAV',
data: new Uint8Array(popWav)
},
//...他のリソースの定義
];
};
export default defaultProject;
svg
wav
defaultProject
project-data.js
import {defineMessages} from 'react-intl';
//...中略
/**
* Generate a localized version of the default project
* @param {function} translateFunction a function to use for translating the default names
* @return {object} the project data json for the default project
*/
const projectData = translateFunction => {
const translator = translateFunction || defaultTranslator;
return ({
targets: [
//...中略
],
meta: {
semver: '3.0.0',
vm: '0.1.0',
agent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36' // eslint-disable-line max-len
}
});
};
export default projectData;
project.json
projectData
project.json
project-data.js
ソースコードの修正
default-project
default-project
$ tree -s scratch-gui/src/lib/default-project
scratch-gui/src/lib/default-project
├── [ 4814] 82b56e044f6d767e09b507a69b95df41.svg
├── [ 560] 83a9787d4cb6f3b7632b4ddfebf74367.wav
├── [ 37420] 83c36d806dc92327b9e7049a565c6bff.wav
├── [ 4711] 9e94f2ec05ea588f7e48ee12678d22cc.svg
├── [ 4962] be8925e53870dff438c923ca84f7fb51.svg
├── [ 202] cd21514d0531fdffb22204e0ec5ed84a.svg
├── [ 317083] d3344650f594bcecdf46aa4a9441badd.svg
├── [ 2254] index.js #👈再利用
└── [ 7630] project.json
import * as projectJson from './project.json';
/* eslint-disable import/no-unresolved */
import wav1 from '!arraybuffer-loader!./83a9787d4cb6f3b7632b4ddfebf74367.wav';
import wav2 from '!arraybuffer-loader!./83c36d806dc92327b9e7049a565c6bff.wav';
import svg1 from '!raw-loader!./9e94f2ec05ea588f7e48ee12678d22cc.svg';
import svg2 from '!raw-loader!./82b56e044f6d767e09b507a69b95df41.svg';
import svg3 from '!raw-loader!./be8925e53870dff438c923ca84f7fb51.svg';
import svg4 from '!raw-loader!./cd21514d0531fdffb22204e0ec5ed84a.svg';
import svg5 from '!raw-loader!./d3344650f594bcecdf46aa4a9441badd.svg';
/* eslint-enable import/no-unresolved */
//wav
const wavDict = {
'83a9787d4cb6f3b7632b4ddfebf74367': wav1,
'83c36d806dc92327b9e7049a565c6bff': wav2
};
//svg
const svgDict = {
'9e94f2ec05ea588f7e48ee12678d22cc': svg1,
'82b56e044f6d767e09b507a69b95df41': svg2,
'be8925e53870dff438c923ca84f7fb51': svg3,
'cd21514d0531fdffb22204e0ec5ed84a': svg4,
'd3344650f594bcecdf46aa4a9441badd': svg5
};
const jsonCompose = (rawJson) => {
return {
id: 0,
assetType: 'Project',
dataFormat: 'JSON',
data: JSON.stringify(rawJson.default)
}
};
const wavCompose = () => {
const wavs = [];
for (let key in wavDict) {
const item = {
id: key,
assetType: 'Sound',
dataFormat: 'WAV',
data: new Uint8Array(wavDict[key])
};
wavs.push(item);
}
return wavs;
};
const svgCompose = () => {
let _TextEncoder;
if (typeof TextEncoder === 'undefined') {
_TextEncoder = require('text-encoding').TextEncoder;
} else {
_TextEncoder = TextEncoder;
}
const encoder = new _TextEncoder();
const svgs = [];
for (let key in svgDict) {
const item = {
id: key,
assetType: 'ImageVector',
dataFormat: 'SVG',
data: encoder.encode(svgDict[key])
};
svgs.push(item);
}
return svgs;
};
const defaultProject = (translator) => {
const assetArr = [jsonCompose(projectJson)];
assetArr.concat(wavCompose());
assetArr.concat(svgCompose());
return assetArr;
};
export default defaultProject;
$ cd scratch-gui && yarn start
まとめ
記事を書いた人
ナンデモ系エンジニア
これからの"地方格差"なきプログラミング教育とは何かを考えながら、 地方密着型プログラミング学習関連テーマの記事を不定期で独自にブログ発信しています。
カテゴリー