STUDIO Bloom 大阪・北摂地域を中心としたWebサイト・システム制作

jQueryでお手軽CSS制御（Chromeでのバグの話も）

CSSの制御というか、Classの制御というか。
CSSを直接触っちゃうより、Classを用意しておいて付加したり外したりのほうが何かと管理もしやすいでしょ？

JAVASCRIPT:

(function($) {
$(document).ready(function() {
$('#target tr:odd').addClass('odd');
});
})(jQuery);

targetというIDを持つテーブルの奇数行trにoddというクラスを追加してあげてます。
行数の多いテーブルだと、いちいち奇数行にクラスを指定してやるのも面倒だし、行の入れ替えが発生した日にゃぁ、アンタ。リアルで「キーッ！！！」って叫んじゃうってモンですよ。

Javascriptの使用がOKだったら、とてもとても助かるね。

でも例えば、テーブルが2つ続いてて、それらにも奇数行毎にClassを付加したい場合、単純に考えて…

JAVASCRIPT:

$('table tr:odd').addClass('odd');

としてしまうんだけど、1つめのテーブルが奇数行（例として5）で終わってしまった場合、2つめのテーブルのtrは「リセットされて1から」ではなく「5の続きの6から」となってしまい、なぜか偶数行スタート（本来は1だから奇数）になってしまい、具合が悪いことになっちゃうんですね～困る。
（解決法、探り中。末尾に空の<tr></tr>入れちゃうのでもOK。だけど文法的にはNG）

さらにGoogle Chromeで発見した不具合。
複数の要素を指定する時、コンマ（,）でセレクタを区切れば同時に選択できるのですが、

JAVASCRIPT:

$('table tr:odd, ul li:odd').addClass('odd');

IEやFirefoxでは意図したとおりの動きになってるんですが、Chromeだけは最初の要素しか識別してくれない。単純な解決方法は、

JAVASCRIPT:

$('table tr:odd').addClass('odd');
$('ul li:odd').addClass('odd');

2行に分割…orz
うーむ、ちょっと切ないですね…

ちょっと検証が甘いですが、便利なjQueryもちょっとした落とし穴が用意されていますよ…というお話しでした。それでも便利すぎて手から離せないｊQueryなのです。罪なヤツ。

2 コメント

06月29日

jQueryネタで喋ってきました

二宮さん（design studio PENCIL）から「jQueryネタで1時間喋れ」とお達しが来てしまったので、京都で立ち上がったグループ「Web★Choco@KYOTO」でデザイナーさん向けのjQuery導入をテーマに喋ってきました。

資料作りの最中に紆余曲折あり、当初予定していた手法でのプレゼン資料ではなく、パワーポイントで作り直すハメに。これが当日の午前3時。そこからコピペ＆原稿追加＆アニメーションなどの調整をして、5時半に就寝。早めに起きて再調整。

早めに出て、嫁と外で飯を食ってから行こうと思ったけど結局その余裕もなく、一緒に家を出たものの1本早い電車に乗って、京都は烏丸にある会場「ちおん舎」に向かいました。
天然方向音痴の自分は、当然の如く駅を出て逆に進んでしまい、なかなかの距離を歩いて目的地へ到着。京都の歴史ある建物でのプレゼンです。とても雰囲気が良いです。

しばらく皆さんが集まるのを待って会が始まりました。
スピーカー1人目は二宮さんで、タイポグラフィーの話。

が、資料の最終確認と調整をしてたので、あまり聞いてません（爆）

1つめのレクチャー終了後、自己紹介タイムと休憩時間。当初喋らないはずだった自己紹介も急遽喋ることになり。。。あまり何を喋ったのか覚えてません。休憩時間も手直しやら眠いやら…
そうこうしてたら自分が喋る番になって。

今回は、「過去にトライしたけど挫折した」、「これからちょっと始めてみたい」、というデザイナーさんに向けた内容を心がけてたので、ちょっと自分としては使用するのが微妙な表現方法なども織り交ぜてしまいながらのプレゼンでした（本職のプログラマーさんからすれば反感買うかもしれない的な）。

順を追って見てもらって、考え方や雰囲気を掴んでもらえたらイイかな？という期待を込めて、これまた予定していなかったライブコーディング（実際にその場でコードを書きながら説明する）をやることにしました（決めたのは当日の午前5時ｗ）。

緊張していないように見えて実は相当しているので、ライブコーディングで単純なミスにすぐに気付くことが出来ず大焦りしてしまった場面が。しかし、スピーカーから「あれが悪いんじゃない？」とか声を上げて下さったので、「これはいい（ニヤリ）」と、“みんなでバグを探して考えてみよう“的な流れに無理矢理持ち込んでみたところ、結構な盛り上がりになってくれてシメシメ。
思わぬ所で、雨降って地固まるというか雨のあとは上天気というか。

