Backbone.jsのpjaxを試してみた

なんだか名前を良く聞くような気がするBackbone.jsを一度触ってみたかったので、Twitterの仕様が変わってタイムラインが取得できなくなった自サイトに組み込んでみました。 中でもpjaxが出来るとかなんとか聞いたので、その辺りを中心に試しています。むしろそれ以外は別にBackbone.jsじゃなくても良いくらいの状態なので、少しずつ試していこうかと思います。 Backbone.jsを使う準備 Backbone.jsは単体で動くわけではないみたいなので、下記ライブラリを用意しました。 Backbone.js Underscore.js jQuery jQueryの代わりにZepto.jsでも良いのですが、IE非対応みたいなので、一応jQueryにしました。 Backbone.RouterとBackbone.history Backbone. »

jQueryのCDNについて色々

テスト開発に便利だったり、単純に負荷を減らしたり高速化の目的で使われているCDNですが、自分で使う事も度々あるので、jQuery本体やプラグインを、CDNで使えるものが無いか調べてみました。 CDNとは CDNとは、コンテンツデリバリネットワーク(Content Delivery Network)の略で、データを配信する際に、一か所に固めずに分散することで負荷を抑えて安定してやり取りを行う手法、という感じでしょうか。 Wikipedia先生によると、こんな感じみたいです。 90年代以降ネットが一般に普及するにつれ、大手サイトからのリンクやテレビといった他メディアからのリンクにより、通常想定されていない大量のユーザーがサイトへ集中し、反応が遅くなったり、まったく応答不能になること(フラッシュクラウド効果)が多くなってきた。このような現象に対処する場合、サーバを一ヶ所だけに置くのではなく、 »

JavaScriptで追加したoption要素を選択状態にしたい時にIE6に阻まれた時の対処

とある案件で、JavaScript(jQuery)を利用してセレクトボックスの数を変動させて、場合によっては追加した要素をそのまま選択状態にしたかったのですが、IE6でエラーが発生してしまうという事例が発生してしまったので、メモ代わりに残しておきます。 発生事例 まずは、エラーが起きてしまった時の記述について。 var val = "foo", text = "bar"; $("#select").append($("<option>", {"value":val, "text":text})).val(val) »

jquery-pjax + WordPressでスニペット集を作ってみた

Ajaxを利用しつつ、戻る・進むリンクが効くような作りで、Twitterと同じようにHashchangeイベントを使ったことがあったのですが、HTML5ならpushstateを覚えなくては―と思っていた頃にこの記事を読んでjquery-pjaxの存在を知りました。 また、ちょっとしたコードをメモして置く場所が欲しかったので、WordPressと組み合わせてスニペット集を作ってみました。 こんな感じです » Snippets | SUSH-i LOG まだまだ分類分けが中途半端だったり、導線が不十分だったり、ブラウザの進む・戻るを使った時に少し不具合がありますが、何とか形になったかな?と思っています。 クライアントサイド ソースファイルは、defunkt/jquery-pjax – GitHubからダウンロードできます。 クライアントサイドの記述方法は参考リンク先でもご紹介されていますが、こんな感じ。 »

スマホ用の下からニュッとGoogleマップを表示するjQueryライブラリ

スマートフォン、特にiPhoneでGoogleマップにリンクを貼ると、アプリが立ち上がってしまうため、ブラウザに戻ってこさせる一手間がかかってしまいます。 そこで、同ページでGoogleマップを表示させるためのライブラリを組んでみました。 特徴 Googleマップ側の仕様?なのか、マップをページ上部に表示しないと拡大時の中心点がずれてしまうので、自動的にページ上部へ移動し、Googleマップを下からニュッとアニメーションする動きを加えています。 動作確認 iOS 5.0.1 Android 2.3.3 純正ブラウザで取っています。Androidの場合はほかのブラウザの動作確認も取った方が良いのかな? 詳細説明・デモ 機能説明はこちらのページをご確認ください。 »

jQueryを使ってスマートフォン用のイベントを扱ってみた

