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
複雑な数式を出力したい際に使える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
jQueryとYUI3のコード変換テーブルリファレンス:phpspot開発日誌
jQuery - YUI3 Rosetta Stone jQuery1.4.2とYUI3のコード変換テーブルリファレンスが公開されています。 YUI3ユーザの方がjQueryに移行する場合や、jQueryユーザがYUI3で書かなければいけないような場合に参考にできるコード変換のリファレンスです。 なかなかビッシリとまとまっており、いざという時のために知っておいても良いかもしれませんね。 関連エントリ Javascript/Ajaxのチートシート集 各JavaScript圧縮ツールでその圧縮率を比較 オンラインでYUI Compressorを使ったJavaScriptファイル圧縮「YUI Online Compressor」
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です。 オプションも多数あるのでカスタマイズも出来ます。 ズーム前後に実行できるイベントハンドラも設定可能なので、柔軟性が高い
テーブルの内容をリアルタイムにグラフ描画できる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
iPhoneで使えるjQueryプラグイン·jQTouch MOONGIFT
iPhone向けのサービス提供となるとついネイティブアプリケーションに目がいってしまう。だがネットワークが必須なものであれば、アプリケーション開発にこだわる必要はない。むしろ審査やObjective-Cの習得などに工数がかかってしまう。 iPhoneでjQuery ならばもっと容易に提供するiPhone向けWebサービスの方が合理的だ。そこで使えるjQueryプラグインがjQTouchだ。 今回紹介するオープンソース・ソフトウェアはjQTouch、iPhone向けjQueryプラグインだ。 jQTouchはjQueryプラグインであり、iPhoneやG1などWebKitを使ったモバイルブラウザで利用できる。とは言え日本では主にiPhone向けになるだろう。iPhoneでよく利用される機能を容易に実装できるようになっている。 様々な機能が盛り込まれている 左右に移動するアニメーションはもちろ
15分で理解するjQueryのスライド「jQuery in 15 minutes」:phpspot開発日誌
jQuery in 15 minutes １５分で理解するjQueryのスライド「jQuery in 15 minutes」。 ちょっと古いスライドですが、これから覚えるという人には有用かと思ったので紹介。
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であればクライアントサイドでの描画な
ブラウザでお絵描きプログラミング！ Processing.js 登場！ - IT戦記
はじめに 今日、 jQuery の作者として有名な John Resig さんが Processing.js という JavaScript のライブラリを公開しました。 John Resig - Processing.js このライブラリを使うと、比較的簡単に以下のようなグラフィックスやアニメーションを書くことができるようになります。 というわけで、公開されたばかりのこのライブラリを簡単な使い方から詳しい使い方までとことん掘り下げてみたいと思います。 Processing.js 概要 まず、 Processing.js とは何かという話をします。 Processing.js とは、ブラウザで Processing というプログラミング言語を実行する JavaScript のライブラリです。 では、 Processing とはどのようなプログラミング言語なのでしょうか。 Processing
クールなスライドショーライブラリ·Galleria MOONGIFT
画像をサイトで一気に紹介したいことがある。ただ画像のサムネイルやリンクを並べるだけでも良いが、それでは味気ない。写真や画像は見せ方次第でその印象が大きく異なる。 専用のソフトウェアを使っても良いが、もっと手軽なのはJavaScriptベースのライブラリだ。 今回紹介するオープンソース・ソフトウェアはGalleria、JavaScriptとCSSを使ったスライドショーライブラリだ。 GalleriaはjQueryを使ったスライドショーライブラリで、導入が手軽で見た目もかっこうよく仕上げることができる。デモは二つ用意されており、一つは下にサムネイルの一覧、上にクリックした画像を表示している。 二つ目は左側に一覧が、右側に大きな画像が表示される。イメージタグのtitle属性に記述した内容が表示されるので、画像ごとにメッセージをつけるのも簡単だ。マウスが当たった画像だけ明るく表示されたり、写真の切
MOONGIFT: ? JavaScriptを使ってSQL調にデータを検索「JsonSQL」:オープンソースを毎日紹介
※ 画像は公式サイトのデモより SQLという言語はプログラム言語に混ざると面倒に感じてしまうが、データの授受をする上では便利な問い合わせ言語だ。むしろ他の言語でも同様の問い合わせを行うことでデータが取得できるようになっていると便利に感じる。 いちいちデータの中身を見ながら探すのは大変だ。そしてJavaScriptでSQLを実現するのがこのライブラリだ。 今回紹介するオープンソース・ソフトウェアはJsonSQL、JSONのデータをSQL調に検索するjQueryプラグインだ。 JsonSQLではサンプルとして、RSSフィードをJSON形式に変換し、そこからデータを抽出するものが掲載されている。SELECT * FROM を使うこともできる。多少書き方に特徴があるが、概ねSQLと似ている。 LimitやOrderなども指定できるので柔軟にデータを扱うことができそうだ。Yahoo! Pipesを使
ウノウラボ Unoh Labs: 簡単Ajaxライブラリ「jQuery」と便利なプラグインたち
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー！古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
Interface elements for jQuery - Real examples of Interface elements
Index of /demos NameLast modifiedSize Parent Directory - windows.html2010-02-26 19:13 9.1K ttabs.html2010-02-26 19:13 1.0K tooltip.html2010-02-26 19:13 3.2K sort_tabs.html2010-02-26 19:13 2.1K sort_lists.html2010-02-26 19:13 1.6K sort_floats.html2010-02-26 19:13 2.9K sort.html2010-02-26 19:13 5.2K slideshow.html2010-02-26 19:13 4.1K slider_resize.html2010-02-26 19:13 1.8K slider_minmax.html2010-0
jQuery
What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
