Firefoxを使ってWebシステムを開発する際には必須とも言えるFirebug。そして人気の高いJavaScriptライブラリのjQuery。この二つが組み合わさったとき、これまで以上の魅力が感じられるようになる。 マウスを当てるとそのエレメントがハイライト表示される そう確信できるのがFireQueryを使った瞬間だ。この二つの融合は、JavaScriptの開発をバーストしてくれるのではないだろうか。 今回紹介するオープンソース・ソフトウェアはFireQuery、Firebugと連携するjQuery開発補助アドオンだ。 FireQueryはconsole.logに吐き出した内容を元に、画面上のエレメントをハイライトしてくれる。例えばconsole.log($('p'));と出せば、コンソールに出力された jQuery(p)という表示にマウスを当てると、該当部分がハイライト表示になる。ど

こ、これは便利…。新規開発しているときはまだしも、実際に動いているサイトのデザインやJavaScriptをメンテナンスしようと思うと以外と大変だ。静的な場合はまだしも、Ajaxを使ってデータを取得していたりすると、その用意だけでも時間がかかってしまう。 そんな時に使えるのがamachangご推薦のCocProxyだ。Webデザイナーまたは開発者の方はおお、こんなのを待っていたと思うに違いない。 CocProxyはRubyで書かれたオープンソース・ソフトウェアで、開発用プロキシだ。 CocProxyを使う際には、filesというディレクトリを作成し、そこにファイルを配置する。ドメインごとにフォルダを作成して、その中にファイルを入れても良いし、直接ファイルを置いても良い。優先度はfiles直下にあるファイルだ。 style.cssはヒットしたのでローカルファイルを利用している そしてproxy

JavaScriptの進化が止まらない。もし、JavaScriptの欠点を挙げるとすれば、外部のファイルがロードできない点にあったと思う。やはりこれができないと他の言語の比べると弱い印象になってしまう。 だが、それをもJavaScriptは克服していく。本当にすごい。 今回紹介するオープンソース・ソフトウェアはAjile、外部スクリプトファイルの読み込み等多数の機能を実装したJavaScriptライブラリだ。 JavaScriptはあまり得意ではないので、これはあまり自信がない。ただ、すごいという事だけはお伝えしたい。まず、外部ファイルの読み込み。これはLoad(ファイル名)にて実装される。 さらにNameSpace。汚染の被害軽減のためには必須だろう。次がIncludeとImport。Importはアスタリスクをサポートしているようだ。さらにImportAsというものもある。 実際の実装

昨日紹介した「Nofunc Table Organize」は表に対して簡単にソート機能が付与できるすばらしいライブラリだ。しかし業務システムを構築していると、それ以外にも要望が出てきたりする。 良くあるのが、その場でデータを修正したいなどと言うものだ。もちろん、技術的に不可能な訳ではない。が、開発コストがかかり過ぎる。そこで使ってみたいのがこのライブラリだ。 今回紹介するオープンソース・ソフトウェアはTableKit、テーブルのソートに加えデータ編集機能を備えたライブラリだ。 TableKitはNofunc Table Organize同様にライブラリを読み込むだけで既存のテーブルは殆どそのままで使えるソフトウェアだ。ヘッダ部にthead、データ部にtbodyそしてフッタ部にtfootを指定する。 ヘッダ部をクリックして昇順、降順によるソートはもちろん、データをその場で修正できるのが便利だ

ぱっと見、簡単そうに見えてその実、意外と大変なのが差分を表示する処理だ。マシンパワーも意外と使うので、油断ならない。だが、Web上で共有したりコラボレートしたりするアプリケーションが増えている現在にあっては、重要な機能になっている。 手軽に実装する方法は、既存のライブラリを使うことだ。それも、サーバサイドでなくクライアントサイドで。 今回紹介するオープンソース・ソフトウェアはJSBlend、JavaScriptで実装されたDiffソフトウェアだ。 JavaScriptでDiffを実装すると言うのは以前紹介したgoogle-diff-match-patchや、「Javascriptでdiffる ( with 形態素解析 ) (nakatani @ cybozu labs)」等で試みられている。JSBlendが凄いのは、ただDiffだけでなく、マージにも対応している点だ。比較は文字単位で行われ

※ スクリーンショットは全て公式サイトデモより。 最近はJavaScriptで入力チェックを行うサイトも増えてきた。もちろん、サーバサイドでのチェックを欠かすことはできないが、クライアントサイトでチェックできると、その場ですぐに入力訂正が促せるのでユーザビリティが高い。 各入力チェックはもちろん、入力フォームをさらに便利にしてくれるライブラリがこれだ。 今回紹介するオープンソース・ソフトウェアはwForms、JavaScriptフォームライブラリだ。 wFormsではJavaScriptによる入力チェックをはじめとする各種ライブラリが提供される。入力の際にヒントを表示するもの、フォーカスが外れた時にその場でチェックを行うもの、ウィザード形式に入力を促すものもある。 また、複数回一気に入力する事ができるようにする動的フォーム等、便利なライブラリもある。各スクリプトは個別に分かれているので、必

