JavaScriptでSVGのレーダーチャートを描画するライブラリ Raphael Radar をつくった - I CAN ’CAUSE I THINK I CAN!
概要 JavaScriptでSVGを描画するライブラリRaphael.jsを使って、 操作可能なレーダーチャートを描画するライブラリ Raphael Radar を作りました。 Raphael Radar は次の2つの機能を持ちます。 レーダーチャートをSVGで表示 レーダーチャートの各軸の値をフォームと対応づけて、インタラクティブに値を選択 (2)の機能は任意で無効化して単純なレーダーチャートとして利用することもできます。 入手と使い方 依存ライブラリ Raphael Radar を使う前に、2つのライブラリをインストールする必要があります。 Raphael.js (1.3.1 以降) jQuery (1.4.2 以降) もしうまく動作しない場合、Raphael.jsとjQueryのバージョンを合わせてみてください。 インストール方法 上記の依存ライブラリをインストール Raphael
Raphael.JS でテトリスみたいなゲームを作ろう！
四角を書いてみよう <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Sample</title> </head> <body> <script src="raphael.js"></script> <script> var paper = Raphael(0, 0, 500, 500); paper.rect(0, 0, 20, 20); </script> </body> </html> サンプル 四角に色を付けてみよう <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Sample</title> </head> <body> <script src="raphael.js"></script> <script> var paper = Raphael(
Raphaël―JavaScript Library
The most popular coding language for the web is javascript; so much so that since the advent of HTML5, it has now been officially accepted as the default standard. Javascript has moved beyond a smaller client-side browser-based language to become integrated not just for front-end design, but also for back-end server-side development. As a result there are has been a huge growth of Javascript libra
JavaScript によるオーディオ＆ビジュアルプログラミング - Radium Software
僕は JavaScript が好きだ。できるだけ多くのことを JavaScript で済ませてしまいたいと考えている。 以前は JavaScript では絵や音を扱うことができないという点がボトルネックになって，応用の幅を狭めていた。これが最近になると， Canvas 要素のおかげで絵を扱うことができるようになったり， Flash を代行役にすることによって音を出せるようになったりと，いろいろ状況が変わってきている。 そこで今回は，以前から機会があれば触ってみたいと思っていた Processing.js と SoundManager 2 を使って， JavaScript によるオーディオ＆ビジュアルプログラミングに挑戦してみた。 Processing.js とは Processing.js は，ビジュアルデザイン向けプログラミング言語 Processing を模して作られた JavaScr
複雑な数式を出力したい際に使えるjQueryプラグイン「jsLaTeX」:phpspot開発日誌
複雑な数式を出力したい際に使えるjQueryプラグイン「jsLaTeX」。 <div class="latex"> int_{0}^{pi}frac{x^{4}left(1-xright)^{4}}{1+x^{2}}dx =frac{22}{7}-pi </div> のようなブロックがあったとします。 で、次のJavaScripコードを書くと数式として表示できます。 <script> $(".latex").latex(); </script> LaTeXの表記で書けば画像にしてくれるようです。 JavaScript で描いているわけではなく、バックエンドの画像にリクエストして出力しているだけですが、その分画像も綺麗に出力されてます。 以下のエントリを参照してください。 Knowledge-aholic: jsLaTeX: A jQuery plugin to directly embed
iPhone/スマートフォン向けのJavaScriptフレームワーク·xui-js MOONGIFT
xui-jsはJavaScript製のオープンソース・ソフトウェア。スマートフォンが隆盛だ。iPhoneはもとよりAndroid、Plam Pre、Windows Mobile、Blackberryと多彩なスマートフォンが登場している。多数のスマートフォンではWebKitをブラウザに使っている。 スマートフォン向けのJavaScriptフレームワーク WebKitであればHTML5にも対応し、JavaScriptも高いレベルで実行ができる。そんな中登場したJavaScriptフレームワークがxui-jsだ。多彩な表現を可能にしつつ、スマートフォンでしか実行できない機能もある。 イベントを取得してHTMLの内容を書き換えたり、アニメーションを実行する操作がコード数行で実現できる。Ajaxも利用でき、アクションによって外部からデータを取得して表示するのも簡単だ。CSSのクラスを追加したり、逆に
Googleマップ用のクラスタ表示ライブラリ·Fluster MOONGIFT
FlusterはJavaScript製のオープンソース・ソフトウェア。データを表示する際には、ただ細かくするだけでは全体像がつかみづらい。時には幾つかのデータをまとめてグルーピングすることで表示をすっきりとさせ、全体の雰囲気をつかむ方が良い場合もある。 全体像を把握するのに使える Googleマップでも遠い地図の場合とズームインした場合の表示で表示項目を切り替えている。そうすることで細かすぎて分かりづらいということがなくなり、必要に応じてズームが使えるようになる。そしてGoogleマップ上で同様の仕組みをデータ表示に使えるのがFlusterだ。 FlusterはGoogleマップ上にクラスタリングされたデータ表示を行うライブラリで、周囲にあるデータをまとめつつ数字化する。デモはランダムな数字を配置しており、ズームするとグルーピングされていた数字が分割していく。 最終的にはマーカーに 最終的
GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-week-calendar」:phpspot開発日誌
GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-week-calendar」 2009年08月05日- jquery-week-calendar - Project Hosting on Google Code GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-week-calendar」。 次のような、ドラッグ＆ドロップでイベントを作れるGoogle カレンダー風のウィジェットがjQueryプラグインとして公開されました。 なんと、次の１行で初期化という簡単っぷりです。 $("#calendar").weekCalendar(); 当然、コールバックを設定して、イベント追加時のコードをかけたりします。 プロジェクトページのリファレンスも充実しているようで、カスタマイズも簡単でしょう。 関連エントリ とても洗練さ
GoogleMapみたいに画像をズーム＆グリグリ移動できるjQueryプラグイン「Mapbox」:phpspot開発日誌
GoogleMapみたいに画像をズーム＆グリグリ移動できるjQueryプラグイン「Mapbox」 2009年12月01日- GoogleMapみたいに画像をズーム＆グリグリ移動できるjQueryプラグイン「Mapbox」。 自分で実装するとなるとかなり骨が折れそうなこの機能もjQueryプラグインで簡単に実装できるみたいです。 マウスホイールでズームし、ドラッグして地図移動が可能 ズームとか移動のコントローラーを付けることも可能で、これなら初心者にも簡単に気付いてもらえますね。 設置はjQueryを使うので、マークアップでズーム用に画像を数枚置いておき、$("#viewport").mapbox({mousewheel: true}); のように初期化するだけでOKです。 オプションも多数あるのでカスタマイズも出来ます。 ズーム前後に実行できるイベントハンドラも設定可能なので、柔軟性が高い
Excelっぽい機能も付いた検索＆ソート＆ページング機能付きテーブル実装JSライブラリ「TinyTable V3」:phpspot開発日誌
Excelっぽい機能も付いた検索＆ソート＆ページング機能付きテーブル実装JSライブラリ「TinyTable V3」 2009年11月18日- Excelっぽい機能も付いた検索＆ソート＆ページング機能付きテーブル実装JSライブラリ「TinyTable V3」。 次のような、ＵＩも美しい高機能なテーブルの実装が出来ます。 普通のテーブルをリッチに スタイルを切ると、次のような単なる<table>タグで定義されたデータなのですが、JavaScript とCSSの力によって大きく形を変えています。 機能紹介 検索機能。大量にデータがあった場合にこの機能はかなり重宝します。 ソート機能。データが一杯でも分かりやすい。全カラムにおいてソート機能が付いてます ページング機能によって縦幅が大きく取られることを防ぎます。view all ボタンで全部を表示することも可能。 縦方向の合計をExcelのsumっ
Closure Tools - Google Code
Web applications have evolved from simple HTML pages into rich, interactive applications that provide a great user experience. Today's web apps pose a challenge for developers, however: how do you create and maintain efficient JavaScript code that downloads quickly and works across different browsers? The Closure tools help developers to build rich web applications with JavaScript that is both pow
Introducing Closure Tools
Millions of Google users worldwide use JavaScript-intensive applications such as Gmail, Google Docs, and Google Maps. Like developers everywhere, Googlers want great web apps to be easier to create, so we've built many tools to help us develop these (and many other) apps. We're happy to announce the open sourcing of these tools, and proud to make them available to the web development community. Cl
テーブルの内容をリアルタイムにグラフ描画できるjQueryプラグイン「graphTable」:phpspot開発日誌
テーブルの内容をリアルタイムにグラフ描画できるjQueryプラグイン「graphTable」。 このプラグインを使えば、テーブルのデータを読み込んで、リアルタイムにグラフ化してくれます。 $('#table1').graphTable({series: 'columns'}); みたいにすることで、指定したテーブルのデータを次のように描画させることが可能です。 既存の表がある場合は、ブラウザ上でグラフ化することが出来て便利ですね。 以下のエントリを参照してください。 graphTable: graph data from HTML table using flot | jQuery Wisdom 関連エントリ jQueryで実装する進捗グラフ付き複数ファイルアップローダー JavaScript用のグラフ描画ライブラリ色々 CSSだけで円グラフを表示するサンプル
JavaScript用のグラフ描画ライブラリ色々:phpspot開発日誌
10 Best Free JavaScript Charts Solutions | AjaxLine JavaScript用のグラフ描画ライブラリ色々。 JavaScriptでグラフ、といっても様々なライブラリが存在するようですね。 Flot グラフ描画用のjQueryプラグイン Flotr JavaScript Plotting Library Prototype.jsベースのグラフ描画プラグイン JS charts 棒グラフなどの様々なグラフを綺麗に描画できる(一番綺麗かも) HTML-Graphs グラフをHTMLで表現するタイプ 全部見る 個人的にはグラフを表示なら画像かFlashがいいなぁと思っていますが、JavaScriptであればプラグイン非依存かつクライアント描画ということでメリットはありますね。 関連エントリ JavaScriptで小さくて可愛いグラフを作れる「jQue
JavaScriptで複雑なデータ視覚化のためのライブラリ「JavaScript InfoVis Toolkit」:phpspot開発日誌
JavaScript InfoVis Toolkit - Interactive Data Visualizations for the Web JavaScriptで複雑なデータ視覚化のためのライブラリ「JavaScript InfoVis Toolkit」 次のような、画像編集ツールで書くにしても大変そうな複雑なデータの描画をJavaScriptで行えます。 描画できるグラフもなかなかユニークなものが多くて、これは覚えておくといつか使えるかもしれません。 APIドキュメントはこちら 関連エントリ 複雑なデータも綺麗に描画できるデータのビジュアライズフレームワーク「Axiis」 データを視覚的に分かりやすくビジュアライズするためのライブラリ集
iPhoneで使えるjQueryプラグイン·jQTouch MOONGIFT
iPhone向けのサービス提供となるとついネイティブアプリケーションに目がいってしまう。だがネットワークが必須なものであれば、アプリケーション開発にこだわる必要はない。むしろ審査やObjective-Cの習得などに工数がかかってしまう。 iPhoneでjQuery ならばもっと容易に提供するiPhone向けWebサービスの方が合理的だ。そこで使えるjQueryプラグインがjQTouchだ。 今回紹介するオープンソース・ソフトウェアはjQTouch、iPhone向けjQueryプラグインだ。 jQTouchはjQueryプラグインであり、iPhoneやG1などWebKitを使ったモバイルブラウザで利用できる。とは言え日本では主にiPhone向けになるだろう。iPhoneでよく利用される機能を容易に実装できるようになっている。 様々な機能が盛り込まれている 左右に移動するアニメーションはもちろ
Box2DJS - Physics Engine for JavaScript
Left-click to create an object. Right-click to show next example. What's this Box2DJS is a JavaScript port of Box2D Physics Engine. To tell the truth, this is converted from Box2DFlashAS3_1.4.3.1 in an automatic manner. (The reason why not Box2DFlashAS3_2.0.0 based is simply because I overlooked the renewal.) How to use Download a zip file and extract it. Copy js/ and lib/ directories from the ext
JavaScriptで小さくて可愛いグラフを作れる「jQuery Sparklines」:phpspot開発日誌
jQuery Sparklines This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript. JavaScriptで小さくて可愛いグラフを作れる「jQuery Sparklines」 PHPを使って、サーバサイドで以下のような、小さくて可愛く場所をとらないグラフを書くプログラムを以前紹介しました。 ミニグラフ作成ライブラリSparkline 時代は変わって、今はJavaScriptでもグラフは当たり前という時代になり、SparklinesのJS版が出たみたいです。 グラフ描画処理はサーバ側に負担をかけますが、JSであればクライアントサイドでの描画な
Cookieなしでデータをストレージする·PersistJS MOONGIFT
Cookieは使うと便利なものだが、ブラウザの設定次第で使わないことにもできるので頼りにできない、そんな勿体ない技術だ。もっと便利に活用できれば、きっとWebサービスのあり方、データの保存する仕組みも変わってくるのではないだろうか。 Firefoxでテストしているところ という訳で代替え手段の提案だ。これはCookieがオフになっていても利用できる（JavaScriptが必須だが）。 今回紹介するオープンソース・ソフトウェアはPersistJS、クライアントサイドで使えるストレージシステムだ。 PersistJSはJavaScriptで作られており、Cookieをオフにしていても保存したデータを再度呼び出すことができる。同一ドメインであれば、タブが分かれていても即座に反映される。さらにブラウザを閉じて、再度開いても呼び出せる。 Safariでテストしているところ こうした技術は幾つか存在し
ブラウザでお絵描きプログラミング！ Processing.js 登場！ - IT戦記
はじめに 今日、 jQuery の作者として有名な John Resig さんが Processing.js という JavaScript のライブラリを公開しました。 John Resig - Processing.js このライブラリを使うと、比較的簡単に以下のようなグラフィックスやアニメーションを書くことができるようになります。 というわけで、公開されたばかりのこのライブラリを簡単な使い方から詳しい使い方までとことん掘り下げてみたいと思います。 Processing.js 概要 まず、 Processing.js とは何かという話をします。 Processing.js とは、ブラウザで Processing というプログラミング言語を実行する JavaScript のライブラリです。 では、 Processing とはどのようなプログラミング言語なのでしょうか。 Processing
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
