132件中 86-90件目     [ ... 13 14 15 16 17 18 19 20 21 22 ... ]

JavaScriptを使えばテーブルのセルをドラッグで選択するようなインターフェースを作ることもできる。 Google カレンダーでは、それをうまく利用し、ユーザに簡単な操作でわかりやすく特定の期間(2日の3時~9時など。)を選択させている。

テーブルのセルをドラッグで選択するサンプル

テーブルのセルをドラッグで選択するには、ドラッグを開始した位置にあるセルと現在の位置にあるセルを取得し、マウスの動きに合わせてセルの色を変更すればいい。


最近、サーバサイドJava(Tomcat+Struts+MySQL)を触ることになり、いろいろと調べていくうちに、AjaxTagsというものを知った。

AjaxTagsは「AjaxTags・AjaxFacesを利用したサーバーサイドプログラミング」にあるように、Autocomplete(オートコンプリート)やSelect/Dropdown(2つのプルダウンの関連付け)、Update Field(複数フィールドの更新)、Toggle(クリックによる内容の書き換え)など、通常はJavaScriptを書いて作るような機能を、カスタムタグを書くだけで簡単に実装するものだ。 リンク先の記事では5つの機能しか書かれてはいないが、その他にもタブ表示やツリー表示などもできる。
AjaxFaces(有料)も同じようにタブ表示やカレンダーをカスタムタグで簡単に実装できるようだ。(公式ページ消滅してる?)

これらのようなサーバサイドのフレームワークやライブラリで、簡単にAjaxアプリを作るというのは、今のところ実装されている機能が少なく実用にはまだ早い感じがするが、この考えは面白い。

このようなサーバサイドのAjaxプログラミングをサーバサイドAjaxと表現しているを見付けた。

PHPでも同じようなものがあるのだろうか?と考え、調べてみるといくつかそれらしいものが出てきた。 一つ目はPEAR::HTML_AJAX。(ver0.5.2) 二つ目はSAJAX。(ver0.12) 三つ目はxajax。(ver0.5)
いずれもまだ未完成という感じで、機能は上記のAjaxTagsやAjaxFacesとは違い、PHPの関数をJavaScriptから呼び出すライブラリという感じ。 この中では、xajaxが導入も簡単で、JavaScriptを全く知らない人でもコーディングできそうで、一番良さそうだった。 これは近いうちに試してみたい。

調べてるときに見付けたPHPによるJavaScriptを書かないAjaxが、そのxajaxについても書かれているようでなかなか面白そうだった。 暇があれば読んでみたい。


PHPでは、標準でsimilar_text関数levenshtein関数という文字列の類似度を計算する関数があり、簡単に類似した文字列を探すことができる。

int similar_text ( string $first, string $second [, float &$percent] )
int levenshtein ( string $str1, string $str2 [, int $cost_ins, int $cost_rep, int $cost_del] )

どちらの関数も2つの文字列を引数に取り比較する。 similar_text関数3番目の引数は類似度をパーセントで取得するための引数、levenshtein関数の3つ目以降の引数は、挿入、置換、削除にかかるコストを定義するための引数となっている。

注意したいのは、similar_text関数は返り値が大きいほど類似しているのに対して、levenshtein関数は返り値が小さいほど類似しているという点だ。

サンプルソース表示

similar_text関数の$percentは、(返り値*2)/(2つの文字列の長さの合計)という計算で出しているようだ。 一見、あまり似ていないように見える「htmlspe」と「dbmclose」もm,l,s,eの4文字が共通しているために類似度が高くなっている。 日本語の比較は、おそらく2バイト文字として見ていないため、文字によっては変な結果が返ってくるようだが、似ていれば高い類似度が返されている。

どちらの関数も計算コストが高いという欠点はあるが、全ての文字列との類似度を計算することで、「もしかして検索」のようなものを簡単に実装できる。

(※実際の検索エンジンで表示されるものは、おそらく過去の入力から判断しているもので、類似度から判断しているものではないと思われる。)


IE6のStrictモードで、position:absoluteを付けたdivタグなどの上でドラッグをすると選択範囲がおかしくなることがある。 ちなみに、Quirksモードではこのバグは発生しない。

Strictモードの例

Quirksモードの例

このバグは、おそらく選択範囲の終点をposition:absoluteが付いたタグ上で取得できていないことが原因だと思われる。

このバグは、何故かbodyにheight:100%を付けると解決する。

bodyにheight:100%を付けた例


Javascriptでノードに対してcloneNodeを使うとノードをコピーすることができるが、ブラウザによってはチェックボックスなどの現在の選択状態をコピーせずにデフォルトの選択状態に戻したりしてしまうことがある。 多くの場合、選択状態なども含めてコピーされることを期待するだろうが、コピーしたノードの選択状態はブラウザによって違ってしまう。

cloneNodeでチェックボックスなどをコピーすると選択状態がデフォルトに戻ってしまう対策のサンプル


132件中 86-90件目     [ ... 13 14 15 16 17 18 19 20 21 22 ... ]