半空洞男女関係

思ったこととかプログラミングしてるときのメモとか色々かいてます。メールはidそのままgmail

ScratchX 開発 はじめかた

基本的にはドキュメント嫁です。

llk.github.io

ScratchはGithub Pagesでの運用を推奨してる。

1.crossdomain.xmlを置く

yourid.github.ioのリポジトリに以下のxmlファイルを crossdomain.xml という名前で置きます。

<cross-domain-policy xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://www.adobe.com/xml/schemas/PolicyFile.xsd">
  <site-control permitted-cross-domain-policies="master-only"/>
  <allow-access-from domain="scratchx.org"/>
  <allow-access-from domain="llk.github.io"/>
</cross-domain-policy>

これでScratchXがあなたのスクリプトを取り込めるようになる。

2.Scriptを書く。

最小スクリプトは以下。

(function(ext) {
    // shutdown時に呼ばれる
    ext._shutdown = function() {};

    // statusを返してやる。デバイスとつながってない時とかここで色々返せる。
    ext._getStatus = function() {
        return {status: 2, msg: 'Ready'};
    };

    // blockが呼び出された時に呼ばれる関数を登録する。
    // 下にあるdescriptorでブロックと関数のひも付けを行っている。
    ext.do_something = function(str) {
    };

    // ブロックと関数のひも付け
    var descriptor = {
        blocks: [
            [' ', 'do_something %s', 'do_something', 'sample text'],
        ]
    };

    // 最後にExtensionを登録する
    ScratchExtensions.register('Simple extension', descriptor, ext);
})({});

ブロックの種類

ブロックの種類は5つある。先頭に来るブロック(Hat block)と、重ねていく四角いブロック(Command block)と、ブロックの中の引数として利用できる丸いブロック(Reporter block)。Hat block以外はそれぞれ、同期して動くもの(n秒待つとか、次のブロックを実行しない)と、非同期で動くもの(待たずに、スタートしてそのまま)がある。

配列 descriptor の仕様についてはここを参照。 Scratch Extensions

同期の方法

同期して動くブロックの場合は、関数の最後の引数にcallbackが渡されるので、もう終わりましたというタイミングでコールバックを読んであげれば良い。

頑張ってゴリゴリ書きましょう。

3. 公開する

こんな感じで、ScratchXのスクリプトの置いてあるリポジトリのgh-pagesブランチにスクリプトを置いてあげる。僕はmasterで開発してコミットしてから、gh-pagesでmasterをマージすることでscriptのアップデートしてる。めんどい気がするので何か良い方法があったら教えて欲しい。

今のところ、リポジトリ名はscratchx-somethingで行くのが良いのではないかという気がしております。

4. つかう

最終的に、以下のURLに適切なファイルが置かれていればよい。

そうしたら、ScratchXのOpen Extension URLにjsのリンクをぶち込めば使える。http://scratchx.org/?url=[jsのURL] へアクセスしても同じ効果が得られる。

開発Tips

僕は下記のようなディレクトリを作って、PythonでSimpleHTTPServerを建てて、ngrokで外部にURLを持たせてデバッグしてた。./upってやるとpythonとかngrokとか立ち上がってCtrl-Cするとpythonを片付ける。

├── crossdomain.xml
├── script.js
├── up
└── scratchx-script
    ├── index.html
    ├── jquery-2.1.4.js
    └── pushbullet.js -> ../script.js

upコマンドの様子です

#!/bin/sh
python -m 'SimpleHTTPServer' &
shsid=$!
ngrok localhost:8000
kill -KILL $shsid

シンボリックリンクを張っているのは、masterでscriptを管理しつつ、Webに公開された時の階層構造を維持したいためです。

参考実装

最後に参考になりそうな実装をいくつか置いておきます。