jQuery Cycle Plugin とフォートラベル API で旅行写真をシャッフル表示する

はじめに フォートラベル API の旅行記検索 API を使って、入力した郵便番号からその地域の旅行記を検索します。続けて、見つかった旅行記の写真(大)を img 要素として追加します。

次に JQuery Cycle Plugin の shuffle を使って、旅行写真(大)をシャッフルしながら繰り返し表示します。shuffle という効果はそのほかの効果と比べて、機械的な印象が薄く、少し人の雰囲気を感じるので気に入りました。

デモを見る

jQuery(function($) {

$('#f').submit(function(e) {
  var c = $(this.c1).val()
    + '-'
    + $(this.c2).val();
    
  var url = 'http://api.4travel.jp/Ver1/SearchAlbum.php'
    + '?callback={fn}';
  var params = $.param({
    format: 'jsonp',
    zip: c,
    max: 3
  });

  $('#r').empty();

  $('#i')
    .show()
    .jsonp(url+'&'+params, function(response) {
      $(this).hide();

      if (response.error)
        return;

      $.each(response, function(i, album) {
          
        $('<img />')
          .attr('alt', this.albumtitle)
          .attr('src', this.picture.replace(/sml/g, 'lrg'))
          .attr('width', 400)
          .attr('height', 300)
          .appendTo('#r');

        $.each(this.pictinfo, function() {
            
          $('<img />')
            .attr('alt', album.albumtitle)
            .attr('src', this.picturl.replace(/sml/g, 'lrg'))
            .attr('width', 400)
            .attr('height', 300)
            .appendTo('#r');
        });
      
      }); //$.each

      $('#r').cycle('shuffle');

    }); //.jsonp

  return false;
  
}).submit(); //.submit

}); //jQuery

ひとりたび2年生 たかぎなおこ by G-Tools

Prototype $$ メソッドを jQuery Selector で置き換えてみる

prototype.js の開発者向けメモ $$() 関数を使う の中で、次のとおり、使い方によってはパフォーマンスに影響するので $$ 関数の置き換えを検討してはどうかとあります。

パフォーマンスについてちょっと記しておきます。 prototype.js の $$() 関数の現在の実装では、特に効率的な実装を重視しているわけではありません。この関数を頻繁に使って、深く複雑な HTML 文書を処理しようとしているのなら、単純に $$() 関数自体を置き換えることができる、他のフリーの実装を検討した方がいいかもしれません。

$$() 関数の CSS Selector と似たものといえば jQuery が思いつくので、次のとおり $$() 関数を jQuery の Selector の実装で置き換えてみました。

<script type="text/javascript">
//<![CDATA[
function $$() {
  var elements = [];
  $A(arguments).each(function(expr) {
    elements = elements.concat($A(jQuery(expr)));
  });
  return elements.map(function(element) {
    return Element.extend(element);
  });
}
//]]>
</script>

$$() 関数の引数 (Selector 記述) を jQuery で繰り返し、その選択した要素の配列を返します。このとき Element.extend を使って要素を拡張しています。

Prototype と jQuery は相性(衝突)の問題がありますが、jQuery は 利用者の判断で回避できるような仕組み を提供しています。

Ajaxハッカーズ・プログラミング―基礎からprototype.js、Yahoo!UIライブラリ、HTML_AJAXの活用までWebアプリケーション制作のプログラミング・テクニック 佐久嶋 ひろみ by G-Tools

ページから自ページのリンクを削除してユーザビリティを改善する

Jakob Nielsen は ウェブ・ユーザビリティ 顧客を逃がさないサイトづくりの秘訣 や ホームページ・ユーザビリティ 顧客をつかむ勝ち組サイト32の決定的法則 の中で、ホームページのユーザビリティを保証するガイドラインの1つとして、ページの中から自ページにリンクしない というのがあります。



トップページであるにも関わらず HOME ボタンやロゴのリンクがあるなどがその代表例です。ページの中から自ページのリンクがあると、利用者は自らの立ち位置がわからなくなり、混乱するというのが趣旨のようです。

このことはよく理解していますが、ホームページを作成する過程で、ヘッダ、フッタ、サイドバーなどページで変化がない領域は、テンプレートを使って手間を削減したりするので、各ページで異なるリンク先を指定したり、しなかったりするのは、技術や予算の面から現実的じゃないというところに落ち着きます。

ホームページのユーザビリティを改善できると知りながら、何も手を打たないのは歯がゆいことです。そこで WEB ブラウザでページを表示したときに JavaScript (jQuery) を使って、ページの中から自ページのリンクを削除する方法を考えました。

その JavaScript (jQuery) のコードは次のとおりです。思ったよりもシンプルに書けました。

/*
 * Postal Search APIs & Solutions
 * Copyright(C) 2007 LEARNING RESOURCE LAB
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
 */
jQuery(function($) {

var href = location.href.split('#')[0];
$('a').each(function() {
  if (href == this.href)
    $(this)
     .before(this.childNodes)
     .remove();
});

});

はじめに location オブジェクトから自ページの URL を取得します。このときページ内のリンクは除外します。ページ内のリンクは削除せず、そのまま残しておくためです。

続けてページ内の a 要素を繰り返します。このとき自ページの URL を持つ要素だけを対象とします。そして a 要素の子要素を a 要素の直前に挿入して移動します。その後 a 要素それ自体を削除します。

この JavaScript (jQuery) のコードは Postal Search APIs & Solutions のすべてのページに組み込んであります。これにより、ホームページのユーザビリティが改善された(もしくは違和感がない)と感じてもらえればうれしいです。

Webユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。 石田 優子 有限会社 アルファサラボ by G-Tools

jQuery in Action (洋書) を予約しました

jQuery in Action を Amazon で予約しました。2007年12月の発刊とあるので、手元に届くのはもう少し先になりそうです。

著者の一人 Yehuda Katz のブログにもエントリがありました。

Katz Got Your Tongue? » jQuery in Action (w00t)

It’s intended for people who already know some JavaScript, but still have questions about jQuery. It’s thorough, while going beyond the typical API runthrough (there are excellent examples; in later chapters, especially Ajax, the examples run through the entire chapter and show you how to complete a fairly detailed, yet typical project using jQuery).

Twitter API ガイドブック はアイディアいっぱいです

Twitter!―Twitter APIガイドブック を手に入れました。

単に Twitter API の和訳にとどまらず、Python、Ruby、Perl、Java、C/C++ のライブラリの紹介とサンプルプログラムも含まれています。

また Twitter API を使ったサービスやツールを数多く紹介していますので、Twitter API を使ってどんなことが実現できるのか把握しやすく、またアイディアを膨らませるのに役立ちます。

さらに Twitter や Twitter API の類似サービスの紹介と比較もあり、Twitter の特徴や位置づけを理解するのにも役立ちます。



Twitter API は JSONP をサポートしていますので JavaScript だけでも十分遊べます。

Interface Elements の ScrollToAnchors はページ内外リンクを区別してくれない!?

Interface Elements の Scrollto でページ内リンクを快適スムースに！

Postal Search Ajax API リファレンス のページ内リンクのジャンプを Interface elements for jQuery の Scrollto を使って、スムースにスクロールするようにしました。

↑と思いきや、Interface Elements の ScrollToAnchors はページ内外リンクを区別していないため、# を指定したページ外リンクが機能しなくなってしまいました。なんてこった。

ScrollToAnchors (ifxscrollto.js) のソースコードは次のとおりです。a 要素の href 属性で # を含むものに click イベントを仕掛けています。このとき、# 以降の文字列をスクロール先の要素の ID として使っています。このように a 要素の href 属性の URL からページ内のリンクか、ページ外のリンクか区別していないため、# 指定のページ外リンクがページ内リンクと判断されます。

    ScrollToAnchors : function(speed, axis, easing) {
      return this.each(
        function()
        {
          jQuery('a[@href*="#"]', this).click(
            function(e)
            {
              parts = this.href.split('#');
              jQuery('#' + parts[1]).ScrollTo(speed, axis, easing);
              return false;
            }
          );
        }
      )
    }

