電卓として使えるjQuery用プラグイン「jQuery Calculator」

ウェブサイト上のフォームに数字を入力するためのjQuery用プラグイン「jQuery Calculator」を紹介します。

jQuery Calculator

マウスで数字を入力できるので便利です。しかも電卓と同様に計算することができ、計算結果をフォームに貼り付けることができます。
とにかく多機能でカスタマイズもいろいろできます。「こんな機能、使うのか」というのもありますが、単純にウェブサイトに設置するだけならばとても簡単にできます。

上に書いたウェブサイトに行きます。
「Download now」をクリックしてzipファイルをダウンロードします。
適当なフォルダに解凍します。
中に「calculatorBasic.html」があるので、開きます。

これで使えます。
あとは自分が設置したいウェブサイト用にアレンジすればよいでしょう。

zrssfeedでRSSを取得

jQueryプラグインの「zrssfeed」を使うと簡単にRSSを取得して表示することができます。

RSS Feeds Reader Plugin for jQuery - Zazar Online Website Builder

上のページからプラグイン(jquery.zrssfeed.js)をダウンロードします。現在のバージョンは1.1.8でした。

使い方はとても簡単です。
まずHTMLに次のように書きます。idは任意です。

<div id="myid"></div>

プラグインjquery.zrssfeed.jsを適当なフォルダに保存します。
そのフォルダに応じて、次のように書きます。

<script type="text/javascript" src="フォルダ/jquery.zrssfeed.js"></script>

スクリプトに次のように書きます。
アドレスはRSSのURLです。
オプションは後述します。なくてもよいです。

$("#myid").rssfeed(アドレス,オプション)

これだけでHTMLに整形された状態で表示されるはずです。

ただし、オプションを調整しないと見た目が変な場合がほとんどです。
例えば次のようにオプションを付けます。

$('#mydiv').rssfeed('http://rss.dailynews.yahoo.co.jp/fc/rss.xml',{
    limit: 8,
    content:false,
    date:false,
    header:false,
    media:false,
    titletag:'p'
});

limitは表示される件数です。
contentは記事の内容です。デフォルトはtrueで表示されます。
dateは日時です。デフォルトはtrueです。
headerは記事の見出しです。デフォルトはtrueです。
mediaは画像情報です。デフォルトはtrueです。
titletagは記事の見出しのタグです。デフォルトはh4です。「<h4>見出し</h4>」となります。

オプションは他にもあります。
またプラグインに同梱されているサンプルが充実していますので確認してください。

jQueryでcookieを使う

jQueryでcookie(クッキー)を扱うにはプラグイン「jquery.cookie.js」を使うと簡単です。

Downloads · carhartl/jquery-cookie · GitHub

cookieを作る(書く)には次のようにします。cookieの名前と文字列(値)を指定するだけです。

$.cookie(名前,文字列);

有効期間は日数で指定します。指定しない場合はブラウザを終了すると削除されます。

$.cookie(名前,文字列,{expires:日数});

cookieを読むには次のようにします。

c=$.cookie(名前);

cookieを削除するには次のようにします。

$.cookie(名前,null);

jQueryプラグイン「flipCounter」

数字を「大きくて美しいアナログ表示」にするjQuery用のプラグイン「flipCounter」を使ってみました。

flipCounter 1.2 a jQuery plugin by BloggingSquared.ca

準備

まず、上のページでプラグインをダウンロードします。私は「Bare Bones」の1.2を使いました。
解凍してファイルを適当なフォルダに入れます。
例えばfcというフォルダにjs、imgというフォルダを作ります。

  • fc
    • js
    • img

jsにjquery.flipCounter.1.2.pack.jsを保存します。
imgにflipCounter-medium.pngを保存します。

そして、別のプラグインが必要になります。
danro/jquery-easing · GitHub
jsにjquery.easing.jsを保存します。

HTML

bodyの部分に次のように書きます。

<div id="counter1"><input type="hidden" name="counter-value" value="100" /></div>
<div id="counter2"><input type="hidden" name="counter-value" /></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.js" type="text/javascript"></script>
<script src="js/jquery.flipCounter.1.2.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$("#counter1").flipCounter();
</script>

最初の2行はカウンターを表示する部分です。
3行目はjQueryです。Googleから借りています。
4行目と5行目は先ほど準備したプラグインを指定しています。違うフォルダ構造の場合はここを修正します。
最後がコードの本体です。

