無題メモランダム: 8月 2009

2009年8月28日金曜日

jQuery Buzz - jQuery関連の記事をまとめるニュースサイト

特定の分野の新しい記事を追いかける時、どういう手段をとりますか？

信頼できるブログのフィードをRSSリーダーに登録してチェックする人はけっこう多いかと思います。

ただ、個々のブログを追いかけるだけだととりこぼしも多いので、合わせてソーシャルブックマークをチェックするという人も多いのではないでしょうか。

自分の場合はDeliciousのjQueryタグのフィードをGoogleリーダーに登録しているのですが、とにかく数が多すぎて1日見ないと軽く1000件を超えてしまいます。

もっとサクっと注目の記事をチェックできたら便利だろうなと思って、こちらを作りました。

jQuery Buzz
http://www.jquerybuzz.com

仕組みはごく単純で、DeliciousでjQueryタグの付いているページをブックマークの多い順にまとめて並べているだけです。

それでも、フィードを単純に購読するより、短時間で注目記事が分かります。

タグ別に表示することができるので、
jQuery + AJAX
jQuery + PHP
jQuery + Plugin
jQUery + Gallery
のような絞り込みも可能です。

jQuery + Pluginを見れば、今注目のプラグインが一目瞭然ですよ。

jQuery Buzzを作るのに利用したサービス

Delicious

情報の供給元です

Google App Engine

インフラ。Python + Djangoを利用しています。

~~Yahoo Pipes~~

本番にデプロイしてから分かったのですが、DeliciousはGoogle App Engine(GAE)からのリクエストをIPで弾いているようです。

とりあえずプロキシかまさなきゃGAEでこのアプリを使えないってことで、Yahoo Pipesを利用することに。

http://pipes.yahoo.com/pipes/

[追記]
なんかPipesでも蹴られるようになってしまったようなのでheroku を利用することにしました。

bit.lyのAPI

それぞれの記事がどれくらいクリックされているのか分かります。

2009年8月27日木曜日

[Twit] TwitterのつぶやきをブログやWebページに簡単に貼付けられるガジェット

先日戯れに作ったjQueryのプラグインですが、ガジェットで提供したほうが気軽に使ってもらえるような気がしたので気まぐれで作ってみました。
Google Gadgetsを利用しています。

» ガジェット版 Twit: Add to Google

「このガジェットを埋め込む」というリンクからガジェットの設定を行い、好きなページにコードを貼付けてください。

Bloggerを利用している方はもっと簡単に貼付けることができます。

1. 貼付けたいブログのレイアウトページを開きます

2. 「ガジェットを追加」をクリックしてガジェット追加用の小窓を開きます。

3. 左側にある「独自に追加」をクリックします。

4. URLの入力欄に下記のURLを入力します。

http://jquery-twit.googlecode.com/svn/trunk/gadget/content.xml

5.「Screen name」にあなたのTwitterのスクリーン名を入力します。 http://twitter.com/[scree name]

6. 「保存」をクリックして完了です。

2009年8月26日水曜日

[Twit] TwitterのつぶやきをブログやWebページに簡単に貼付けられるjQueryプラグイン

Twitterが大人気です。

Twiiterとブログを両方やっているなら、ブログにもTwitterのつぶやきをのせたい!という人は多いかもしれません。

というわけで、ブログやWebページにさくっとTwitterのつぶやきを貼付けられるjQueryのプラグインを作りました。

Google Code: jquery-twit
http://code.google.com/p/jquery-twit/

上のGoogle Codeのページに必要なCSSとJavascriptのファイルをzipで固めたものが置いてありますので
ダウンロードしてお使い下さい。

こんな感じです。

Loading Twitter...

使い方はいたって簡単です。

はじめに必要なファイルをインクルードします。

<link href="jquery.twit.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.twit.js" type="text/javascript"></script>

つぶやきを表示したい場所に次のように書きます。

<script type="text/javascript">
$(document).ready(function () {
  $('#twitter').twit('mudaimemo', {limit: 5});
});
</script>
<div id="twitter">Twitterを読み込み中...</div>

$('#twitter').twit(username, options);

usernameにあなたのTwitterのスクリーン名
http://twitter.com/[スクリーン名]
を指定するだけで利用可能です。

他にいくつかオプションを指定することが可能です。
詳しくはこちらをご覧下さい。