ですので、ScrollToAnchors を使わずに、次のように自前のコードを用意しました。現在のページの URL を location.href から取得し、その URL を基準として、ページ内リンクか、ページ外リンクかを区別するようにしています。そして、ページ内リンクのときだけ ScrollTo を使って、ページ内をスムーススクロールするようにしています。

var pageUrl = location.href.split('#')[0];
$('a[@href]', '#content').each(function() {
  if (this.href.indexOf(pageUrl + '#') == 0) {
    var id = this.href.split('#')[1];
    $(this).click(function() {
   $('#' + id).ScrollTo('slow');
   return false;
 });  
  }
});

上記の自前のコードを適用したページは次のとおりです。ページ内外のリンクとも期待どおり機能するようになりました。

Postal Search Ajax API ダイジェスト
Postal Search Ajax API リファレンス

Jquery in Action Bear Bibeault Yehuda Katz by G-Tools

本日9月30日付の郵便番号データを反映しました

本日、9月30日付の 郵便番号データ(全国) を反映して Postal Search Ajax API で検索できるようにしました。

また、合わせて Postal Search Ajax API 構築キット の中の郵便番号データも、9月30日付のものに差し替えて、ダウンロードできるようにしました。

マッシュアップカフェのプレゼン資料で Postal Search Ajax API のサンプルが引用されました

マッシュアップカフェの BLOGRANGER API のプレゼン資料の中で Postal Search Ajax API のサンプルが引用されました。

マッシュアップカフェの様子は、こちらにレポートがあります。

第5回　マッシュアップカフェ・第3回 「ブログ検索」前半 : マッシュアップカフェ : 記事 : MASHUPEDIA - マッシュペディア - : Web API x Mashup

BLOGRANGER API のサイトと、マッシュアップカフェのプレゼン資料はこちら。

BLOGRANGER API / NTT、NTTレゾナント（goo）/ プレゼン資料 (PDF)

引用された Postal Search Ajax API のサンプルはこちら。

Postal Search Ajax API サンプル
郵便番号の地域に関連するブログを検索する (by BLOGRANGER API)

jQuery のロゴがいろいろあります

次のサイトに jQuery のロゴがいろいろあります。

jQuery » jQuery Button Contest Winners

jQuery » jQuery Button Contest - Many Prizes!

日本のロゴ―企業・美術館・博物館・老舗…シンボルマークとしての由来と変遷 成美堂出版編集部 by G-Tools

jQuery fixedUI プラグイン - jQuery Catfish Advert Plugin の代替に -

WEB ブラウザの画面下に指定したブロック要素を固定して表示する jQuery プラグインです。ページをスクロールしても、指定したブロック要素を常に WEB ブラウザの画面下に表示します。

また、固定したブロック要素は表示や非表示の指示ができます。表示を指示すると、画面下からブロック要素をスライドしながら表示します。非表示を指示すると、画面下にブロック要素をスライドしながら隠します。

同じ効果のある jQuery Catfish Advert Plugin という jQuery プラグインもあるのですが、配布していたサイトが休止?していて入手できなくなっています。今後、再開してメンテナンスするのかもかわかりません。それじゃということで jQuery Catfish Advert Plugin と同じ振る舞いをするプラグインを自ら作ってみたわけです。

ダウンロード

jquery.fixedUI.js (Uncompressed only)

デモ

次のボタンをクリックすると、IBM developerWorks のようなフィードバックのフォームを WEB ブラウザの画面下に表示したり隠したりします。また、フォームの送信ボタンをクリックしても隠れます。デモを見る

<script type="text/javascript">
//<![CDATA[

jQuery(function($) {

$('#show').click(function() {
  $.fixedUI('#box');
});

$('#hide').click(function() {
  $.unfixedUI();
});
  
$('#form').submit(function() {
  $.unfixedUI();
  return false;
});

}); //jQuery

