どうもはじめまして、株式会社はてなのid:cho45です。これから数回に渡り、拙作のJavaScriptのライブラリであるJSDeferredの紹介と、それに関係するJavaScriptにおける非同期の技術に関して解説させていただきます。 JavaSciptにおける非同期処理 非同期処理とは まずは確認程度に、非同期処理がどういうものかを解説しておきます。先に乱暴にまとめてしまうと、以下の事柄が大切なところです。 非同期とは「あとで」という意味 同期処理はコードの見た目順に実行される／非同期ではそうならない JavaScript の非同期処理は絶対に同期処理にすることができない JavaScriptにおける非同期処理をいくつか例に出すと、以下のようなものが挙げられます。 リスト1 // XMLHttpRequest の例 var req = new XMLHttpRequest(); re

Webフォームから飛んできた値について、入力チェックを行わないということはまずないだろう。数字のところに文字列が入ったり、必須のものが入っていなかったりすることはよくある。だからこそサーバサイドのプログラムでチェックはするのだが、ユーザビリティを考えるとクライアントサイドでも入力チェックを行いたい。 リアルタイムで行われる入力チェック 入力チェックのJavaScriptを作る、なんていうと面倒な感じがするがVanadiumを使えば開発者の方でなくともチェック機能が実装できてしまう。 今回紹介するオープンソース・ソフトウェアはVanadium、jQueryを使ったクライアントサイド入力チェックライブラリだ。 Vanadiumは入力項目のクラスでチェック内容を指定するようになっている。そのためVanadiumさえ読み込めば、HTMLを変更するだけで入力チェックが実装できるようになる。入力必須や

uuCSSBoost.js は uuAltCSS.js に名前が変更になりましたが、一部の説明が記事を書いた当時の古い名前のままになっています。最新版では、uuCSSBoost.revalidate() は廃止され uuAltCSS() を呼び出すように変更になっています。 コードの解説を追記しました。 「最新の規格を実装したブラウザが登場しても、IE6 のせいで諦めるしかないのか」 「CSS3セレクタを古いブラウザでも使いたい!」 といった現場の声にお応えして、ほぼ全てのブラウザで CSS3 セレクタを利用したページデザインが可能になるJavaScript ライブラリを作ってみました。 特徴 軽いよ いろんなブラウザで動くよ(Firefox2+, Opera9.2x+, Safari3+, IE6+, Google Chrome1+) 95%〜98%ぐらいのシェアをカバーできるんじゃない

FCKEditorと言えば、Webベースで使えるWYSIWYGエディタとして有名なソフトウェアだ。しかし既に多数の機能が実装され、コアに手を入れて改造しようとはとても思えない代物になっている。 次期FCKEditor また、多機能ゆえに動作が重たいのが難点だった。そうした問題点を解決できそうなのが次期FCKEditorだ。 今回紹介するオープンソース・ソフトウェアはCKEditor、FCKEditor3.0以降のソフトウェアだ。 FCKEditorは3.0以降から名前が変わり、CKEditorとなる。それに伴って様々な機能拡張がなされている。大きな点として、スキン機能とともに枠の色替え機能が実装されたことだ。なお対応ブラウザはFirefox2以上、IE6以上、Opera9.5以上、Safari3以上となる。 APIによる独自拡張 Ajaxとの親和性も高まっており、ダブルクリックで編集モード

JavaScriptを使えば画面遷移の少ない、スムーズな操作性を提供できる。いわゆるAjaxなどがそれに相当するが、ドメインを越えて通信できないのが問題だった。幾つかの打開案はあるが、例えばJSONPを使う方法やサーバサイドで取得する方法などがメインになっていた。 検索結果のXMLを並べるテスト これではどちらかのサーバで対応が必要になってしまう。そんな中、殆どをクライアントサイドだけで解決してしまうのがjQuery CrossDomainだ。 今回紹介するオープンソース・ソフトウェアはjQuery CrossDomain、jQueryによるクロスドメインAjaxライブラリだ。 jQuery CrossDomainが使うのはFlashだ。Flashを使って外部ドメインにあるXMLを取得し、それをJavaScriptに返すようになっている。その仕組みをjQueryプラグイン化することで容易に

6月に入り、欧州サッカーの移籍情報が気になってしょうがないishidaです。 WEB制作に携わっていると、表組みだらけのWEBサイトの担当に 長い人生に一度や二度はなる（?）と思います。 tableによる表組みは、行や列が増えすぎるとコンテンツからはみ出したりして 見栄えが悪くなりますよね。 そんな迷える子羊たちを助けてくれるjavascriptライブラリ Super Tables を今回ご紹介いたします。 まずは以下のサンプルをご覧くださいませ。 Super Tables サンプルデモ サンプルのような感じで、ヘッダー部分を固定したり、列を固定できます。 Super Tables 設置方法 配布ページよりデータをダウンロードし、利用したいhtmlのhead要素などでファイルを読み込みます。 <link rel="stylesheet" href="superTables.css" typ