試してみたいけど、JavascriptとかjQueryとか全然分からないよ、という方向けにGoogle Gadgetsでガジェット版も作りました。

[Twit] TwitterのつぶやきをブログやWebページに簡単に貼付けられるガジェット

2009年8月21日金曜日

[jQuery] 画像をあらかじめ読み込む方法

Javascriptで動的に画像要素を生成する時の話です。

jQuery Gallery Pluginを作っててちょっとハマったのは、「画像をいつ読み込むか & どう読み込むか」という点でした。

画像ギャラリーなどのように、動的に画像要素を生成して、大きめの画像を一枚ずつ表示させようとすると、読み込みの遅延に悩まされます。

画像の容量が大きければ大きいほど画像の読み込みに時間がかかって、
A -> B -> C
と滑らかに切り替えたいのに、
A -> (画像の読み込み) -> B -> (画像の読み込み) -> C
といった感じに遅延が発生してしまいます。

この点を解決する手段として、以下のようなやり方が考えられます。

メジャーなブラウザは画像などの静的ファイルをキャッシュしてくれるので、一度読み込んだ画像を次に表示する時は滑らかになります。

この機能を利用して、ページをロードした時点で画像をまとめて読み込んでおくと、いざ画像を表示しようとする時に遅延が発生せずスムーズに切り替えを行うことができるようになります。

ようするに、Aの画像を表示する前に、ユーザーには見せない形でB,Cの画像も読み込んでおくという方法です。

ただ、これを実装するにはどうすればいいの？というのが疑問だったので、とりあえずは自分なりに実装してリリースしてみましたが、stackoverflowを眺めていたらまさしくこれに関する回答があったので感動しました。

Preloading images with jQuery
http://stackoverflow.com/questions/476679/preloading-images-with-jquery

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

// Usage:

