11月 12
先日とは別なサイトをjQTouchを使って構築してみる。使い方はググればすぐに分かると思うが、要するに1ファイル中に複数のDIVブロックを作っておき、aタグから、そのDIVのIDを指定することで、あたかもページが切り替わったのごとく遷移し、かつ、履歴も保持してくれ、カスタムイベントおよびページ切替のエフェクトが使えるというライブラリである。
別ページにしても、実際にはページ(URL)が切り替わるのではなく、jQTouchが自動的にajaxにてGETしてコンテンツを挿入してくれるので、単純にSafariで新規ページを開くよりは、だいぶマシである。
通常のHTMLをちょっと加工するだけでよいので、割と簡単だが、一番気をつけるべきは、どこまでを１ファイル中に収めるかという点である。
１ファイル中にコンテンツを入れ込みすぎると読み込みに時間が掛かってしまうが、別ページだと結局、ページの読み込みが発生してしまい、レスポンスは悪くなる。（※２回目からはキャッシュされる）
なんだ、そこまで違いはないな…と思いきや、別の問題が発生。
index.htmlに商品一覧があり、
- detail.php?id=A
- detail.php?id=B
- detail.php?id=C
というリンクがあったとする。別ページなので、ajaxでロードされるのだが、detail.php?id=A → detail.php?id=Bとアクセスした際、detail.php?id=Bも、detail.php?id=Aと同じページになってしまう。どうもキャッシュ機能に問題があり、パラメータ付のリンクをうまく処理できないもよう。
ならば、仕方ないので、キャッシュを無効にしようと思ったが、Twitterにて下記を発見。
http://twitter.com/t_ossi/status/25991680641
jQTouch。 アクセスの度に内容が変わる動的コンテンツの場合、cacheGetRequestsでページキャッシュを無効にした程度で、後は従来のWebアプリのよ うにコンテンツを返すような処理をしていると、MobileSafariのメモリ上のHTMLが肥大化してエライ事になる。
なるほど。それはマズい。MobileSafariのメモリ使用量を調べる方法ってあるんだろうか。今回作ったサイトではそこまでメモリ使用量は増えないと思うが、キャッシュを無効にするのであれば、jQTouchを使う意味も半減するので、結局、全てのコンテンツをindex.htmlに詰め込む形で対処した。（このあたりの試行錯誤に半日以上掛かった）
ファイルを分けるもう一つのデメリットとしては、動的に読み込まれるため、その中の要素へjQueryで何かイベントのBindをしたい場合、たとえば、フォーム部分を外部HTMLファイルとしてリンクし、ロードされた場合、$(”form”).submit(fn)と処理したい場合、外部HTMLファイルをロードした時点で、別途JSをコールする必要がある。（説明がヘタクソでゴメンなさい）
これは、jQTouchの問題ではなく、PCでも全く同様です。まぁ、ロードするコンテンツの中に再度javascriptの処理を入れてもいいのだけれど、HTMLとJSソースの分離が出来ないのは気持ち悪い。親コンテンツのほうで、ロードが完了したら再度、各種スタイルやイベントを再設定するというのもアレだし。
いずれにしろ、jQTouchは思ったより簡単で、先日のiuiよりは断然オススメ。テーマの切替が出来るからデザインカスタマイズも可能。
jQueryには、jQuery.mobileという、モバイル向けが待ちかまえてるのだけれど、デモを見る限り、残念な感じ。ページ遷移毎にいちいちローディングのフロートウィンドウが出るのウザ過ぎ。（本家デモページの作りがダメなだけか？？）
キャプチャ画像も無しに説明もヘタクソでゴメンナサイね。指摘や質問があればコメント欄でドウゾ
Popularity: 6% [?]
written by ANN
12月 01
まぁ、タイトルが全てなんですが、フォームのフィールドで入力を数値に制限する::TexoTela:: jQuery – numericというのがあるのだが、これを使うと、Safariからペーストできないという問題を発見。
↑下のテキストフィールドにはSafariからペーストできないはず。
よく見ると配布元にペーストに問題がある…と書いてあったわけだが…
ここで、もう一つの入力制限プラグイン,jQuery AlphaNumericについても調べてみた。
こちらも、入力制限の文字種に限らず、各ブラウザでペーストに問題があるようだ。
結論。
jQuery numericやjQuery AlphaNumericを使う場合、ブラウザによってはペーストできないので要注意。フォームにペーストできるかできないかというのは、案外、テストされないんじゃないだろうか。
Popularity: 4% [?]
written by ANN
10月 30
リスト並び替えのインターフェースを、ドラッグ＆ドロップでやりたいと思ったので、jQuery UI Sortableを使って練習してみる。
ただ、リストが大量にある場合や、初心者には、このオペレーションは難しいような気がする。だから、最終的には、それぞれのリストの↑↓のアイコンを付けて、直前・直後に移動できるようにしたい…が、まだそのやり方はよく分からない。
とりあえず普通にドラッグして入れ替えるサンプル。
簡単にできて面白いね。
Popularity: 7% [?]
written by ANN
10月 26
あんまり同様のケースはないと思うけど。
というテーブルがあったとして、
というふうに、列の前２つだけを選択し、なにかしら処理をしたい場合のjQueryの書き方。
それぞれのセルにclassやIDを付けてやれば簡単なんだけれど、可変のtableで、できるだけ固有の識別子をつけずに、前２つとか、特定のセルを処理したい場合。
[js]
$("tr").each(
function(index,obj){
$(obj).children().slice(0,2).css("background-color","orange");
}
)
[/js]
…もっと短いコードで実現できそうな気もする。解る人教えてください。
それと、コードの表示にiG:Syntax Hiliterを使ってるのだけれど、記事のソースを直接修正したあと、ビジュアルエディタにもどると、行に<br>が追加され、それがコードとして表示されてしまう。なんとかならないだろうか。
Popularity: 4% [?]
written by ANN
10月 06
いつのバージョンからか分からないが、少なくとも今使っているWordPress 2.8では、テーマ中のwp_head()によって出力されるWordPress付属のjQueryは、 jQuery.noConflict(); されてるので、そのままでは、$(”#hoge”).click(～)といった使い方ができません。
これはどういうコトかというと、ちまたで配布されているほとんどのjQueryプラグインは、$(～)を前提としているので、そのままでは動かないプラグインが沢山ある、ということです。
WordPress付属のjQueryが、ptorotype.jsと併用できるようにとの措置なんだろうけど、正直、最近prototype.js使って無く、jQuery Onlyなので、この措置は逆に面倒です。
jQueryのプラグインのソース側を修正してもいいけど、プラグインによっては、packされたファイルしか提供しておらず、修正が面倒なものも多いです。
というわけで、僕は、テーマ中のwp-head()を削除して、 自作テーマのディレクトリ中にjsディレクトリを作り、そこに最新のjQueryを入れて読み込むようにしています。
[追記] あ、wp-head()を削ってしまうと、テーマのヘッダになにかを追記するようなプラグインが動作しないかも。要確認。
■関連情報 ・wp_enqueue_scriptで外部JavaScriptの読み込みをスマートに at WordPress.ex-libris.jp
Popularity: 8% [?]
written by ANN
7月 30
日付・時刻の整合性をチェックしたい
とあるサイトにて、日付・時刻の値をチェックする処理が必要となる。日付・時刻の入力には、先のエントリーの実務で使える・使ったjQueryプラグイン5選にも書いた、DatePickerとClockPickを使っている。
これらのインターフェースを用いて値を入力する場合、必ず正しい日付が入るので、極端なところ、値の整合性をチェックする必要はない。しかし、このインターフェースと同時に、手動による入力を認めている場合、入力ミス等でおかしな値を入力される場合がある。たとえば…
- ２００９，７，３０ → 全角文字
- 2009–10-23 → ハイフンが多い
- 2009-2-29 → 閏年じゃないから29日は無い
- 10/2 → 西暦が足りない
- 2009-13-1 → 13月は無い
などなど。
そこでまず、既存のプラグイン等で、日付の整合性をチェックするものが無いか探したのだが・・日付単体でチェックするものを見つけることができなかった。そこで…
>>>>>続きを読む
Popularity: 28% [?]
written by ANN
7月 28
最近のとある案件で実際に使ってみたjQueryプラグインを５つ紹介します。
それぞれに主観で「実用性」「楽しさ」「難易度」を評点（５点満点）してみたので、参考までにドウゾ。
それぞれにサンプルを付けています。
サンプルのソースを見たい方は、該当部分のiframeからソースを見てください。
>>>>>続きを読む
Popularity: 37% [?]
written by ANN
7月 19
NicEdit – WYSIWYG Content Editor, Inline Rich Text Application
nicEditという、軽量でシンプルなWYSIWYGなJavaScriptのエディタがあるのだが、使っていると謎のエラーに出くわす。
普通に組み込み、ツールーバー内の「右寄せ・左寄せ・中央揃え」など、揃え機能を使おうとすると、Firefoxのコンソールに以下のようなエラーが。
[Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMNSHTMLDocument.execCommand]” nsresult: “0×80004005 (NS_ERROR_FAILURE)” location: “JS frame :: http://js.nicedit.com/nicEdit-latest.js :: anonymous :: line 38″ data: no]
[Break on this error] var nicEditorInstance=bkClass.extend({is…A){document.execCommand(B,false,A)}});\r\n
ぱっと見、JavaScriptのシンタックスやオブジェクトのエラーではなく、firefoxの内部エラーという感じ。
なんと、公式サイトのdemoページでも、同じエラーが発症…。それでいいのか？
nicEdit公式サイトのフォーラムや、Googleで調べた限り、FirefoxのWYSIWIG APIのバグっぽい。
しかも、エラーが発生するのは、Firefox + nicEditの組み合わせかつ、【テキストエリアの１行目に左右中央揃えを実行】という変な条件。
まぁ、バグならバグでしょうがないとして、どういう条件で発生するのか、またどうすれば回避すればいいのかを調べてみた。
極力シンプルなコードにして、エラーが発生する条件を絞り込む。結果、発生する条件だけはなのとか絞り込めた。
…が、これでは、正直、実用に耐えない。
以下、検証コード。(直リンク)
検証を進めていくうちに分かったのだが、nicEdit + Firefox + １行目の左右揃えで、必ずエラーになるとは限らなかった。
問題がでるのは、２番目のテキストエリアのみ。その違いというのは、テキストエリアを、divでくくっているかどうか、という点のみである。
div以外に、pやtableなど、要するにtextareaの外に要素がある場合、１行目の文字に対し左右揃えを行うとFirefoxのWYSIWYG APIがエラーになるという感じ。
とりあえず現在はここまで調べた。このエラーをどうやれば回避出来るのかは現在調査中。
わかり次第また投稿する。
Popularity: 8% [?]
written by ANN
2月 18
一般的なフォームのチェックボックスは、
と、いう感じ。これを、チェックした時に、checkboxの背景オブジェクトの色を変えることで、どこがチェックされたかわかりやすくするjQueryを使ったスクリプトを紹介。（まぁ、紹介するほどでもないけど）
JavaScriptコード
[js]
$(document).ready(function(){
$(”input[@type='checkbox']“).click(function(){
var chk = $(this).attr(’checked’);
if(chk == true){
$(this).parent().css(”background-color”,”pink”);
}else{
$(this).parent().css(”background-color”,”white”);
}
return true;
});
});
[/js]
動作サンプル
解説
まぁ、解説するまでもないと思うけど…$(”input[@type='checkbox']“)というのは、checkbox全体に対してという指示。checkboxにclassを付けて、それを指定してもいいけど、数が増えると面倒なので。
で、checkbox全体にclickで、そのオブジェクトの属性[checkec]がtrueだったら、そのcheckboxの親のエレメントの背景を変更。$(this).parent().css(”background-color”,”pink”);
もっと簡単・スマートなやり方もあると思うけど、あんまりトリッキーに書くのは好きじゃないのでこんな感じで充分。
これだけでも、だいぶユーザビリティが向上したフォームになると思います。
なお、jQueryについては、
jQuery 関連記事まとめ – Cyokodog::Diary
をみれば、ほぼ網羅できるんじゃないですかね。すばらしい。多謝ですね。
あと、コリスさんところで、よくプラグインのまとめをしてくれてます。
[JS]jQueryのプラグイン33+1選 -2008年10月 | コリス
formのバリデーションに関しては、
Really Easy Field Validation
これがかなり使い勝手がよくて好きなんだけど、prototype.jsなんだよねー。
Popularity: 19% [?]
written by ANN