タグ別アーカイブ: jQuery

jQueryとAngularJSにおけるAjaxの微妙な違い

AngularJS の勉強、始めました。

最初はそのプログラミングに関する独特のお約束事項にイラッとしましたが、キモであろう DI を「疎な関係のクラスを(実行時に)結びつけるのに必要な仕組み」と割り切り、DI – 猿でも分かる! Dependency Injection: 依存性の注入 で引用されている ITpro 記事クラス図 をコードから想像できるようになったところで、それなりに面白くなってきました。

何より「jQuery が要らなくなる!」のがとっても快感なんです 😉 (つらい時もあるけど…)。

さて今回は、jQuery まみれのページを AngularJS で書き換えた時に気付いた Ajax の動作 − 非同期通信の戻り値をいつどこで DOM に反映するか − に関する話題を書いてみます。

続きを読む

そのコード、本当にjQueryが必要ですか?ネイティブ関数の代替Tips集

sitepoint から「本当にjQueryが必要ですか?」とタイトルのついた3本の記事を紹介します。

言うまでもなく著者の Craig Buckler さん の趣旨は、「jQueryを使うのは止めよう」ではありません。ネイティブ関数で代替えできるのは、古い IE のサポートが必要なく、ごく簡単なケースに限られます。その代わりに得るものは「速さ」です。そこで、どの程度「速い」のかを所々 jsperf の結果で補ってみたいと思います。

また JavaScript 初学者の人も、jQuery が内部でどう苦労しているのか知るのも良いと思います。私自身の勉強も兼ね、その他の情報も色々と補っていますので、良かったら見ていって下さい 😀 。

続きを読む

jQueryプラグインのオプションとHTML5 data-*属性でハマった時に幸せになれるかもしれないまとめ

html5 data parser

意外と要注意… なんて記事を書いておきながら、実際に HTML5 のカスタム・データ属性にオプションを指定する jQuery プラグインを作っていて、かなりハマってしまいました。

data-* 属性に書いた複雑なオプションを jQuery Data API で処理するには、JSON で指定しなくちゃダメなんですネ。ちゃんと ドキュメント にも書いてありました 😉 。

ということで、「もっと簡単に記述できるようにしたい!」を叶える 簡易な data-* 属性パーサー を作りましたので、ここに発表します。

ついでに data-* を使った jQuery オプション指定のユースケースを整理し、その実装方法をまとめてみたいと思います。

続きを読む

jsdo.itの最新マイコードをブログに流すjQueryプラグインdoticker.js

Twitter 公式のプロフィールウィジェット のように、jsdo.it で公開したコードをブログでプチ紹介してくれるティッカーのようなものがあればなぁと思い立ち、作りましたので公開したいと思います。Twitter の JavaScript は、スタンドアロンで動作するようにできていますが、そのソースコードを jsbeautifier などで整形すると2000行近くもあり、こんなプログラミングは私にはとても無理です。そこでお手軽に jQuery のプラグインとています。

ほとんど jQuery バージョン 1.0 のルーチンを使っているので、古い jQuery でも動くと思います (1.3.2 までは動作することを確認をしています)。

ブラウザは、IE6 〜 8 (IETesterで)、IE9、Firefox 7、Chrome 15 (いつの間に!)、Safari 5 での動作を確認済みです。

プラグイン本体は、GitHub に上げました (MIT ライセンス)。良かったら使ってやって下さい。またバグなどの報告は、issues に挙げてもらうと助かります。

また、デモを jsdo.it に上げてありますので、ご覧ください。本記事では、使い方、オプションの解説と共に、ほんの少し中身についても書いておきますので、カスタマイズの参考にでもして下さい。
続きを読む

IPアドレスからアクセス元サーバーの位置情報を調べるjQueryプラグイン

2000年代前半、荒らし掲示板スパム に悩まされていた頃、JPNIC やら RIPE やらの WHOIS データベースで IP アドレスの出所を調べ、「また関西からだよ」 とか 「お、役所からだゾ、串刺されてんのかな」 とかやっていたわけですが、アクセス元を調べたところで結局のところ IP を弾くイタチゴッコを続けていたものでした。当時は、WHOIS にわざわざ アドレスをコピペしてクリック じゃなく、自サイトからオンラインで調べられたら便利だなぁと思っていました。

さて今もそんなニーズがあるのかわかりませんが、jQuery Plugins にそんな思いを実現してくれる jqIpLocation というプラグインが紹介されていたので、試してみました。

実はこのプラグイン、IPInfoDB が無料で提供する DB サービスを利用して、IP アドレスからアクセスポイントの位置情報を引っ張ってきます。他にも同様のサービスがありましたので、そういった情報も共有してみたいと思います。

