本日, JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました.

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

最近, 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 して遊んで下さい.

また, 多くのクリエイターの方々に使ってほしいので ツイート, はてブして頂けると嬉しいです. ご協力お願いします.

GitHub Download Documents

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 できます.

up

以前の 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

以上, 今後ともよろしくお願いします.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT