2008/06/02


GoogleからjQueryやdojoがロード出来るAjaxライブラリが公開されました。

The AJAX Libraries API is a content distribution network and loading architecture for the most popular open source JavaScript libraries. By using the Google AJAX API Loader's google.load() method, your application has high speed, globaly available access to a growing list of the most popular JavaScript open source libraries including:

http://code.google.com/apis/ajaxlibs/
でも、リンク先に載ってるコード、良く見たら動かないよ＞＜
googl ajax library typo
正しくは <script src="http://www.google.com/jsapi"></script>
<script>
  var renderResults = function(results) {
      $.each(results, function(index, item) {
        $('#result')
          .append('<div id="result' + index + '"></div>');
        $('#result' + index)
          .append('<a href="' + item.url + '">' + item.title + '</a>')
          .append('<div>' + item.content + '</div>')
          .append('<span>' + item.visibleUrl + '</span>')
          .css('padding', '0.5em');
        $('#result' + index + ' div')
          .css('border', '1px dotted gray')
          .css('width', '500px')
          .css('padding', '1em')
          .append('<span>');
        $('#result' + index + ' span')
          .css('color', 'green')
          .css('margin-left', '1em');
      });
  }

  // Load jQuery
  google.load("jquery", "1");

  // on page load complete, fire off a jQuery json-p query
  // against Google web search
  google.setOnLoadCallback(function() {
    $.getJSON("http://ajax.googleapis.com/ajax/services/search/web?q=google&v=1.0&callback=?",

      // on search completion, process the results
      function (data) {
        if (data.responseData.results &&
            data.responseData.results.length>0) {
          renderResults(data.responseData.results);
        }
      });
    });

</script>
<div id="result"></div>
 こんな感じになります。あと、visualization等の場合はgoogle.loadの第3引数が有効で"callback"の記述が出来たのですが、jQueryやdojo等サードパーティな物では動かなかった。残念。
ちなにみ上のコードを動かすと、こんな感じになります。

続きを読む...

Posted at by



2008/05/13


これまで本サイトの画像の扱いはblosxomのimagerefという、自作ながらお粗末なプラグインを使っていました。
私としては、記事本文に記述される画像へのパスはサイトのURLとは切り離して考えるべきと思っているので、以下のプラグインを使っています。

imageref
# Bloxsom Plugin:ImageRef
# Author: Yasuhiro Matsumoto
# Version: 0.1

package imageref;
use strict;
my $images_url = "http://mattn.kaoriya.net/images";
sub start {1}
sub story {
    my ($pkg, $path, $filename, $story_ref, $title_ref, $body_ref) = @_;
    $$body_ref =~ s@<!--\s+imageref\s+thumb:([^:\. ]*)(\.\S+)?\s+-->@<a href="$images_url/$1$2" rel="shadowbox"><img src="$images_url/$1-thumb$2" alt="$1" border="0" /></a>@ig;
    $$body_ref =~ s@<!--\s+imageref\s+thumb:([^:]+?):([^:\. ]*)(\.\S+)?\s+-->@<a href="$images_url/$2$3" rel="shadowbox"><img src="$images_url/$2-thumb$3" alt="$1" border="0" /></a>@ig;
    $$body_ref =~ s@<!--\s+imageref\s+([^:\. ]*)(\.\S+)?\s+-->@<img src="$images_url/$1$2" alt="$1" border="0" />@ig;
    $$body_ref =~ s@<!--\s+imageref\s+([^:]+?):([^:\. ]*)(\.\S+)?\s+-->@<img src="$images_url/$2$3" alt="$1" border="0" />@ig;
    1;
}
1;
 ※今回の修正を含んだソースです。
※少しvimの色付け変ですね...
これを使うと、記事本文に
以下の画像を見てください。<br />
<!-- imageref パンダ:panda.png -->
 と書くことで
<img src="http://mattn.kaoriya.net/images/panda.png" alt="パンダ" border="0"/>
 というHTMLが出力されます。例えばサイトの引越しや画像格納パスの変更で全ての記事に手直しをする必要が無くなる訳です。

また、このプラグインでは 以下の画像を見てください。<br />
<!-- imageref thumb:パンダ:panda.png -->
 と書く事で <a href="http://mattn.kaoriya.net/images/panda.png"><img src="http://mattn.kaoriya.net/images/panda-thumb.png" alt="パンダ" border="0"/></a>
 と変換してくれる為、使い手側は「panda.png」とサムネイル画像「panda-thumb.png」を用意しておけばいい事になります。
実際は、「panda.png」から「panda-thumb.png」への画像変換は手作業で convert panda.png -resize 300x200 panda-thumb.png
 ※convertはImageMagick付属コマンド
とやってるのですが、ここも本当はオートメーション化したいと思っています。

で、今回はこのプラグインを紹介したかったのではなく、jQueryでサムネイル画像から実画像への表示をビジュアルに表現してくれる「Shadowbox」というプラグインを導入しました。
mjijackson » Shadowbox 1.0 released
なぜ導入に至ったかというと、このimagerefプラグインを少し修正すれば簡単にShadowboxが使えるのでは無いかと思ったからです。
Shadowboxを使うためには、jqueryのロードは必要になります。そして初期化処理として <script type="text/javascript"><!--
$(document).ready(function() {
    Shadowbox.init();
});
--></script>
 というコードを書き、あとは
<a src="xxx-big.jpg">
  <img src="xxx-small.jpg"/>
</a>
 となっている部分に「rel="shadowbox"」を足して
<a src="xxx-big.jpg" rel="shadowbox">
  <img src="xxx-small.jpg"/>
</a>
 とすれば良し。
class属性ではなく、rel属性を使っているので少し気味が悪い気もしますがそんなの気にしない。

今回はこれをimagerefが勝手に出力してくれる様に修正したまでです。

これでいつも通りにimagerefを使えば
<blockquote>
    <!-- imageref thumb:giraffe-photo.jpg -->
</blockquote>
 で
キリン
となる訳です。
ちなみにこのShadowbox、画像だけでなく
twtter - mattn
といったインラインHTMLやFlash、動画もサポートしている様です。結構手軽に導入出来る割に得られる効果が大きいかもしれません。
一度使って見られてはどうでしょうか？

関連記事
MOONGIFT: » クールに表示「Shadowbox.js」:オープンソースを毎日紹介

追記
shadowboxやめてjquery.lightbox(balupton edition)にしました。
Posted at by



2008/05/09


元々はきゃーさん所で知った「小粋空間: サイドメニュー折りたたみの動作遅延対処」をパクってやってたんですが、良く考えたらこのサイトってjQuery使ってたなぁ...と
$.each({
    tags : true,
    category : true,
    archives : true,
    comments : false,
    trackbacks : false
}, function(i) {
    var f = $('#' + i + 'name');
    f.click(function() {
        $('span', this).html(($('#' + i + 'list').css('display') != 'none') ? '▼' : '▲');
        $('#' + i + 'list').toggle('fast');
    }).css('cursor', 'pointer').append('<span>▲</span>');
    if (this == true) f.click();
});
 すんなり少量のコードになりました。jQuery++
Posted at by