jQuery の Selector でカンマを使うと異なる要素の OR をとれる

jQuery の Selector でカンマを使うと異なる要素の OR を取れます。

次のように、異なる要素に対して同じ操作をするときは、

      $('#c1')
        .ToolTip({
            className: 'tooltip',
            position: 'mouse',
            delay: 500
          });

      $('#c2')
        .ToolTip({
            className: 'tooltip',
            position: 'mouse',
            delay: 500
          });

      $('.handle')
        .ToolTip({
            className: 'tooltip',
            position: 'mouse',
            delay: 500
          });

      $('a', '#r')
        .ToolTip({
            className: 'tooltip',
            position: 'mouse',
            delay: 500
          });

次のように、カンマを使えばよいですね。

   $('#c1, #c2, .handle, #r a')
     .ToolTip({
      className: 'tooltip',
   position: 'mouse',
   delay: 500
    });

カンマが OR と連想しにくい気がしますが、覚えてしまえば JavaScript コードのタイプ数をかなり減らせます。

オープンソースZen Cartカスタマイズ・ガイド―テンプレート、スタイルシート、JavaScriptからモジュール、管理画面のカスタマイズまで 佐久嶋 ひろみ by G-Tools

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

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

いわゆる普通のページ内リンクだと、即ジャンプしてしまうので、油断しているとページ内のどこにジャンプしたのか判断できなくなることがありました。が、Scrollto を使ってスクロールするようにしたところ、ページ内リンクの振る舞いが視覚的になり、何が起こっているのか判断しやすくなりました。

実例を見る

Scrollto を使ったスクロールは、次のようなページ内リンクがあったとすると、

<a href="#Postal">Postal オブジェクト</a>

そのスクロール先は、ページ内リンクで指定した # 以降の id を持つ要素になります。ページ内リンクは name 属性を使うことが多いようですが、Scrollto を使うときは id 属性である必要があります。

<a id="Postal"></a>

Interface elements for jQuery のロードは、次のように interface.js を指定するか、

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

もしくは、次のように iutil.js、ifx.js、ifxscrollto.js を指定します。

<script type="text/javascript" src="iutil.js"></script>
<script type="text/javascript" src="ifx.js"></script>
<script type="text/javascript" src="ifxscrollto.js"></script>

後はページ内リンクを含む要素に対して、ScrollToAnchors メソッドを呼び出すだけで完了です。

ScrollToAnchors メソッドの第1引数はスクロール速度です。'slow'、'normal'、'fast' かミリ秒を数値で指定します。

第2引数はスクロールの方向軸です。'vertical' か 'horizontal' を指定します。省略したときは、スクロール先に最短距離で(スクロール先が斜め方向なら斜めに)スクロールします。

<script type="text/javascript">
jQuery(function($) {
  $('#content')
    .find('a[@id]')
      .css('display', 'block')
      .end()
    .ScrollToAnchors('slow');
});
</script>

上の例では a タグを block 要素に変更しています。これは Opera 9 向けの対応です。Opera 9 では スクロール先が inline 要素だと、その要素がスクロール先にならず、ページの先頭にスクロールしてしまいました。Opera 9 を考慮するならスクロール先は block 要素にする必要があります。


実例を見る

USBハード&ソフト開発のすべて―USBコントローラの使い方からWindows/Linuxドライバの作成まで (TECHI―Bus Interface) インターフェース編集部 by G-Tools

Interface Elements の Tooltips をいろいろな要素で使ってみた

はじめに フォートラベル API の旅行記検索 API を使って、入力した郵便番号からその地域の旅行記を検索します。続けて見つかった旅行記の写真(小)をタイル状に並べます。

次に Interface elements for jQuery の Imagebox を使って、旅行記の写真(小)をクリックしたとき、その写真(大)をポップアップしてオーバーレイ表示します。

続けて Interface elements for jQuery の Slider を使って、ハンドルをスライドすると、旅行記の写真(小)のサイズを拡大(または縮小)表示します。

さらに Interface elements for jQuery の Tooltips を使って、郵便番号の入力ボックス、スライダのハンドル、旅行記の写真(小)にマウスをポイントすると、ツールチップを表示します。