//]]>
</script>

<p>
<input id="show" type="button" value="$.fixedUI" />
<input id="hide" type="button" value="$.unfixedUI" />
</p>

<div id="box" style="display:none;">
この記事についてどう思われますか？
<form id="form">
<input type="radio" name="pt" value="5" />大変素晴らしい
<input type="radio" name="pt" value="4" />良い
<input type="radio" name="pt" value="3" />まあまあ
<input type="radio" name="pt" value="2" />改善の余地あり
<input type="radio" name="pt" value="1" />不充分・不完全である<br />
<input type="submit" value="送信" />
</form>
</div>

仕組みや問題点など

WEB ブラウザの画面下へのブロック要素の固定は position: fixed スタイルを使って実現しています。IE 7.0 の標準モード、Firefox 2.0、Opera 9.2、Safari 3 (ともに Windows XP) は期待どおり動作します。

ただし、IE 6.0 は fixed スタイルをサポートしないため、次のように absolute スタイルを使って擬似的に fixed 相当を実現しています。ですので、目立たないように工夫はしていますが、ページをスクロールしたとき、どうしてもブロック要素が 1px くらいズレながらカクカクとしてしまいます。

また IE 7.0 は互換モードのみ fixed スタイルをサポートしていません。IE 6.0 と同じく absolute で擬似的に fixed を実現しようと試みていますが解決できていません。何かよいアイディアはありませんでしょうか。特に IE 6.0 と 7.0 で position: absolute としたときの bottom: 0 の振る舞いの違いに悩んでいます。

        container
          .css('position', 'absolute')
          .each(function() {
              this.setExpression('', 'this.style.filter=""'); // --(1)
              this.style.setExpression('width', // --(2)
                'document.documentElement.clientWidth || ' +
                'document.body.clientWidth'
              );
            });

        if (body.css('backgroundImage') == 'none') // --(3) 
          body.css('backgroundImage', 'url(#fixedUI)');
        body.css('backgroundAttachment', 'fixed'); // --(4)

(1) はウィンドウのリサイズやページのスクロールなど、ブロック要素の位置が変化したときに再描画するためのおまじないです。expression() > 仮想-position:fixed を参考にしました。

(2) はブロック要素を WEB ブラウザの画面横いっぱいに表示するためのものです。width: 100% スタイルでも同じ効果が期待できますが、BODY (HTML) のマージンがあるとその分だけ余白ができてしまうので、setExpression を使って常に再描画するようにしています。

(3)(4) は (1) の再描画のチラツキを防止するためのおまじないです。IEでボックスを固定配置する方法 (ウェブのあれこれ格納庫) を参考にしました。

世界のナマズ 江島 勝康 by G-Tools

IE 7.0 から position: fixed スタイルがサポートされてます(ようです)

IE 7.0 から position: fixed スタイルがサポートされたのですね(ようです)。

次のように IE のときだけ position: fixed スタイルを absolute で代替しようと試みていたのですが、IE 7.0 が期待どおりのポジショニングにならないので、少し悩みました。

(function($) {
  if ($.browser.msie)
    container
      .css('position', 'absolute');
})(jQuery); // function($)

次のように、バージョン 7.0 未満という条件が必要ですね。

(function($) {
  if ($.browser.msie && $.browser.version < 7.0)
    container
      .css('position', 'absolute');
})(jQuery); // function($)

追記です。IE 7.0 であっても後方互換モードのときは position: fixed スタイルはサポートされません。ですので、次のように、後方互換モードのときという条件も必要ですね。

(function($) {
  if ($.browser.msie && (!$.boxModel || $.browser.version < 7.0))
    container
      .css('position', 'absolute');
})(jQuery); // function($)

世界の「最先端」事例に学ぶ CSS ベスト・プラクティス [Web Designing Books] (Web Designing BOOKS) 大藤 幹 by G-Tools