Webベースの表計算ライクなグリッドライブラリ·grrid.js MOONGIFT
基幹システムをWebベースで作るといった話題が持ち上がるようになっている。そんな中、よく聞かれるのが表計算ソフトウェア的にデータを操作できる機能だ。技術者の方であればその難易度はご存知の通りで、大抵Excelを使えるようにCSVで出力してお茶を濁すことが多い。 需要の多そうなグリッドライブラリ しかしもう諦めないで良い。高機能、ではないけれど簡易的なデータ操作であればgrrid.jsを使ってみよう。 今回紹介するオープンソース・ソフトウェアはgrrid.js、Webベースで表計算ソフトウェアのように動作するグリッドライブラリだ。 grrid.jsを使うとまるで表計算ソフトウェアのようなグリッドが表示される。各セルは自由に文字を入力できる。移動はエンターキー、タブキー、矢印キーを使って可能だ。タブキーで右、エンターキーは下にフォーカスが移動する。なお、動作にはprototype.jsが用いら
iTunes風な容量ゲージを表示する·Gauge.js MOONGIFT
何らかのサービスを考える際に、それを誰が見ても分かるようにするというのはデザインを決める上で重要な考え方だ。そのためには文字での説明ではなくアイコンや、イラストによって分かりやすく情報を提供する必要がある。 iTunesのゲージ風 とは言え、素人がそれを簡単に実践するのは難しい。その際役立つのが世界でビジネスを展開している企業のデザインだ。そこには英語圏のみならずサービスを利用する人たちにとって分かりやすくする工夫がこらされている。iPodで一気に盛り返しているAppleのその一つだ。 今回紹介するフリーウェアはGauge.js、iTunesで用いられている容量ゲージを表示するJavaScriptだ。非商用に限りフリーとなっている。 iTunesでは音楽や動画、写真と言ったメディアの種類に応じてどれくらいの容量を占めているのかを横向きのゲージで表示している。分かりやすい色分けがされ、全体の
Canvasを使った複雑なグラフも描画するライブラリ·Protovis MOONGIFT
※ 画像は公式サイトのサンプルより 個人的にはあまり複雑なグラフは好きではない。複雑であればあるほど、本質が遠ざかってしまうような気がするからだ。とは言え、複雑にせざるを得ない場合や複雑さの中からはじめて価値ある情報が見いだせることもあるだろう。 サンプル1。このような複雑な描画も可能とする 簡易的なグラフを描くライブラリを使っていて苦労した経験があるならば、複雑なグラフをも描けるProtovisを使ってみてよう。 今回紹介するオープンソース・ソフトウェアはProtovis、JavaScript + Canvasによるグラフライブラリだ。 大は小をかねる。Protovisは簡単なグラフから、複雑なグラフまで難なくこなせるライブラリだ。欠点としてはCanvasを使っていることでFirefox3、Chrome、Safari4のみがサポート対象となってしまうことだろう。 サンプル2 使う場面は選
jQuery入門（その1）（1/7）：CodeZine
はじめに 実を言うと、私はずっとJavaScriptを嫌っていました。JavaScriptのコードを書くのが嫌でしたし、いろいろなブラウザに対応するために大量のスクリプトコードを使わなければならないのも嫌でした。そうした点は今でも変わらないのですが、最近になってJavaScriptへの理解が深まったことと、jQueryという小さなJavaScriptクライアントライブラリのおかげで、クライアント中心のAJAXスクリプトコードを書かなければならないときでも恐怖を抱かなくなりました。それどころか、今では喜んで引き受けるほどになっています。クライアントロジックがもっと複雑になり、ブラウザの機能や実装の多様化がさらに進んだとしても、jQueryをはじめとするクライアントライブラリが、JavaScriptやHTML DOMを扱う際に必要な正規化を提供してくれます。 私はJavaScriptの初心者と
メンテナンスフリー！郵便番号から住所を返すライブラリ·ajaxzip3 MOONGIFT
Webシステムを開発している中で郵便番号を入力したら自動的に住所を補完して欲しいという要望は多々ある。実装はそれほど難しいものではない。厄介なのはメンテナンスだろう。市区町村の統廃合によってデータが変わった場合の対応だ。 郵便番号から住所に変換する便利なライブラリ 郵便局から配布されているCSVを都度取り込むという方法もあるが、非常に面倒だ。そこで使ってみたいのがajaxzip3だ。 今回紹介するオープンソース・ソフトウェアはajaxzip3、Ajaxを使って住所を取得するライブラリだ。 ajaxzip3の面白い所はライブラリをGoogle Code上にアップロードしてそのまま利用できてしまう点だ。規約上どうなのかという問題はあるが、そのまま使うと自分でメンテナンスする必要が全くなくなってしまう。自分のサーバであってもajaxzip3を外部のSubversionリポジトリからアップロードす
「最速ブラウザ」争いは無意味だ － ＠IT
米マイクロソフトが最近実施した一連のテストによると、Internet Explorer 8（IE 8）は現在市場に出回っているブラウザの中で最速だという。もっとも、Google ChromeやFirefox、Safari、Opera、WebKitといったブラウザについて同様の主張を展開している調査結果を探すのは、そう難しい作業ではないはずだ。 それならば、こうした最速ブラウザに関するテストの数々をどう解釈すればいいのだろう？ どのテストが最も妥当なのだろう？ まあ、本当を言えば、映画『ミートボール』でのビル・マーレイの口グセと同じで「そんなのどうでもいい！」といったところだ。 まったくその通りなのだ。最近のWebやWebブラウザに関して言えば、ブラウザを選ぶ際に速度を気にする人など、ほとんどいない。 確かにかつてはブラウザの性能が重視された。私も実際1990年代にブラウザの比較を行った際に
prototype.js でタブ切り替え(複数表示版) - AUSGANG SOFT
prototype.js でタブ切り替え - AUSGANG SOFT http://a-h.panepon.com/einfach/archives/2006/1012175043.html に、同じページで複数タブを表示できるようにならないか？ というご要望をいただきました。l もともと１つしかタブがない想定なので、大幅な改造が必要。 いい機会なので、作ってみました。 サンプル http://a-h.panepon.com/einfach/archives/tabSample.html CSSもJavascriptも↑のファイル内に書いています。 変更点 複数タブに対応ページ末尾の new TabMaker('tab'); new TabMaker('menu'); ↑という指定で、複数のタブを作っています。 サンプルを参考にHTML、CSSもそれぞれの名前で指定してください。 逆にい
教科書に載らないWebアプリケーションセキュリティ 第1回 ［これはひどい］IEの引用符の解釈 − ＠IT
XSSにCSRFにSQLインジェクションにディレクトリトラバーサル……Webアプリケーションのプログラマが知っておくべき脆弱性はいっぱいあります。そこで本連載では、そのようなメジャーなもの“以外”も掘り下げていきます（編集部） 小さな話題が面白い 皆さん、はじめまして。はせがわようすけと申します。 「教科書に載らないWebアプリケーションセキュリティ」ということで、Webアプリケーションのセキュリティに関連する、普段あまり見掛けないような小さな話題を取り上げていきたいと思います。 セキュアなWebアプリケーションを実現するために、開発者の方だけでなく、Webアプリケーションの脆弱性検査を行う方々にも読んでいただきたいと思っています。重箱の隅を楊枝でほじくるような小さな話題ばかりですが、皆さんよろしくお願いします。 さて第1回は、Internet ExplorerがHTMLを解釈する際の引用
MooseにインスパイアされたJavaScript向けオブジェクトシステム·Joose MOONGIFT
すでに半年以上昔ではあるが、Perlの新しいオブジェクトシステムとしてMooseに注目が集まった。面倒なオブジェクト定義が手軽に、さらに型指定なども容易にできるのでオブジェクト指向プログラミングが簡単になる、というライブラリだ。 デモアプリケーションのblok。MS Visio風なドローアプリケーション コーディング量が減り、可読性が高まればバグの入り込む余地が減るので、システムの品質が高まる。工数も下がるし、メンテナンスもしやすいと言った具合に文句なしに良い。そんなMooseにインスパイアされたのがJooseだ。 今回紹介するオープンソース・ソフトウェアはJoose、JavaScript版Mooseだ。 JooseではMoose同様にオブジェクトを定義することができる。hasを使って属性を定義すれば、セッター/ゲッターは自動的に生成される。さらにメソッドの追加も簡単にできる。もちろん、属
[JS]Firefox 2/3, Safariも判別する1行のスクリプト | コリス
昨日紹介した「わずか「12文字」でIEを判別するスクリプト」に続いて、Firefox 2/3, Safariを判別する1行のスクリプトをThe Spannerから紹介します。
ソースコードの色づけを行う·Google Code Prettify MOONGIFT
ブログや開発者向けのWebサービスなどで、ソースコードのハイライトを行うケースはよくある。言語があらかじめ決まっている場合は良いが、言語がよくわからない場合や、JavaScriptとHTMLのように埋め込みで複数の言語が重なる場合もある。 各種言語に対応したハイライター そのような、特定の言語に依らずにソースコードをハイライト化したい場合に便利なのがこのライブラリだ。 今回紹介するオープンソース・ソフトウェアはGoogle Code Prettify、JavaScriptによるソースコードハイライターだ。 Google Code Prettifyの使い方は簡単だ。prettify.jsとprettify.cssを読み込んで、<pre class="prettyprint">または<code class="prettyprint">タグの中にコードを書き込めば良い。後はprettyPrint
[JS]これ最強かものツールチップスクリプト -BeautyTips
シンプルなツールチップも簡単に実装できるだけなく、デザインのカスタマイズが可能で、対応トリガーも豊富なツールチップのスクリプト「BeautyTips」を紹介します。 BeautyTips demo BeautyTipsは機能が豊富というだけでなく、テキストや画像、AJAXコンテンツの表示、ツールチップの表示位置の自動補正など基本性能もしっかりと抑えられており、フォームエレメントへの表示、ツールチップ元の変更なども可能です。 ツールチップはcanvasで描かれており、画像は必要ありません。 対応ブラウザはIE6.x+, Fx3.x, Op8+, Safari3.xとのことで、canvas非対応ブラウザにはExplorerCanvasが使用されています。また、IE6のz-indexへの対応にbgiframe、ホバー処理にhoverIntentが使用されています。 ※Chrome 1, Fx2で
[JS]設置も簡単なテーブルのデータをソートする超軽量のスクリプト | コリス
leigeberから、既存のテーブルにも簡単に設置できる、データをソートする超軽量（1.7KB）のスクリプトを紹介します。 jQueryやPrototypeなど他のスクリプトは必要ありません。 JavaScript Table Sorter demo 動作確認ブラウザは、IE 6/7/8, Fx2/3, Op, Safari, Chromeとなっています。 設置方法は簡単で、既存のものにも簡単に組み込めます。 「script.js」と「style.css」を外部ファイルとして記述します。 tableに「class="sortable" id="sorter"」を記述します。 テーブルの下に下記のスクリプトを記述します。 <textarea name="code" class="html" cols="60" rows="5"> <script type="text/javascript">
VoxもmixiもGmailも早くなる!? JavaScriptのおまじない - カイ士伝
VoxもmixiもGmailも早くなる!? JavaScriptのおまじない（ただしXP＆IE6限定）スター users ※Windows XPでInternet Explorer 6を使っている向けの情報です。 何回かのエントリで書いている通り、毎週Voxで行なわれている「美味しい動画コンテスト」に参加しているのですが、Voxが重いのがちょっと困ってました。ページが出るのに時間がでるだけでなく、タブブラウザでタブ開きまくってるとブラウザ自体がフリーズすることすらあったので。 最近mixiもユーザー数が増えたからかかなり重くなってて大変こまりもの。仕事中はmixi日記は書かないので夜にまとめて書こうと思うとあまりの重さに書く気なくしてしまう、なんてことがここ最近しょっちゅうでした。 そんなことをちょいと愚痴っていたら、ある日天の声がとどいたのです。 てんくうの ちをひきし わかものよ この
javascript - パスワードを確認するbookmarklet : 404 Blog Not Found
2007年11月24日15:30 カテゴリLightweight LanguagesTips javascript - パスワードを確認するbookmarklet これの改良版です。 アスタリスクで隠されたパスワードを確認する方法 通常、このようなフォーム内のパスワード部分に入力した文字は盗み見防止のため、「********」のようなアスタリスクになって文字が隠されるようになっていますが、しばしば、この入力したパスワードを確認したい状況になる場合も少なくありません。 ブックマークレット: Check Password ソース: javascript:(function(){ var F=document.getElementsByTagName('input'), a=[]; for (var i=0,l=F.length;i<l;i++){ if(F[i].type.toLowerCas
ありそうでなかったPrototype.jsベースの日付入力補助ライブラリ「DatePicker」:phpspot開発日誌
ありそうでなかったPrototype.jsベースの日付入力補助ライブラリ「DatePicker」 2007年09月03日- Eulerian Technologies - DatePicker using Prototype and Scriptaculous You'll find here the code and instructions for a datepicker widget using Prototype and Scriptaculous librairies. ありそうでなかったPrototype.jsベース(script.aculo.us使用)の日付入力補助ライブラリ「DatePicker」。 次のような日付入力補助機能を実装できるようです。 YUIなんかには普通にありましたが、Prototype.js ベースははじめてではないでしょうか？ 実装コードも次のように非
MOONGIFT: » クールなWebベースポップアップウィンドウ「ModalBox」:オープンソースを毎日紹介
※ 画像は公式サイトデモより これはクール！ 思わず使い道を考えてしまった。Mac OSXではダイアログがウィンドウの上部から出てくる。あの表示が何となく好きという人も多いだろう。あれを実現するJavaScriptがこれだ。 今回紹介するオープンソース・ソフトウェアはModalBox、ウェブベースのポップアップ＆ウィザードだ。 簡単に言えば、ウィンドウの上から出てくるポップアップだ。表示していた画面はグレーアウトするので、そのダイアログだけに集中できる。Ajaxを使うことも、使わないこともできる。簡易的なものであれば使わずに手軽に利用できそうだ。 そして、ウィザード形式に操作を進めることもできる。例えば問い合わせフォームや、アンケート、友人へのメール等わざわざ画面を切り替えて操作するには及ばないようなものに使えそうだ。 表示のされ方がかなり格好よく、使い道も多そうだ。prototype.j
404 Blog Not Found:怠翻 - JavaScriptでありがちな9つのシマッタ
2007年08月17日01:15 カテゴリ翻訳/紹介Lightweight Languages 怠翻 - JavaScriptでありがちな9つのシマッタ 私自身結構シマッタしちゃうので。 Nine Javascript Gotchas 尻カンマ注意 以下のコードはFireFoxでは動きますが、Internet Explorer (以下IE)では問題になります。 var theObj = { city : "Boston", state : "MA", } 最後にカンマが入らないよう注意しましょう。 浮気なthisは何を見てるやら 以下のコードで、thisは何を指しているでしょうか。 <input type="button" value="Gotcha!" id="MyButton" > <script> var MyObject = function () { this.alertMess
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blogs.sun.com/kenji/entry/javafx_%E3%81%A7_google_map_javafx
Web ページを高速化する
