shi3z's はてなblog

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

enchantMOON S-II用の活字シール2種とバックボタンシールを作った

f:id:shi3z:20140411180550j:image

 

 S-IIでは、画像の書込みが高速になったので、キーボードから入力するバージョンと別に、手書きで入力した文字を認識して活字にするシールも作ってみた。

 

 といっても、keyboardPromptをpenPromptに買えただけ。penPromptはデフォルト状態ではアルファベットしか認識しないので、inputType:'any'を指定して日本語も認識するようになっている。

 

 ついでに、今回からMOON.getHistoriesがサポートされたので、一つ前のハイパーリンクに戻るBackボタンシールも作ってみた。

 

 うーん、手前味噌だがなかなか楽しいぞ

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倍くらい速くなった(高橋諒談)」ので、こんなシールアプリもサクサクつくれてしまうのです。 

enchantMOONで書かれたCP+レポート

 先日開催されたCP+のレポートを、某メーカーのSさんがenchantMOONで書いていました。

 写真とコメントを同時に残せるenchantMOONならではの活用法ということで、特別に許可を得て掲載します。

f:id:shi3z:20140218081948j:plain

 

f:id:shi3z:20140218082120j:plain

f:id:shi3z:20140218082132j:plain

f:id:shi3z:20140218082148j:plain

f:id:shi3z:20140218082159j:plain

f:id:shi3z:20140218082211j:plain

f:id:shi3z:20140218082222j:plain

f:id:shi3z:20140218082237j:plain

f:id:shi3z:20140218082247j:plain

f:id:shi3z:20140218082259j:plain

f:id:shi3z:20140218082310j:plain

f:id:shi3z:20140218082322j:plain

f:id:shi3z:20140218082338j:plain

f:id:shi3z:20140218082347j:plain

 

f:id:shi3z:20140218082413j:plain

 最後の写真はSさんのenchantMOON本体です。

 写真だけでなく肉筆で書かれた生々しい感想が入っていて、なるほどこんなふうに見ていたのか、ということがよくわかります。

 スウェーデンの街をenchantMOONを持ち歩いて回ったときも思ったのですが、enchantMOONは写真と同時に記憶を留めるようなものを作るのに適しているのかもしれません。

 それにしてもホバリングカメラが欲しくなりますね。

enchantMOONで映画感想文やご当地観光ガイド、グルメガイドなど

1月ももう終わってしまう勢いですが、あけましておめでとうございます。


年末から年明けまですっかり忙しくてこちらのブログを書くのがご無沙汰になっていましたが、ARCの渋江さんがenchantMOONで映画の感想文を書いてみた、というので見てみました。

f:id:shi3z:20140131141749j:plain

 

 

ああなんかこういう感じで本編中の映像を交えながら(Webサイトから切り取ったんでしょうね)手書きで感想文を書くと、なかなか味があっていいですね。

 

現在ゲンロンカフェで毎週行っている「ノンプログラマー・プログラミング講座」野中でも、enchantMOONを使ってハイパーテキストで自己紹介を書いてお互いで紹介し合う、というワークショップをやってみました。

f:id:shi3z:20140131142059p:plain

 

f:id:shi3z:20140131142119p:plain

この日、enchantMOONに初めて触る人ばかりでしたが、なかなか盛り上がっていました。

 

自分のアイデアをそのまま形にしてハイパーテキストとして表現できるenchantMOONならではのワークショップになったのではないかと思います。

 

手書きの「味」を活かした活用法として、同じくARCの渋江さんが作った「滋賀県観光ガイド」があります。

 

f:id:shi3z:20140131142524j:plain

こんな手書きのメニューから始まり・・・

f:id:shi3z:20140131142604j:plain

それぞれの文字をクリックするとそれぞれの紹介ページへハイパーリンク

f:id:shi3z:20140131142637j:plain

話題のピエリ守山まで紹介しています。

f:id:shi3z:20140131142732j:plain

 

さらに力作、「神田カレーガイド」

神田といえばカレーの名店があつまる場所。はてさて・・・

f:id:shi3z:20140131142817j:plain

フローチャートを選び、最期のA,B,C,Dのどれかをタップすると・・・

f:id:shi3z:20140131142906j:plain

 

とか・・

f:id:shi3z:20140131142944j:plain

とかとか・・・

f:id:shi3z:20140131143000j:plain

などなど、こんな感じでなかなか楽しいハイパーテキストコンテンツを作成していました。

 

また、他のアルバイトのHくんがつくったマジック・ザ・ギャザリングのライフカウンター、なんてのもあります。

f:id:shi3z:20140131143152j:plain

これは、左側のダイスをタップするとサイコロがランダムに変わるようになっていたり、上下の矢印をタップするとライフカウンターとして真ん中の文字が変化したりとなかなか凝ったものなのですが、プログラムを見ると・・・

f:id:shi3z:20140131143254j:plain

 

ギャーーというくらい複雑になってしまっています。

しかしこのHくん、バリバリの文系でMOONBlockが初めて触れたプログラミング言語だったとのこと。初めての人でも根性次第でこんなプログラムが組める、というのも考えさせられますが、それ以上に彼はMOONBlockによるプログラミングに「ハマって」しまったそうです。末恐ろしい。こういうことがもっと簡単にできるキットを作る、なんてこともできるかもしれませんね。

 

こんな感じで色々なことを試しながら、フィードバックを収集して次のバージョンアップに向けて日々開発を続けています。

 

Giant Leapもようやく一次審査を通過した方々との契約が終わり、来月から公開審査に切り替ります。乞うご期待。

 

タンジブル・コンピューティングの父、MIT石井裕先生にサインを頂きました。

f:id:shi3z:20131120221545j:image

 

 @MIT Media Lab 石井裕先生の研究室にて

 

 石井先生の最新の研究を拝見させていただき、大変刺激になると同時に、身の引き締まる思いでした。

 

 「独創命」という言葉に重みを感じます。

 

 さて、来年のCESの準備もいよいよ迫って参りました。

 いろいろと準備をしなければなりませんが、今年も残すところあと一ヶ月と少し。目一杯頑張ります。

 

enchantMOON /MOONPhase 2.7.0になったのでカレンダーシールを作ってみる

 先日つくったiPhone5プロトタイピング用シールを、nakano.koumutenさんが劇的にカッコ良く実用的にしてくれたので嬉しい。

 

iPhoneの枠 - nakano.koumutenのきまぐれ

 

 なんと原寸大にしてくれたそうだ。そうか、その発想はなかった。

 しかもグリッドが入っててとても描きやすそう。ちょっとしたアイデアで作って公開したシールを他の人が手を加えて改良して公開してくれる。こういうオープンソースな感じはすごく嬉しい。

 

 そういえばMOONPhase 2.7.0からはWebブラウザから画像を長押しで好きな画像を取り込むことが出来るようになったのだった。これまではペンで切り抜いていたことを考えると文明の利器という感じだ(わざと不便にしているわけだが)。

 

 長押しして奇麗に切り抜きたい画像としては、付箋のような使い方も考えられるがそれは既に一度提案してあるので、ここではカレンダーを貼れるようにしてみようかと思う。

 

 このブログをenchantMOONで表示して、好きなカレンダーを長押しすれば、それが張り付けられるというわけだ。貼ったカレンダーには書き込みもできるってワケ。

 

f:id:shi3z:20131109153736j:image

 

 こんな感じですよ。

 カレンダーってやっぱり書き込みたいじゃない?

 当然、プログラム的に枠を描画して・・・とか考えたんだけど、プログラム書くの面倒だし画像でよくない?ということで画像を切り出してみた。しかし、雑な切り方をしているので若干バラバラ感があります。誰か素敵なデザイナーさんとかが奇麗なの描いてくれないかなぁ

 

 プログラムを書かなくてもこういうのが作れるのよね

 

2013年

f:id:shi3z:20131109151222p:plain

f:id:shi3z:20131109151229p:plain

2014年

f:id:shi3z:20131109151246p:plain

f:id:shi3z:20131109151254p:plain

f:id:shi3z:20131109151258p:plain

f:id:shi3z:20131109151302p:plain

f:id:shi3z:20131109151305p:plain

f:id:shi3z:20131109151308p:plain

f:id:shi3z:20131109151311p:plain

f:id:shi3z:20131109151314p:plain

f:id:shi3z:20131109151316p:plain

f:id:shi3z:20131109151320p:plain

f:id:shi3z:20131109151322p:plain

f:id:shi3z:20131109151328p:plain

enchantMOONのページに数字を書き込むライブラリを作りました

プログラマーさん向けのネタです。

くるのはるみ(@H_Kuruno)さんの日付シールを貼ると、自動的に手書きの日付が書き込まれるという動作にとても感動したので、くるのはるみさんの許可を得て、数字を書き込む部分をライブラリ化してみました。lib/numberlib.jsがそれです。

使い方は簡単で、NUMBERLIB.draw(x,y,number,scale)を呼ぶと、それに応じたストローク情報が帰ってくるので、それをpaperJSONに投げ込むと、書き込まれます。

ページに任意の数字をシールが書き込めるとなると使い方は色々出てくると思います。

f:id:shi3z:20131107170148j:image

 

手書きのアルファベットも書き込めるといいなあ・・・ちょっと根性が要りそうですが

しかしいい加減、イベントの準備をしないと・・・