jQueryでテンキーパッド

2010-08-18 本稿はテーマを変更したことで、このページの表示やJavaScript動作に支障が出たため、作り直しました。本文は古いものと変更内容が混在しているため、分かり難いと思います。サンプルをダウンロードして、動作を確認してみて下さい。


工場現場でPCを利用する場合、キーボードを叩いたりマウスを操作するような、そんなオフィッスでの使い方はNGである。マンマシンインターフェースを考えるなら、液晶ディスプレイ上でタッチパネルを利用したり、バーコードやRFIDなどを使ったシステムが良い。

本体となるPCであるが、最近ASUSから安価なタッチスクリーン液晶PCが出てきたので、いよいよ本格的に工場に新しいシステムを導入しよう、という意欲が湧いてきた。

ところで、日本の花形産業だと思っていた製造業も、ご存知の通り、今や3Kのみならず低賃金となってしまった。そんな中でIT化やIT利用を考えるなら、今やオープンソースの活用は欠かすことができない。

と言うことで、今後現場でブラウザを利用したシステムを開発するための技術的な要素として、JavaScriptを利用してタッチスクリーンから情報を入力するためのテンキーバッドを作ってみた。折角なので、電卓機能も追加した。

また、キートップの画像は、各画像を1つにまとめてCSSで切り分けて利用する方法を行なってみた。

c ac ent
7 8 9 /
4 5 6 *
1 2 3
0 . = +

IE8以外の Internet Explorer では動作しません m(_ _)m。

作成におけるポイント

タッチスクリーン液晶PCで動作するクライアントプログラムの入力機能として作ろうと思ったものの、論理的に難しい部分はないのだが、いざ進めて見ると漠然としているため具体的にならず、なかなか進まない。そこで、

  • 「電卓」のようなキー配列にし、なおかつ電卓としても利用できるようにしよう

と考えた。そしてキートップは、HTMLのボタンを使わずに画像を使い、

  • ボタン画像を1ファイルにまとめて、キータッチの表示動作を切り替える

プログラムにしようと考えた。Web上では、多くの人が知識や技術、ツールを公開してくれており、本当にありがたい。以下、参考にさせてもらった り、使わせてもらったサイトである。なお、動作確認でIE8を利用した際、JavaScriptの設定やWeb標準準拠について、最後に情報をまとめる。

  • キートップ画像の作成
    今風のボタン画像を、フォント、サイズ、カラー、形状を指定して自動生成してくれる。
    ボタン作成工房β http://tools.clubsite.jp/buttons/

    2010-08-12現在、上記サイトはリンク切れでした。その他のサイトを当たった所オンラインで以下のサイトがありました。
    ButtonBoost http://www.buttonboost.com/index.php
    Buttonator http://buttonator.com/

    クライアントサイド(Windows上)で実行できるソフト。お手軽に使えので便利です。今回の書き直し(100818)において、本稿サンプルで利用させていただきました。
    窓の杜 AquaMaker

  • 軽量ペイントソフト AzPainter
    透過GIFの作成やレイヤー機能を持つ、小回りの利くペイントソフト
    Azel氏のVectorページ http://hp.vector.co.jp/authors/VA033749/index.html
  • CSS Spriteのまとめ
    1つの画像で、CSSを利用して分割利用する方法についてのAppler氏のまとめページ
    Applerの備忘録(仮) http://kleza.blogspot.com/2009/04/css-sprite.html

ダウンロード

画像とHTMLを圧縮してリンクしておくので、実験用にどうぞ。なお、「123 – 193.2」の実行結果を見てもらえば分かるが、JavaScriptの計算における端数の扱いにより、意図しない結果が表示されることがあるかもしれないのでご注意を(JavaScript電卓)。お決まりですが、何の保障もないAS-ISでどうぞ。

Download:[link_download_file filename=”tenkeypad.zip”]

2010-08-18
テーマを変更したことで、このページの表示やJavaScript動作に支障が出たため、作り直しました。作り直したサンプルは、次のダウンロードリンクからダウンロードできます。画像、プログラム、CSSの使い方それぞれ変更しています。電卓部分のロジックは変わりません。

New Tenkey Pad : [link_download_file filename=”newtenkeypad.zip”]

技術的な内容について

1つの画像を分割して表示するには

CSSを利用する場合、「画像を切り出す」という考え方をすると難しいかも知れない。考え方を変えて、「表示したい部分の大きさを持つ枠(ここではテーブルを利用)を用意し、表示したい部分へオフセットするように位置指定」すればよい。

ここでは1つの方法として、キー配列をtableを利用して「60×60」のマス目とした。また、テーブルの値は計算で利用するように、「0~9+-*/」などの数字や記号を指定し、それらを表示しないように設定した。

tr {
    height: 60px;
}

td {
    background: url(tenkey.gif) no-repeat;
    text-indent: -1000px;
    width: 60px;
}

背景画像のオフセットは、tdタグに直接インラインでstyle指定することにした。タグにIDを振らずに指定でき、またプログラムで行なうより直感的で分かり易いと思う。

<td style="background-position:0 0">C</td><td style="background-...
<td style="background-position:0 -60px">7</td><td style="background-...

マウスカーソルがキートップに来た時の画像切り替え

