1年のスケジュールを見渡せるポスターカレンダー

2008年全体のスケジュールを見渡せるように、次のような A2 版の ポスターカレンダーを購入 しました。

1枚の中に1月から12月すべてのカレンダーが含まれ、かつ記入スペースもあるので実用性も高いです。

また、カレンダーといえば週単位で改行するものが多いですが、このカレンダーは月単位の改行となっているので、月単位でスケジュールが決まる私にとっては、週をまたいで記入できたり、月末がハッキリ見えるので、とても扱いやすいです。

価格もお手ごろ 420 円です。東急ハンズでも取り扱っています。

DANESE（ダネーゼ） 卓上万年カレンダー Ti ホワイト



by G-Tools

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