持ち時間も数分オーバーで収まって、なかなか良いプレゼンだったのではないかな？と、終わった後に声を掛けて下さったリスナーの方達の反応からも伺うことができた気がします。

んで、質問タイムの時に出た「初心者にお勧めの書籍も紹介すべきでは？」という事だったので今日、本屋に行って立ち読んできました。あまり冊数は無かったのですが、その中でも自分的に良書だな、と思ったのはMYCOM BOOKSの「実践!Ajaxフレームワーク jQuery」です。“Ajax“と入っているので、初心者向けとは異なるのかな？と思ったんですけど、意外とそうでもなく今回のプレゼント併せて読むとイイ感じなのでは無いかな？という印象でした。
興味のある方は読んでみて下さいね。

当日使用した資料は、Web★Choco@KYOTOのサイトにあるのですが、登録とかしてなくても見られるのかな？
興味のある方はご覧下さい。

まー、そんなに喋れるネタを持ち合わせている訳では無いのですが、またこういう機会を与えていただければ喋ってみたいと思います。

たぶんVol.2とかもやるのだと思うので、興味のある方はmixiのコミュニティーなど参加してみては如何でしょうか？

06月26日

Google Maps API Ver.3を使ってみよう

Mac miniを買いに梅田まで出たものの、売る気の全くない売り場構成＆定価販売で買うのが負けな気がしたので買わずに帰ってきました。交通費を考えると、どんどん通販との差が無くなってきてます…orz

ということで今日は技術ネタ、と言えないくらい簡単に使えるようになってしまったGoogle MapsのVer.3の簡単すぎる導入のお話しを。

これまでGoogle Mapは、使用するサイトのURLに対する一意のコードをGoogleから取得して使用してました。なのでローカル開発環境、テスト環境、本番環境とコードを取得しないといけない場合もあって、結構面倒な場面も。。。
Ver.3からはこのコードが廃止されたので、そんなこたぁ気にせずに使えるようになったのです！（ひゅーひゅー！太っ腹～）

さらに、これまで行われてきた細かいバージョンアップで煩雑化していた箇所が大幅にブラッシュアップされて結構素直に使えるような印象です（そこまで深く触ってないのですが…）。

ということで今回は簡単に地図を表示するまでを見てみたいと思います。
続きを読む »

02月09日

javascriptでOOPとjQuery

JavascriptをOOPで、jQueryを組み合わせて使おうとした時にハマった沼からの脱出方法例。

JavaScript:

var hoge = {
fuga : function() {
jQuery.ajax( {
url:'hogehoge.xml',
success:onSuccess
});
},
onSuccess :function(data) {
...
},
...
}

だとバッチリコケる。

そんな時は

JavaScript:

jQuery.scope = function(target, func){ return function() { func.apply(target, arguments); }};
var hoge = {
fuga : function() {
var obj = this;
jQuery.ajax( {
url:'hogehoge.xml',
success:jQuery.scope(this, obj.onSuccess)
});
},
onSuccess :function(data) {
...
},
...
}

てな感じにすればOK、という場当たり的な対処法。ちょっと「var obj = this;」的なところが駄目っぽさ満載。

参考ページ。

02月02日

jQueryでonclick

リクリチャットでjQueryの事を喋るなら、このエントリの基礎みたいな感じ。でも今回も喋る人が多そうだから自粛しようかな。

さて。
例えばAJAXでXMLを引っ張ってきて、DOMで要素を追加して、そいつをクリックしたらイベントを駆動させる、というシチュエーションの時。
jQuery.each(data, function(i, dat) { 　　jQuery('<a/>') 　　　　.attr('class', 'hoge') 　　　　.attr('href', 'javascript:void(0)') 　　　　.attr('onclick', 'fuga('+dat.id+')') 　　) 　　.append('to') )};
は、Firefoxだと動く。Chromeだとonclick属性が入らず動かない。
jQuery.each(data, function(i, dat) { 　　jQuery('<a/>') 　　　　.attr('class', 'hoge') 　　　　.attr('href', 'javascript:void(0)') 　　　　.click(function() {fuga(dat.id);}) 　　) 　　.append('to') )};
は動く。Chromeでも。

でもタブンもうちょっとスマートにするなら、
jQuery.each(data, function(i, dat) { 　　jQuery('<a/>') 　　　　.attr('id', 'btn_fuga') 　　　　.attr('class', 'hoge') 　　　　.attr('href', 'javascript:void(0)') 　　　　.attr('rel', dat.id) 　　) 　　.append('to') )}; jQuery('#btn_fuga').click( 　　fuga(jQuery(this).attr('rel')); );
てな感じか。検証してない＆突っ込みどころ満載かと思いますので、各自で勉強して下さいな。
jQueryマンセー！だけど、微妙な部分があるのもまた事実。

12月08日