続きを読む

意外と要注意 HTML5データ属性とjQuery Data APIの関係まとめ

前の記事「HTML5でモダンブラウザのCSS3バグを回避するためのハック方法」に関連して、jQuery で HTML5 データ属性にユーザーエジェント文字列を格納する方法を調べていました。その結果、ちょっと整理をしておいた方が良いかなと思う点を共有したいと思います。

ご存知の方も多いと思いますが、jQuery には .data()jQuery.data() という、DOM 要素に データ を紐付けて記憶しておく仕組みが元々ありました。jQuery 1.4.3 からは、 API レベルでの 親和性 が考慮された形で HTML5 data-* 属性を取り込む仕様が導入されました。

HTML5 時代では、クライアント・サイドで実行されるコード量も増え、データ属性を扱う機会もちょくちょく出てくるのではないでしょうか。そこで今回は、

  1. HTML5 data-* 属性のおさらい
  2. jQuery Data API の経緯
  3. jQuery Data API と HTML5 data-* 属性の共通点と違いまとめ

といった順にまとめておきたいと思います。
続きを読む

jQuery DeferredとHTML5 Web Workersでオブジェクト指向な並列プログラミングを

UIが反応しなくなったページ

jQueryのDeferredとPromiseで応答性の良いアプリをー実践編」 で述べましたが、Deferred には次の様なうれしさがあります。

  • 非同期な処理をする部分と、その結果をインターフェースする部分を分離する事によって、(特にアプリケーションに近い部分で) コードの可読性が高まる
  • 複数の Deferred オブジェクトをまとめて監視出来る

一方 Web Workers には、window オブジェクトや DOM へのアクセスが出来ないなど、ちょっと引いてしまう制限がありますが、考えようによっては、表示やマウス入力を扱う ユーザー・インターフェースな処理 と、その中身の 純粋にデータ的な部分を扱う処理 とを分離して Web アプリを作るという、オブジェクト指向的な考え方と極めて親和性が良いのではないかと思います。

ということで今回は、「Deferred と Web Workers を組み合わせましょう」 と言う自然な成り行きの記事 「Combining jQuery Deferred with the HTML5 Web Workers API」 からミニ・フレームワーク的なコードを紹介したいと思います。

ステップ毎に jsFiddle のサンプルも載せましたので、楽しんでい頂けたらと思います 😀 。
続きを読む

jQueryのDeferredとPromiseで応答性の良いアプリをー実践編

前回 は、「Creating Responsive Applications Using jQuery Deferred and Promises」 の記事と jQuery のリファレンスを翻訳し、Deferred の解説をお届けしました。が、今一歩、Deferred オブジェクトの うれしさ をお伝えできていなかったように思います。今回はその反省をふまえ、単なる翻訳ではなく、元記事の文脈に沿って、Deferred オブジェクトをどのように使うと/何がうれしくて/どうしあわせになるのか、私が学習して得た事をお伝えしたいと思います。

今回は、4本の jsfiddle を記事に埋め込んでいます。jsfiddle 上で自由に編集してテストしてもらえばうれしいのですが、4本すべて実行すると1.4MBものリソースを読み込む事になり、ブラウザに優しくありません。すぐに Resultタブ タブや 矢印タブ をクリックせずに、プラスタブ タブで別窓を開き、テストが終わったら窓を閉じてから次の例題に移ると良いかと思います 😉 。
続きを読む

jQueryのDeferredとPromiseで応答性の良いアプリをー基本編

jQuery 1.6 が既にリリース されていますが、1.5 で追加された Deferred を勉強する意味で、Script Junkie から Creating Responsive Applications Using jQuery Deferred and Promises を翻訳してみましたので、共有したいと思います。著者の Julian Aubourg は、jQuery のコアチーム・メンバーとして、Ajax モジュールの書き換えと Deferred 導入を指揮した方だそうです。

記事の途中、各メソッドの説明部分は、jQuery ドキュメントの翻訳に差し替えていますので、リファレンスとして使ってもらうのも良いかと思います。

DeferredPromise は、概念や用語が少々分かりにくいところがあるかと思いますので、読んでくださった方の、少しでも理解の助けになれば幸いです 😉 。
続きを読む

ちょっとだけ気の利いた、スクロールしてトップへ戻るボタン

jQuery を使った小技ネタを1つ紹介。

滑らかにスクロールしてトップへ戻るボタン。もし、必要なときに現れ、いらなくなれば消える ー ちょっと気が利いてイイと思いませんか?

Web Designer Wall の記事 Animated Scroll to Top を紹介します 。ほぼそのままコピーになってしまいますが、ほんの少しだけ、アレンジもしてみました。

続きを読む