スパイスラボ神部です。

以前、jQuery でブラウザ判別をする方法をしらべていたとき、こちらを参考にしていました。

-jQueryで簡単UserAgent判別 - Webtech Walker

なぜかというと Google で一番上に来るからなんですけどね。

しかしもう少し調べてみると、どうやらバージョン判別もできるようです。

-jQueryを使ったブラウザ分岐 | A Day in the Life

どうやら 1.3 系列では使えないらしい $ browser

しかしこの $browser、どうやら 1.3 系列からは使えなくなるようです。

-jQuery.browser - jQuery 1.3.2 日本語リファレンス

$support を使うように、となるようです。

-jQuery.support - jQuery 1.3.2 日本語リファレンス

非推奨になりますが一応$browserも残ってはいるらしいです。

-jQueryにおけるブラウザの各種サポート状態を返す

-anything from here jQueryに学ぶ Javascript の基礎(8) jQuery.support upon ver1.3.2──jQuery解読(44)

なかじまんさんの jQuery Browser Selector

-Web ブラウザに依存したコードを書き分ける jQuery Browser Selector プラグイン #1 - Selectors - Postal Search Ajax API with jQuery - Postal Search APIs & Solutions

jQuery 自体はクロスブラウザ (Cross-browser) を指向しているので、このプラグインの存在は矛盾するかもしれません。また、ブラウザの依存性は、他の JavaScript ライブラリを活用したり、CSS を工夫すれば解決できることでもあります。

なるほど。

-Web ブラウザに依存したコードを書き分ける jQuery Browser Selector プラグイン #2 - Selectors - Postal Search Ajax API with jQuery - Postal Search APIs & Solutions

たしかにjQuery プラグインの中には、あんまりクロスブラウザじゃないものもあります。以前このブログでもとりあげた jAlert とかも・・・

参考：mixi アプリで alert の置換に最適な jQuery プラグイン「jAlert」 ( ラボブログ )

その他

今回の件とは関係無いけど、jQuery まわりでこちらも参考になります。

-jQuery (X)HTML操作のメモ1 | A Day in the Life

スパイスラボ神部です。

ちょっと必要があって、配置済みのDOM要素を並べ替えたかったのですが、どうしてもやりかたがわからず、Twitter でつぶやいてみたところ、めちゃめちゃ参考になる情報をいただきました。

・要素そのものを並び替える方法

・CSS で要素の一を変える方法

のどちらかがあるだろうなぁ、とは思っていましたが、奇しくも両方を教えていただきました。教えてくださったお二方、本当にありがとうございます！

参考までにまとめてみたいと思います。

要素の配置換えを行う jQuery プラグイン

@takimo 氏に教えていただいた方法。こちらは要素そのものを入れ替える方法ですね。

-jQuery: Shuffle Plugin | Yelotofu

サンプルデモはこちら。

-jQuery: Array Shuffle

まさにこれ！という感じ。

>jQueryでランダムに要素を再配置

@Nullly 氏に教えてもらった方法がこちら。

-jQueryでランダムに要素を再配置

初期位置からランダムな目標座標に自動移動というおまけ付きです。こんなことできるんだと改めてびっくり。

また、違った意味で、こんなシャッフル方法もあるようです。

-cycle プラグインフォートラベル API で旅行写真をシャッフル表示する - Cycle Plugin - Postal Search Ajax API with jQuery - Postal Search APIs & Solutions

これもかっこいいなぁ。シンプルスライドショー で使わせてもらおうかしら。

スパイスラボ神部です。

JavaScript でカレンダーを作ろうと思っていたのですが、またもや jQuery に便利なものがあり驚き。

FullCalendar

今回は FullCalendar というライブラリを選んでみます（検索で上位に出てくるjCalendar はもう存在しないようでした）。

-FullCalendar - Full-sized Calendar jQuery Plugin

-FullCalendar

-新JavaScript例文辞典

fullCalendar のカスタマイズ方法

月名などを指定するときは初期化の前に代入しておくようです。

いっぽうタイトルの表示などプロパティ的なものは初期化時の引数で渡す感じらしい。

$.fullCalendar.monthNames = ['1','2','3','4','5','6','7','8','9','10','11','12'];
$("#myCalendar").fullCalendar({
title:false;
events: []
})

その他のカレンダーライブラリ

-JavaScriptライブラリ「jQuery」を使ってカレンダーを作る「jCal.js」

神部です。

mixi アプリを開発していて、デバッグ期間だけ alert を使っていたけど今更いい代替がみつからない！というときに便利です。

なんとスタイリッシュな Alert＆Confirm を体現する jQuery プラグインがあるのです。

-jQuery Alert Dialogs (Alert, Confirm, & Prompt Replacements)

-jQuery Alert Dialogs

-alert等のウィンドウ内ダイアログを実現するjQueryプラグイン「jQuery Alert Dialogs」:phpspot開発日誌

実際に使ってみました

Google Hackathon で作成したファイナルクエスチョン で大いに使わせていただきました。

アプリの方も若干ブラッシュアップしたので、よかったら遊んでみてください。

スパイスラボ神部です。

jQuery に対する素朴な疑問です。

-どうして小僧が好きだ！ - Favorites!

その１：display.none の切り替え

ページのロード時、display:none で非表示の要素について

$("#showdialog").css("display","show");

ではだめで

$("#showdialog").attr("style","display:show");

だとOKなのはなぜなのでしょう？？？

その２：なにで囲われるべき？