デモを見る

Tooltips は delay オプションを省略すると、表示がチラチラ(チカチカ)して見栄えがよくありません。delay オプションは 200 から 500 あたりが適切のようです。

a 要素のツールチップは title 属性の値のほかに href 属性の値 (URL) も表示してしまいます。URL を表示したくないこともありそうですが、そのオプションはないようです。

input 要素に position オプションの mouse を指定すると、input 要素のフォーカスがある間は、ツールチップがマウスポインタに追随してしまうため、少し違和感があります。bottom にすると、ツールチップがすぐに消えてしまいます。input 要素でツールチップを使うには、ちょっとしたコツが必要そうです。

input 要素や a 要素のほかにも、スライダのハンドルのような div タグでもツールチップを表示できます。


デモを見る

Paper×Paper―uiの紙工作 中林 うい by G-Tools

Interface Elements の Carousel とフォートラベル API で旅行写真の 3D ギャラリーを作る

デモを見る

はじめに フォートラベル API の旅行記検索 API を使って、入力した郵便番号からその地域の旅行記を検索します。続けて見つかった旅行記の写真(小)を20枚ほど並べます。

次に Interface elements for jQuery の Carousel を使って、旅行記の写真(小)を奥行きのある回転をしながら表示します。

続けて Interface elements for jQuery の Imagebox を使って、旅行記の写真(小)をクリックしたとき、その写真(大)をポップアップしてオーバーレイ表示します。

      $('#r').Carousel({
        items: 'a',
        itemWidth: 120,
        itemHeight: 90,
        itemMinWidth: 60,
        rotationSpeed: 10.0,
        reflections: .5
      });

画像のサイズは横幅が基準となるようです。ですので、itemWidth はとり得る最大の横幅を、itemMinWidth は最小の横幅を指定します。itemHeight は不要そうですが、回転しながら表示する位置を決めるために使うようなので itemWidth と同じくとり得る最大の縦幅を指定しています。

rotationSpeed は通常の回転の速度ではなく、マウスをポイントしたときの回転の速度を表します。この値は重みのようで、数値を大きくすればするほど速くなります。

reflections は写真が反射して写り込む量を表します。0.0 だと反射なし、0.5 だと半分ほど反射し、1.0 だとすべて反射するようです。

KOKUYO アルバム絵本 旅行ブック お仕立て券16ページ写真13枚 KSSK-AEK13-1P by G-Tools

Interface Elements の Slider で旅行写真を拡大(または縮小)表示する

デモを見る

はじめに フォートラベル API の旅行記検索 API を使って、入力した郵便番号からその地域の旅行記を検索します。続けて見つかった旅行記の写真(小)をタイル状に並べます。

次に Interface elements for jQuery の Imagebox を使って、旅行記の写真(小)をクリックしたとき、その写真(大)をポップアップしてオーバーレイ表示します。

続けて Interface elements for jQuery の Slider を使って、ハンドルをスライドすると、旅行記の写真(小)のサイズを拡大(または縮小)表示します。

    var handle = $('<div />')
      .addClass('handle');
    $('<div />')
      .addClass('slider')
      .append(handle)
      .appendTo('#r')
      .Slider({
          accept: $('.handle'),
          onSlide: function(cordx) {
            $('img', '#r')
              .attr('width', .6 * cordx + 60)
              .attr('height', .45 * cordx + 45);
          }
      });

ハンドルをスライダしたとき、その値 0 から 100 に応じて、旅行写真の画像サイズを変化させています。横サイズは最小 60 から 最大 120 まで、縦サイズは最小 45 から 90 まで変化します。

世界の車窓から ―あこがれの鉄道旅行― Vol.4 遥かなる大地を行く(DVD付) by G-Tools

jQuery を使って入力ボックスに郵便番号のマスクを適用してみた

デモを見る

jQuery を使って、入力ボックスに郵便番号のマスクを適用してみました。