インターネットの世界では素早さを求める動きが強まっている。それこそ、サイト内検索で欲しい情報が見つからなかったり、レスポンスが遅れたりすればあっという間にユーザがいなくなってしまう。 JavaScriptだけで検索を行う そんな高速なサーバ検索は難しいかもしれないが、クライアントサイドであれば意外と高速化できる。 今回紹介するオープンソース・ソフトウェアはjQuery Live Search、jQueryを使ったリスト検索ライブラリだ。 jQuery Live SearchはWebページ上にあるリストを検索するライブラリだ。リアルタイムにフィルタリングが行われるのでインクリメンタル検索に近い。デモでは1,000件のリストに対してフィルタリングを行っている。 文字を入力するたびに絞り込まれていく レスポンスはブラウザの性能によるだろうが、思っていた以上に高速だ。検索結果の件数も表示されるので

PHPの開発者であれば皆使うのがvar_dumpだ。開発中はもちろんデバッグ時などに非常に重宝する。エラーがあっても出力してくれるので、これがなければ生活できないという人も多いのではないだろうか。 JavaScriptでも変数のダンプを メソッドを調べる必要もなく、知りたいものを関数に入れれば全ての情報を出してくれる。そんなvar_dumpの魅力をJavaScriptでも再現したのがprettyPrint.jsだ。 今回紹介するフリーウェアはprettyPrint.js、JavaScriptの変数ダンプライブラリだ。ソースコードは公開されているが、ライセンスは明記されていなかったのでご注意いただきたい。 prettyPrint.jsはJavaScriptのオブジェクトを指定すれば、その中身をダンプし、テーブル組で見やすく表示してくれるライブラリだ。PHPのvar_dumpよりも、cfdum

時々、Webサイトで入力している内容をその場で判定するものがある。入力必須の項目やメールアドレス、パスワードの一致などでエラーがあればすぐに表示してくれるので、送信してから修正すると言った二度手間がなくて便利だ。 Webブラウザ上で入力チェックを実行する サーバ側でも入力チェックは行うが、ユーザビリティを考えるとオンラインでも検証したい。そんな検証システムを簡単に作れるのがyavだ。 今回紹介するオープンソース・ソフトウェアはyav、JavaScriptの入力チェックライブラリだ。 yavは入力必須はもちろん、数字のみや文字のみといったチェックもできる。メールや日付、文字の長さなどといったフォーマットによるチェックや、「and」と「or」による他の項目の値によって入力チェック内容を変更する機能もある。多言語にも対応している。 設定はこのようになる 入力フォーマットを規定することも可能で、予

スケジュールソフトウェアに対する需要は意外と多い。グループウェアのような多彩な機能をもつものではなく、ただiCalファイルを読み込んで表示するだけのものといったシンプルな使い方ができるものに対する需要がある。 ドラッグアンドドロップでスケジュールを変更できるカレンダー ただ表示するだけなら問題ないだろうが、そこにちょっとした編集機能を付けるとなると面倒になる。そこで試したいのがFullCalendarだ。 今回紹介するオープンソース・ソフトウェアはFullCalendar、jQueryベースのAjax対応カレンダープラグインだ。 FullCalendarはその名の通り、フルサイズで提供されるカレンダーシステムだ。とは言え実際にはCSSで幅を制御しているので、小さなサイズにすることもできる。JavaScriptベースで、次の月/前の月への移動がページ遷移なしで行える。 サイズを小さくすること

基幹システムをWebベースで作るといった話題が持ち上がるようになっている。そんな中、よく聞かれるのが表計算ソフトウェア的にデータを操作できる機能だ。技術者の方であればその難易度はご存知の通りで、大抵Excelを使えるようにCSVで出力してお茶を濁すことが多い。 需要の多そうなグリッドライブラリ しかしもう諦めないで良い。高機能、ではないけれど簡易的なデータ操作であればgrrid.jsを使ってみよう。 今回紹介するオープンソース・ソフトウェアはgrrid.js、Webベースで表計算ソフトウェアのように動作するグリッドライブラリだ。 grrid.jsを使うとまるで表計算ソフトウェアのようなグリッドが表示される。各セルは自由に文字を入力できる。移動はエンターキー、タブキー、矢印キーを使って可能だ。タブキーで右、エンターキーは下にフォーカスが移動する。なお、動作にはprototype.jsが用いら

テキストエリアをWYSIWYGエディタに変えるものといえばFCKEditorなどが有名だ。FCKEditorは確かに便利だが、完成度が高すぎるためにカスタマイズしづらく（設定は変更できるが）、何より動作が重たくなっている。 シンプルながらカスタマイズも容易なリッチテキストエディタ 実際にユーザが使う機能はそれほど多くない。もっとシンプルに必要最低限に仕上げたのがSanskritだ。 今回紹介するフリーウェアはSanskrit、テキストエリアをシンプルなWYSIWYGエディタにするソフトウェアだ。ソースコードは公開されているがライセンスは明記されていなかったのでご注意いただきたい。 Sanskritで使える装飾は太字、斜体、下線、打ち消し線、リンクとなっている。これらはTextileの構文に則っており、実際の出力もTextile形式になっている。Sanskritは言わば記法の入力補助とTex

