Scratch-guiのデフォルトプロジェクトのアセット置き場を変える方法
※ 当ページには【広告/PR】を含む場合があります。
2020/11/01
はじめに
https://assets.scratch.mit.edu/internalapi/asset
scratch.mit.edu
AWS S3でアセット用のバケットを作成
https://...
project
.sb3
project
[アクセス許可]
[バケットポリシー]
[Cross-Origin Resource Sharing(CORS)]
読み込み専用
POST
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "Accsess Policy 1",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::<バケット名>/*"
}
]
}
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": [],
"MaxAgeSeconds": 3000
}
]
AllowedOrigins
$ curl https://s3-ap-northeast-1.amazonaws.com/バケット名/project/8c84d0a54dc6d808c08b06f4f3880e62.svg
<svg version="1.1" width="7.579999923706055" height="11.640000343322754" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="3.4549999237060547 1.0399999618530273 7.579999923706055 11.640000343322754">
#...中略
</g>
</svg>
scratch-guiの修正
project.json:
https://projects.scratch.mit.edu/[project_id値]
assets:
https://assets.scratch.mit.edu/internalapi/asset/[resource_id.(png|svg|wav)]/get/
project-fetcher-hoc.jsx
project-fetcher-hoc.jsx
scratch-gui/src/lib/project-fetcher-hoc.jsx
//...中略
ProjectFetcherComponent.defaultProps = {
assetHost: 'https://assets.scratch.mit.edu',
projectHost: 'https://projects.scratch.mit.edu'
};
//...以下略
//...中略
ProjectFetcherComponent.defaultProps = {
// assetHost: 'https://assets.scratch.mit.edu',
// projectHost: 'https://projects.scratch.mit.edu'
assetHost: 'https://s3-ap-northeast-1.amazonaws.com/<バケットの名前>/project',
projectHost: 'https://s3-ap-northeast-1.amazonaws.com/<バケットの名前>/project'
};
//...以下略
storage.js
storage.js
scratch-gui/src/lib/storage.js
//...中略
setProjectHost (projectHost) {
this.projectHost = projectHost;
}
getProjectGetConfig (projectAsset) {
return `${this.projectHost}/${projectAsset.assetId}`;
}
getProjectCreateConfig () {
return {
url: `${this.projectHost}/`,
withCredentials: true
};
}
getProjectUpdateConfig (projectAsset) {
return {
url: `${this.projectHost}/${projectAsset.assetId}`,
withCredentials: true
};
}
setAssetHost (assetHost) {
this.assetHost = assetHost;
}
getAssetGetConfig (asset) {
return `${this.assetHost}/internalapi/asset/${asset.assetId}.${asset.dataFormat}/get/`;
}
getAssetCreateConfig (asset) {
return {
// There is no such thing as updating assets, but storage assumes it
// should update if there is an assetId, and the asset store uses the
// assetId as part of the create URI. So, force the method to POST.
// Then when storage finds this config to use for the "update", still POSTs
method: 'post',
url: `${this.assetHost}/${asset.assetId}.${asset.dataFormat}`,
withCredentials: true
};
}
//...以下略
getAssetGetConfig
AWS S3
//...中略
getAssetGetConfig (asset) {
// return `${this.assetHost}/internalapi/asset/${asset.assetId}.${asset.dataFormat}/get/`;
return `${this.assetHost}/${asset.assetId}.${asset.dataFormat}`;
}
//...以下略
storage.js
まとめ
記事を書いた人
ナンデモ系エンジニア
これからの"地方格差"なきプログラミング教育とは何かを考えながら、 地方密着型プログラミング学習関連テーマの記事を不定期で独自にブログ発信しています。
カテゴリー