preload([
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);

ちなみにjQuery Gallery Pluginでは以下のように記述しています。

var preLoad = function (url) {
  jQuery('<img />')
    .hide()
    .attr('src', url)
    .appendTo(document.body)
    .load(function () { jQuery(this).remove(); })
    .error(function () { jQuery(this).remove(); });
}

大きな違いはdocument.bodyにappendしているかしていないか、です。

bodyにappendしないと画像を読み込むことはできないと思い込んでいたのですが、そうではないらしく
firebugで確認したところ

jQuery('<img />').attr('src', url);

これだけで画像の読み込みが始まりました。

無駄なappendを省いたので要素を削除する処理も必要ありません。

使いどころは限られているかもしれませんが使えるテクニックだと思います。

ブラウザによって挙動が変わったりしたら怖いのですが。。。

2009年8月20日木曜日

[jQuery]animateで気づいたことメモ

jQueryの特徴的な関数 animate
特にギャラリー系のプラグインを作る時お世話になっています。(こんなのとかこんなの)

animateってなんなの？という方はこちらをお試しください。

Hello World!

<div id="animateDemo" style="border:1px solid #ccc;width: 30%;height: 60px;">
  Hello World!
</div>

<input type="button" value="animate" id="demoButton" />

<script type="text/javascript">
  $('#demoButton').click(function (event) {
    $('#animateDemo')
      .append('<span id="demoStatus">拡大中...</span>')
      .animate(
        {width: '80%', height: '150px', borderWidth: '10px'},
        1500, 
        function () {
          $('#demoStatus').text('縮小中...');
        })
      .animate({width: '30%', height: '60px',  borderWidth: '1px'}, {
        duration: 1500,
        complete: function () {
          $('#demoStatus').remove();
        }
      });
  });
</script>

非常に有用な関数ではあるのですが、使っている時に気づいたことがいくつかあるのでメモしておきます。

1. animateの引数の違い

ドキュメントを見てもらうと分かるのですが、animateには引数のとりかたが2種類あります。

a. animate( params, [duration], [easing], [callback] )
b. animate( params, options )

はじめはそれぞれ別モノなのかな？と思っていましたが、引数のとりかたが違うだけで同じことをやっているようです。

a. は引数が固定で、 [duration], [easing], [callback]と３つの引数をとることができます。

b.の形式だとこのように書けます。a.の形式では指定できないオプションも指定することが可能です。

$('#foo').animate({width: '50%'}, {
  duration: 1500,
  easing: 'linear',
  complete: function () {...},
  step: function () {...},
  queue: false
});

complete:
アニメーションが完了した時のコールバック関数

step:
アニメーションのステップごとに呼ばれるコールバック関数

queue:
複数のアニメーションを実行する場合に、即座に実行するか順番に実行するか
trueなら順番に falseならそれぞれ即座に実行される。
(デフォルトはtrue)

2. easingとは？

easingという耳慣れない単語のせいもあって、最初はなんだかよく分からず完全に無視していましたが、これはけっこう面白い。

これは要するに、アニメーションの実行のされ方らしいです。
「最初はゆっくりで徐々に早く」とか「弾けるように」などなど。

ただ、デフォルトでは "linear" と"swing" しか指定することができないのでほとんど意味がないと思われます。

様々なeasingをまとめた jQuery Easing Plugin があるので、気になる方はそちらをどうぞ。

3. 色のアニメーションができない

意外というかなんというか、jQuery単体では色のアニメーションを行うことができません。
「最初は背景が黒で徐々に白く」というのが無理です。

ただ、この点もプラグインが用意されています (Color Animations)。
作者はjQuery本体の作者でもあります。(John Resig氏)

詳しいことは分かりませんが、あえて色のアニメーションをjQuery本体には組み込んでいないのかもしれません。

$('#foo').animate({
  color: '#ffffff',
  backgroundColor: '#000000'
}, 1500);

2009年8月18日火曜日

使えるjQueryのtipsとトリック20選

よく知られているものから、あまり知られていない(?)ものまで。
知っておくと便利なものばかりです。

20 Top jQuery tips & tricks for jQuery programmers
http://viralpatel.net/blogs/2009/08/20-top-jquery-tips-tricks-for-jquery-programmers.html

複雑なセレクタのパフォーマンスを最適化する
コンテキストを指定してパフォーマンスを上げる
Liveイベントハンドラ
indexをチェックする
jQuery.dataメソッド
要素を消すのにfadeout/slideupを活用する
要素が存在するかどうかを調べる
動的に要素を生成してDOMに追加する
改行とチェイニング
カスタムセレクタを作る
オブジェクトをコピーする
要素が隠れているかどうかをテストする
$(document).ready のもうひとつのやり方
.(ピリオド)を含むIDを指定する
直下の子要素の数を調べる
要素をハイライトさせる
要素をスクリーンの中央に配置する
closestを使って親DIVを取得する
右クリックのコンテキストメニューを使わせない
カーソルの位置を取得する

ちなみに、コメントで 7.要素が存在するかどうかを調べるにツッコミがいれられています。

if ($("#someDiv").length) {  
  //hooray!!! it exists...  
}

それは動くけど、セレクトする前に要素が存在するかどうか調べる必要ない。
jQueryは(他のライブラリと違って)ページ上に存在しない要素を選んでもエラーを投げないんだから、不必要なチェックは余計なことだ。

関連記事:

jQueryのパフォーマンスにおいて厳守すべき11の掟

2009年8月17日月曜日

Google Gadgetsの新APIでGoogla Analyticsを利用する

Google Gadgetsの新APIでGoogle AnalyticsのAPIがないのでググってみたら、こんなページを見つけました。

Gadget Tracking - Google Analytics
http://code.google.com/intl/ja/apis/analytics/docs/tracking/gadgetTracking.html　

あくまでもlabsの機能として組み込まれているようです。

<Require feature="com.google.gadgets.analytics"/>

と宣言してから

<script type="text/javascript">
  var ga = new _IG_GA('UA-000000-00');
  ga.reportPageview('/foo/bar');
</script>

ちなみにレガシーAPIにはなかったreportEventという関数が追加されています。
名前の通りイベント発生を把捉できるようです。

function resetCounter(){
  prefs.set("counter", 0);
  ga.reportEvent("Counter Gadget", "Reset", "Button", 0);
}

あくまでもlabsの機能なので、APIに正式に組み込まれる時には記述の仕方が変わるかもしれません。
new _IG_GAというのがいかにもレガシー臭いですし。

ちなみにレガシーAPIではこう書いてました。

<Require feature="analytics"/>

と宣言してから

<script type="text/javascript">
  _IG_Analytics('UA-000000-00', '/foo/bar');
</script>

現在でもこの記述は認められているようですが、将来的にはなくなるかもしれませんね。

2009年8月16日日曜日

DjangoのLazy translationのメモ

Djangoは多言語化用のモジュールが充実しているので、わりと気軽に多言語サイトを構築できます。

これまで何も考えずに、とりあえず ugettext() を使用してきましたが、formでそれを使った場合に上手い具合に言語の切り替えができなくてハマりました。

from django.utils.translation import ugettext as _

class BookForm(forms.Form):
  status = forms.ChoiceField(widget=forms.RadioSelect, choices=(
    (1, _(u'already read')),
    (2, _(u'want to read')),
    (3, _(u'reading now')),
  ))

※ Django 1.0で確認しています。

上記のように記述して、ブラウザの言語設定を変更しても上手く反映されません。

マニュアルをざっと読んだ所、どうやら ugettext_lazy() というのが使えそう。

from django.utils.translation import ugettext_lazy as _

ugettext を ugettext_lazyに変えただけで期待どおりの動きをするようになりました。

マニュアルにはModelの使用例のみが書いてありますが、formでもそのように書く必要があるようです。

from django.utils.translation import ugettext_lazy as _

class MyThing(models.Model):
  name = models.CharField(_('name'), help_text=_('This is the help text'))
  class Meta:
    verbose_name = _('my thing')
    verbose_name_plural = _('mythings')

細かいメカニズムなどは時間がある時に調べてみようと思います。

[jQuery] 要素の表示/非表示をアニメーション付きで簡単に切り替えるプラグイン

jQueryにはデフォルトでshow/hideメソッドやtoggleメソッドが用意されているので、要素の表示/非表示の切り替えが非常に簡単に行えます。

特にtoggleメソッドはまさにそのために用意されているメソッドなのですが、effectの指定ができなのが不満でした。
(内部でshow/hideを利用している)

また、要素の表示/非表示と同時にラベル(表示する/非表示にする、など)も同時に切り替えたい場合が多く、その部分を別途書かなければならないのが煩わしかったりします。

その点を踏まえて、こちらのプラグインを作りました。
アコーディオンメニューやFAQのページなどで利用されることを想定していますが、他にも利用シーンは色々あると思います。

Google Code: jquery-togglable
http://code.google.com/p/jquery-togglable/

» デモ

Google Codeのページに必要なファイルがzip形式で圧縮されて置いてありますので、ダウンロードしてお使い下さい。

HTML:

<p>
  <!-- rel属性に "toggleall" と指定すると、すべての要素の表示/非表示を切り替えます -->
  <a href="#" rel="toggleall" class="togglable">toggle all</a>

  <!-- rel属性に "showall" と指定すると、すべての要素を表示します -->
  <a href="#" rel="showall" class="togglable">show all</a>

  <!-- 上記の値("showall","toggleall")はオプションで独自に指定することができます。. -->
</p>

<div>
  <p>
    <a href="#id_of_block1" class="togglable">show</a> block #1.
  </p>
  <div id="id_of_block1" style="display:none;">
    block #1.
  </div>
 
  <!-- rel属性を使って要素別の独自ラベルを指定することが可能です。-->
  <p>
    <a href="#id_of_block2" rel="hide block #2" class="togglable">show block #2</a>.
  </p>
  <div id="id_of_block2" style="display:none;">
    block #2.
  </div>

</div>

Javascript:

$(document).ready(function () {
  $('a.togglable').togglable();
});

オプション:

オプションを指定することでラベルなどをカスタマイズすることができます。

$('a.togglable').togglable({
  showAllLabel: 'すべて表示する',
  hideAllLabel: 'すべて隠す',
  showLabel: '表示する',
  hideLabel: '隠す'
});

easing
string / null / easingを指定します。別途jQuery Easing Pluginが必要です。

effect
string / 'sliding' / アニメーションのエフェクト。'basic', 'sliding', 'fading' が指定できます。

hideAll
string / 'hideall' / 要素をすべて非表示にするアンカータグのrel属性に指定する値。

hideAllLabel
string / 'hide all' / 要素をすべて非表示にするアンカータグのテクスト(表示される部分)

hideLabel
string / 'hide' / 非表示にするアンカータグのテクスト(表示される部分)

showAll
string / 'showall' / 要素をすべて表示するアンカータグのrel属性に指定する値。

showAllLabel
string / 'show all' / 要素をすべて表示するアンカータグのテクスト(表示される部分)

showLabel
string / 'show' / 要素を表示するアンカータグのテクスト(表示される部分)

speed
string/integer / 'normal' / 表示/非表示の切り替えのスピード

toggleAll
string 'toggleall' / すべての要素の表示/非表示を切り替えるアンカータグのrel属性に指定する値

2009年8月15日土曜日

[jQuery] 要素をアニメーションでスライドさせる方法

以前jQuery Gallery Pluginを作った時に、要素をアニメーションでスライドさせるのに手こずった覚えがあります。

Sliding door effect with JQuery
http://tutsvalley.com/wp/tutorials/sliding-door-effect-with-jquery/

» デモ

こちらはHTML,CSS,Javascript(jQuery)ともソースの全文が載っているチュートリアルです。

アニメーションで要素をスライドさせるためのポイントが非常にシンプルにまとめられています。

一番のキモはCSSかもしれません。
コンテナと画像のpositionをそれぞれ下記のように記述するのは、慣れていないと気づきにくいのではないでしょか。

.box_container{  
  position: relative;
}  
.box_image{  
  position: absolute; 
}

Javascriptの記述は本当に少なくてすみます。jQuery様々ですね。

// 横スライド
$(document).ready(function() {  
  $('.box_container').hover(function(){  
    var width = $(this).outerWidth();  
    $(this).find('.box_image').animate({left: width}, {queue:false, duration:300});
  }, function(){  
    $(this).find('.box_image').animate({left: '0px'}, {queue:false, duration:300});  
  });  
});

※ セレクタの書き方がちょい引っかかります » 参考

2009年8月14日金曜日

[jQuery] 3D風タグクラウドを作るチュートリアル

ものすごくかっこいいです。

How to Create a 3D Tag Cloud in jQuery
http://www.devirtuoso.com/2009/08/how-to-create-a-3d-tag-cloud-in-jquery/

デモ

チュートリアルは英語ですが、HTML, CSS, Javascriptともコードが全文載っているので迷うことはないと思います。
意外と記述量が少ないので驚きました。
(Javascriptはコメントを含めて69行！)

ただ、記述量は少ないですが、自分一人では絶対ひねり出せないようなコードが随所に盛り込まれててしびれます。
(数学が得意な人にとってはどうってことないのかもしれませんが)

要素を円周にちらす

for (var i = element.length - 1; i >= 0; i--)
{
    element[i].elemAngle = i * Math.PI * 2 / element.length;
}

タグのサイズと位置を割り出す

x = 120 + Math.sin(angle) * 30;
y = 45 + Math.cos(angle) * 40;
size = Math.round(40 - Math.sin(angle) * 40);

ただ、カーソルをはずした時にタグが回りっぱなしになってしまう所は修正したほうがいいかもしれません。

2009年8月13日木曜日

[Ruby on Rails] ControllerとModelで空のパラメータの値が違う件

ひさしぶりにrailsをいじってて、今さらながら気がついたのでメモしておきます。

フォームから送信されたfoo[name]というリクエストパラメーターが空文字だった場合。

foo_controller.rb

class FooController < ApplicationController
  def update
    logger.debug(params[:foo][:name] == "") # => true

    foo = Foo.find(params[:id])
    if foo.update_attributes(params[:foo])
    end
  end
end

Foo.rb

class Foo < ActiveRecord::Base
  def validate
    logger.debug(self.name == "") # => false
    logger.debug(self.name.nil?) # => true
  end
end

モデルでは空文字のパラメーターがnilとして保持されています。
データベースにもNULLとして格納されます。(NOT NULLじゃない場合)

empty? や blank? を多用してたので気づきませんでした。。。

[jQuery] はてなブックマーク数/ユーザー/コメントをコンパクトに表示するプラグイン

はてなブックマーク件数取得API用のプラグインを作ったばっかりなのにあれですが、
はてなブックマークエントリー情報取得APIを利用すればブックマーク件数だけでなく、ブックマークしたユーザーやコメントもJSONPで取得できるですよね。
すっかり忘れていました。

戯れにjQueryのプラグインを作ってみました。

デモ:

読み込んでいます。しばらくお待ちください...

Google Code: jquery-hatenabookmark-entry
http://code.google.com/p/jquery-hatenabookmark-entry/

» ダウンロード
» ダウンロード (圧縮版)

準備：

上のダウンロードリンクからお好きな方を選んでダウンロードしてください。
もともと超軽量なので、どちらでもほとんど同じです。

ダウンロードしたファイルをアップロードします。
(レンタルサーバーを借りている方はFTP等でサーバー上へ、ファイルをアップロードできるブログサービスで利用する場合はそのファイルアップロード機能を利用して)

アップロードしたファイルをインクルードするようHTML内に下のように記述すれば準備完了です。

<script type="text/javascript" src="jquery.hatenabookmarkentry.js"></script>

※ ファイルのパス/ファイル名は自分の環境に合わせてください。
※ プラグインのJavascriptをインクルードする前にjQuery(1.3.x系推奨)をインクルードする必要があります。

jQueryを準備していない方はGoogle AJAX Libraries APIを利用したほうが早いかもしれません。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

使い方：

HTML:
エントリ情報を表示する要素を用意します。

<div id="container"></div>

Javascript:

<script type="text/javascript">
  $(document).ready(function () {
    $('#container').hatenaEntry('http://www.mudaimemo.com');
  });
</script>

これだけで指定されたURLのはてなブックマークエントリー情報を表示することが可能です。

オプション:

プラグインの第1引数はURL、第2引数にオプションを指定することができます。

$('#container').hatenaEntry('http://www.mudaimemo.com', {
  comment: false,
  limit: 10
});

callback
function / null / 独自のコールバック関数を指定することができます。

icon
boolean / true / ユーザーのアイコンを表示

username
boolean / true / ユーザー名を表示

tags
boolean / true / タグを表示

comment
boolean / true / コメントを表示

timestamp
boolean / true / ブックマークされた日を表示

headerBgColor
string / #2C6EBD / ヘッダーの背景色

headerColor
string / #ffffff / ヘッダーの文字色

userColor
string / #0000DD / ユーザー名の文字色

tagColor
string / #6666cc / タグの文字色

timeColor
string / #666666 / ブックマーク日の文字色

limit
integer / 7 / 表示件数

headerLabel
string / "ブックマークしているユーザー" / ヘッダーのラベル

useJsonlite
boolean / false / jsonliteエンドポイント(/entry/jsonlite/)を利用するか

onLoad
function/ null / ブックマークがロードされた時のコールバック関数

2009年8月11日火曜日

[jQuery] はてなブックマーク件数取得APIをもっと手軽に使うためのプラグイン

はてなブックマーク件数取得API がJSONPに対応しました。

皆さんご存知の通り、これまでも画像形式でブックマーク数を取得することは可能でしたが、
JSONPに対応したことでカスタマイズが楽しめるようになりました。

単純にブックマーク数を返すだけのシンプルなAPIなので、小難しい所は一切ないのですが、jQueryのプラグイン化してもっと手軽に扱えるようにしてみました。

Google Code: jquery-hatenabookmark-count
http://code.google.com/p/jquery-hatenabookmark-count/

» ダウンロード
» ダウンロード (圧縮版)

デモ:
はてなブックマーク数 » 読み込んでいます...

準備：

上のダウンロードリンクからお好きな方を選んでダウンロードしてください。
もともと超軽量なので、どちらでもほとんど同じです。

ダウンロードしたファイルをアップロードします。
(レンタルサーバーを借りている方はFTP等でサーバー上へ、ファイルをアップロードできるブログサービスで利用する場合はそのファイルアップロード機能を利用して)

アップロードしたファイルをインクルードするようHTML内に下のように記述すれば準備完了です。

<script type="text/javascript" src="jquery.hatenabookmarkcount.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

使い方：

HTML:

aタグのhref属性にブックマーク数を取得したいURLを指定します。

<a href="http://blog.mudaimemo.com/" class="hatena"></a>

Javascript:

$(document).ready(function () {
 $('a.hatena').hbCount();
});

これだけでブックマーク数を表示することが可能です。

<a href="http://b.hatena.ne.jp/entry/blog.mudaimemo.com/" class="hatena">ブックマーク数</a>

※ デフォルトでリンク先がはてなブックマークのエントリーページに置き換わります。

オプション:

callback
コールバック関数を指定することが可能です。

$('a.hatena').hbCount({
  callback: function (count, element, url) {
    if (count > 5) {
      var style = {fontWeight: 'bold', color: '#ff0000'};
    } else {
      var style = {color: '#666666'};
    }
    $(element).css(style).text('はてなブックマーク数: ' + count);
  }
});

コールバック関数には最大3つの引数がセットされます。

count: ブックマーク数
element: 表示中のアンカー要素
url: replaceUrl(下記参照)が true の場合、はてなブックマークのエントリーページURLが渡ります。falseの場合はnullが入ります。

コールバック関数が省略された場合は以下の関数が呼ばれます。

function (i, e, url) {
  if (url)
    jQuery(e).text(i).attr('href', url);
  else
    jQuery(e).text(i);
}

replaceUrl (boolean)
trueの場合、コールバック関数にはてなブックマークのエントリーページのURLを渡します。
(デフォルト true)

[jQuery] ページ内の指定の要素にスクロールしてハイライト

ページ内の特定の要素にしゅるしゅるっとスムーズにスクロールして、その要素をハイライト。
下記のサイトはjQuery.ScrollToとjQuery UI Effectsを利用してそれを実現するためのチュートリアルです。

英語ですが丁寧にコードを書いてくれてるのでとても分かりやすいと思います。

jQuery FAQs: Scroll To and Highlight Tutorial
http://www.corydorning.com/blog/jquery-faqs-scroll-and-highlight-tutorial

デモ

2009年8月8日土曜日

[jQuery Gallery Plugin] 画像ギャラリー用のプラグイン作りました

世の中には画像ギャラリー/スライドショーを簡単に設置するためのjQuery用プラグインがたくさんあるので、今更自分でこんなもの作らなくても... と思いながらも、衝動的に作ってしまいました。

LibroSpotで利用させてもらっているプラグイン (GalleryView) はとてもすばらしいのですが、自分でカスタマイズしやすいものを使いたかったので。

デモページ
http://www.mudaimemo.com/p/gallery/

Google Code: jquery-gallery-plugin
http://code.google.com/p/jquery-gallery-plugin/

jQuery Plugins: jQuery Gallery Plugin - easy image gallery
http://plugins.jquery.com/project/jquery-gallery-plugin

準備:

Google Code と jQuery Pluginsのページにファイル一式をzipにまとめて置いてあります。
それをダウンロードするとJavascriptとCSSのファイルがありますので、
サーバー上のしかるべき場所にアップロードしてください。
アップロードしたファイルをインクルードするようHTML内に下のように記述すれば準備完了です。

<link href="jquery.gallery.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery.gallery.js"></script>

※ ファイルのパスは自分の環境に合わせてください。
※ プラグインのJavascriptをインクルードする前にjQuery(1.3.X系推奨)をインクルードする必要があります。

使い方:

Javascript

<script type="text/javascript" >
$(document).ready(function () {
  $('#id_of_gallery').gallery({
    height: '400px',
    width: '500px'
  });
});
</script>

指定できるオプションの一覧はこちらをご覧下さい

HTML

<div id="id_of_gallery" class="gallery">
  <ul class="galleryBar">
    <li><a href="picture1.jpg" title="demo #1."><img src="thumbnail1.jpg" title="image1" /></a></li>
    <li><a href="picture2.jpg" title="demo #2."><img src="thumbnail2.jpg" title="image2" /></a></li>
    <li><a href="picture3.jpg" title="demo #3."><img src="thumbnail3.jpg" title="image4" /></a></li>
  </ul>
</div>

aタグのtitle属性がギャラリーのタイトルになります。
imgタグのtitle属性がギャラリーの説明文になります。

※ HTMLの構造は上記の構造が前提となっています。 (DIV > UL > LI > A > IMG) これを崩すと正しく動作しないのでご注意ください。

※ こちらで用意しているCSSファイルは上記のclass名(gallery, galleryBar)を前提にしています。class名を変更する場合は、CSSファイルの記述もあわせて変更してください。

2009年8月2日日曜日

5分で理解する！jQueryで簡単AJAX

jQueryを覚えたてでAJAXをやってみようとする時、マニュアルに色々メソッドあってどれを使っていいのか分からない！というのが最初のハードルだったりします。

jQueryでAJAXをする時は、原則 jQuery.ajax のみ使用すればOK!というのが個人的な印象です。

jQuery.getJSON や jQuery.post は結局のところjQuery.ajaxのショートカットメソッドです。
ajaxCompleteやajaxErrorなどのAjax Eventsも、利用できるシーンは以外と限られてるのではないかと思っています。(使いこなせば便利ですが)

とにかく、jQuery.ajax の使い方さえ覚えてしまえばやりたいことのほとんどは達成できるはずです。

jQuery.ajax({key: value});

jQuery.ajaxはAJAXといっても全然難しいことはなく、単純にkey-valueペアのオブジェクトを引数に渡すだけです。

で、その引数ですが、マニュアルにはだーっと並んでいてどれを使っていよいのかよく分かりません。

ここでは思い切って、これだけ知っとけば80%大丈夫!(たぶん) というオプションを紹介します。

url
リクエスト先のURLです。これがなければはじまりません。
基本ですが、AJAXの場合は今開いているページと同じドメインしか指定できません。

data
リクエストURLに付加するクエリストリングです。 '&foo=bar1&foo=bar2'
key-valueペアのオブジェクトを指定することも可能です。

data: {
  foo1: 'bar1',
  foo2: 'bar2'
}

dataType
サーバーから受け取るデータの種類です。
xml, script, json, jsonp, text
以上5つが指定可能です。 json と html を指定することが多いのではないでしょうか。

success
リクエストが成功した場合のコールバック関数です。
引数の型はdataTypeによって変わります。

success: function (obj) {
  console.log(obj);

  // dataTypeが'html'の場合はHTMLの文字列になります。
  // <p>foo</p>
  // dataTypeが'json'の場合はkey-valueペアのオブジェクトになります。
  // {foo1: 'bar1', foo2: 'bar2'}
}

当たり前ですが、htmlにしろjsonにしろ、サーバー上にそれを返すスクリプトを置いておく必要がありますのでお忘れなく。

error
リクエストが失敗した場合のコールバック関数です。

error: function () {
  alert('error!');
}

基本となるコードは下のようになります。

$.ajax({
  url: 'ajax.php',
  data: {
    foo1: 'bar1',
    foo2: 'bar2'
  },
  dataType: 'json',
  success: function (obj) {
    console.log(obj);
  },
  error: function () {
    alert('error!');
  }
});

リンクをクリックした時にAJAXでリクエストを送信する場合の例はこちら

<a href="#" id="id_of_link">LINK</a>

<script type="text/javascript">
  $('#id_of_link').click(function (e) {
    e.preventDefault();
    $.ajax(...);
  });
</script>

jQueryでJSONPをやるのはちょいとばかし毛色が違います。
詳しくは下記の記事をごらんください。

jQueryでJSONP
http://blog.mudaimemo.com/2008/09/jqueryjsonp.html

ファイルのアップロードをAJAXでやりたい場合はこちらの記事をどうぞ

Ajax + jQueryで超簡単にファイルをアップロードするためのメモ
http://blog.mudaimemo.com/2009/05/ajaxfileuploadajaxjquery.html

登録: 投稿 (Atom)

2009年8月28日金曜日

jQuery Buzz - jQuery関連の記事をまとめるニュースサイト

2009年8月27日木曜日

[Twit] TwitterのつぶやきをブログやWebページに簡単に貼付けられるガジェット

2009年8月26日水曜日

[Twit] TwitterのつぶやきをブログやWebページに簡単に貼付けられるjQueryプラグイン

2009年8月21日金曜日

[jQuery] 画像をあらかじめ読み込む方法

2009年8月20日木曜日

[jQuery]animateで気づいたことメモ

2009年8月18日火曜日

使えるjQueryのtipsとトリック20選

2009年8月17日月曜日

Google Gadgetsの新APIでGoogla Analyticsを利用する

2009年8月16日日曜日

DjangoのLazy translationのメモ

[jQuery] 要素の表示/非表示をアニメーション付きで簡単に切り替えるプラグイン

2009年8月15日土曜日

[jQuery] 要素をアニメーションでスライドさせる方法

2009年8月14日金曜日

[jQuery] 3D風タグクラウドを作るチュートリアル

2009年8月13日木曜日

[Ruby on Rails] ControllerとModelで空のパラメータの値が違う件

[jQuery] はてなブックマーク数/ユーザー/コメントをコンパクトに表示するプラグイン

2009年8月11日火曜日

[jQuery] はてなブックマーク件数取得APIをもっと手軽に使うためのプラグイン

[jQuery] ページ内の指定の要素にスクロールしてハイライト

2009年8月8日土曜日

[jQuery Gallery Plugin] 画像ギャラリー用のプラグイン作りました

2009年8月2日日曜日

5分で理解する！jQueryで簡単AJAX

読者

プロフィール

公開中のサービス

アーカイヴ

新刊本情報

タグ