jsdo.it
x
tmlib.js
で開発しよう♪
自己紹介
- 名前 ... phi(ファイ)
- 言語 ... C/C++, Python, JavaScript
- 年齢 ... 24 歳
- 仕事 ... 某ソーシャルゲーム会社で働いています
- Twitter ... @phi_jp
- Blog ... TM Life
- 参考書の執筆
- enchant.js開発のレシピ
- enchant.js スマートフォンゲーム開発講座
jsdo.it って何？
ブラウザ上でJavaScript、HTML5、CSSを書き、
共有できるサービス
jsdo.it を使うメリットって？
キリがないですがざっくり挙げると
- ネット上で作業が完結する
- 作ったものを全世界に公開できる
- 人のコードをアレンジできる(fork機能)
- スマフォでも動かせる
- Add Library で tmlib.js を追加できるw
ってところですかね.
jsdo.it で Hello, world!
とりあえず使ってみましょう
- http://jsdo.it を開く
- jsdo.it にログイン
- Start Coding をポチる
- コーディング開始
- もうすでに Hello, world! がw
- 編集して Save ボタンをポチる
1. http://jsdo.it を開く
http://jsdo.it にアクセス
2. jsdo.it にログイン
画面右上のログインボタンをクリック
3. Start Coding をポチる
画面左上の Start Coding ボタンをクリック
4. コーディング開始
それぞれ対応したタブで JavaScript, HTML, CSS を
編集することができます.
5. もうすでに Hello, world! がw
実行してみると Hello, world! がもうすでに!!
6. 編集して Save ボタンをポチる
ちょっとコードを書き換えて保存
Command(Ctrl) + S でも ok
自動で実行結果に反映されます
Readme やタイトルを編集しよう♪
- Readme を編集
- タイトルやタグを編集
- Finish ボタンを押して確認
1. Readme を編集
README タグを選択して編集
2.タイトルやタグを編集
タイトルに『jsdo.it を使ってみよう - tmlib.js #techbuzz』
タグに『javascript tmlib.js techbuzz』を設定
3.Finish ボタンを押して確認
ちゃんと反映されているか確認
jsdo.it で tmlib.js を使おう
- Start Coding をポチる
- Add Library を選択する
- tmlib.js を選択し Add ボタンをポチる
- コードを入力
- Saveして実行画面を確認
- 適切なタイトル, タグ, ReadMe を設定
- Finish!
1. Start Coding をポチる
さきほどと同じ
2. Add Library を選択する
プラスボタンをクリック
3. tmlib.js を選択し Add ボタンをポチる
モーダルウィンドウが表示されます. Major Library から tmlib.js を選択して Add ボタンをクリックしましょう.
4. コードを入力
tm.main(function() {
var app = tm.app.CanvasApp("#world");
app.resize(465, 465);
app.fitWindow();
app.background = "rgba(0, 0, 0, 0.1)";
var star = tm.app.StarShape(32, 32);
app.currentScene.addChild(star);
app.currentScene.update = function() {
if (app.pointing.getPointing()) {
star.x = app.pointing.x;
star.y = app.pointing.y;
star.rotation += 15;
}
}
app.run();
});
5. Saveして実行画面を確認
マウスの移動に合わせて動いていればOK!!
6. 適切なタイトル, タグ, ReadMe を設定
タイトルに『jsdo.itでtmlib.jsを使おう - tmlib.js #techbuzz』
タグに『javascript tmlib.js techbuzz』を設定
7. Finish!
世界中に公開!! 実際のコードはこちら
スマフォでも動かしてみよう
スマフォで動作確認してみましょう
- URL の jsdo の部分を jsrun に
変えてスマフォで実行 - 同じように表示されれば Happy!
↓
1. URL の jsdo の部分を jsrun に
変えてスマフォで実行
先ほど作ったコードの
URL の jsdo 部分を jsrun に変更
私の場合は
http://jsdo.it/phi/qFNi
↓
http://jsrun.it/phi/qFNi
↓
2. 同じように表示されれば Happy!
もちろん tmlib.js を使っているから
タッチも効くよ♪
ローカル開発に切り替えてみよう♪
jsdo.it のコード自体の構成はいたってシンプルです.
- Download ボタンをクリック
- ファイルの中を覗いてみる
- html に jsdo.it で書いていた script , css を
読み込ませているだけ - なのでそのまま編集しちゃえばok