品質高いJavaScriptアニメーションライブラリ·BonsaiJS MOONGIFT
BonsaiJSはFlashアニメーション並みの動作が可能なJavaScriptライブラリです。 JavaScriptによるアニメーションライブラリが増えています。BonsaiJSもその一つです。多彩なアニメーション処理が可能になっていますのでぜひご覧ください。 トップページです。ここもアニメーションされています。 マウスを動かすとブロックが表示されます。 グラフです。マウスのあたっている部分が大きくなります。 スターです。ぐりぐり動きます。 オブジェクトが飛び交います。 Pongを実際に遊べます。 円がダンスするように動きます。 ドラッグで動かせます。 デモを実際に動かした動画です。 BonsaiJSはキーフレームベースのアニメーション、画像だけでなくパスにも対応し、モーフィングもできます。マウスによる操作も可能で、Flashの代わりはもちろんゲーム開発にも使えるのではないでしょうか。
凄い。JavaScript上で動作するLisp·Javathcript MOONGIFT
JavathcriptはJavaScript上で簡単なLispを実行するプロジェクトです。 最近、Webブラウザ上でJavaScript以外の言語を動かそうとするプロジェクトが熱くなっています。DartやCoffeeScript、Ruby、PHPなどがありますがそこに新しい仲間の登場です。JavathcriptはJavaScriptで実装されたLispエンジンです。 デモコードです。 実行結果です。 Canvasを使うデモです。 Emacsに慣れ親しんでいる人であればしょっちゅう目にする言語と思われますが、括弧が多く特徴的なので最初はとっつきが悪く感じるかも知れません。関数、スコープ、文字列、数字、オブジェクト、Lisp in Lisp、グラフィックスの描画といった機能があります。 JavathcriptはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明
JavaScript製の高度なアニメーションライブラリ·tween.js MOONGIFT
tween.jsはActionScriptのTweenクラスを真似たJavaScriptアニメーションライブラリです。 かつてオンラインでアニメーションを表現しようと思ったならばFlashかGIFアニメーションを使うのが一般的でした。しかし今後JavaScriptの採用が増えていく中では別な作法を学ばなければなりません。そこで今回はJavaScript製のアニメーションライブラリtween.jsを紹介します。 デモ1。四角のエレメントが左右に動き回ります。 1,000本のバーが左右に動きます。 4096個のセルが徐々に色を変化させます。 グラフです。様々な描き方に対応しています。 動画の再生に合わせて右に動いていくデモです。同期されているのがポイントです。 デモ動画です。本当はもっと速く動きます。 tween.jsはActionScriptのTweenクラスを模して作られているとの事です。
どこまでも自由に情報をまとめる·Meshcraft MOONGIFT
Meshcraftは自由度の高いコンセプトマップエディターです。 Webはとても自由度が高いです。しかしHTMLという枠の中で行動を迫られます（FlashやJavaアプレットもありますが）。しかしそうした枠を超えてとにかく自由に情報を蓄積していけるソフトウェアがMeshcraftです。 トップページです。色々な枠やテキストが浮かんでいます。これらは自由に動かしたり編集したりできます。マウスで全体の視点を動かすこともできます。 登録フォームです。下の部分が大きくなるのはなかなか気持ちいい感覚です。 こんな感じで情報を結びつけることもできます。 新しい項目を追加します。左クリックで追加されます。 項目を追加した後、ドラッグで線を引きます。これでリレーションができます。 互いの関係性を明記します。 枠付きの他、ラベルも追加できます。 Meshcraftはコンセプトマップエディターという名称になっ
レガシーなブラウザにも高度なグラフィックを。JavaScriptによるOpenGL実装·JSGL MOONGIFT
JSGLはJavaScriptによるOpenGL実装です。 HTML5の新機能の一つにWebGLがあります。しかしまだまだ最近のWebブラウザでしか実装されていない機能になります。そこでWebGLに対応していないWebブラウザに対して3Dモデリングを行うライブラリがJSGLです。JavaScriptを使ってOpenGLを実装しています。 デモです。オブジェクトが回転しています。FPSはかなり高い数値が出ています。 実装サンプルです。コードはかなり分かりやすいのではないでしょうか。 JSGLには多彩なAPIが作られており、細かくモデリングができるようになっています。元々はJSOS向けのグラフィックスAPIとして開発されているとのことです。 JSGLはJavaScript製、MIT Licenseのオープンソース・ソフトウェアになります。 MOONGIFTはこう見る JSGLのAPIはWebG
JavaScriptオブジェクト用問い合わせ言語·SpahQL MOONGIFT
SpahQLはJavaScriptオブジェクトのデータ抽出に使えるクエリライブラリです。 WebアプリケーションではデータをJSONで利用するのが一般的です。データが大量にあるのであれば、そこから欲しいデータだけを抽出する仕組みが必要になるでしょう。JavaScriptでそれを可能にするのがSpahQLです。 例です。hash1というキーに対応したデータを取り出しています。 ネストして調べられます。 配列、ハッシュどちらにも使えます。 配列の場合は0などとキー指定もできます。 配列でサイズが1以上のものをピックアップしています。 データは抽出するだけでなく、プロパティを使ってサイズやデータの種別を調べることもできます。さらに正規表現を絡めてマッチするか否かをチェックするといった機能もあります。node.js、Webブラウザどちらでも使えるライブラリになっています。 SpahQLはJavaS
レガシーなWebブラウザでもリアルタイムコミュニケーション·Firehose MOONGIFT
FirehoseはWebSocketsを使わないリアルタイム通信ライブラリです。 Webベースのリアルタイムコラボレーションを実現させるためにはWebSocketsを使うのが手軽ですが、レガシーなWebブラウザでは使えません。そこでロングポーリングを手軽に実装できるのがFirehoseです。 サーバを起動しました。 クライアントから接続しています。 別なクライアントからデータを送信します。 データを得ました。ここで一旦接続は切れます。 Firehoseのデフォルトの動作ではデータを受け取ったタイミングで一旦接続が切れるようになっています。別途用意されているRackアプリケーション用のJavaScriptライブラリを使うと、接続が切れても自動的に再接続を開始します（その間にデータがポストされているとすぐに受け取ります）。Firehoseはレガシーなブラウザや接続が持続的でない環境下でもリアル
こんなやり方が…プラグインなしでWebブラウザ上でJavaを実行する·DoppioVM MOONGIFT
DoppioVMはCoffeeScriptで作られたJavaVMです。Webブラウザ上でJavaコードをコンパイルしたり実行できます。 Webブラウザ上で実行できるJavaと言えばアプレットになりますがプラグインが嫌われる現在、あまり実行される機会も多くありません。そこでJavaScript上で動作するJavaVM、DoppioVMが開発されました。 Webブラウザ上にコンソールが表示されています。 javacもあります。 実際にコンパイルして実行もさせられます。 DoppioVMはCoffeeScriptで書かれたJavaVMとなっています。そのためJavaプラグインなしでWeb上でJavaを実行できます。コンパイルして中間コードも生成されるので、かなり本格的と言えるでしょう。String、Pattern、HashMapなどがサポートされており、全てのJavaのコードが実行できる訳ではあ
JavaScriptで処理を同期的に行いたいと考えている人向け·JSDeferred MOONGIFT
JSDeferredはJavaScriptの非同期処理を扱うライブラリです。 JavaScriptの魅力は非同期処理にあると思いますが、これまでのコーディングスタイルと異なるのでやりづらいと感じる人も多いのではないでしょうか。そこでJavaScriptで同期処理的な実行を可能にするライブラリJSDeferredを使ってみましょう。 サンプルコードです。wait(3)で3秒間処理を停止しています。 サンプルのコードです。 ステップ実行のデモコードです。クリックアクションを受けて処理が実行されます。 Beforeです。ネストが深くなって非常に見づらい、汚いコードです。 Afterです。パラレルを使って平行にデータを読み込みつつ、全てが終わった段階でresultsに結果をまとめて次のメソッドを実行しています。 JSDeferredを使わずに書いている場合に比べて、コードがとても見やすいのが分かる
サーバとクライアントを同一コードで動かすリアルタイムコラボレーションWebフレームワーク·Meteor MOONGIFT
Meteorはサーバとクライアントが同一のコードで動作するnode.js用Webアプリケーションフレームワークです。 久々にぞくぞくさせられるWebアプリケーションフレームワークの紹介です。Meteorはnode.js用のWebアプリケーションフレームワークですが、同一のコードがサーバとクライアントで動作するユニークな特徴を持っています。 インストールします。コマンド一行でダウンロードからインストールまで実行されます。 インストールされました。 まずアプリを新規作成します。 そしてサーバを立ち上げます。これで準備完了です。 最初の画面です。ボタンを押します。 console.logに出力されています。ちゃんとコードが実行されています。 サンプルのTodoアプリです。こちらはGoogle Chromeです。 こちらはSafariです。同じURLを開いています。 Google Chromeで編
IE6から使えるHTML5/JavaScriptによるグラフライブラリ·envision MOONGIFT
envisionはHTML5/JavaScriptによるグラフライブラリです。ファイナンス系グラフ、フラクタルグラフを描けます。 HTML5/JavaScriptを使った高度なグラフライブラリとしてenvisionを紹介します。一般的なグラフというよりも、ファイナンス系のグラフ描画が得意なようです。 リアルタイムグラフ。刻々とグラフが追記されていきます。 タイムシリーズ。指定範囲だけを拡大できます。 こんな感じでマウスで幅を広げたりできます。 ファイナンス。株価、出来高といった指標を表示するのに使えます。 こちらも幅を変更できます。 中央をドラッグすれば左右への移動も可能です。 マウスでポイントにおける数値を表示できます。Ajaxによるデータ変更もサポートしています。 幅の変更ももちろん可能です。 フラクタル画像です。 マウスで範囲を指定して拡大できます。 envisionはHTML5のラ
黒バックが映える、軽量コードハイライター·Rainbow MOONGIFT
Rainbowは原色を多用した軽量コードハイライトライブラリです。 RainbowはJavaScriptを使ったコードハイライターです。従来のものに比べると色使いが鮮やかなのが特徴です。 PHPのハイライトサンプルです。 こちらはJavaScript。 HTML。PHPやJavaScriptをミックスしています。 大量のPHPのコード。レンダリングに若干の時間を要しますが、表示された後はさくさく動きます。 スタイルシート。 Python。 ソース。data-languageで定義します。 Rainbowはpreタグとcodeタグを組み合わせて使います。テキストエリアを使うものとはそこが異なります。行番号は表示されませんが、シンプルで手軽に使えるのではないでしょうか。コールバックを受け取ったり、独自のキーワードを追加して拡張と言ったこともできます。 RainbowはJavaScript製のオ
Canvasを使ったオンラインイラストソフトウェア·RoCanvas MOONGIFT
RoCanvasはHTML5/JavaScriptで作られたCanvas上で自由にイラストを描けるソフトウェアです。 RoCanvasはHTML5で作られたドローソフトウェアです。簡単なイラストを描いて、みんなで共有したりするのにぴったりと言えそうです。 最初の画面です。色、サイズ、書き方を選択できます。 赤の自由線です。 四角を書いてみました。中を全て塗りつぶしたもの、枠線だけの二つが選べます。 色を変えることもできます。 保存しておくことができます。サーバに画像データがポストされるとのことです。RoCanvas自体にはサーバサイドの仕組みは実装されていません。 RoCanvasは色やサイズ、線または四角から選んで自由にCanvas上に絵を描けます。その結果はサーバ上に保存されるので共有するのにも使えるでしょう。 RoCanvasはHTML5/JavaScript製のオープンソース・ソフ
Apache Clickを使ってWebアプリケーションを組むなら知っておきたい·Click JQuery MOONGIFT
Click JQueryはApache ClickとjQueryの連携をどう組むかデモアプリを通じて説明してくれるソフトウェアです。 Click JQueryはApache ClickとjQueryを連携された場合のデモソフトウェアです。実際にApache Clickを使っていく上でのテクニックとして知っておくと便利そうです。 デモサイトです。様々なコンポーネントを試せます。 スライド系のデモです。 カレンダー連携です。 ダイアログのデモです。 カラーピッカーのデモです。 フォルダのツリービューです。 テーブルです。Ajaxでデータを読み込んでいます。 グラフ描画のデモです。 円グラフのデモです。 Apache Clickのコードも確認できます。 機能はメニューに分かれて表示されています。Ajaxやフォーム、チャート、各種コントロール、イフェクト処理などをコードを見ながら実際にコーディング
表現力の高さに驚き。HTML5/Canvasグラフライブラリ·Flotr2 MOONGIFT
Flotr2はHTML5/Canvasを使ったグラフ描画ライブラリです。 これまでグラフと言えばFlashや画像出力が多かったですが、HTML5が使われるようになったことでぐっと表現力の高いグラフをWeb標準の技術で実装できるようになっています。その表現力を知るのにお勧めしたいのがFlotr2です。 たくさんのサンプルが用意されています。一気に紹介します。 線グラフです。 途中で途切れた曲線のグラフも描けます。 棒グラフです。 マウスオーバーで値を表示できます。 積み上げグラフです。 円グラフです。 レーダーチャート。 範囲グラフ。 ローソクチャートです。 滑らかな曲線のグラフです。 マウスオーバーでグリッドが表示されます。 マウスズームのデモです。 マウスで一部の範囲を指定できます。 折れ線グラフです。 マイナスの値にも対応。 クリックでリアルタイムにグラフを描きます。 画像ダウンロード
JavaScriptの開発、運用に。console出力をクライアントサイドで制御·andlog MOONGIFT
andlogはJavaScript開発で使われるconsoleのメッセージ出力をクライアントサイドで制御できるソフトウェアです。 andlogを使うとJavaScriptのデバッグメッセージの出力をクライアントサイトで切り替えられるようになります。妙なメッセージを出してしまわぬよう、使ってみると良いでしょう。 console.logを実行します。何も出力されません。 debugを有効にします。あくまでもクライアント側での処理です。 またconsole.logを実行します。今度は出力されました。 debugのフラグを落とせば元通りです。 andlogの面白い点はクライアントサイドでconsole.logの出力を制御できる点にあります。コードを見ればconsole.logという表示がされているとは思いますが、実際にコンソールに出さずに済むのは良さそうです。andlogはCommonJSと組み合
大型Webアプリケーションを開発する際に使えるJavaScriptフレームワーク·AngularJS MOONGIFT
AngularJSはMVCモデルを徹底したJavaScript製のWebアプリケーションフレームワークです。 Webアプリケーションを開発する際にJavaScriptを素のままで使うのはナンセンスになってきました。JavaScript用Webフレームワークを活用して手早く組み立てていくべきです。そのためのソフトウェアとしてAngularJSを紹介します。 まずごくシンプルなデモから。 クリックでビューが切り替わります。 node.js製のWebサーバも付属しています。 HTMLソースはこんな感じです。 JavaScriptのコードです。ルーティングやテンプレート、コントローラを指定してます。 Hello Worldのサンプルコード。JavaScriptによるハンドリングが見当たりません。 入力チェックを含めたフォームサンプル。こちらもごくシンプルなコードです。 入力チェックはリアルタイムに
JavaScriptによるバイナリハックの世界へようこそ·jDataView MOONGIFT
jDataViewはjQueryを使ったJavaScriptライブラリ解析用ライブラリです。 jDataViewはJavaScriptでバイナリデータを読み込む際に利用するDataViewを拡張し、より使いやすくしてくれるJavaScriptライブラリです。バイナリーハッカー必見のライブラリです。 こんなイメージデータをJavaScriptから閲覧できます。 tarファイルを読み込んでファイル構造やテキスト内容を表示しています。 テキストエリアの中にファイルの内容が表示されています。 jDataViewを使うとバッファーをその場で作ったり、バイナリファイルをAjaxで読み込んでgetStringで指定部分だけを取り出すことができます。DataViewをそのまま使うよりも便利そうです。 jDataViewはjQuery/JavaScript製のソフトウェア（ライセンスはWTFPL）です。 M
クライアントサイドだけでファイルを保存する·FileSaver.js MOONGIFT
FileSaver.jsはクライアントサイドでデータを生成しダウンロードするJavaScriptライブラリです。 Webアプリケーションが増える中、Webブラウザ上で作ったコンテンツをそのままエクスポートする時に使えるライブラリがFileSaver.jsです。 まず画像を保存するデモです。 こんな感じに適当にマウスで文字を書きます。 ファイル名をつけて保存ボタンを押すと保存が実行されます（ウィンドウ下部にダウンロードファイルがあります）。 ダウンロードされたファイルです。内容が動的に生成されているのが分かります。 同様にテキストの保存もできます。 テキストファイルの内容も動的です。UTF-8で作成されます。 HTMLファイルの保存もできます。 FileSaver.jsはコンテンツをCanvasタグにレンダリングし、それをダウンロードしているようです。HTML5対応ブラウザに限定されますが、
業務システムに単なるCSVもリッチに表現·js-tables MOONGIFT
js-tablesはCSV形式のテキストをフィルタリングやソートに対応したテーブル表示にしてくれるjQueryプラグインです。 js-tablesは業務システムで使えそうなjQueryプラグインです。CSVファイルやCSVのテキストを渡してフィルタリングや並び替えに対応したテーブルを表示してくれます。 サンプルです。元データはCSVファイルとなっています。 カラムごとに入っているデータをグルーピングして表示します。そこから選べばデータがフィルタリングされます。 end tagと入っているデータだけ抽出しました。ソートもできます。 フィルタリングはインクリメンタルに行われます。 任意のCSVファイルを指定してテーブル化できます。1行目が自動的にヘッダーになります。 実際の使い方です。単純にテキストを入れるだけでテーブル表示にしてくれます。 CSVを表示する場合にはYahoo! Pipesを使
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
