tmlib.jsでイクメンが知育アプリをつくる

はじめに

tmlib.jsを知ったのは、今年の初めに開催されたとあるプライベートイベントで、@phi さんから直々にtmlib.jsに関して
プレゼンを受けた前後からです。

知育アプリもどきの作成

あんまり小さいころからディスプレイ見せているのは子供もの目にどうかと思いますが、
今回はひらがなを表示して、子供にひらがなを覚えてもらおうという淡い期待の元に作業を進めます。

知育アプリ計画がうまく行けば、奥さんを説得して、新しいMacBook Proを買いやすくなるかも
なんてことも考えていたり、その割には、作業が進んでいません。。

今回やってみようとしいるアプリの概要

• 画面にひらがなを表示する
• 子供になんの字か考えされる
• 答えをパソコンがしゃべる
• 答え合わせは子供と一緒にする（スキンシップ大事w）

うーん、イマイチtmlib.jsの力を発揮させることが出来るか不安になってきた。

ボタンを表示する

• 03-02:「ボタンを表示してみよう」 – JavaScriptライブラリ「tmlib.js」でシンプルなタッチゲームを超簡単に作るチュートリアル - jsdo.it

開始ボタンを表示したり、次の文字にすすむボタンを表示させるのに参考にしました。

画面にひらがなを表示する

ひらがなを画面いっぱいに表示する方法から調べました。

tmlib.jsですごいもの作って、一攫千金の野望しかなく、全くスキルが伴っていないので、
このカレンダーに登録してしまい、あわてて、隙間時間で情報を集めてます。。

参考になりそうな作品

@phi さん作のYearBattery

• Year Battery - tmlib.js 0.2.0 - jsdo.it

外部の英字フォントを使ってる?

<link href='http://fonts.googleapis.com/css?family=Freckle+Face' rel='stylesheet' type='text/css'>

と記事書いていたら、前日の @YFukuyama さんがtmlib.jsでWebフォントを使う記事書かれていました。

文字を表示するには

var title = tm.display.Label("Year Battery").addChildTo(this);

Labelというのを使えばできるんですね。

後から大きくする

title.$extend({
            x: SCREEN_CENTER_X,
            y: 50,
            fontSize: 75, // <- フォントサイズの指定
            align: "center",
            baseline: "middle",
            fontFamily: "'Freckle Face', sans-serif",
            shadowBlur: 4,
});

生成したオブジェクトに$extendというメソッドにJSONを渡すことで一括して属性を追加・変更できるみたいです。

背景の子供ウケをねらう

単一色の背景より、子供ウケが良いだろうとの考えです。

RectangleShape使ってますが、もっとスマートな背景色の指定がありそうな気が、、
以下のように指定して、背景をグラデーションにしています。

var myGrRect = tm.display.RectangleShape(640, 890, {
    fillStyle: gradation
}).addChildTo(app.currentScene);
myGrRect.setPosition(320,200);

tmlib.jsではRGBの他にhslで色を指定できるので、こういったグラデーションなんかはいい感じに指定できるようです。

tmlib.jsをしゃべらせる

できるのかなぁ。。

• [HTML5] Web Speech APIに入門 - YoheiM .NET

を参考にChromeで使えるWeb Speech APIを使いました。

var msg = new SpeechSynthesisUtterance();
msg.volume = 1;
msg.rate = 1;
msg.pitch = 2;

// 現在表示中の文字を取得
// tmlib.jsのラベルの表示文字の取得これでいいのか？
msg.text = title._text; // しゃべる内容
msg.lang = "ja-JP"; // en-US or ja-UP

// テキストスピーチ開始
speechSynthesis.speak(msg);

Atom Shellでネイティブアプリ化する

なんで

ブラウザで操作させると、子供が動かしたりすると、変な設定やらヤバイページに遷移されたりすることが
容易に予測できるからです。

tmlib.jsを組み込む

以前

• Atom ShellでWebGLを動かしtmlib.jsを貼り付けてみた - Qiita

という投稿がありますが、この時は、tmlib.js自体はローカルに置かずにリモートで使っていました。今回は、ローカルにtmlib.jsを置いて使ってみます。

tmlib.jsの呼び出し方

BrowserWindowでloadUrlにしているhtmlファイルに
htmlファイルの場所から相対パス指定で出来切る模様。

うまく行かなかったら、h2oでも組み込んで、アプリ内にWebサーバー立ててやろうかと構えていましたが、
無事ローカルに置いたtmlib.jsをAtom Shell内のコードからも動かせました。

<script src="./lib/tmlib.min.js"></script>

成果物

こんなのが出来ました！

• https://github.com/kjunichi/aiueatom

atom-shell-starterを元に作ってます。

まとめ

なんとかやりたかった画面表示は出来ました。

また、tmlib.jsがAtom Shellに組み込んで使えることも分かりました。

ただ、atom-shell-starterで毎度、build,runだと相当ハイスペックはマシンでないとストレス感じます。特に、今回はaltjsを使っていないので、無駄に時間を使ってしまいました。生成したアプリのhtmlやjsを直接編集して、いい感じになってから、ビルドすると良かったと思いました。

今後の課題

• アニメーション
• 単調な背景に変化を付けることで飽きさせない
• タブレット対応
• スマホでリモコン操作
• PCのモニタから子供たちを離れさせたい
• Socket.ioでやってみたい

Link

• https://github.com/phi-jp/tmlib.js/
• https://github.com/atom/atom-shell/blob/master/docs/tutorial/application-packaging.md
• [tmlib.js]シーンまわりでよく使うイベント - Qiita

制作過程の記録

• http://goo.gl/zE75FL
• http://goo.gl/wgClmy
• http://goo.gl/3yUpid
• http://goo.gl/qq2jEL
• http://goo.gl/GkglXi
• http://goo.gl/XrzY7T

関連記事

• JavaScriptをDockerを使って黒い画面に表示する: misc
• jsfiddleで書いたtmlib.jsを使った俺のコードがjsdo.itで動かなかった: misc