MOONGIFT: » JavaScriptを使ってインタラクティブなグラフ「Flot」:オープンソースを毎日紹介
データをグラフで表示したいと思った時、どういった手段が考えられるだろうか。画像を生成するライブラリを使う、HTMLで擬似的なものを作る、または表計算ソフトウェアを使うと言った方法もある。 だが、どれも面倒に移るかもしれない。サーバ側の問題で利用できない場合もある。そこでこれだ。 今回紹介するオープンソース・ソフトウェアはFlot、JavaScriptを使ったグラフ生成ソフトウェアだ。 FlotはjQueryを使って開発されたライブラリで、インタラクティブなグラフを作成できるのが特徴だ。プロットするだけもでき、複数のデータを一つのグラフ上に並べられる。 そしてJavaScriptならではの機能として、選択した範囲をハイライトしたり、その部分だけにフォーカスして表示することもできる。データを表示する、しないといった選択もダイナミックに変更できる。 JavaScriptを使うメリットは、サーバサ
JavaScriptでフローチャート作成「jsflowchart」:phpspot開発日誌
jsflowchart - A flowchart tool in your webbrowser JavaScriptでフローチャート作成「jsflowchart」 jsflowchartを使えば次のように、ブラウザ上でJavaScriptでフローチャートを作成することが可能のようです。 デモはこちら フローチャート自体を作るかどうかは別として、仕組みとしては非常に興味深いものですね。 ライブラリを応用して、ブラウザ上で関係図みたいなものを作るという用途にも使えそうです。 関連エントリ Visioのような図が書けるJavaScriptライブラリ「Open-jACOB Draw2D 」
継続渡しによる停止・再開可能な反復処理 - JavaScriptライブラリでお馴染みの$関数を関数スタイルで実装してみる
ここ最近の Scheme プログラミングで得た感覚を踏まえ、各種 JavaScript ライブラリでお馴染みの $ 関数 (ID による要素検索) を、ごく簡易にですが、関数スタイルで実装してみました。 まずは実装を見ていただく前に、このような例を考えてみてください。 $("id").do_something(); ここで、"id" 要素が確実に見つかるかどうかが保証されていない (do_something が失敗するかもしれない) とします。すると、 var o = $("id"); if (o) { o.do_something(); } のように、いちいちテストをしなければいけませんよね。 これが、関数スタイルでは $("id", do_something); と書くだけで済みます。つまり、$ 関数自身が成否のチェックを行い、成功していればコールバック関数にオブジェクトを渡すように設
MOONGIFT: » prototype.jsベースのカレンダー「protocalendar.js」:オープンソースを毎日紹介
よく、誕生日の入力などでドロップダウンリストから選ばせるものがあるが、あれほど入力が面倒なものはないと思っている。テキストボックスにそのまま数字で入れた方がよっぽども手軽だ。 とは言え、入力チェックやユーザビリティを考えるとそれもお勧めはできない。手軽で、さらに正確な入力が促せる方法としてこれをお勧めしたい。 今回紹介するオープンソース・ソフトウェアはprotocalendar.js、prototype.jsベースのカレンダー入力ライブラリだ。 protocalendar.jsはテキストボックスにフォーカスが当たるとカレンダーが表示されるライブラリだ。良くあるものだが、prototype.jsベースなのと、何より日本製というのが特徴だ。 日本製の嬉しい点としては、休日に対応している点だろう。ハッピーマンデーにも対応しているので、数年後の休日も表示されるのが素晴らしい。 さらに多言語対応によ
JavaScriptでグラフィックス·JavaScriptGraphics MOONGIFT
かつてがジョージ・マロリーがいった有名な台詞がある。なぜ山に登るのか、という質問に対して「そこに山があるから」と答えたあの台詞だ。 なぜJavaScriptでグラフィックスを描くのか、それもまた「JavaScriptがあるから」だ。 今回紹介するオープンソース・ソフトウェアはJavaScriptGraphics、JavaScriptによる2Dグラフィックスライブラリだ。 JavaScriptGraphicsはもの凄くグラフィカルでレベルの高いものを提供している訳ではない。むしろドット絵のような簡易的なものと言えるかも知れない。 だが、JavaScriptでのレンダリングとあって、描画した後に動いたり、アクションに応じた反応を見せる事ができる。サンプルではアナログ時計、色が変わる太陽、アイボール、文字の上でレンダリング等のサンプルが提供されている。 何もJavaScriptでやる必要性はない
MOONGIFT: » JavaScriptによる多彩なグラフライブラリ「LT Diagram Builder」:オープンソースを毎日紹介
Webページ上でグラフを描くというと、各種画像生成ライブラリを利用するだろうか。画像は手軽な反面、ダイナミックな生成ができず面倒な場合がある。 ダイナミックに描画を変更できると言えば、JavaScriptが便利だろう。そのようなニーズではこれを試してみよう。 今回紹介するオープンソース・ソフトウェアはLT Diagram Builder、JavaScriptベースのグラフ生成ライブラリだ。 LT Diagram Builderが対応しているのは棒グラフ、折れ線グラフ、関数グラフ、矢印、円グラフ、ガントチャート等多彩な描画に対応している。 ダイナミックな描画にも対応しており、関数の値を変更すれば、即座にグラフに反映する事ができる。JavaScriptの強みだろう。 また、PHPやASPでのグラフ生成にも対応している。結果的に出力されるのはJavaScriptのようだが、サーバサイドのデータを
ドラッグ＆ドロップで画像を切抜くJavaScriptライブラリ「jsCropperUI」
イメージ切り抜きのためのインタフェースを提供するJavaScriptライブラリで、prototype.jsやscript.aculo.usを使っています。 写真上をマウスカーソルでドラッグすると枠が破線で作成され、囲んだ領域の座標とサイズを取得し、トリミングすることができます。カーソルキーによる移動にも対応しているので微調整も可能、実にすごい。 詳細は以下の通り。 ダウンロードは以下から。 DEfusion.org.uk >> JavaScript Image Cropper UI, using Prototype & script.aculo.us デモは以下から。実際にドラッグして切り抜きを体験できます。 DEfusion.org.uk >> Demo >> Prototype JavaScript Image Cropper UI 操作感覚が通常のアプリケーションとほとんど差異がない
PhotoShopのカラーピッカーそっくりなカラーピッカー「JavaScript Color Picker」:phpspot開発日誌
PhotoShopのカラーピッカーそっくりなカラーピッカー「JavaScript Color Picker」 2007年10月09日- PhotoShop-like JavaScript Color Picker Many people have noted "it looks like [picker X]" and they are right: there are tons of pickers out there (I listed a few in the original post). PhotoShopのカラーピッカーそっくりなカラーピッカー「JavaScript Color Picker」。 prototyope.jsベースで、IE5.5, IE6, IE7, FF2, Opera 9, Safari 2 で動作します。 洗練されたPhotoShopのカラーピッカーＵＩ を
JavaScript のチートシートいろいろ:phpspot開発日誌
JavaScript のチートシートいろいろ。 JavaScript Cheat Sheet Addison-Wesley's JavaScript Reference Card JavaScript Quick Reference JavaScript and Browser Objects Quick Reference JavaScript in 10 Minutes 以前に紹介したものもふくまれていますが、他にもいろいろあるようです。 印刷しておくと便利そうですね。
MOONGIFT: » 圧巻！AJAX DHTMLのグラフライブラリ「Timeplot」:オープンソースを毎日紹介
グラフを作るニーズは多い。また、そのためのライブラリも多種多様に存在している。PHPやJavaなどのプログラム言語によるもの、JavaScriptで作るもの、Flashで作るものといった具合だ。 その中にあって、これの完成度は非常に高い。まさに圧倒されてしまう綺麗さだ。 今回紹介するオープンソース・ソフトウェアはTimeplot、AJAX+DHTMLで作られたグラフ作成ライブラリだ。 Timeplotは単純な二次元の折れ線グラフ用のライブラリで、非常に細かく描画が行われる。特にグラフの上をマウスでなぞった時に各数値が表示されるのが素晴らしい。 同じプロジェクトの年表を作り出すTimeline形式をサポートしている。場合によって使い分けたり、見せ方を変えたりと便利に使えそうだ。グラフに備考をつけることもでき、特定の場所をクリックすると説明文が表示される。 サンプルは数多く登録されているので、
お絵かきキャンバスを提供するJavaScriptライブラリ「InputDraw」:phpspot開発日誌
The simplest draw editor to your forms Next is a example of how to use it, how it works and what is the result. With this we hope you'll understand the entire picture.お絵かきキャンバスを提供するJavaScriptライブラリ「InputDraw」。 次のようにキャンバスの上にドラッグ＆ドロップでお絵かき機能を実装できます。 必要なJavaScriptライブラリを読み込んで、キャンバスの幅/高さ、背景画像を指定して初期化するだけ。 お絵かき結果はSVGで取得することが可能です。 この機能を使ってお絵かき掲示板的なものを作ったりできそうですね。
MOONGIFT: » JavaScriptで音楽再生「SoundManager 2」:オープンソースを毎日紹介
Webサイトやブログで音楽を再生しようと思うと、意外と面倒な事に気づかされる。サイト上にMP3のリンクだけ貼って置いておいても、よほどのことがない限りは再生されない。 Flashを使ったMP3プレーヤもいくつか存在するが、それより手軽なプレーヤがこれだ。 今回紹介するオープンソース・ソフトウェアはSoundManager 2、JavaScriptで利用できる音楽プレーヤだ。 とはいえ、JavaScript単体で音楽の再生はできない。実際のインタフェースはFlashベースの音楽プレーヤだ。だが、Flashのコードを書く事もなく、JavaScriptファイルを読み込めば良いので利用は手軽だ。 プレイリストの利用も可能で、<ul><li>タグでMP3ファイルの場所を列挙していくだけでいい。後はブラウザ画面上にプレーヤが表示されるので、そこで音楽を操作できる。 また、ただ単純に流すだけでなく、アク
MOONGIFT: » JavaScriptでPHP「p2js」:オープンソースを毎日紹介
色々な言語を触っていると、ふとした時に「あの言語のあの関数便利なのに…」と思ってしまうことがある。特に関数が非常に豊富なPHPを触った後に気づくことが多い。 同じ関数が別な言語で実装できれば、便利なのは間違いない。そう考えて（恐らく）作られているのがこのソフトウェアだ。 今回紹介するオープンソース・ソフトウェアはp2js、PHPの関数をJavaScript上で実装するプロジェクトだ。 現時点でも配列関係の関数、is_**系関数、htmlspecialchars等も実装されている。mktimeや、フォーマットが指定できるdate関数などは需要がありそうだ。 60を越える関数が用意され、各関数ごとに別ファイルになっている。それだけに利用するものだけ取り込んでいけば実装も手軽になる。実装が細かく分けられているので、皆で個別に製作していけばどんどん作れていけそうな気がする。 プログラム言語で関数が
Jash: JavaScript Shell
Home Features Documentation Download Screenshots A Cross-Browser Javascript Command-Line Debugging Tool What is it? Jash is a DHTML-based window that gives you command-line JavaScript access to the current browser window. With this console you can quickly debug scripts, manipulate the DOM, view the current page's objects, functions, and variables, trace the execution stack, execute arbitrary J
MOONGIFT: » クロスブラウザ対応のJavaScriptデバッグツール「Jash」:オープンソースを毎日紹介
JavaScriptを多用するようになると、どうしても高機能なデバッグツールが欲しくなる。Firefoxであれば、FireBugが一番有名なデバッグツールだろう。FireBugを使うと非常にデバッグが容易になる。 とはいえ、FirefoxはFirefox専用だ。IEではいかにしたら良いだろうか。クロスブラウザで使えるツールがこれだ。 今回紹介するオープンソース・ソフトウェアはJash、クロスブラウザ対応のJavaScript Shellだ。 JashはJavaScriptファイルで提供される。公式サイトではBookmarkletとしても提供されているので、ブックマークに登録しておくと便利だ。 起動すると、ブラウザ上にターミナル風なウィンドウが表示される。この状態で、JavaScriptのデバッグが可能だ。任意のJavaScriptを実行することができるので、操作を試すこともできる。 また、
javascript - シャッフルシャッフル : 404 Blog Not Found
2006年08月30日18:30 カテゴリLightweight Languages javascript - シャッフルシャッフル なるほど。Schwartzian Transformの意外な利用法だなあ。 snippets from shinichitomita’s journal - JavaScriptの配列をsort関数でシャッフルする Array.prototype.shuffle = function() { return this.map(function(a){ return { weight: Math.random(), value: a } }) .sort(function(a, b){ return a.weight - b.weight }) .map(function(a){ return a.value }); } でも、実践ではどうだろう。調べてみた。
prototype.jsベースのWYSIWYGエディタウィジェット「Control.TextArea」:phpspot開発日誌
prototype.jsベースのWYSIWYGエディタウィジェット「Control.TextArea」 2007年05月14日- Control.TextArea : Cross Browser TextArea Manipulation Decent, flexible WYSIWYG editing in the browser is still an inconsistent affair at best in terms of user experience, integration effort, and generated markup. prototype.jsベースのWYSIWYGエディタウィジェット「Control.TextArea」 利用にあたってのサンプルコードは次です。 textarea = new Control.TextArea('textarea_id');
JavaScriptでグラフを描画出来るライブラリ『WebFX』:phpspot開発日誌
Chart Usage (WebFX) In web applications developed now days a lot of the logic that previously resided on the server side is now being implemented on the client side. This is especially true for information presentation, components such as trees and columnlist makes it possible for users to interact with the application, or web site if you wish, without contacting the server. However the ability to
JavaScriptでの独自右クリックメニューライブラリ作った - spiritlooseのはてなダイアリー
さて、たまにはJavaScriptでも。 JavaScriptで独自の右クリックメニューを簡単に使うライブラリ作った。 http://spiritloose.net/misc/popupmenu/ デザインはlivedoor Readerから頂きました。 var popup = new PopupMenu(); popup.add('メニューに表示するテキスト', function(target){ // なんか処理 }); popup.addSeparator(); // セパレータ追加 popup.bind('targetElement'); popup.bind(); // document がターゲット こんな感じで使える。 jsファイルひとつでよくて、メニューのHTML書く必要はない。スクリプトのみでOK。 CSSファイルとか、他のライブラリとかも不要。 その分デザイン変えるため
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
アシアル株式会社
