shi3z's はてなblog

カップヌードルがごはんになったことに驚く35歳

enchantMOONで活字を入力するための活字シールアプリを作った!

 こちらのブログはご無沙汰です。

 ついにenchantMOON S-IIが正式リリースされたので再開しようと思います。

 さて、今回の目玉機能はなんといっても、Skylabというクラウド環境で、enchantMOONで書いたコンテンツを共有できるようになったところ。

 そこで僕もenchantMOONでブログを初めて見ようと思いました。

 そのブログはこちら→ shi3zの手書きブログ by shi3z_bot : Skylab beta

 ハイパーテキストでブログを書くと、今までとはなんかちょっと違う感じで楽しいです。

 文章でブログを描く場合、どうしても文章が長くなりがちですが、ハイパーテキストの場合、掘り下げたいところをどんどんハイパー構造にしていけばいいだけなので、いくらでもできるのが良いですね。

 

 しかし、自分で書いていてなんですが、あまりの悪筆に自分で自分がいやになってきてしまいました。まあ普段のメモとか、人が見ない内容なら悪筆上等なんですけど、たまに人に見せるもの、まあブログもそうですけど、そういうのが悪筆というのはちょっと残念というかだいぶ残念な感じになるので、なんとか部分的にだけでも活字にしたい、と思ったわけです。

 

 そこでS-IIのアプリ作りの練習がてら、活字シールアプリを作ってみました。

f:id:shi3z:20140411154719p:plain

 こんな感じのアイコンです。

 使い方は・・・

f:id:shi3z:20140411154156p:plain

 

 まず、活字を書きたい場所にこのシールを貼ります。

 このシールをタップすると・・・

 

f:id:shi3z:20140411154203p:plain

 

 プロンプトが出るので、このプロンプトに好きな言葉を入力します。

 いまのところ2.9のバグで日本語が使えないのですが、近々リリースされる2.9.1で修正される予定です。

 

f:id:shi3z:20140411154213p:plain

 

 こんな感じに。Ayaka Kakizawaという文字が活字で入りましたね。

 

 実際、このアプリはどういうソースになってるかというと・・・

 

importJS(["lib/MOON.js"], function() {  
    var sticker = Sticker.create();  
    sticker.ontap = function() {
        
        MOON.keyboardPrompt("Type please",function(str){
            
	        var canvas = document.createElement("canvas");//Canvasを作る
	        var ctx = canvas.getContext("2d");
	        canvas.width = str.length*32;
	        canvas.height = 48 ;
	        ctx.strokeStyle = '#555555';
	        ctx.font="32px Futura";
	        var col = MOON.getDefaultPenColorBW(); //ペンカラーを取得
	        var res = MOON.int2rgba(col); //フォント色を指定
	        ctx.fontStyle="rgb("+res[0]+","+res[1]+","+res[2]+")";
	        ctx.fillText(str,0,32,str.length*32);//フォントを描画
	        
	        var background = MOON.saveImage(canvas);//Canvasをセーブ
	        var stickerID = window.location.href.split("/");
	        stickerID = stickerID[stickerID.length-2];//ステッカーIDを取得
	        var info = MOON.getPaperJSON(stickerID);
	        info.width = canvas.width;
	        info.height = canvas.height;
	        info.image = background;//背景を指定
	        MOON.setPaperJSON(stickerID, info);//ステッカーの内容を保存
	        MOON.finish();
        });
    };  
    sticker.onattach = function() {  
        MOON.finish();  
    };  
    sticker.ondetach = function() {  
        MOON.finish();  
    };  
    sticker.register();  
});

 

 こんな短いプログラムで実現できました。

 本当は二回目タップしたときは前回入力した内容が復活するなどしたかったのですが、仕事の合間だったのでとりあえずこんな感じで。

 

 とにかく、S-IIになってから、JavaScript(Eagle)とJava(Columbia)の間の通信が恐ろしく高速になったので、今まで機能としては用意されていたけど実用的にはならなかった背景を弄るようなアプリの速度が、「100倍くらい速くなった(高橋諒談)」ので、こんなシールアプリもサクサクつくれてしまうのです。