キートップの画像切り替えは、aタグで利用するhoverクラスのように、jQeuryのイベント機能を利用して背景画像を切り替えるようにする。

$(document).ready(function() {
    $("td").hover(
        function() {$(this).css('background-image', 'url(tenkeyon.gif)')},
        function() {$(this).css('background-image', 'url(tenkeyoff.gif)')}
    );
}

2010-08-18 変更
以前のものは、キートップ画像を1つの画像ファイルにまとめたため、カーソルがキートップ上に来た際の画像切り替えが面倒くさい事になっていた。新しいものは1つの画像にマウス無し表示とマウス有り表示のそれぞれの状態をまとめた画像にし、キートップの数だけ画像ファイルを用意した。これにより、前回プログラムでCSSを書き換えていた作業を無くし、CSSで「:hover」に対して「background-position」を指定するようにした。

これで、下に記述した「追記」の部分は不要になった。

電卓機能を用意する

使ったとき違和感なく利用できるように、電卓の操作に似せることも重要だと思うが、結構面倒臭い。アルゴリズムを簡単に表すと、

  • 押されたキーの値を、tdタグに記入した文字列から取ってくる
  • キーの種類別に演算処理を行なう
  • 結果を表示する

となる。ここで演算子による計算処理だが、1つ1つ加減乗除を比較して処理を振り分けなくとも、「数字 演算子 数字」のように文字列を並べ、「eval()」を利用することで計算できるのでJavaScriptは便利だ。

IE8で利用(JavaScriptオン、CSS2準拠)するには

Firefox3で動作を確認した後、IE8で使おうとしたらインフォメーションバーにエラーが表示され、表示もガタガタで動作しなかった。 JavaScriptをオンにしなければ、と思い[ツール]-[インターネットオプション]-[セキュリティ]-[レベルのカスタマイズ]で、いろいろと 設定を変更して試してみるのだが、なかなかうまく動作しない。設定画面の下を見ると小さい字で

「*Intenet Explorer の再開後に有効になります。」

と書いてある。気が付くまでに、しばらく時間がかかった(T_T)。結局、次のホームページを参照して設定しなおした。

YAHOOヘルプ http://help.yahoo.co.jp/help/jp/common/sys/sys-07.html

要は、「スクリプト」項目の「Javaアプレットのスクリプト」、「アクティブスクリプト」、「スクリプトによる貼り付け処理の許可」を「有効にする」を設定し、IE8を終了、再起動すれば良い。

さて、JavaScriptは動作するようになったのだが、表示はガタガタのままだ。うーーーーん、確かIE8になってWeb標準準拠になったと聞いたのだが、はてさて。

IE8には、強力な「開発者ツール」と言うのが付いたので、メニューバーの下にある「ドキュメントモード」を「Quirks」から「IE8標準」に してみると意図した表示になった。どこかにモードを切り替える方法があるようだが、それが分からない。引き続き検索をすると、ようやく欲しい情報が見つ かった。

Microsoft® Expression® http://www.microsoft.com/japan/…

って、ちょ、このページ、タイトル分からな杉(^_^;)。

要は、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

を指定してね、ってこと。あるいは、metaタグを使って指定すれば、そっちが優先される。

ようやく、IE8でも普通に動作するようになった。動作確認の最後に、Google Chromeで実行、よもや問題ないと思ったところ、今回一番ダメダメになってしまった。バージョンを「1.0.154.59」から 「1.0.154.64」にアップデートしたがこれもダメ。inputタグの表示が下半分が崩れてしまう、というものだ。多分バグだろう、使わないから、 まぁいいや。

最後は投げやりな書き方になって申し訳ない。以上、備忘録でした。(090507)

追記

2010-08-18 新しいテンキーパッドでは以下の記述は不要となりました。2010-08-18 変更

ボタンの画像は、マウスがない時と上に来た時用の2画像を利用すると、ページ表示直後の操作で画像表示の読込みで、一瞬息継ぎするような表示動作になる。そこで、1画像にまとめてロード済み状態に変更した。

それにより、マウスカーソルの hover イベントの画像切り替え処理を、以下のように画像位置を計算してセットするように修正した。

$(document).ready(function() {
    $("td").hover(
        function() {
            if ($(this).css('background-position')) {
                pos = $(this).css('background-position').split(' ');
                $(this).css('background-position', (parseInt(pos[0]) - 240) + 'px' + pos[1]);
            } else {
                posx = parseInt($(this).css('background-position-x')) -256 + 'px';
                $(this).css('background-position', posx);
            }
        },
        function() {
            if ($(this).css('background-position)) {
                pos = $(this).css('background-position').split(' ');
                $(this).css('background-position', (parseInt(pos[0]) + 240) + 'px' + pos[1]);
            } else {
                posx = parseInt($(this).css('background-position-x')) + 256 + 'px';
                $(this).css('background-position', posx);
            }
        }
    );
}

ボタン画像も、各ボタンの間に4ピクセルのマージンを追加した。
(091018)

IE8で「$.css(‘background-position’)」が動作しないことに気が付き、「$.css(‘background-position-x’)」を利用するように修正した。以下のサイトを参考にさせていただきました。

(091103)