1. ホーム
  2. Web プログラミング
  3. 関連情報

Scratch3.0 sb3ファイル読み込み時のページ初期化 操作コード

2022-01-01 03:34:33

Scratchは、プログラミングへの興味を深めるのに非常に適した方法です。ドラッグ&ドロップで、あなたはいくつかのゲーム、小さなプログラムの開発を実現することができ、ちょうどビルディングブロックのように、以下はそれを見て一緒に、sb3ファイルの操作方法をロードしながら、あなたのScratch3.0ページの初期化を与える![OK]をクリックします。

対象ファイル:srccontainers-texb-file-uploader.jsx

sb-file-uploader.jsx ファイル、クラス SBFileUploader を修正し、次のコードで componentDidMount() を追加します。

componentDidMount() { 

    var _this = this;
		
	// The address where the work is stored
	var sb3Path = null;
	
	/**
	 * Must use $(window).on("load",function(){});
	 * Otherwise the page will not be loaded in time for some components to load, affecting secondary file saving
	 *	console.log("Not yet initially loaded Sb3 file");
	$(window).on("load",function(){
		console.log("About to load Sb3 file initially");
		let reader = new FileReader();
		let request = new XMLHttpRequest();
		console.log("Loaded resource path", sb3Path);
		request.open('GET', sb3Path, true);
		request.responseType = "blob";
		request.onload = function() {
			if(request.status == 404){
				alert("Resource file of type sb3 not found");
				location.href='/scratch';
			}
			let blobs = request.response
			reader.readAsArrayBuffer(blobs);
			reader.onload = () => _this.props.vm.loadProject(reader.result).then(() => {
				analytics.event({
					category: 'project',
					action: 'Import Project File',
					nonInteraction: true
				});
				_this.props.onLoadingFinished(_this.props.loadingState);
			}).catch(error => {
				log.warn(error);
			});
		}
		request.send();
	});
}

ターゲットファイルのアドレス: srccomponentsmenu-bar.jsx

MenuBarクラスの初期SBFileUploaderであるmenu-bar.jsxファイルを、以下のコードで修正します。

// This file must be loaded
import SBFileUploader from '... /... /containers/sb-file-uploader.jsx';

class MenuBar extends React.
   
    render () {
    
        return (
            <Box
                className={classNames(
                    this.props.className,
                    styles.menuBar,
                    {[styles.saveInProgress]: this.props.isUpdating}
                )}
            >
				<SBFileUploader onUpdateProjectTitle={PropTypes.func} /* Initialize loading files to the project **/>
					{(className, renderFileInput, loadProject) => (
						<button onClick={loadProject} className={classNames(styles.scratchHide)}></button>
					)}
				</SBFileUploader>
            </Box>
        );
    }
}

export default injectIntl(connect(
    mapStateToProps,
    mapDispatchToProps
)(MenuBar));

この記事はScratch 3.0のページ初期化、sb3ファイルの読み込みについての記事です。