IDEA*IDEA » jQuery関連

ブラウザサイズに合わせて貼り付けた動画を自動的にリサイズしてくれる『FitVidsJS』

taguchi — Wed, 07 Sep 2011 00:58:56 +0000

あ、これ、どこかで使いそうなのでメモ的にエントリー。

こちらのjQueryプラグインを使えば、貼り付けた動画がResponsive Designに対応してくれますよ（つまりブラウザサイズにあわせて自動的にリサイズってことですな）。

FitVids from Dave Rupert on Vimeo.

↑ 説明動画はこちら。

詳細＆ダウンロードは以下からどうぞ。デバイスが多様化しつつありますからね・・・、こういうプラグインはうれしいところです。

» FitVids.JS – A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

JavaScriptで画像にさまざまなエフェクトがかけられる『JSManipulate』

taguchi — Mon, 08 Aug 2011 00:07:29 +0000

jQueryのプラグインですかね。HTML5のCanvasを介して画像に高度なエフェクトをかけられるようです。

↑ サイト上からデモすることもできます。

↑ エフェクトの数が多いのも魅力ですな。

↑ Fireworksでうまくできないモザイクもこのとおり！

↑ なお、JQueryのプラグインとして使うには12ドルでライセンスを購入する必要があります。

jQueryのプラグインとして使った場合、エフェクトはスタックしておいてクリックするたびに変えることができたり、クリックしたところで渦巻きを発生させる、ということができるようですね。

画像編集系のアプリを作っている人はいかがですかね。詳細＆ダウンロードは以下からどうぞ。

» JSManipulate – Javascript Image Filters & Effects

Growlライクな通知メッセージを表示させるjQueryプラグイン『Meow』

taguchi — Fri, 08 Jul 2011 06:33:13 +0000

まぁ、よくある通知メッセージ用のjQueryプラグインですが、Nyan-catを使っているところにセンスを感じたのでご紹介ｗ。

↑ なんかかわいいぞ！

bind()で実装できるすべてのイベントをトリガーに出来るようですな。もちろんアイコン画像を変えることもできますよ。

ご興味がある方は以下からどうぞ。

» Meow: A Growl Work-Alike for jQuery

jQueryを高速化するために覚えておきたい10のTips

taguchi — Thu, 07 Jul 2011 05:14:22 +0000

jQueryを高速化するためのTipsがまとまっていましたよ。jsPerfなるツールを使ってちゃんと計測している点が素晴らしいですよ。

jQuery Proven Performance Tips & Tricks

View more presentations from Addy Osmani

全部で10個（+Bonus）紹介されていますが、どれもサンプルコードがわかりやすいのでおすすめです。

最新のjQueryを使おう！
どのセレクタが速いか、どれが遅いか理解しておこう！
Nodeの親子関係を理解しよう！
jQueryを使うべきところを見極めよう！
キャッシュはあなたのお友達！
Chainを使おう！
delegate()の使いどころを覚えよう！
DOMはDBじゃないよ！
ループの使いどころを理解しよう！
jQueryオブジェクトは必要なときだけ作ろう！

jQueryを良く使う人は一読しておくと良いですよ。

» jQuery Proven Performance Tips And Tricks (Slides)

CSS3とjQueryでクールな通知バーが作れるチュートリアル

taguchi — Wed, 06 Jul 2011 01:22:20 +0000

これはメモしておこう・・・。CSS3とjQueryでクールな通知バーが作れるチュートリアルですよ。上からしゅっと出てくる感じがかっこいいです。

↑ なんかの情報を提示したり。

↑ 処理の成功をお知らせしたり。

CSS3のコードが参考になりますな。詳細＆デモは以下からどうぞ。

» Cool notification messages with CSS3 & Jquery – Red Team Design

jQueryで各種アニメーションを実装するための『morf.js』

taguchi — Fri, 01 Jul 2011 07:30:56 +0000

こいつもメモしておこう。jQueryで各種アニメーションを実現するためのプラグインですよ。CSS3を使ったものですな。

↑ 種類がいっぱいあって素敵。

バウンスするやつとか、しゅっと動いてぴたっと止まる奴とか、素人が計算するには難しいものばかりが揃っていて使い勝手が良さそうです。

その場でデモを見られたり、コードを見られたりするのも便利かと思います。処す愛＆ダウンロードは以下からどうぞ。

» Morf.js – CSS3 Transitions with custom easing functions

HTML5による、かっちょいいミュージックプレイヤーが作れるjQueryプラグイン『HTML5 Music Player』

taguchi — Tue, 14 Jun 2011 02:25:15 +0000

いつか使うかも？とふと思ったのでメモ的にエントリーしておきます。HTML5によるMusic Playerらしいです。デザインがシンプルで素敵。

↑ こんな感じ。

プレイリストもJSで渡せばOKぽいですな。詳細＆デモ＆ダウンロードは以下からどうぞ。

» HTML5 Music Player

インタラクティブな白地図を埋め込むためのjQueryプラグイン『jVectorMap』

taguchi — Thu, 09 Jun 2011 04:17:09 +0000

ちとメモ。インタラクティブな白地図を埋め込むためのjQueryプラグインすよ。いろいろオプションがあって便利そう。

↑ こういう奴ですな。

国コードを返してくれたりするのでコールバック関数なんかを使えばかなり使えそうですな。

詳細＆ダウンロードは以下からどうぞ。

» jVectorMap

なぞって突破させるユニークなCAPTHAを実現するjQueryプラグイン『MotionCAPTCHA』

taguchi — Wed, 08 Jun 2011 01:49:50 +0000

へー、こういうのもあるんだ・・・。タブレットとかにはいいかも。

↑ なぞれ、と言われる。

↑ なぞったらOKになった！

多少線から外れても認識してくれるところが賢いですね。実用的かどうかは使うシーンによりますが、覚えておいてもいいですね。

デモはこちらね。

» MotionCAPTCHA Demo

詳細＆ダウンロードはこちらから。

» MotionCAPTCHA – Stop Spam, Draw Shapes – Joss Crowcroft

初心者向けのJavaScript&jQueryデザインパターンが学べる電子ブックが無料配布中

taguchi — Mon, 23 May 2011 04:44:36 +0000

ちとメモ的にエントリーしておきます。デザインパターンってなんじゃらほい？という初心者向けの電子ブックですよ（英語だけど）。

JavaScriptとjQueryを使って解説しているようなのでモダンな感じでいいんじゃないでしょうかね。

↑ 無料配布がうれしい。

ePubやHTMLでダウンロードできる他、オンラインでも読めますよっと。興味のある方は以下からどうぞ。

» Essential JavaScript And jQuery Design Patterns – A Free New Book