prototype.jsからjQueryに移行するたったひとつの冴えたやりかた - os0x.blog
どうもこんにちは、os0xです。 実は(Twitterに書いただけで)ブログに書いてなかったのですが、3ヶ月ほど前からクックパッドで働いています*1。なんかもう今更ですよね、すみません。 さてさて、クックパッドですが、つい一昨日までprototype.jsを使っていました。で、昨日jQueryへの移行をリリースしたところだったりします。 というわけで、その辺の話を少し書いてみたいと思います。 そもそも、なんでjQueryに移行するのか まあ、prototype.jsとjQueryどちらを使うかと問われたら、大抵の人はjQueryと答えますよね。確かにjQueryの使いやすさは魅力的です。使いやすいということは、みんなでjQueryを使ってサービスを作ることができます。特定の誰かに依存してボトルネックになったりすることがないなら、それは素晴らしいですね。 しかし、ライブラリを変えるのは簡単な
アイコンがふわっと拡大するjQuery – creamu
マウスオーバー時に気持ちのいい効果をつけたい。 そんなときにおすすめなのが、『BubbleUP』。アイコンがふわっと拡大するjQueryです。 アイコンにマウスオーバーすると、ふわっとサイズが大きくなりますね。動きが滑らかで気持ちいいです。 デモは以下から。 jQuery Menu Plugin: BubbleUP 実装方法も詳しく解説されているので、ぜひ見てみてください。 Learning jQuery: Your First jQuery Plugin, “BubbleUP” ブログ遅くなりました。。昨日は書けなかった。すんまへんm(_ _)m 急いで作業しているところでOSが起動しなくなり、ここ数年で一番大変な日を過ごしました。。。 セキュリティーについて深く考えさせられたので、心機一転してがんばります。
[JS]複数の打ち出し画像をスライドのアニメーションで変更するスクリプト
サイトのトップページやプロモーションページに最適な複数の画像をスムーズなアニメーションでスライド表示するスクリプトをSoh Tanakaから紹介します。 実装のイメージ 画像のスライドはコントローラーでの手動操作と自動操作に対応しています。 スクリプトのベースにはjQueryが使用されており、HTML/CSS/JavaScriptのコードも紹介されているのでカスタマイズも可能です。 Inspiration 上記のスクリプトのようなテクニックを使用したサイトのショーケースです。 フレームやコントローラーなどUIをサイトのテーマにあわせるといっそう洗練された印象を与えます。
GoogleMapみたいに画像をズーム＆グリグリ移動できるjQueryプラグイン「Mapbox」:phpspot開発日誌
GoogleMapみたいに画像をズーム＆グリグリ移動できるjQueryプラグイン「Mapbox」 2009年12月01日- GoogleMapみたいに画像をズーム＆グリグリ移動できるjQueryプラグイン「Mapbox」。 自分で実装するとなるとかなり骨が折れそうなこの機能もjQueryプラグインで簡単に実装できるみたいです。 マウスホイールでズームし、ドラッグして地図移動が可能 ズームとか移動のコントローラーを付けることも可能で、これなら初心者にも簡単に気付いてもらえますね。 設置はjQueryを使うので、マークアップでズーム用に画像を数枚置いておき、$("#viewport").mapbox({mousewheel: true}); のように初期化するだけでOKです。 オプションも多数あるのでカスタマイズも出来ます。 ズーム前後に実行できるイベントハンドラも設定可能なので、柔軟性が高い
ハイテンションAjax入門 - 三等兵
JSが少しできる人ならうじうじ考えるほどのこともでもない！ 何も難しいことはない！ぶっとんぢまいなよ！ヒャッパー！！！ というノリでAjaxを学んでみました。醜いです。 Ajax入門 Ajaxはいろいろできるんだぜ！ 以上入門終り！キミは完璧だ！次いけ！ Ajaxは非同期通信だかなんだかそんなもんはどうでもいいんだ！ どうでもいい！そんなことよりもXMLHttpRequestオブジェクト生成！ var request = false; if(window.XMLHttpRequest) { request = new XMLHttpRequest(); //frefox ie7,8 safai opera } else if(window.ActiveXObject) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); // ie6
グーグルのJavaScriptツール集大成「Google Closure Tools」
2009年11月5日，Googleは自社サービス製品であるGmail，Google Maps，Google Docsなどの開発に使用しているJavaScriptアプリ開発ツール群「Google Closure Tools」を一般公開しました。 "Closure"は一般的に，閉鎖や閉店といった意味で使われます。ツールの命名としては少しネガティブなニュアンスを感じますが，Google Closure Toolsの場合は，終結といった意味で，開発プロジェクトにおける最終ステップの仕上げ用ツール。すなわち“栓”という意味で中身があふれ出さないようにキッチリ閉めておくものといった意味合いから命名されているようです。 Ultimate（究極）に近い意味でGoogleの自信の表れと受け取った方がいいかもしれません。Googleで新規公開になったプロジェクトとしては珍しく，ベータ版の表記もありません（Go
jqueryでウェブサイトをリッチにするプラグインまとめ « vanillate
jqueryのプラグインのまとめです。jqueryはjavascriptベースのライブラリのようなもの。画像やメニューに動的な操作を与えたりすることが可能です。また、HTMLソースも複雑になりにくく、デザインをCSSで操作可能なものが多く、ウェブデザインをより魅力的にすることができます。 フェードしながらスライドするjQueryプラグイン デモ jQuery ListMenu Plugin デモ 大量のアイテムもすっきりとリストにできます。 Sliding login panel with jQuery デモ ログインフォームもおしゃれに。常に表示しておく必要はないですよね。アニメーション付きでぶらさがってくるこんなプラグインはいかがですか。 create a better jQuery stylesheet switcher デモ スタイルシートをjqueryで切り替えるプ
フォントサイズを調整するJavaScript「fontScaler」
twitter facebook hatena google pocket フォントのサイズをユーザーが調整できるサイトは多いですが、大中小と制作者側で決めてしまってよいのでしょうか？ jQueryプラグイン「fontScaler」は+-でも調整が可能です。 sponsors 使用方法 fontScalerからファイル一式をダウンロードします。 <link rel="stylesheet" type="text/css" href="jquery.fontSizer.css" media="screen" /> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.fontScaler.js"></script> <script ty
[JS]ホバー時に光源が移動するエフェクトがかっこいいスクリプト
マウスのホバー時に、光源がカーソルに追従するエフェクトがかっこいいスクリプトをcoders.meから紹介します。
jQueryを使い始めたときに感じる13の疑問 : tech.kayac.com - KAYAC engineers' blog
来週は私が夏休みなので更新はない予定です。agoです。 最近、人にjQueryを解説する機会があったので、昔を思い出してjQueryを使い始めた頃に感じる疑問を書いてみたいと思います。 1 そもそも何で使うの？いまでも困ってないよ 作成する内容にもよりますが、慣れると使用しない場合に比べて記述するコード量が3分の1程度まで減ります。 また、変数、条件分岐、繰り返しが減るのでバグが発生しにくくなります。 2 何か特殊なことができる？ 結局できることは変わりません。 jQuery自体JSで書かれてますし、記述の自由度もJSの制約に制限されます。 3 何が難しいの？ 文法がややjQuery的になります。 参考 jQuery言語入門 jQuery自体のコード量は少ないのですが、独特の記述法が多く慣れるまで多少時間がかかるかもしれません。 また、CSS Selectorの知識はほぼ必須です。 特にマ
Webデザイナーのための美しいjQueryプラグイン22 – creamu
Tutorial9で、Webデザイナーのための美しいjQueryプラグインが紹介されています。 ざっといくつかご紹介。 » jQuery.popeye – an inline lightbox alternative lightboxをギャラリーのようなインターフェースに代替したjQuery.popeye » jPlayer – jQuery mp3 player plugin jQueryで作るmp3ミュージックプレーヤー » jQuery form plugin jQueryで非同期通信のフォームを実装 » easyDrag jQuery plugin 簡単にコンテンツをドラッグ&ドロップできるようにするプラグイン » jQuery accordion plugin – vertical 垂直方向のアコーディオンメニュー » Switch stylesheets with jQuery
リアルタイムフォームバリデーション jQuery.validation.js :: 5509
This domain may be for sale!
[JS]jQueryのプラグイン33+1選 -2009年7月
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
30 Ajax Lightboxから使えそうなものを9個ピックアップ
通称『 Lightbox 』のまとめ記事ですね。 jQuery、prototypeの両方をカバーしている記事で、非常にボリュームのあるエントリーがあったのでご紹介。 使い易いLightbox Lightboxって何？っという人がいたらまぁ以下の画像をクリックしてもらえればわかります。 （携帯ユーザーのアクセスが最近多いですが、携帯では確認出来ません） とりあえずページを全て読み込んでからでないとJavaScript動かないようにしてるので、このブログのページを全て読み込んでからクリックしてみてくださいませ。 こんな感じでちょっとコジャレた味のある演出効果が得られるスクリプトですね。 興味のある人は試して見ると良いかもしれない。 １）Lightbox2 Lightbox系という一つのジャンルを生み出した最もオーソドックスなタイプ。 prototype.jsが必要になります。 ２）Lightb
jQuery List – A Blog For Coders & Programmers
CSS is an acronym that stands for cascading style sheets and refers to a set of instructions that controls the appearance of a web page. The formatting principles of CSS are supported by most browsers include Firefox and IE3. In comparison with HTML, CSS provides more formatting options and finer tuning for instance, instead of being stuck with 7 font sizes one can simply use an infinite number of
[JS]設置が簡単なパネルをスライド表示させるスクリプト -Slide box
divで実装したパネルをページの上部から、スムーズなアニメーションでスライド表示させるスクリプト「Slide box」を紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MITYA.CO.UK | Scripts | Animated table sort (REGEXP friendly)
Site Under Maintenance
moto-mono.net
[JS]ズーム機能もあるカルーセルのスクリプト -Moving Boxes