FlashはHTMLやJava、PHPなどと同じWebの技術ではあるが、デザイン的な要素も入れられることもあって、プログラマの領域とはちょっと違う雰囲気を持っている。 これが使いこなせれば、今までにないサービスの提供も考えられる。この技術を使ってFlash操作を習得しよう。 今回紹介するオープンソース・ソフトウェアはAflax、JavaScriptでFlashを操作できるソフトウェアだ。 Flash8ではExternalInterfaceを利用してJavaScriptと連携できるが、これをさらに進めてAction Scriptをライブラリ化し、JavaScriptから操作できるようにしたのがAflaxだ。 ビジュアル的なグラフを描いたり、絵を動かしたりといった操作も簡単にできる。それらはFlashを意識する事無く、JavaScriptのコードによって生成される。 多数のサンプルが同梱されて

トラックバックから教えていただいたソフトウェアのご紹介。 昨日紹介したTable Sorterは何より手軽に導入できる点がメリットだ。簡易的な表をユーザビリティの高いものへと昇華してくれる。そして、さらに便利な機能を付け足してくれるのがこのライブラリだ。 今回紹介するオープンソース・ソフトウェアはExt、Web2.0系サイトを作るのに便利なJavaScriptフレームワークだ。 Extは、元々Yahoo UI Libraryをさらに拡張するために作られたライブラリで、現在はYahoo UI Library以外にもprototype.jp+scriptaculousやjQueryを基礎として組み合わせることが可能になっている。 非常に洗練されたフレームワークで、数行程度のコードで高度なインタフェースや操作を実現できるようになっている。そしてTable Sorter同様にテーブルをソート対応に

Web開発の現場において、データの並べ替え機能の要望は良く出る話だ。開発がある程度終わった段階で言われたりするとショックを受ける事もある。検索条件をパラメータで引き継いで、ページ番号も…なんて考えただけでも嫌になるだろう。 そんな経験のある、またはこれから経験するであろう方にお勧めのソフトウェアがある。これさえ使えばソート処理は怖くない。 今回紹介するオープンソース・ソフトウェアはTable Sorter、JavaScriptのみで実現するソートライブラリだ。 この手のライブラリはこれまでいくつかあったが、iframeを使ったり、表示に特定の手法が必要だったりと、そのままでは使いづらいものが多かった。Table Sorterはそれらの完成版ともいえるかも知れない。 何せ、読み込むのはJavaScriptファイル一つだけ、さらに普通のテーブルタグに対して、ヘッダ部分はtheadタグとthタグ

バグは予期していない動作が発生した際に起こる。理想的な動作をしている限りはまず起こらない。しかし、膨大なソースコードの中、そうした予期しない動作を探すのは難しい。 そこで便利なのがソースコードのカバレッジソフトウェアだ。通ったコードと通っていないコードとを見分けられれば、通ってない場所がバグの潜んでいる所になる。そしてJavaScript向けツールがこれだ。 今回紹介するオープンソース・ソフトウェアはJSCoverage、JavaScript向けのソースコードカバレッジソフトウェアだ。 JSCoverageを使うと、ソースコードの中でカバレッジされていない、つまり通っていないコード部分を見分けることができる。各アクションを試し、全てのコードを通過することができれば、予想は網羅されていることになる。 使い方としては、JSCoverageを使って、JavaScriptファイルを変換する必要があ

※ 画面は公式サイトのサンプルより Webサービスでは色々な情報を入力する。会員登録の類は良くあるものだろう。丹念に入力し、送信ボタンを押してしばらく待つと、入力エラーの文字列。これではやる気がなくなってしまう。 JavaScriptでチェックできれば、その場ですぐにエラー判定ができ、分かりやすい。しかし、入力するパターンは様々にある。必須チェック以外、たとえば入力パターン等に対応しようと思うと開発は大変だ。そこでこれの出番だ。 今回紹介するオープンソース・ソフトウェアはfValidator、入力チェックを行うJavaScriptライブラリだ。 fValidatorは必須チェックに加え、パターン入力にも対応させることができる。たとえば、YYYY/MM/DD等の入力のみを可能にする事で、Microsoft Accessの入力フォームのように入力形式を強制できる。メールアドレスやURLのような

JavaScriptを多用するようになると、どうしても高機能なデバッグツールが欲しくなる。Firefoxであれば、FireBugが一番有名なデバッグツールだろう。FireBugを使うと非常にデバッグが容易になる。 とはいえ、FirefoxはFirefox専用だ。IEではいかにしたら良いだろうか。クロスブラウザで使えるツールがこれだ。 今回紹介するオープンソース・ソフトウェアはJash、クロスブラウザ対応のJavaScript Shellだ。 JashはJavaScriptファイルで提供される。公式サイトではBookmarkletとしても提供されているので、ブックマークに登録しておくと便利だ。 起動すると、ブラウザ上にターミナル風なウィンドウが表示される。この状態で、JavaScriptのデバッグが可能だ。任意のJavaScriptを実行することができるので、操作を試すこともできる。 また、