Scratch 3.0 を Hackしよう。 scratch-storage.js に触ってみよう

scratch-storage を触って見ましょう。

Scratch-Storage には、 プロジェクトやAssetsを読み込むのに使用します。

コードは以下で公開されています。
https://github.com/LLK/scratch-storage

プロジェクトの中身は json

Scratchで作成したプロジェクトにて、「手元のコンピューターにダウンロード」を選択すると、ScratchのProjectをローカルにダウンロードできます。

「Untitled.sb2」を、「Untitled.sb2.zip」 としてみましょう。

解凍アプリで 解凍してみると、

unzip Untitled.sb2.zip
find ./Untitled.sb2
./Untitled.sb2/0.png
./Untitled.sb2/0.wav
./Untitled.sb2/1.svg.
./Untitled.sb2/1.wav
./Untitled.sb2/2.svg
./Untitled.sb2/3.png
./Untitled.sb2/project.json

というデーターが出来上がります。

今回は、これらのデーターを、APIで手に入れてみます。

Project.json

画像データと音声データ以外の、全てがここに書かれています。

Scratchのスクリプトだとか、Spriteや背景の情報など

jsonというテキストのフォーマットで書かれています。

https://wiki.scratch.mit.edu/wiki/Scratch_File_Format_(2.0)

試しに、project.json をテキストEditor で開いて見ましょう。

{
 "objName": "Stage",
 "sounds": [{
   "soundName": "pop",
   "soundID": 1,
   "md5": "83a9787d4cb6f3b7632b4ddfebf74367.wav",
   "sampleCount": 258,
   "rate": 11025,
   "format": ""
  }],

 "costumes": [{
   "costumeName": "backdrop1",
   "baseLayerID": 3,
   "baseLayerMD5": "739b5e2a2435f6e1ec2993791b423146.png",
   "bitmapResolution": 1,
   "rotationCenterX": 240,
   "rotationCenterY": 180
  }],

 "currentCostumeIndex": 0,
 "penLayerMD5": "5c81a336fab8be57adc039a8a2b33ca9.png",
 "penLayerID": 0,
 "tempoBPM": 60,
 "videoAlpha": 0.5,
 "children": [{
   "objName": "Sprite1",
   "sounds": [{
     "soundName": "meow",
     "soundID": 0,
     "md5": "83c36d806dc92327b9e7049a565c6bff.wav",
     "sampleCount": 18688,
     "rate": 22050,
     "format": ""
    }],

   "costumes": [{
     "costumeName": "costume1",
     "baseLayerID": 1,
     "baseLayerMD5": "09dc888b0b7df19f70d81588ae73420e.svg",
     "bitmapResolution": 1,
     "rotationCenterX": 47,
     "rotationCenterY": 55
    },

    {
     "costumeName": "costume2",
     "baseLayerID": 2,
     "baseLayerMD5": "3696356a03a8d938318876a593572843.svg",
     "bitmapResolution": 1,
     "rotationCenterX": 47,
     "rotationCenterY": 55
    }],

   "currentCostumeIndex": 0,
   "scratchX": 0,
   "scratchY": 0,
   "scale": 1,
   "direction": 90,
   "rotationStyle": "normal",
   "isDraggable": false,
   "indexInLibrary": 1,
   "visible": true,
   "spriteInfo": {
   }
  }],

 "info": {
  "swfVersion": "v459.1",
  "userAgent": "Mozilla\/5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit\/537.36 (KHTML, like Gecko) Chrome\/63.0.3239.84 Safari\/537.36",
  "flashVersion": "MAC 28,0,0,126",
  "projectID": "194253022",
  "videoOn": false,
  "scriptCount": 0,
  "hasCloudData": false,
  "spriteCount": 1
 }
}

と、行ったデーターが展開されます。

各種Project データをダウンロードしてみよう

scratch-storage.js を利用して、各種データーをダウンロードして見ましょう。

scratch-jsonは、ScratchStorageクラスを持つ

