トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

JavaScript/tmlib.js のバックアップ(No.13)

次のイベントに参加して色々教えていただきました。
【TechBuzz】tmlib.js hackthon #1 〜JavaScript をより使いやすく, より便利に, そしてより豊かにをモットーとする「tmlib.js」のハッカソンイベント開催〜
スライドショー
tmlib.jsとはPC/iPhone/Androidなどのブラウザで動くwebアプリを開発できるJavaScriptライブラリです。 もちろんテキストエディタとFTPソフトとかで開発できるのですが、今回はjsdo.itというブラウザ上でhtml/css/JavaScriptなどの開発が行えるwebサービスで開発しました。 こちらが目からウロコでして、次のような手順で簡単に開発できました。

  1. twitter, facebookなどでjsdo.itにログイン
  2. 自分用のフォルダ名を入れる(私はpapuujp)
  3. Start codingボタンを押すと、最低限のindex.html, index.js, style.cssがサーバ上で作られ、ブラウザで編集可能となる
  4. +ボタンで使いたいJavaScriptライブラリ(jQuery Mobile, tmlib.js, enchant.jsなど)を追加する
  5. index.jsに作りたいコードを書いて、command + s(mac)やcontrol + s(windows)で保存すると、プレビューウィンドウで表示される

何がいいかというと、FTPでアップしなくてもサーバ上ですぐに公開された状態で試せることです。 例えば今回作ったサンプルはこちらとなります。マウスやスマホ上の指スライドで自機を左右に動かし、星を避けるゲームです。
http://jsrun.it/papuujp/star-game2
ソースも公開できて、こちらとなります。非公開とすることも可能です。
http://jsdo.it/papuujp/star-game2
jsdo.itを使うとiPadでもwebアプリ開発が行なえますし、JavaScriptやjQuery Mobileなどの実習形式の勉強会とかでも手軽に使えそうです。
（デバッグ機能が弱いので、そちらはGoogle Chrome Developerツールを一緒に開けばいいということも教えていただきました。とても便利でした）

tmlib.js自身は次のように色々な可能性を感じました。

  • 手軽に試せる
  • アニメーションとかが得意
  • スマホタッチやPCでのマウス操作の違いを吸収して両対応のwebアプリを作れる
  • AppStoreとかに公開しないでもすぐにリッチなwebアプリを公開できる
  • facebookアプリも作れそう
  • Titanium MobileのWebViewに入れて、画面表示をリッチに使えそう
    tmlibで何が作れるかは、ピンきりですが次でお試しください。
    http://jsdo.it/search?q=tmlib

スニペット

↑

メイン処理

// main 処理
tm.main(function() {
    alert("tmlib.js ちゃんと使えてるよ〜ん♪");
});
↑

クラス定義

var Hoge = tm.createClass({
    init: function(num) {
        this.num = num;
    },
    toString: function() {
        return "私の数値は{num}です!!".format(this);
    }
});
var hoge = Hoge(128);
document.write(hoge.toString());
document.write("<br />");
↑

エネミークラス定義

配列変数enemyListを使った敵処理が勉強になったのでソース一部を引用しました。次の点に注意して見ると勉強になります。

  • enemyListを初期化する位置 ... メインシーンの初期化処理
  • enemyListの中に入れるEnemyクラスの定義方法
  • Enemyインスタンスの生成、シーンおよびenemyListへの追加
  • EnemyインスタンスのシーンおよびenemyListからの削除 シューティングゲームの全コードはJavaScript/tmlib.js/sample/避けゲー(開始, 終了画面あり)に引用させていただいてます。オリジナルはこちらです。

#pre{{
/*
* グローバル変数
*/
var enemyList = null;

/*
* エネミー
*/
var Enemy = tm.createClass({
superClass: tm.app.StarShape,
// 初期化
init: function() {
this.superInit(PLAYER_SIZE, PLAYER_SIZE);
},
// 更新
update: function(app) {
this.y += 8; // 移動
this.rotation += 15; // 回転
// 削除判定
if (this.y > SCREEN_HEIGHT) {
this.remove();
enemyList.erase(this);
}
}
});

// メインシーン
var MainScene = tm.createClass({
superClass: tm.app.Scene,
init: function() {
this.superInit();

enemyList = [];

// プレイヤー
this.player = Player();
this.addChild(this.player);
this.player.x = SCREEN_CENTER_X;
this.player.y = SCREEN_HEIGHT-100;
},

update: function() {
// エネミー生成
if (app.frame % 8 == 0) {
// エネミー
var enemy = Enemy();
enemy.x = tm.util.Random.randint(0, SCREEN_WIDTH);
enemy.y = -50;
this.addChild(enemy); // シーンに追加
enemyList.push(enemy); // リストに追加
}

// プレイヤー, エネミー衝突判定
for (var i=0,len=enemyList.length; i<len; ++i) {
var enemy = enemyList[i];
// 衝突判定
if (this.player.isHitElement(enemy)) {
// Game Over
app.replaceScene(ResultScene());
}
}
}
});
}}

↑

リンク