Skip to content

enchantMOON S-IIでちょっとJavaScriptプログラミングしてみよう

 enchantMOON S-IIがダウンロード提供開始されたので、なにかいろいろやってみようと思う人も多いはず。
 そこでちょっとだけテクニックを紹介します。

 開発者向けのドキュメントはこのへんとかにあります。

 MOON.jsというAPIに今回追加された様々な新機能のうち、getHistoriesを使って、ハイパーリンクの履歴を背景画面に描画するサンプルプログラムを書いてみました。

 実行するとこんな感じになります。

note

 ソースはこんな感じです。

importJS(["lib/MOON.js"], function() {  
    var sticker = Sticker.create();  
    sticker.ontap = function() {
    	//履歴を取得
        var hist = MOON.getHistories();


	//canvasを作る
        var y, x, 
            page = MOON.getCurrentPage(),
            backing = MOON.getPaperJSON(page.backing),
            canvas = document.createElement('canvas'),
            width = canvas.width = backing.width,
            height = canvas.height = backing.height,
            ctx = canvas.getContext('2d');
	
	//文字列を描画
        ctx.strokeStyle = '#555555';
        ctx.font="32px";
        ctx.fillText("history",0,32,5*32);

	//過去9回分のハイパーリンク履歴を表示        
        y=48;x=32;
        cnt=0;
        for(i=hist.length-1;i>hist.length-10;i--){
        	
        	ctx.drawImage(MOON.getPageThumbnail(hist[i].from),x,y);
        	x+=216;
        	cnt++;
        	if(cnt>=3){
        		x=32;y+=288;
        		cnt=0;
        	}
        }
        
        //canvasをページの背景に
 		MOON.setPageImage(canvas);
        MOON.finish(); 
    };  
    sticker.onattach = function() {  
        MOON.finish();  
    };  
    sticker.ondetach = function() {  
        MOON.finish();  
    };  
    sticker.register();  
});

 実際のコードはここにあるので参考にしてください。

 以前のバージョンでは画像の保存に恐ろしく時間がかかっていたのですが、S-IIでは非常に高速に画像のアップデートができるようになっています。

 これまであまり活用されてこなかった背景画面への書込みを利用すると、もっと面白い使い方ができそうですね。

このエントリーをはてなブックマークに追加
はてなブックマーク - enchantMOON S-IIでちょっとJavaScriptプログラミングしてみよう
Post to Google Buzz
Share on GREE

Related posts:

  1. [enchantMOON] MOONPhase 2.6.0に追加された「初期設定ブロック」を使おう!

Facebook comments:

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*