https://github.com/LLK/scratch-storage/blob/develop/webpack.config.js
のentry を見てみよう。
./src/index.js から始まることがわかりました。

https://github.com/LLK/scratch-storage/blob/develop/src/index.js
で、module.exportsしているところを見てみよう
ScratchStorage クラスを利用できることが解りました。

https://github.com/LLK/scratch-storage/blob/develop/src/ScratchStorage.js
を開いて見ましょう。
load (assetType, assetId, dataFormat)
と、データーを読み込むメソッドがありますね。

使い方は、利用しているコードを参考にしよう

例えば、

https://github.com/LLK/scratch-vm/blob/develop/src/virtual-machine.js

downloadProjectId() などで、Project を ダウンロードしていますね。

書いて、試してみよう

scratch-storage.js を生成する

git clone https://github.com/LLK/scratch-storage.git
cd scratch-storage
npm install
npm run build

./dist/ 配下に、jsファイルが生成されます

> find ./dist -type f -name "*.js"
./dist/node/scratch-storage.js
./dist/web/scratch-storage.js
./dist/web/scratch-storage.min.js

scratch-storage.js を使ってみる

cd ./dist/node
emacs main.js
const storage = require('./scratch-storage.js');


console.log(JSON.stringify(storage.AssetType.Project));
var storageObj = new storage();

const ASSET_SERVER = 'https://cdn.assets.scratch.mit.edu/';
const PROJECT_SERVER = 'https://cdn.projects.scratch.mit.edu/';

const getProjectUrl = function (asset) {
    const assetIdParts = asset.assetId.split('.');
    const assetUrlParts = [PROJECT_SERVER, 'internalapi/project/', assetIdParts[0], '/get/'];
    if (assetIdParts[1]) {
        assetUrlParts.push(assetIdParts[1]);
    }
    return assetUrlParts.join('');
};


const getAssetUrl = function (asset) {
    const assetUrlParts = [
        ASSET_SERVER,
        'internalapi/asset/',
        asset.assetId,
        '.',
        asset.dataFormat,
        '/get/'
    ];
    return assetUrlParts.join('');
};


storageObj.addWebSource([storage.AssetType.Project], getProjectUrl);
storageObj.addWebSource([storage.AssetType.ImageVector, storage.AssetType.ImageBitmap, storage.AssetType.Sound], getAssetUrl);


var id = '119615668';

const promise = storageObj.load(storage.AssetType.Project, id);
promise.then(projectAsset => {
 return projectAsset.decodeText();
}).then(jsonSrc =>{
    console.log(jsonSrc);
});

https://scratch.mit.edu/projects/119615668/

の、project.json が表示されます

スクリーンショット 2017-12-19 1.00.06.png

つづく

 
 
..
..
..
 
 
 
 
 

PS

今回のコードは以下

https://github.com/kyorohiro/doc.advent.scratch30/tree/master/scratch-storage-01

以下の場所でも、アレコレ書いていきます。

Scratch3.0 自分専用機 を作ろう!!

(0)Scratch 3.0 自分専用機 を作ろう!! (0)
(1) Scratch3.0をビルドしてみよう
(2) Scratch3.0 を Androidアプリとして動作させてみよう (1)
(3) Scratch3.0 を Androidアプリとして動作させてみよう (2)
(4) Scratch3.0 を Androidアプリとして動作させてみよう (3)
(5) Webpack とは)
(6) Scratch3.0 の package.jsonを読んでみよう
(7) scratch-gui を インストールしてみよう
(8) scratch-vm に利用されている、scratch-xxx を触ってみよう
(9) Babel を触ってみよう
(10) scratch-render.js で 何か作って触ってみよう
(11) scratch-storage.js を触ってみよう

Scratch2.0 入門

火の型 With Scratch 2.0 (プログラム入門)  第00巻
火の型 With Scratch 2.0 (プログラム入門)  第01巻
炎の型 With Scratch 2.0 (ゲームプログラム入門)

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.