JavaScript

上のコード本体の部分です。

$("#counter1").flipCounter();
$("#counter2").flipCounter("startAnimation", {
    number: 0,
    end_number: 99999,
    easing: jQuery.easing.easeOutExpo,
    duration: 5000
});

$("#counter1")の部分はHTMLで指定した「100」を表示するものです。動きません。
$("#counter2")の部分は「0」から「99999」までパタパタとアニメーションで表示するものです。easingで表示パターン、durationで間隔を指定します。

easingについては便利なチートシートがあります。
Easing Functions Cheat Sheet

プラグインや画像のフォルダを変える

上の例ではプラグインをjsというフォルダに保存していますが、別のフォルダに保存する場合は、

<script src={フォルダ} type="text/javascript"></script>

のフォルダの部分を適当に書き換えればよいです。

一方、画像ファイルについてはちょっと面倒です。
このプラグインはimgフォルダにある画像ファイルを読み出して使っていますが、デフォルトでは「HTMLファイルと同一のフォルダにあるimgというフォルダ」で固定です。
これと違うフォルダを使う場合は次のようにします。

$("#counter1").flipCounter({
    imagePath: "フォルダ/flipCounter-medium.png"
});
$("#counter2").flipCounter("startAnimation", {
    imagePath:"フォルダ/flipCounter - medium.png ",
    number: 0,
    end_number: 99999,
    easing: jQuery.easing.easeOutExpo,
    duration: 5000
});

jQueryでtagNameが使えない

jQueryの現時点での最新ヴァージョンは1.7.2です。
Downloading jQuery - jQuery JavaScript Library
HTMLのタグを取得するには「attr("tagName")」を使えばよいのですが、上手くいきません。
どうやらjQueryのヴァージョンによって取得できる場合とできない場合があるようです。
実際に動かして調べてみました。

version Chrome IE Firefox
1.5
1.5.1
1.5.2
1.6 × × ×
1.6.1 × ×
1.6.2 × ×
1.6.3 × × ×
1.6.4 × × ×
1.7 × × ×
1.7.1 × × ×
1.7.2 × × ×

ChromeとIEとFirefoxで調べてみました。
それも1.5では動きます。
しかし、1.6と1.7では動かないようです。ただしIEは1.6.1と1.6.2の場合は動きます。

テーブルにフィルター機能を付けるjQueryプラグイン

HTMLのテーブルにExcelのようなフィルター機能を付けようと思い、jQueryのプラグインを探したところ、見付からなかったので、自分で作ってみました。

サンプル

tablefilterサンプル

プラグイン

ダウンロードしてください。
jquery.tablefilter

使用例

<body>
<table id="mytable" border="1">
<tr><th>番号</th><th>名前</th><th></th><th>区分</th><th>所在地</th></tr>
<tr><td>1</td><td></td><td>100</td><td>A</td><td>埼玉県</td></tr>
<tr><td>2</td><td></td><td>200</td><td>B</td><td>千葉県</td></tr>
<tr><td>3</td><td></td><td>300</td><td>C</td><td>東京都</td></tr>
<tr><td>4</td><td></td><td>100</td><td>D</td><td>神奈川県</td></tr>
<tr><td>5</td><td></td><td>200</td><td>E</td><td>埼玉県</td></tr>
</table>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.tablefilter.js"></script>
<script type="text/javascript">
<!--
$(function () {
    $("table").tablefilter();
});
// --></script>
</body>

jQueryの本体と「jquery.min.js」と上でダウンロードした「jquery.tablefilter.js」を適当なフォルダに保存します。それに応じて「src=」の部分を書き換えてください。
「$("table").tablefilter();」と書くとそのページ内のすべてのテーブルにフィルターボタンが設置されます。
特定のテーブルだけに適用するときは、テーブルにidを設定し「$("#mytable").tablefilter();」のようにします。

jQueryで特定のoptionを選択状態にする方法

次のようなHTMLがあったとします。

<select>
<option>a</option>
<option value="x">b</option>
<option>c</option>
<option>d</option>
</select>

このとき、jQueryで、次のようなコードを使うとどうなるでしょうか。

$("select").val("x");

2番目のオプション「b」が選択状態になります。
「このselectの値を「x」にする」というような感じです。

しかし次のようにvalueがセットされていない場合でも動作します。

<select>
<option>a</option>
<option>b</option>
<option>c</option>
<option>x</option>
</select>

