本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました.
最近, JSX やら enchant.js やら arctic.js やらで JavaScript 界隈はすごく盛り上がっています. そんな中, 私自身も一石を投じようと本日 JavaScript ライブラリ 『tmlib.js』を公開しました!!
リニューアルって言った方が良いのかな? 実際には, 2年前に作っていたライブラリ 『tmlib』 を大幅に改良したものになります.
私一人でコツコツと作っていたものなのでクォリティは低めです. 誰か協力してくれー!!
コンセプトは『JavaScript をより使いやすく, より便利に, そしてより豊かに』とざっくりとした感じ.
やってることは
- 生成時に new がいらない class 定義の仕組みを作ってみたり
- jQuery ライクに DOM を扱えるようにしたり
- ajax 機能をサポートしてみたり
- HTML5 Canvas をラップして使いやすくしたり
- アニメーションできるようにしてみたり
- ベクトルや行列をサポートしてみたり
- 音を鳴らせるようにしてみたり
- 入力系をサポートしてみたり
- 1つのコードで PC とスマホ同時対応できるようにしてみたり
と色々やってます.
ここであーだこーだ書くより, サンプルを見てもらえれば色々やれるのが分かるかと思います. jsdo.it で 10 個程サンプルを作ったのでよかったら実行したり fork して遊んで下さい.
また, 多くのクリエイターの方々に使ってほしいので ツイート, はてブして頂けると嬉しいです. ご協力お願いします.
Table of contents
Examples
tmlib.js のサンプルです.
全てスマートフォンにも対応していて, どれも 100 行前後のコードで実装しています. ぜひ参考に!
1 – Circle
画面をクリックするとサークルが出現してバウンドします.
2 – Collision Circle
サークル同士の衝突判定サンプルです. マウスクリックもしくはタッチで掴んで投げることもできます.
3 – Pursuit
以前, 『HTML5 Canvas と JavaScript を使って作る追尾サンプル』で 作ったサンプルを tmlib.js で実装し直したものになります.
コードの量が 1/2 以下になっているのが分かるかと思います.
カラフルなサークルがマウスもしくはタッチした位置に追尾します.
4 – Magic Square
魔方陣サンプルです. 画面をクリックすると魔方陣が出現してアニメーションします. 画像を使わずに動的に魔方陣を作成しているってところが肝!!
5 – Particle
パーティクルのサンプルです. よくあるあれですね. あれを tmlib.js で実装しなおしたものになります.
6 – Paint
簡単なペイントツールです. tmlib.js を使えばこういったプログラムを, たった 40 行で実装できます.
マウスもしくはタッチで絵を書くことができます. ミドルクリックで画像として保存できます.
7 – Piano
以前, 『HTML5 Audio と JavaScript でピアノ制作』で 作ったサンプルを tmlib.js で実装し直したものになります.
DOM の操作や CSS との連携も簡単にできます!!
8 – Snow
雪を降らすサンプルです.
雪を降らすような演出も tmlib.js のアニメーション機能を使えば簡単にできます!!
9 – Text Effect
テキストエフェクトのサンプルです. マウス, もしくはタッチすると近くのパーティクルが拡大されたり回転したりします.
上の方で定義している
var TEXT = "tmlib.js";
の文字列を変更すれば表示される文字を簡単に変えることができます.
10 – Unit Circle
単位円のサンプルです. ベクトルの勉強なんかに使って下さい.
Ctrl で長さを 1 固定, Shift で角度を 5 skip できます.
以前の tmlib と何が変わったのか?
以前の tmlib.js との主な違いはファイルが tmlib.js ひとつになりました.
以前のは動的にスクリプトをロードすることで機能を追加していました. ただ, それだと jsdo.it の方で使う上で都合が悪かったので全てのファイルを連結した tmlib.js を作った次第です.
まさか jsdo.it で Add Library できるようにしていただけるとは思っていなかたので. ホント感謝です!!
また, 開発で使用していたプロジェクトホスティングサービスを Google Code から GitHub に変更しました.
なので, 開発に興味のある方はぜひ fork して遊んでみてください. Pull Requests なんかくれると嬉しいなぁ~.
企業としてやっているわけではないので, ある程度柔軟に対応できるかと思います.
up今後の予定
上のサンプル含め Steb by Step 形式で tmlib.js を学べる入門ページを作る予定です.
jsdo.it に大量のサンプルを投稿してご迷惑をおかけしている怒涛シリーズも近々公開する予定です. お楽しみに.
また, もうすでにまわりの優秀なクリエイターの方々にお声かけをしていて, tmlib.js を使ったアプリを開発してもらっています. 近々 , 続々とネイティブに引けを取らないような Web アプリが公開される予定です.
JSX に移植するとかしないとか. もうすでに移植してるとかしてないとか.
up以上, 今後ともよろしくお願いします.
本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. | TM Life
http://t.co/S1pnlXRj 本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. | TM Life
本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. | TM Life http://t.co/1X6p6nDq
javascript: 本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. | TM Life http://t.co/OqhfjykI
本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. | TM Life http://t.co/buTTNcB9
本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. | TM Life http://t.co/aF8YUDlI
本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. | TM Life http://t.co/5gfKNvw5 #あとで読む
はてブ新着: 本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. | TM Life http://t.co/tkSmS8LL
あとで見てみる
“本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. | TM Life” http://t.co/fIWg5r1M
html5: 本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. | TM Life http://t.co/7CPkVmZ8
あとで見てみる
“本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. | TM Life” http://t.co/fIWg5r1M
本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. | TM Life http://t.co/f50Td3JR
starred items / from Codezine bookmarks http://pipes.yahoo.com/pipes/pipe.info?_id=3da1596b1c9c3c7090df9322771608e1
本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. http://t.co/L7SrG3vy @phi_jpさんから
http://t.co/T7x5xyfv
#followmejp #followjp 本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しま
本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. | TM Life (http://t.co/BLEEVSuB) #news
はてな: 本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. | TM Life http://t.co/adEapcFY
本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. | TM Life http://t.co/Nr4sjNeq
本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. | TM Life http://t.co/Py9FJbEw
【トレンドなう】本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. | TM Life http://t.co/Clq9tvOc
本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. | TM Life http://t.co/AK4CZsW1
本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. | TM Life http://t.co/xnV282wc
“本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. | TM Life” http://t.co/ATbApHIf
(31user)(13like)(58tweet)本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. | TM Life – http://t.co/tLsIKXzk
本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. | TM Life http://t.co/fgqYncrl
コンピュータ・IT: 本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. | TM Life http://t.co/1g5s1csH
本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. | TM Life http://t.co/0IbuZOXt
本日, JavaScript ライブラリ tmlib.js と10個のサンプルを公開しました.- http://t.co/MvKzADgw (via hatebuit)
“本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. | TM Life” http://t.co/6SJ9iMc8
[javascript] / “本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. | TM Life” http://t.co/JN0MBzQE
“本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. | TM Life” http://t.co/6V6pbESw
本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. http://t.co/W2JenjE6 @phi_jpさんから
本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. | TM Life – http://t.co/gVv3GPdQ
[link] 本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. | TM Life http://t.co/W8S7MneD
JS:デモを触ってビックリ!色々と秀逸なJavaScript ライブラリー!
本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. http://t.co/MLM0MMlN @phi_jpさんから
[コンピュータ・IT][Web制作][JavaScript][html5][ライブラリ][library][js] / “本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. | TM …” http://t.co/hiTD0qjY
“本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. | TM Life” http://t.co/C9akC3r9
“本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. | TM Life” http://t.co/K77pzg3D
ほお! ≫ 本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. http://t.co/nNAsPelE
本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. | TM Life http://t.co/QUJjRqZq
本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. | TM Life http://t.co/byhw6FSV
[おすすめ記事] 本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. | TM Life http://t.co/60jzo6Mp
サムネイルが表示されるよう修正.実行しなくてもどんなサンプルがあるのか分かるように!
"本日, JavaScriptライブラリ『tmlib.js』と 10 個のサンプルを公開しました."
http://t.co/1GT4ky7E
#web #javascript #tmlibjs
サムネイルが表示されるよう修正.実行しなくてもどんなサンプルがあるのか分かるように!
"本日, JavaScriptライブラリ『tmlib.js』と 10 個のサンプルを公開しました."
http://t.co/1GT4ky7E
#web #javascript #tmlibjs
[…] 本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. […]
[…] tmlib.js 』という JavaScript ライブラリがあるのでよかったら使ってみて下さい. […]
@naotaro0123 紹介して頂きありがとうございます! tmlib.js 開発者の phi と申します.
もしよろしければこちらの方参考にして下さい.
http://t.co/1GT4ky7E
[…] 本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. […]
そんな訳ではてブしました
メモ!
メモ! / “本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. | TM Life” http://t.co/MSt32GB2
メモ! / “本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. | TM Life” http://t.co/MSt32GB2
“本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. | TM Life” http://t.co/IaWB657w
[…] tmlib.js ってなんぞや?って方は『JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました.』へ. […]
メモ: 本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. http://t.co/9JpsuRqj @phi_jpさんから
メモ: 本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. http://t.co/9JpsuRqj @phi_jpさんから
後で弄る。とってもおもしろそう。 RT @hamasyou: メモ: 本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. http://t.co/4p2CQlPl @phi_jpさんから
ちなみに tmlib.js はこんなライブラリです.
blog :
http://t.co/1GT4ky7E
github : https://t.co/Ytbsm3AI
#javascript #tmlibjs
すげー!今時はこんな便利なライブラリあるんだ!エフェクトとかかけるの割と簡単そうだな。//http://t.co/oU0WHFli
#tmlib.js でオブジェクトをD&D移動させるにはどうしたらいいんじゃろう?と思って、サンプルを眺めてたら 2 – Collision Circle が参考になりそうな予感。… http://t.co/tvW3ktKqEF
@phi_jp 「上のサンプル含め Steb by Step 形式で tmlib.js を学べる入門ページを作る予定です.」と書いてありますが、既に作られたのでしょうか? http://t.co/lqnUnRdymv
メモ! / “本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました. | TM Life” http://t.co/MSt32GB2