MOONPhase version 2.8.0

前回はLinkボタンを使って他のページにリンクするシールをつくるところまでやってみた。
今回は次のステップとして、Hackボタンを押してみよう。

前回つくったリンクシールを指で丸で囲うと４番目のボタンとしてHackボタンが追加されていることが確認できる。さっそく押してみると、MOONBlockが起動する。ここでは何も編集しないで”Done”を押してMOONBlockを終了する。この状態ではリンクシールの動作はそのままである。

では、PCにつないでフォルダの中身を確認してみよう。

Data
|-MyNotebook1
  |-20140212215125964
    |-20140212215125961
    | |-info.json
    |-20140215183327921
    | |-images          ----------1.画像用フォルダ
    | | |-
    | |-lib             ----------2.ライブラリ用フォルダ
    | | |-color.enchant.js
    | | |-enchant.js
    | | |-MOON.js
    | | |-moon.puppet.enchant.js
    | | |-puppet.enchant.js
    | | |-stylus.enchant.js
    | | |-surface.enchant.js
    | | |-ui.enchant.js
    | |-sound           -----------3.サウンド用フォルダ
    | | |-se
    | | | |-
    | |-hack.js         -----------5.シールの動作
    | |-info.json
    | |-manifest.json   -----------4.シールの情報
    |-info.json
    |-storage.json

三個のフォルダが追加されている。
1.画像用フォルダにはMOONBlockで使用する画像ファイルが入っている。
2.ライブラリ用フォルダにはenchantMOONの機能を使うためのライブラリのようだ。
3.サウンド用フォルダにはMOONBlockで使用するサウンドファイルが入っている。

次に4.シールの情報が書かれたmanifest.jsonが更新されているので中身を確認してみよう。
Hack前

{
	"editor":{
		"name":"Columbia",
		"version":"1"
	},
	"linked_pages":["20140211100645567"],
	"access_urls":[],
	"script":"hack.js"
}

Hack後

{
	"version":"1",
	"editor":{
		"name":"MOONBlock",
		"version":"1"
	},
	"linked_pages":["20140211100645567"],
	"access_urls":[],
	"script":"hack.js",
	"plugins":[],
	"blocks":[{
		"x":200,
		"y":280,
		"constructorName":"StickerBlock",
		"variables":{
			"name":"シール",
			"fold":"-",
			"ontap":{
				"x":0,
				"y":0,
				"constructorName":"LinkBlock",
				"variables":{
					"type":"Page",
					"link":"20140211100645567"
				},
				"next":null
			},
			"onattach":{
				"x":0,
				"y":0,
				"constructorName":"EndBlock",
				"variables":{},
				"next":null
			},
			"ondetach":{
				"x":0,
				"y":0,
				"constructorName":"EndBlock",
				"variables":{},
				"next":null
			}
		}
	}],
	"block_images":[]
}

MOONBlockの情報がいろいろ追加されている。

次に5.シールの動作がかかれたhack.jsをみてみよう。
Hack前

location.replace("page://20140211100645567");

Hack後

importJS(["lib/MOON.js", "lib/enchant.js", "lib/ui.enchant.js", "lib/color.enchant.js", "lib/surface.enchant.js", "lib/stylus.enchant.js", "lib/puppet.enchant.js", "lib/moon.puppet.enchant.js"], function() {
    enchant();
    enchant.puppet.prepareTheatre({
        assets: []
    });
    StickerPuppet.create("シール", {
        behavior: [{
            stickertap: function(event) {
                MOON.openPage("20140211100645567");
                enchant.puppet.stopTheatre();
            },
            stickerattach: function(event) {
                enchant.puppet.stopTheatre();
            },
            stickerdetach: function(event) {
                enchant.puppet.stopTheatre();
            }
        }]
    });
});

MOONBlockを使うためのコードがいろいろ追加されている。
MOON.openPage(“20140211100645567”);でページのリンクを実現しているようだ。