4番目のオプション「x」が選択されます。

<option value="あ">い</option>

この場合、JavaScriptでは「.value」を使うと「あ」、「.text」を使うと「い」となりますが、jQueryで「.val()」を使うと、両方が該当するようです。

では、valueとtextの両方に「x」がある場合はどうなるでしょうか。

<select>
<option>a</option>
<option value="x">b</option>
<option>x</option>
<option>d</option>
</select>

3番目のオプション「x」が選択されます。最後に該当するものが選択されるようです。
別のオプションのvalueとtextに同じ値をセットすることはまずないと思いますが。

なお次のようにしても正しく動作しません。

$("select").text("x");

jQueryのcssで得られる色情報はブラウザによって違う

jQueryでstyleで指定したフォントの色に関する情報は次のようにして得られます。

HTML

<div id="mydiv" style="color:blue">test</div>

jQuery

c=$("#mydiv").css("color");

これで変数cに色情報が文字列で代入されます。
とても簡単なのですが、ブラウザによって違う挙動をします。

IEの場合

HTMLで「style="color:blue"」とすると「blue」が得られます。
またHTMLで「style="color:rgb(0,0,255)"」とすると「rgb(0,0,255)」となります。
「rgb(0, 0, 255)」のように半角スペースを入れても「rgb(0,0,255)」のように半角スペースは省かれます。
「style="color:#0000ff"」とすると「#0000ff」となります。

Firefox、Chromeの場合

まず、HTMLで「style="color:rgb(0,0,255)"」とすると「rgb(0, 0, 255)」が得られます。
そして奇妙なのは次です。
HTMLで「style="color:blue"」とすると、やはり「rgb(0, 0, 255)」となります。
入力した文字列と違う文字列で出力されるのです。これは分かりにくいです。
また細かいですが「rgb(0, 0, 255)」のようにカンマの後に半角スペースが入ります。IEはスペースなしです。

HTML IE Firefox、Chrome
blue blue rgb(0, 0, 255)
rgb(0,0,255) rgb(0,0,255) rgb(0, 0, 255)

WikipediaAPIを使ってみる

今、GoogleやYahoo!のAPIについて調べているのですが、その中でウィキペディアの検索結果を取得できるAPIがあることを知りました。

WikipediaAPI - ウィキペディア情報をサイトで利用できるAPI

5年も前からあるのですね。
どんな動きをするのか、サンプルを作って確認してみました。jQueryを使っています。

HTML

<input type="text" id="word">
<input type="button" id="sbtn" value="search">
<div id="mydiv"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
//ここにコード
</script>

コード

$("#sbtn").click(function () {
    $("#mydiv").empty();
    var url = "http://wikipedia.simpleapi.net/api?output=json&keyword=";
    url += encodeURI($("#word").val());
    $.getJSON(url, null, function (data, status) {
        for (var i = 0; i < data.length; i++) {
            $("#mydiv").append("<h2>" + data[i].title + "</h2>");
            $("#mydiv").append("<p>" + (data[i].body).replace(/<.*?>/g, "") + "</p>");
        }
    });
});

検索した言葉だけでなく、関連する言葉についても検索してくれるようです。検索結果は検索した言葉によって件数が変わります。

jQueryでTwitterAPIを使う簡単なサンプル

TwitterAPIを使うと自分のツイートなどが簡単に取得できます。
またjQueryを使うとこれをブラウザに簡単に表示できます。
そのための最低限のサンプルを紹介します。

HTML

HTMLは次のようにします。
divでもpでも何でもよいのですが行数を数えるためにolにしました。

<ol id="myol"></ol>

JavaScript

jQueryを使っているという前提です。
getJSONを使うと簡単にツイートを取得できます。idは私のものです。
getJSONは取得したツイートを配列「data」に格納します。
eachは配列から一つずつ取り出して「item」に格納します。
ツイートは「item.text」で取得できます。
「item.created_at」とするとツイート時刻です。

$.getJSON("http://api.twitter.com/1/statuses/user_timeline.json?callback=?", {
    "id": "stabucky",
    "count": 10
}, function (data, status) {
    $.each(data, function (i, item) {
        $("#myol").append("<li>" + item.text + "</li>");
    });
});
新しい記事 | 古い記事

タグ

カテゴリー

最近の投稿

最近のコメント

固定ページ

アーカイブ

stabucky

写真

メタ情報