JavaのSwingにあるJScrollPaneクラス。ウィンドウをはじめとした他のコンポーネントにスクロールバーの機能をつけることができる。これにより狭い範囲であっても多くの情報を載せられるようになる。 スキンにも対応したスクロール機能を提供する Webページでもそれは同様だ。溢れてしまった文字の扱いをどうするかCSSで設定するのがoverflowだが、それをもっと高機能にしたのがjScrollPaneだ。 今回紹介するオープンソース・ソフトウェアはjScrollPane、jQueryプラグインのスクロールプラグインだ。 jScrollPaneはDivタグに対して使う機能で、文字がはみ出した場合にスクロールバーを付けてくれるプラグインだ。スキン機能に対応し、Windows XP風やMac OSX風を使えたり、スクロールバーを一般的な右側でなく、左側にもうけることもできる。 多段のスクロー

モーダルウィンドウとはアプリケーションから呼び出したウィンドウで、それに対して何からのアクション（閉じるのボタンを押すなど）を起こさないと呼び出し元のアプリケーションに戻れないようなウィンドウだ。ダイアログもその一種と言えるだろう。 モーダルウィンドウを実装 Webブラウザではよくalertのダイアログが用いられるが、あまり格好は良くないしグラフィカルな内容は伝えられない。そこで使いたいのがsubModalだ。 今回紹介するオープンソース・ソフトウェアはsubModal、モーダルウィンドウを簡単に実装するJavaScriptライブラリだ。 subModalが対応しているのはIE6以上、Firefox 1.x以上、Safari、Opera 7以上となっている。相当昔のブラウザから対応しているようだ。JavaScriptファイルとCSSファイルを読み込むだけで良いが、既存のライブラリとバッティ

去年、確かFlashを勉強しようと思っていたのにいつの間にか一年が過ぎ去ってしまった。これではまずい、今年こそしっかりと取り組んでいきたいものだ。今やFlashは大抵のブラウザにバンドルされており、華麗なインタフェースを提供する上では欠かせない技術になっている。それだけに使いこなせるようにしたい。 ファイナンス系のWebアプリケーションサンプル Flashの魅力と言えば、HTMLやJavaScriptでは難しいグラフィックスを提供できることにある。そのためのフレームワークがDegrafaだ。 今回紹介するオープンソース・ソフトウェアはDegrafa、Flash用のグラフィックスフレームワークだ。 Degrafaを理解するためには何よりもまずサンプルを見ることだろう。グラフィカルなグラフ、リッチなユーザインタフェース、ダイナミックなグラフィックス、各種シェイプなどを簡単に（恐らく簡単に）実装

※ 画面は公式サイトデモより プログラミング言語がそうであるように、フレームワークにおいても開発の向き不向きが存在する。開発するシステムやその特性に応じて最適なフレームワークを選択することは、開発の工数を下げたりユーザビリティを向上させる効果があるだろう。 まるでWeb OSのようなインタフェース 最近は基幹システムにおいてもWebアプリケーション化が進められている。そこでJavaを使った基幹システムであれば、Echo Web Frameworkの導入を考えてみても良さそうだ。 今回紹介するオープンソース・ソフトウェアはEcho Web Framework、Javaを使ったWebアプリケーション開発に役立つフレームワークだ。 Echo Web Frameworkはプレゼン層のフレームワークであるが、JettyやTomcat向けのライブラリが提供されており、Javaをサーバサイドに、Java

すでに半年以上昔ではあるが、Perlの新しいオブジェクトシステムとしてMooseに注目が集まった。面倒なオブジェクト定義が手軽に、さらに型指定なども容易にできるのでオブジェクト指向プログラミングが簡単になる、というライブラリだ。 デモアプリケーションのblok。MS Visio風なドローアプリケーション コーディング量が減り、可読性が高まればバグの入り込む余地が減るので、システムの品質が高まる。工数も下がるし、メンテナンスもしやすいと言った具合に文句なしに良い。そんなMooseにインスパイアされたのがJooseだ。 今回紹介するオープンソース・ソフトウェアはJoose、JavaScript版Mooseだ。 JooseではMoose同様にオブジェクトを定義することができる。hasを使って属性を定義すれば、セッター/ゲッターは自動的に生成される。さらにメソッドの追加も簡単にできる。もちろん、属

※ 画面は公式サイトのデモコードより 最近のWebシステム開発ではO/Rマッピングの利用が当たり前になっている。そのため、生のSQLを書く機会が殆どなくなり、開発がスムーズになっている一方、いざ書くとなると非常に面倒に感じるようになっている（もちろんORマッピングではコストがかかってしまう場合はSQLを書く必要もあるだろうが）。 JavaScriptで実現するO/Rマッピング それはSQLiteが使えるiPhone/Gears/Adobe AIRといった今時の開発に対しては特に言える。O/Rマッピングに慣れてしまった体にはSQLite向けのSQLを書くのは非常に辛い。そこで使えるのがActiveRecord.jsだ。 今回紹介するオープンソース・ソフトウェアはActiveRecord.js、JavaScriptで作られたO/Rマッピングソフトウェアだ。 ActiveRecord.jsが対応