入力ボックスがフォーカスを得ると、"1234567" の書式での入力に制限します。また、入力済みの郵便番号があるときは、その郵便番号を選択状態にします。
入力ボックスがフォーカスを失うと、"123-4567" のハイフン付きの書式に変更します。

カット & ペーストに対するマスクは対応していません。今後の課題です。現在、シンプルかつ確実な方法を模索しています。

jQuery(function($) {

$('#c')
  .keypress(function(e) {
      var code = typeof(e.charCode) != 'undefined'
        ? e.charCode : e.keyCode;

入力した文字コードを判別するため、ブラウザの差異を吸収します。Firefox など charCode プロパティを持つブラウザは charCode プロパティを、IE など charCode プロパティを持たないブラウザは keyCode プロパティを使います。
なお fix_events.js プラグインを使うと、キーボードイベントのブラウザの差異を吸収できるようです。

      if (code && !e.ctrlKey)

なんらかの文字を入力して Ctrl キーを押していないとき、文字の入力を制限します。
Ctrl キーを除外しているのは、カット (Ctrl+C) & ペースト (Ctrl+V) などを受け入れるためです。

        if ((code < 48 || code > 57)
          && code != 8 // BACKSPACE (Safari3)
          && code != 9 // TAB (Safari3)
          && code != 13) // RETURN (IE6, Opera9, Safari3)
            e.preventDefault();
    })

数字以外の文字のときはイベントをキャンセルし、既定の振る舞いをするよう促します。
ただし preventDefault メソッドの解釈がブラウザにより異なるため、バックスペースキー、タブキー、リターンキーのみ明示的に受け入れるようにしています。

  .focus(function() {
      var c = this.value;
      c = c.replace(/[^\d]/g, '');
      this.maxLength = 7;
      this.value = c;
      $(this).select();
    })

フォーカスを得たとき、入力ボックスの値を数字だけに変更します。このとき、入力文字数を7文字に制限して、入力済み数字があれば選択状態にします。

  .blur(function() {
      var c = this.value;
      c = c.replace(/[^\d]/g, '');
      if (c.length >= 3)
        c = c.substr(0, 3) + '-' + c.substr(3);
      this.maxLength = 8;
      this.value = c;
    });

フォーカスを失ったき、入力ボックスの値を "123-4567" の書式に変更します。

$('#c')
  .blur();

WEB ページをロードしたとき、入力ボックスの明示的にフォーカスを失わせ、入力ボックスの値が "123-4567" の書式になるようにつじつまを合わせます。

$('#f')
  .submit(function() {
      $('#c').blur();
    });

}); //jQuery

フォームを送信するときも同様です。

となりのトトロ SG-047A 郵便番号 by G-Tools

Interface Elements の Slider で郵便番号を入力してみたが・・・

デモを見る

Interface elements for jQuery の Slider を使って郵便番号を入力します。

7つある Slider は郵便番号の桁に対応しています。最も上の Slider が郵便番号の1桁目で、下に向かって2桁目、3桁目と続きます。そして、最も下の Slider が7桁目です。

Slider がとり得る値は 0 から 100 の相対値か、Slider 要素の幅の 0px から style.width のピクセル値です。ですので、郵便番号の7桁のように大きな値の幅持ち、かつ1刻みで入力を必要とするケースには Slider は適しません。Slider を使おうとするとき、その用途ととり得る値が期待どおりなのか検討が必要になるでしょう。

<style type="text/css">
<!--

.slider {
  background-image: url(/postal/images/slider_resize_back.jpg);
  margin: 0.5em auto;
  width: 300px;
  height: 20px;
  position: relative;
}

.handle {
  background-color: #fff;
  border: 1px solid #ccc;
  height: 20px;
  width: 10px;
  cursor: move;
}

#f {
  text-align: center;
}

#c {
  width: 7em;
}

-->
</style>

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

jQuery(function($) {

$('.slider').each(function(i) {
  $(this).Slider({
    accept: $('.handle', this),
    onSlide: function(cordx) {
        var x = Math.floor(Math.max(0, cordx - 1) / 10);
        var c = $('#c').val();
        while (c.length < 7)
          c = '0' + c;
        $('#c').val(c.substr(0, i) + x + c.substr(i + 1)
        );
      }
  });
});

}); //jQuery