スマートフォン用のサイトを作る場合は、jQuery Mobileやら、jQTouchやら、Sencha Touchやら色々ありますが、ちょっとそこまで必要ないときに、スマートフォン特有のイベントをjQueryを使って扱えないか触ってみました。 スマホ特有のイベント スマホ特有のイベントは幾つかありますが、今回は特に使われるであろうタッチ、スライド、ピンチイン、ピンチアウトに重点を置いて調べてみました。 上記操作に必要なイベントは以下の通りです。 touchstart touchmove touchend touchcancel gesturestart gesturechange gestureend 「touch***」というイベントが画面に指でタッチした、している時のイベント、「gesture* »

classかIDか自動判別して指定要素に追加するjQueryプラグイン

jQueryで制作を行っている時に、classやIDを要素に追加する事があるのですが、毎度addClass(“hoge”)や、attr(“id”, “fuga”)の様に指定するのがちょっと面倒だったので、「.hoge」や「#fuga」で自動的に判別して指定するプラグインを作ってみました。 前述したとおり、追加したい要素に「.」や「#」を含む文字列を渡した時に、自動判別して追加します。 指定方法はこんな感じ。 $("foo").addIC(".var"); ダウンロード(Github) 詳しい内容は固定ページを設けたのでこちらからどうぞ。 しかしこのプラグインの需要なんてあるのだろうか。 »

正方形の要素を敷き詰めるjQueryライブラリ – jquery.square.js

2010年12月23日、修正を行いました。 ブログではなくて、トップページに使ってみようと作ってみた正方形の要素を敷き詰めるjQueryライブラリを作ってみたので公開してみようかと思います。 オプションで、一つの正方形のサイズ、隣の要素との間隔等などの設定が可能です。 使い方はこんな感じ。 $("#hoge").square(); 上の記述で、「hoge」というidの付いた要素に適用されます。 デモはこちら ダウンロード(名前をつけて保存) 以下は詳細説明。 関数概要 {target}.alphaRo({option}); {target}適用する対象{option}[target](string) »

Google AJAX Feed API用のjQuery独自関数

ブログで更新を行ったものをRSSを利用して読み込む際に、サーバが別でもJavaScriptのみで実現できるので、何回か使ったことがあるのですが、毎度毎度HTMLの構成が変わったりしたので読み込みのJSを書き換えていました。 もう少し便利に使えないかな?と、jQueryを用いて汎用性高める目的で作ってみました。 ダウンロードはこちらから、デモページはこちらから確認できます。 関数概要 {target}.gRssFeed({url}, {num}, {option}); {target}適用する対象{url}読み込むRSSのURL{num}表示させるエントリー数{option}[bdate](string) = "<li& »

jQueryを利用した透明度の変化でロールオーバーを表現するプラグイン

何番煎じになるかどうかわかりませんが、自分でも透明度を操作して、ロールオーバーを表現するプラグインを作ってみました。 オプションで、ロールオーバー前の透明度、ロールオーバー後の透明度、フェードアニメーションの有無、フェードありならフェードするスピードの設定が可能です。 使い方はこんな感じ。 $("#hoge").alphaRo(); 上の記述で、「hoge」というidの付いた要素に適用されます。 以下は詳細説明。 関数概要 {target}.alphaRo({option}); {target}適用する対象{option}[from](number) = 1ロールオーバー前の透明度[to] »

jQueryで良く使う処理色々

現在、JavaScriptの案件が入ったときには、JavaScriptのフレームワークの一つであるjQueryで開発を行っています。 セレクタの表現がCSSと同じ記述方法で良く、多彩な効果が用意されているので、JavaScriptを使ったことのない人でも、比較的取り組みやすいように感じます。 今回は、jQueryで開発を行うときに、毎度同じ様な記述をすることがあったので、備忘録も兼ねて色々まとめておく事にしました。 hover()の処理をunbindしたい ロールオーバーの表現に良く使うhover()ですが、mouseoverとmouseoutを割り当てているわけではなく、mouseenterとmouseleaveが当てられているため、unbindを行う際は以下の様に記述します。 $('#hoge').unbind('mouseenter').unbind('mouseleave'); JavaScript中で使う画像を事前に読み込みたい 処理を実行する前に画像を読み込んでおく事で、 »