タグ「jquery」が付けられているエントリー

ある日，@expl01tの中のacさんから，こんな依頼を受けました．

@k4403 [ac] 今から依頼したいお仕事の内容をつぶやいてみるテスト．4403さんを「CSS2.0つぶやきプロジェクト」隊長に任命します．2.0の会場でつぶやいたら，表示するようにしたいです．

Twitter / exploit: @k4403 [ac] 今から依頼したいお仕事の内容 ...

ふむ．という漠然とした依頼を受けたので，お互いのイメージを確認してから，作れそうな予感を感じたので，プロトタイプを作成してみた．ご存じの通り，自分で書くコード量は最小にしたいので，作成に当たっては，まず使えるライブラリが無いかどうかを確認しました．結果としては，JuitterというjQueryを使ったライブラリがものごっつ目的のものそのままだったので，活用させていただきました．

というわけで，わずか一晩でプロトタイプは完成し，細かいところを修正・変更しながら，数日で完成しました．簡単でよかった～♪完成品はこちら．

Juitter for CSS×2.0 in CSS2009

jQueryバリバリで書いてます．Fx3.5とChrome4とIE8で動作確認してます．たぶん，モダンブラウザであれば，どれでも動きます．そのため，ぶっちゃけると，HTML+JavaScript+CSSで動いているので，全体を丸々保存すれば，ローカルからでも実行できます．

CSS×2.0当日はこれと同じものを出すかどうか分かりませんが，おおよそこのようなものが展開されていると思います．ご活用いただいて，皆様に楽しんでいただけたら，うれしいですっ！

ちなみに，どうでもいい開発こぼれ話をすると，当初はAIRを使おうかと思っていました．しかしながら，AIRは書いたことがないのでやだなーと思っていた次第です．JSは書いたことがあるので，まだ良かったです．

関連：
CSS×2.0ではTwitterでつぶやいて下さい：exploit&ac：So-net blog

初めてjQueryを使った（やや嘘を含む）のだが，包み隠さず正直にその感想を述べるならば，「超便利」の一言に尽きると思う．JavaScriptでの実装をしたことがないわけではなく，普通のJSとPrototype.jsを少々．本格的にJSで何かを書いたことはないです．そんなボクが，やめればいいのに，クライアントサイドだけでグリグリ動くアプリを作ることに．一応，ほかの言語も検討しました．C言語とPHP．どっちも向かなさそうだったので，JSに頼った次第です．

JSを選んだのには理由があって，Twitterでもつぶやいた（誰も反応しなかったけど）んですが，Pubsubhubbubデモみたいなのを作りたかったんです．

http://www.youtube.com/watch?v=ewQBgbysSOQ&fmt=18#t=2m45s 大まじめなつぶやき．pubsubhubbubのデモvideoにある追加されたのがリアルタイムに更新されていく見せ方はどのように実装するんですか？？

Twitter / 4403: http://bit.ly/AAYTg 大まじめなつ ...

で．いろいろと調べた結果，jQueryでできるらしかったのです．それがshow()とhide()なんです．そんなわけで，jQueryでプログラムを書いてみたんですが，テラ便利．何が便利かって，充実のプラグイン．かゆいところまで手が届きすぎます．車輪の再発明は不要なので，ライブラリをグリグリ使わせていただいて，自分が手を加える箇所は最小限に．怠けているんじゃないよ？コードの信頼性を上げているんだよ．オレの書くコードなんて信用ならないもんね．それから「そんなことまでできるの！？」と驚きを隠せないのが，jQuery UI．カラーピッカーやスライダーが秒殺実装可能です．

あとは，なんといっても，Ajaxも簡単にできます．AjaxはJSの醍醐味ですね（ちがう？）．当初はサーバサイドにもスクリプト（PHPでやるつもりだった）をおいて，JSONでAjaxな感じを思い描いていたわけですが，想定外にjQueryが強力で，クライアントサイドだけで事足りました．すごいぞ！jQuery！デレデレです．

まとめ：
jQueryラブ． 

関連：
jQuery: The Write Less, Do More, JavaScript Library
Plugins | jQuery Plugins
jQuery UI - Home
jQuery 1.3.2 日本語リファレンス
jQuery入門 – ポンクソフト
jQuery 開発者向けメモ

jQuery用プラグイン「jquery.suggest」を使って入力補完機能を実装してみる : アシアルブログ

面白そうだったので，実装してみた．簡単すぎて，拍子抜け．

jquery.suggestのサイト等から以下の4ファイルを入手する．

• http://www.vulgarisoip.com/files/jquery.suggest.js
• http://www.vulgarisoip.com/files/jquery.suggest.css
• http://www.vulgarisoip.com/files/search.phps
• http://code.jquery.com/jquery-latest.js

search.phpsは参考にするだけなので，実際には使わなかったです・・・．続いて，MT側にテンプレートを作成します．インデックステンプレートに新しいカスタムインデックステンプレートを作成します．ファイル名等は適当に決めて下さい．コードも一部書き換えています．

このテンプレートによって作成されるsearch.phpは以下のような感じ．一部抜粋．

ここまでできれば，完成したようなもの．次に，検索窓がどのような設定になっているかを，適切なテンプレートを開くか，ページのソースを開くか何かして，確認します．

このブログではid="search"が設定されていることが確認できます．仕上げに，jqueryなスクリプトが走るように，ヘッダを書き換える．モジュールテンプレートのヘッダに次のように追記する．

赤線を引いた部分が検索窓のidと一致するようにします．気をつけるのはそこだけ．簡単だねっ！

実装結果．

ね．簡単でしょ？（ボブ風）