//]]>
</script>

<form id="f">
〒
<input id="c" type="text" name="c" value="" maxlength="7"/>
</form>

<div id="s1" class="slider"><div class="handle"></div></div>
<div id="s2" class="slider"><div class="handle"></div></div>
<div id="s3" class="slider"><div class="handle"></div></div>
<div id="s4" class="slider"><div class="handle"></div></div>
<div id="s5" class="slider"><div class="handle"></div></div>
<div id="s6" class="slider"><div class="handle"></div></div>
<div id="s7" class="slider"><div class="handle"></div></div>

となりのトトロ SG-047A 郵便番号 by G-Tools

Interface Elements の Imagebox とフォートラベル API で旅行写真のギャラリーを作る

デモを見る

はじめに フォートラベル API の旅行記検索 API を使って、入力した郵便番号からその地域の旅行記を検索します。続けて見つかった旅行記の写真(小)をタイル状に並べます。

次に Interface elements for jQuery の Imagebox を使って、旅行記の写真(小)をクリックしたとき、その写真(大)をポップアップしてオーバーレイ表示します。

平成20年度 イメージ&クレバー方式でよくわかる 栢木先生の基本情報技術者教室 栢木 厚 by G-Tools

Postal Search Ajax API チュートリアル

Postal Search Ajax API を使う(使いはじめる)ための手順を Postal Search Ajax API チュートリアル として新しくまとめました。

その内容は次のとおりです。

1. 郵便番号と住所の送信フォームを用意する
2. サインアップして API Key を取得する
3. 送信フォームに検索ボタンを追加する
4. 送信フォームに JavaScript を追加する
5. 送信フォームの動作を確認する
6. Postal Search Ajax API を活用する

このチュートリアルでは、サインアップして API Key を取得するところから、送信フォームに API を組み込む手順までをまとめています。

ですので、このチュートリアルを読むと、よくある一般的な送信フォームに、郵便番号から住所を検索して表示する機能を追加できるようになります。

Postal Search Ajax API リファレンス アップデート

Postal Search Ajax API 0.5.0 リリース

本日(9月14日) Postal Search Ajax API 0.5.0 をリリースしました。今回のリリースには、新しい機能の追加や不具合の修正が含まれますが、旧バージョンとの互換性は保っていますので、今までどおりご利用いただけます。

Postal Search Ajax API 0.5.0 のリリースに合わせて Postal Search Ajax API リファレンスをアップデートしました。

変更点は次のとおりです。

次のとおり jQuery lookup プラグイン のリファレンスを追記しました。

jQuery lookup (function fn)

選択した要素の値を郵便番号とし、その郵便番号の住所を検索します。検索が成功か失敗すると、指定したコールバック関数を実行します。コールバック関数は jQuery.lookup と同じです。

選択した要素が input、select、textarea、button 要素のときは value 属性の値を郵便番号とします。それ以外の要素のときは、テキストノードの値を郵便番号とします。

jQuery lookupTo (string expr)

選択した要素の値を郵便番号とし、その郵便番号の住所を検索します。検索が成功したときは、指定した要素の値を住所とします。検索が失敗したときは何もしません。

選択した要素が input、select、textarea、button 要素のときは value 属性の値を郵便番号とします。それ以外の要素のときは、テキストノードの値を郵便番号とします。

指定した要素が input、select、textarea、button 要素のときは value 属性の値を住所とします。それ以外の要素のときは、テキストノードの値を住所とします。複数の住所が見つかったときは、その内のいずれか1つを採用します。

次のとおり jQuery later プラグイン のリファレンスを追記しました。

jQuery.later (function fn)

指定した処理の実行を後回しにします。10ms 経過すると、指定したコールバック関数を実行します。

Postal Search Ajax API 0.5.0 リリース

本日(9月14日) Postal Search Ajax API 0.5.0 をリリースしました。今回のリリースには、新しい機能の追加や不具合の修正が含まれますが、旧バージョンとの互換性は保っていますので、今までどおりご利用いただけます。