opensocial-jquery を使っていると、処理部分が

jQuery(function($) {}

ではじまっているのですが、一般的には

$(document).ready(function() {}

あたりでくくられていることがあるようです。

また、何らかの関数 function の中で jQuery のメソッド？を使う際には、これらで各必要は無く、いきなり $ ではじまる変数でIDセレクタを使って要素にアクセスしちゃっていい物でしょうか。

（自力でも調べてみたいと思います。）

参考

-教えて！Ziddyちゃん jquery select要素のdisplay:noneについて

こちらのやりかたでも IE6 ではうまくいかないケースがあるようですね。

-jQuery.jsとprototype.jsのロジックの組み方に関して : tech.kayac.com - KAYAC engineers' blog

関係無いけど資料が参考になります。

-jQueryで作る Ajaxアプリケーションが好き！ - ILOVEIT(β)
　

スパイスラボ神部です。

なんか、Mozilla Labs の Jetpack というのを使うと、jQuery が書けば Firefox アドオンが書けちゃうかもしれないシロモノらしいです。

-Mozilla Labs Jetpack | Exploring new ways to extend and personalize the Web

jQuery 先生、すごすぎます。

-Mozilla Labsが好きだ！ - Favorites!

追記

IDEA*IDEA でもとりあげられていたようです。

すっごく簡単にFirefoxのアドオンが作れてしまうMozilla Labsの『JetPack』がなんだか良さそうだ - IDEA*IDEA ～ 百式管理人のライフハックブログ ～

まずはチュートリアル映像を見てもらうとよいですが、「すっごく簡単に」は「jQueryのPlug-inがかける程度に簡単に」といった感じでしょうか。

-MozillaのJetpackでブラウザの拡張機能の開発がこう変わる

TechCrunch。ここがホントのネタ元なのか？

-Firefox 3 Hacks Mozillaテクノロジ徹底活用テクニックが好き！ - ILOVEIT(β)

追記２

id:amachang さんが早速コードを見せてくれたよ！

Firefox 拡張を jQuery で書く！ Jetpack を使ってみた。 - IT戦記

ほえ～。HTML が基盤になるんですね。ちょっと OpenSocial っぽい。JavaScript （とそれを乗せる XML や HTML）が書けるとソーシャルアプリや Firefox 拡張が書けるようになるとは…いい流れだなぁ。

追記３

ほかにも試された方たちがいました。

-JetpackでLivedoorReader StatusBar Notifyなんて作ってみた・その一 - iMona@zuzu開発者日記～主に日々の行動記録～

-Mozilla Jetpackについて調べたいこと - hogehoge

追記４

ついに Mozilla Flux にも。

-JetpackはFirefox.nextに統合される - Mozilla Flux

まあ、これだけのものをほおっておく理由はないよな。

-MOONGIFT: » 次世代型のFirefoxアドオンAPI「Jetpack」:オープンソースを毎日紹介

MOONGIFT にも登場。

-話題の Jetpack を試してみた。 - Griever

スパイスラボ神部です。

opensocial-jquery の勉強のために、いろいろと jQuery の表現を勉強していますが、やっと何となく慣れてきました。OpenSocial アプリのなかで使えるものを中心に、いくつかの jQuery っぽい表現を紹介してみたいと思います。

-オルタナティブが好きだ！ - Favorites!

テキスト出力・イベント取得を助ける jQuery

jQuery をを使ってみて感じたのは、普通 JavaScript を DOM を通じて指示代名詞的に「これ」とか「あれ」として使うところがあるのですが、そういう側面から評価すると「より直感的で使いやすい！」という感じです。

ヒアドキュメントもどき

JavaScript も慣れてしまえば…というところがあるのですが、ちょっと困るのがヒアドキュメント的なものがないところ。その代替として ガジェットWatch: JavaScriptでHTMLを出力するときの小技(ヘッダメニューの続き) なんてエントリもありますが、この方法だと行末に￥マークによるエスケープが必要なのでちょっとかっこわるい＆コピペがしにくい問題があります。

そういうときには、素直に

$("#ID名").html('挿入したいHTML')

みたいにすると、ほぼヒアドキュメント的なことが出来るようです（ニュータイプなjQueryその3-HTML要素アクセス ）。

※もちろん、こちらも改行が入るときは￥マークが必要になるみたいですが…

イベント処理もらくらく

jQuery はすべてのドキュメント要素をデフォルトで監視しているのかどうかわかりませんか、とにかく下記のような簡単な手順で（HTML要素に onClick などを挿入することなく）イベントを取得することが出来ます。これはすごい！

-jQuery:イベント処理 | [E2]e2esound.com

なにがすごいかというと、やっぱりコードが読みやすくなること。単に短くなっているだけ、という見方もあるでしょうが、ここはやっぱりシンプル=正義なのかもしれません。

※OpenSocial で使うときは、要素を挿入するのとイベントの処理を同じコールバック関数内に置かないといけないみたいです。このへんは妙に律儀ですね。

値のセットと参照

フォーム要素の値の参照やセットも次のように簡単です。

-Javascript/jQuery/input要素のvalueを操作する - 俺の基地

ついつい value としてしまいがちですが、ここにあるように val() とするのが大事ですね。引数なしだとその jQuery での指示部分の value フィールドを取得することができます。

とりあえず

まだまだ序の口なことはひしひしと感じているので、慣れて来て応用が利くようになったらまたエントリをあげてみたいと思います。