tech.kayac.comで公開されたjQuery関連記事まとめ(?2009年版)

最近、このブログ方向性危機感抱いています。agoです。

そろそろあちこちで「2009まとめ」的な記事が見られるようになってきましたが、tech.kayac.comでもjQueryに特化してまとめてみたいと思います。

jQueryを使ってphpで言うところのstrip_tagsとかhtmlspecialcharsする方法

かなり簡易的な方法ですが、それぞれ一行で出来たので記事にしてみました。

JSをphp的に使用したい場合、php.jsと言うのもあるようです。

jQuery.liveをfirefoxで使うときの注意点

jQuery 1.3系でサポートされた$().live()で実際はまった問題の紹介です。

JS制作に欠かせない3つのツール

Flash制作に欠かせない3つのツール・まとめ編 | エントリー | _level0.KAYAC

_level0.KAYACとの連動記事です。

jQuery時代に生きるクロスブラウザ対応の知恵 8選

基本的な部分からコアな部分まで、過去にはまった経験のあるブラウザ差異をまとめてみました。

1 Objectリテラル内の末尾カンマ
2 console object
3 文字列の末尾を取る
4 IEでサポートされないhtmlの記述
5 コメントに日本語があった場合の文字コード認識失敗時の挙動
6 .replace()の第二引数
7 IME on時のkeyevent
8 DOMに追加されていないa tagのhref

jQuery的なarray like objectの作り方

jQuery object風な設計をする場合に必要になるかもしれません。

あまり一般的な設計ではないですが、jQueryをデザインテンプレートとして考えれば有効な場面もあるかもしれません。

jQueryを読むために知っておきたい6つの知識

jQueryを読むときを想定していますが、通常のJSを読むときにも使える内容もあると思います。

1 変数の複数同時宣言と代入
2 slice().sort()
3 Sizzle
4 thisがArray like
5 .extend()を使用したobject拡張
6 jQuery.event

jQueryを使い始めたときに感じる13の疑問

「これからjQueryを始めたい」、「使い始めてそろそろ一ヶ月」といった方を想定して書きました。

1 そもそも何で使うの?いまでも困ってないよ
2 何か特殊なことができる?
3 何が難しいの?
4 なんで$('#id')で配列が返るの?必ず一つしか返らないよね?
5 なんでobjectじゃなくて配列?
6 素のhtml elementがほしい
7 $.eachとかださくない?
8 continue、breakはどうしたらいい?
9 また別のライブラリが流行るんじゃない?
10 class作りたい
11 オブジェクト指向的にツリー構造で設計したい
12 $(this).attr('href')って意味ある?this.hrefが動かないブラウザなんてないでしょ。
13 どのレベルでselectorを書いていいかわからない

jQuery言語入門

「とにかくjQueryの機能をフル活用して開発するなら」という前提で書いてみました。

若干ネタな部分もありますが、あまり知られていない機能もあるので「もっとjQuery的に書いてみたい」と言う方には参考になるかもしれません。

文法
function
変数
セレクタ
イベント

細かすぎて伝わらないjQueryの機能5選

若干タイトルから入った感はありますが、1、4はわりと参考にしていただけるかと思います。

1 .addClass, removeClassはスペース区切りで複数のclassを渡せる
2 $('<div>')は閉じタグを自動的に補完する
3 設定済みのevent handlerに名前を設定する
4 複数eventの同時張り付け
5 IE6の.getAttribute()でフルパスが取得できない問題の対応

イメージマップでhoverを実現する

書きながら「需要なさそうだなー」と思ってました。

リニューアル後のsitemapとjQuery-visitedとオチ

「たまにはキーボードも洗いましょう」と言う記事です。

jQuery使いが陥りやすい罠

いまでもたまにはまります。最近は「むやみに$().live()を使う」ってのも入るようになりました。

1 グローバルの名前空間を使わない
2 .prototype拡張を避ける
3 とりあえずjQuery拡張にする
4 何でも一行で書こうとする
5 無理にselectorで表現しようとする
6 必要以上にブラウザ互換を取る
7 jQueryに存在しない機能を使わない
8 jQuery.funcに違和感を感じない

jQuery.jsとprototype.jsのロジックの組み方に関して

社内勉強会の資料を公開しています。

Prototype.jsとjQueryの差異
jQueryの考え方
よりよいjQueryの使い方

jQuery、script.aculo.us、JSTweenerのアニメーションfps比較