また合わせて Postal Search Ajax API 構築キット もアップデートしましたので、必要に応じて、ダウンロードして差し替えてください。

変更点は次のとおりです。

Postal.Lookup クラス (jQuery lookup プラグインを含む)を使い、複数で同時並行して郵便番号から住所を検索すると、その検索結果の都道府県(フリガナを含む)が、タイミングによって稀に重複してしまう不具合を修正しました。

jQuery later プラグインに jQuery.later メソッドを追加しました。

次のように jQuery lookup プラグインの lookup メソッドで、郵便番号を指定しないとき、現在の要素のテキストを郵便番号として、住所を検索できるようにしました。

次の例は id="r2" の要素のテキストを郵便番号として住所を検索し、その結果を id="r2" の要素のテキストとして表示しています。

<div id="r2">160-0021</div>

<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
  $('#r2')
    .lookup(function(response) {
        if (response.length > 0) {
          var addr = response[0];
          $(this).text(addr.a);
        }
      });
});
//]]>
</script>

次の例は id="c3" の入力ボックスの値を郵便番号として住所を検索し、その結果を id="a3" の入力ボックスの値として表示しています。

<form>
<input id="c3" name="c3" value="160-0021" size="10" /><br />
<input id="a3" name="a3" value="" size="50" />
</form>

<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
  $('#c3')
    .lookup(function(response) {
        if (response.length > 0) {
          var addr = response[0];
          $('#a3').val(addr.a);
        }
      });
});
//]]>
</script>

次のように jQuery lookup プラグインに lookupTo メソッドを追加しました。郵便番号から検索した住所を、指定した要素のテキストとして直接的に指定できるようになりました。

次の例は id="r4" の要素のテキストを郵便番号として住所を検索し、その結果を id="r4" の要素のテキストとして表示しています。

<div id="r2">160-0021</div>

<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
  $('#r4').lookupTo('#r4');
});
//]]>
</script>

次の例は id="c5" の入力ボックスの値を郵便番号として住所を検索し、その結果を id="a5" の入力ボックスの値として表示しています。

<form>
<input id="c5" name="c5" value="160-0021" size="10" /><br />
<input id="a5" name="a5" value="" size="50" />
</form>

<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
  $('#c5').lookupTo('#a5');
});
//]]>
</script>

jQuery lookup プラグインの内、後者の lookupTo メソッドによって、郵便番号から住所を検索して表示するという振る舞いを WEB ページにシンプルに追加できるようになったと思います。

Postal Search Ajax API 0.5.0 を反映したリファレンスは執筆中です。準備ができましたらこのブログで連絡します。

JavaScriptの論理演算でfalseと評価される値とは?

JavaScript の論理演算で false と評価される値を把握していないと、正しいコードだと思っていた式が期待どおりの結果にならないことに遭遇します。

JavaScript の 論理演算子の仕様は Core JavaScript 1.5 Guide:Operators:Logical Operators - MDC に詳しい説明がありますが、肌で感じようといくつか実際に試してみました。

↓試したパターンと結果は、次のとおりです。

alert(true || 'foo'); // true
alert(false || 'foo'); // 'foo'
alert(null || 'foo'); // 'foo'
alert(0 || 'foo'); // 'foo'
alert(0.0 || 'foo'); // 'foo'
alert('0' || 'foo'); // '0'
alert('' || 'foo'); // 'foo'
alert(undefined || 'foo'); // 'foo'
alert(NaN || 'foo'); // 'foo'

数値の 0 と文字列の '0' の評価が異なり、空文字 '' は false と評価されますので、直感とズレていると感じる方は、少し意識化しておく必要があります。

alert(NaN || 'foo'); // 'foo'

また Core JavaScript 1.5 Guide:Operators:Logical Operators - MDC に説明がありませんが、NaN は false と評価されるようです。

実例で学ぶGCCの本格的活用法―高機能コンパイラのオプション・コマンドを一つ一つていねいに解説 (TECHI―Embedded Software) 岸 哲夫 by G-Tools