jQuery Deferredのpipeにおける返り値の扱い
pipeは返す値で繋ぐ処理のパラメーターが変わるのだけど、たまにしか使わないので毎回動作を忘れてソースを見ている。バージョン1.7.2での動き。 deferred.pipe(function(data) { ... return ?; }); 以降の処理で引数が不要なら何も返さなくていい。引数が1つの場合は return foo; のようにそのまま返せばいい。複数の引数を送る場合はDeferredオブジェクトを返さないといけない（引数が1つの場合は同じ処理を裏でやってくれている）。 return $.Deferred().resolve(foo, bar); // コンテキストどうでもいい return $.Deferred().resolveWith(this, [foo, bar]); // どうでもよくない 何もせずにそのまま値を引き継ぐ場合は（引き継ぎたいパラメーターでresolv
意外と要注意 HTML5データ属性とjQuery Data APIの関係まとめ | ゆっくりと…
前の記事「HTML5でモダンブラウザのCSS3バグを回避するためのハック方法」に関連して、jQuery で HTML5 データ属性にユーザーエジェント文字列を格納する方法を調べていました。その結果、ちょっと整理をしておいた方が良いかなと思う点を共有したいと思います。 ご存知の方も多いと思いますが、jQuery には .data() や jQuery.data() という、DOM 要素に データ を紐付けて記憶しておく仕組みが元々ありました。jQuery 1.4.3 からは、 API レベルでの 親和性 が考慮された形で HTML5 data-* 属性を取り込む仕様が導入されました。 HTML5 時代では、クライアント・サイドで実行されるコード量も増え、データ属性を扱う機会もちょくちょく出てくるのではないでしょうか。そこで今回は、 HTML5 data-* 属性のおさらい jQuery Da
jQueryとも組み合わせて使える汎用的ユーティリティライブラリ·Pot.js MOONGIFT
Pot.jsはJavaScriptで感じる物足りなさを補完する汎用的ユーティリティです。 JavaScriptを素のままで使うケースは減っています。jQueryやMootoolsをいったライブラリを使うケースが多いのですが、そうしたライブラリとも組み合わせて使える汎用的ユーティリティライブラリがPot.jsです。 デモはこのコンソールに出ているものになります。 そのコード。 Pot.jsは実に数多くの機能があります。まずforEach、filter、map、reduce、zip、repeat、someといったイテレートがあります。動作はチェインで可能です。また非同期処理中における例外処理をキャッチできます。speedメソッドによって処理速度を遅くしたりもできます。 ループ処理におけるCPU負荷を軽減させることができ、既存の負荷が高いループ処理をPot.jsを使って置き換えることで負荷を軽減
必殺の .apply()フックを打つべし！ 打つべし！（JavaScript おれおれ Advent Calendar 2011 – 17日目） | Ginpen.com
JavaScript おれおれ Advent Calendar 2011 – 17日目 .apply()で成り済ましができたり仕事をスルーして丸投げしたりする事ができますが、さらにもうひとつ、フックを行う事ができます。 フック(hook)というのはフック船長のフック、鉤爪の事で、処理を「ひっかける」ような事です。ある関数が実行される際に、独自のコードを実行させる事ができます。 フック (プログラミング) – Wikipedia フック（Hook）は、プログラム中の特定の箇所に、利用者が独自の処理を追加できるようにする仕組みである。また、フックを利用して独自の処理を追加することを「フックする」という。 あの処理がどこで呼ばれてるかわからないときに 具体例をひとつ。例えばjQueryで「どこかのタイミングで勝手にクラス名が追加されてしまって困っている」という場合を考えます。その場合は .add
JSコードTips
// 任意の連続した文字列生成 (new Array(10)).join(‘a’); // 任意の内容で初期化された配列生成（要Underscore.js） _(_.range(100)).map(function(n) { return ‘hoge’ }); // 高速なepoch秒生成 +(Date.now ? Date.now() : new Date()) // event throttle（scrollイベントの発生を100msに1回以下に抑える） var timer; $(window).on(‘scroll’, function (e) { if (timer) { return; }; /* hoge */ timer = setTimeout(function () { timer = undefined; }, 100); }); // 最初に一回実行するsetInte
FuncUnitを試してみた - Reports
FuncUnitって？ WEBアプリケーションの単体テストフレームワークです． 公式ページ: FuncUnit 基本的にはjQuery風の記法でユーザのアクションを定義し，JavaScriptの単体テストフレームワーク QUnitでアサートするだけでユーザのアクション（テキスト入力，クリック，ドラッグアンドドロップなど）に対するアプリの動作をテストすることができます． なので，jQueryとQUnitを使ったことがある人であれば比較的簡単にテストコードを書くことができます．また，どちらも使ったことがなくても使う分にはそれほど難しいものでもないので，使ってみることをオススメします． 一回書けば延々ブラウザでポチポチする作業とはおさらばです． また，もう一つ重要な点としてコマンドラインからテストが実行できるという点です（実行中にFirefoxやIEが立ち上がったりしますが）．ということはHud
クライアントサイドJSでもサーバーサイドJSでもうごくテストを書く - Articles Advent Calendar 2011 Amon2
こんにちは! tokuhirom です。日曜日ですね! 今日は Test トラックにかこうとしたけど Perl 関係なさすぎて自重したネタをかこうかとおもいます。 さて、Amon2 の重要なパーツといえる strftime.js ですが、こちらもちゃんとテストしなくてはなりません。strftime とかいちばんテストしやすいうえにバグりやすいのに、テストしてないライブラリがおおくてなさけなくなる今日この頃ですからね。 テストライブラリの選定 さて、Perl ならば Test::More をとりあえずつかっておけばいいのですが、JS の場合はどれをつかうべきかなやむところです。JS の場合、いろんな人がオレオレなテストフレームワークをだしててややこしいことこの上ありません。 こういう場合、Perl でも JavaScript でもライブラリの選定方法はかわりません。譲れない機能、ライブラリの
qunit-tapを使ってnode.jsのテストをproveで行う - すぎゃーんメモ
Shibuya.js テクニカルトーク Test.jsでid:t-wadaさんの話がとても興味深く、 js テスト放浪記 qunit-tapというのが魅力的に感じたのでnode.jsのテストで使ってみました。 GitHub - twada/qunit-tap: A TAP Output Producer Plugin for QUnit quinit-tapとは まずQUnitについて。 QUnit QUnit自体は全然使ったことなくて詳しくは知らないのですが、もともとjQueryのテスト用に作られたテスティングフレームワークで、今はjQueryに関係なく色々な場面でのJavaScriptのテストに使えるようになっている、とのこと。 QUnit is a powerful, easy-to-use, JavaScript test suite. It's used by the jQuer
jQuery Easing Plugin のイージング関数を直接利用する方法
jQuery Easing Plugin のイージング関数を直接利用する方法 はいどうも。ここのところ JavaScript に熱中してます。ということで今回は jQuery の Easing 関数を直接利用する方法をご紹介します。 Easing (イージング) 関数って？ イージング関数とは加速・減速を数式で表したもので、滑らかなアニメーションを表現する際に使われる関数です。jQuery においては jQuery.animate() メソッドの内部で利用されています。標準では linear と swing しか用意されていませんが、jQuery Easing Plugin にて 30 種類ものイージング関数を追加することができます。それぞれの効果についてはこちらのサイトの解説が詳しいです。 そんな素敵なイージング関数ですが jQuery.animate() 以外の処理に応用できたら夢が広
多様なページ内スクロールを選択できる「jQuery.easing.scroll.js」｜LabPad （ラボパッド）
demo 前書 ルネ･クレールと喜劇 ルネ･クレールとチャップリン ルネ･クレールと諷刺 前書 ルネ・クレールに関する一文を求められたのであるが、由来クレールに関してはほとんどもう語り尽された観がある。しかし考えてみると私には別な見方がないでもない。それを書いて見ようというのであるが自分の仕事のことなどを考えると気恥ずかしくてクレール論などは書けないのがほんとうである。今日はひとつ批評家になつて書いてみようと思う。 ルネ・クレールと喜劇 ルネ・クレールについてまつたく何も知らない人から「ルネ・クレールとはどんな人だ」ときかれたならば、私は「非常に喜劇のうまい人だ」と答えるにちがいない。 少しいい方を変えるならば、ルネ・クレールは私に喜劇を見せてくれるただ一人の映画芸術家だともいえる。正直な話、私のクレール観は以上でおしまいなのであるが、これでやめてしまつたのでは『キネマ旬報』の印刷所がひま
jQuery Easing - jQuery 日本語リファレンス
Easing/jQuery easingとは、エフェクトの動きを加速/減速させるための関数です。 例えばフェードアウトの動きを考えたとき、通常は透明度の変化量は経過時間に対して線形です。全体で1秒かかって消える処理であれば、0.5秒経過時の透明度は0.5になります。 しかし、ここでeaseInQuadの動きを適用すると、変化量は線形ではなく2次関数の曲線になります。（下記サンプル参照） そのため、最初はゆっくりと薄くなっていき、後半に急激に消えていくような効果が得られます。 特別なことをしなくても使うことの出来るeasingは"linear"と"swing"の2種類だけですが、プラグインなどを入れることで多くのeasingを利用することができます。 このeasingプラグインでは、version 1.3時点で32パターンが提供されています。 これ以外にもeasingは比較的容易に自作するこ
SidekickをjQueryで書いてみた - 黒羊工房はてな版
＞さらばスカイスクレイパー、IABが標準広告サイズ11種をリストラ http://web-tan.forum.impressrd.jp/e/2011/03/08/9894 タイトルのリストラはどうでもよくて、追加されるインタラクティブ系のうちのSidekickというものを練習として書いてみたのをプラグイン化してみました bsheep/sidekicker - GitHub DEMOはこちら（オレンジの画像をクリックしてください） 使い方はデモを見てもらえばだいたい分かると思うんですが、 $('#sidekick').sidekicker({ kicker: '#kicker', container: '#container', kickback: '#kickback' }); kickerは外側から押し出してくる部分でcontainerは押し出される方。kickbackは造語ですが*1、
初めてのjQuery Mobile＠JavaScript Advent Calendar 2010 - 星屑日記
http://atnd.org/events/10497 16日目担当の@yuribossaです。こういうイベントに参加するのは初めてで緊張してます…(ドキドキ)。普段もJavaScriptはあまり書いてません。家に帰ったら寝ます。休みの日はアイドルを追いかけてます。好きなアイドルグループはももいろクローバーです。たまにGoogle App Engineで変なもの作ってます。Google App Engineではサーバのリソースが限られているので、なるだけクライアント側で処理を行い、サーバ側ではデータを返すだけみたいな構成がスマートらしいです。そこでJavaScriptを勉強するようになりました。クロスブラウザ対策とか面倒なので専らjQueryを使って書いてます。今日はつい先日リリースされたjQuery Mobileを使った開発のまとめとして記事を書きました。jQuery Mobileを網
全画面をスライドとして使うダイナミックなナビゲーションを構築する2KB以下の軽量jQueryプラグイン
全画面をスライドギャラリー風にするダイナミック なナビゲーションをjQueryを使って実装するサン プルです。透過処理が必要ですが、IE6、IE7の 両問題児でも問題なく動いてくれますので、実践 でもプロモーションなどに利用できるっぽいですね。 スライドするとロゴが平行してスライドする事で視差 効果も出しています。 クロスブラウザ対応なので使いどころも出て来るかもしれませんね。ダイナミックに動いてくれますのでプレゼンテーションやポートフォリオ、キャンペーンなどに使うのも面白そうです。 Awesome Scrolling Navigation 全画面がスライドします。背景に画像を指定しているのでテキストなんかも入れられるっぽいですね。試していませんけどこれは結構使えそうです。 動作確認していただくと分かるかと思いますが、左上のロゴ部分も微妙なスライドをして視差効果を出しています。 マークアッ
はじめてのjQueryMobile - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） 先月10月にアルファリリースされ、つい先日Alpha2が公開されたjQueryMobile。 新たなモバイル向けフレームワークとして期待が高まりますが、 今日はそんなjQueryMobileを、極めてザックリと紹介してみたいと思います。 だいたいのイメージを掴んで頂ければ幸いです。 公式 : jQuery Mobile | jQuery Mobile jQueryではなく、jQueryUIのモバイル版 と、言うべきでしょうか？ jQueryMobileが提供してくれるのは、 スマートフォン向けのテーマスタイルシートと、 それをより簡単にレンダリングする為の仕組みです。 はじめ勘違いしていたのですが、 jQueryをモバイル向けにチューンした物ではないので注意。 使用の際にはjQueryを一緒に読み込む必要があります。 <link
ECMAScript 規定: ドル記号は機械的に生成されるコード中のみの使用を意図される
えんじに🐈にゃーん🍓🫐🍅🌽🍈🍇🦝 @uupaa うん。$ ってネームスペースとしては全く効率的じゃない。というか疲れる。 PHP やると疲労感を感じるのは $ の使用を強要されてるせいもあるとおもう えんじに🐈にゃーん🍓🫐🍅🌽🍈🍇🦝 @uupaa $ はそもそも人が利用する識別子として許されてないってのもデカイです(ECMAScript規約違反)。 著名ライブラリ達は平然と $ を利用していますが、あれルール違反だから
jQueryクックブック
jQueryのレシピをベストプラクティスとともに幅広く収録しています。jQueryコミュニティの第一線で活動する著者陣が、必要な情報とテクニックを網羅して提供。 日々のプロジェクトにjQueryを使う一流のフロントエンド開発者たちのパターンやプラクティスが盛り込まれており、jQuery入門とその基礎的なベストプラクティスの解説からはじまり、実際的な課題に対するレシピをトピックごとに取り上げます。読者は、jQueryの基礎的なテクニックをふまえながら、画期的な問題解決のためのテクニックやアイデアを吸収することができるでしょう。jQueryを使って作業を行う、またはjQueryを使いたいと考えている開発者が探し求めていた書籍です。 まえがき はじめに 1章 jQueryの基礎 レシピ1.1 HTMLページでjQueryライブラリコードをインクルードする レシピ1.2 ページの読み込みが完了する
QUnitの基本的な使い方 - but hopeful
[追記] 2013/9/1 三年前の記事が未だに読まれているようなので、一応書いておきますが、あれから色々変わってもっと良いものも出ています。 QUnit でも別に問題はないですが、今から QUnit を使うよりは http://visionmedia.github.io/mocha/:title=mocha] とかの方が個人的にはお勧めです。とにかく、今は色々あるのでもっと別の選択肢調べて見ることを個人的にはおすすめします。別に QUnit は使わないほうが良いとは言いません。 JavaScriptのテスティングフレームワークはいろいろありますが、自分は今主にQUnitを使っているので、少し使い方をまとめて見たいと思います。 [追記]今回作成したソースを上げました。ninja.js QUnit とは QUnitはもともと、jQueryをテストするために開発されたJavaScript Un
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[デモ]jQueryで簡単なページスクロール 改良001｜factory.yusukenakanishi.com
IDEA * IDEA