各アニメーションライブラリのFPSを比較しました。

JSTweener以外は基本的に外部から変更できないので、「ちょっと速度を落としたい」と言う場合は内部のソースをいじる必要があります。

javascript libraryを作るときに便利な3つのfunction

「javascript」と書かれてますが、結構jQuery依存だったりします。

3は結構便利なので、script tagで読み込むライブラリを作成される方にはお勧めします。

1 script tagからのパラメータ読み込み
2 setIntervalを使った状態監視
3 $.dataを使ったスタイルの保存

blogparts framework suzunariを作成しました。

一般的なブログパーツを作成する場合、このJSだけでほぼ足りるので重宝しています。

ブログパーツを作成される方には参考にしていただけるかと思います。

jQuery Plugin作成時の3つの注意点

jQueryはclass的なもののサポートが少ない分、処理のplugin化が容易に可能です。

「もうちょっと処理をまとめたい」と言う方にお勧めです。

1 $.dataの活用
2 ショートカットmethodの用意
3 イベントネームスペースの活用

jQuery.opensocial_simple Pluginを作成しました。

実はjQuery + opensocialの組み合わせでは世界初だったりします。

また、jQuery.opensocial_simpleはいまでも開発を続けており、弊社のmixiアプリでもメインで使用しています。

// 誰かドキュメント書きません?w

jQueryを使うときに気をつけるべき8のポイント

当時としてはなかなか面白い記事だったと思います。

また近く同じテーマでjQuery 1.3系での記事を書きたいです。

ちなみに、この記事の内容は1.3系にも適応できます。 (そもそもjQueryのバグではなく、jQueryの仕様やブラウザ差異に関する内容なので)

1 $().filterにstring以外のものを渡すとエラー
2 IEで<button>のvalueを.val()経由で取得できない
3 $.mapで配列を返すと、展開されてひとつの配列が返る
4 $.getJSONでJSONとして解析不能な値が返るとcallback functionを呼んでくれない
5 IE6でselectに対してoptionを追加後、.valで値を設定しようとすると「selected プロパティを設定できませんでした。未定義のエラーです。」が出る
6 Firefoxでdocument.bodyに追加されていない:checkboxに対するcheckedが.html()に反映されない
7 :checkboxのcheckedがIEとFirefoxによって形式が違う
8 IE6で複雑な要素をDOM treeに追加しないまま操作すると、正常に反映されない場合がある

jQuery.ime_external Pluginを作成しました。

JSからIMEを操作するpluginを作成しました。 (ほんとはブラウザ自体がサポートしてくれるのが一番なんですが、、、)

Flashを経由してIMEの状態を変更しているので最新のブラウザでは動かなくなっているかもしれません。

jQuery.autouploader Pluginを作成しました。

ファイル参照と同時にimg tagを書き出すjQuery pluginです。

jQuery.brbr Pluginを作成しました。

mouseoverで文字を揺らすjQuery pluginです。

全画面ジャック型のblogpartsを1ファイルで作成する方法

サイドバーと連動した全画面ジャックブログパーツを作成する方法です。

swfはimgと違い、position、overflowを変更すると内容がリロードされるため小手先で対応しています。

jQuery.dataの使い方

jQuery().data()はjQueryを使う上でのキモの部分だと思います。

blogpartsでjQueryを使うときの読み込み方

以下のような点に気をつけたjQueryの読み込み方です。

名前空間を汚さない
複数のversionのjQueryが読み込まれていても衝突しない
ライブラリを全体のソースの最後に読み込む
jQuery Pluginの使用も想定

jQueryのイベントネームスペース

イベントネームスペースを使用すると、jQuery pluginでイベントを設定した場合でも外部からそのpluginに関するイベントのみ停止させることが可能です。

jQuery pluginを作成される方には参考にしていただける思います。

event式autoKana.jsの紹介

setIntervalでは無く、純粋なイベント駆動の読み仮名自動入力用jQuery pluginです

jQuery Pluginの書き方

jQuery pluginの基本フォーマットをご紹介しています。

window.$に依存しない
最後はreturn this;
複数要素が指定されている場合を考慮する
名前空間を汚染しない

FFのtext eventに関して

FxではIME on状態ではontextと言うイベントが発行されています。

FirebugのLog Eventsに関して

firebugで指定要素に発生しているすべてのイベントをconsoleへ出力する方法に関しての記事です。

カヤックではネタに走らなくてもブログの書ける技術者も募集しています!