murak.net

アクセス解析・Googleアナリティクス・ネット戦略・SEO・Webプログラミングなどを綴るブログ

jQueryを使ったJavaScriptの書き方と、日本語入力モード制御の例

2010年2月18日(Update:2011年6月5日) by 村上 和久

jQueryというのは、JavaScriptのライブラリのひとつ。どんなライブラリかというと、「htmlから特定のclassや属性のタグを選んで書き換える」とう処理がとても簡単に書けてしまうもの。Ajaxの機能もあるのでJavaScriptのスクリプトを作るのに手放せない。

今回はjQuryの簡単な例として「特定の入力欄に来るとIME(日本語入力機能)を自動的にオンオフする」スクリプトの紹介と、jQueryを使ったJavaScriptの書き方を解説する。

IMEが勝手にオン・オフするのは個人的にはあまり好きではないんだけど、仕事で依頼があるとやらざるを得ない。cssで指定することもできるが、今回はjQueryを使って書いてみた。ちなみにIMEオン・オフの制御はIEでのみ働く。

test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>日本語入力モード変更テスト</title>
<script language="JavaScript" type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script language="JavaScript" type="text/javascript" src="js/jquery.ime-mode.js"></script>
</head>

<body>
<form>
名前 <input type="text" name="name"><br />
郵便番号 <input type="text" name="zip"><br />
住所 <input type="text" name="address"><br />
TEL <input type="text" name="tel"><br />
FAX <input type="text" name="fax"><br />
パスワード <input type="password" name="password" maxlength="40"><br />
内容<br /><textarea name="area" wrap="soft" cols="50" rows="15"></textarea>
<input type="hidden" name="hidden" value="hidden">
</form>
</body>
</html>

htmlには、jQueryと作ったJavaScriptを読み込むタグ2行を追加するだけ。
jQueryは、処理したいhtmlのところにJavaScriptを直接埋め込まなくても、分離したスクリプト側に処理を容易に書けるのでhtmlを汚さずに済む。

jquery.ime-mode.js

$(function(){
	// 日本語入力モードONにするname属性
	var activeName = {
		name:1,
		address:1,
		area:1
	};

	$("input:visible[type!='password'],textarea").each(function(){
		if(activeName[$(this).attr("name")] != undefined) {
			$(this).css("ime-mode", "active");
		} else {
			$(this).css("ime-mode", "inactive");
		}
	});
});

このJavaScriptの4～6行目の部分を修正して、日本語入力モードをオンにしたいタグのname属性を「name属性:1,」のように書けばよい。この場合は名前、住所、内容の入力のときにIMEがオンになり、その他の入力タグではオフになる。

JavaScript解説

1行目 $(function(){ と16行目 }); について。$はjQueryオブジェクトのエイリアスで、jQuery()という関数の引数に無名関数function(){}を渡している。$() または jQuery() は「DOMオブジェクト構築後にdocumentオブジェクトに対して関数を実行する」というもの。言い換えるとhtmlが読み込まれた後ブラウザに表示する前に関数が実行されるので、表示が乱れることがなくタグを書き換えることができる。

実は1行目 $(function(){ と16行目 }); を削除しても動く。9行目の $() と同じなので。じゃあなぜあるかというと、変数やら関数やらを色々書いた後に $(function(){ }); で全体をガバッと囲ってやると、名前空間が閉じ込められて変数名や関数名が外から見えなくなり他のスクリプトと衝突しなくなるから。この記述は省略形で、prototypeと併用すると$が衝突するので、ちゃんとした書き方はまた後で紹介したい。

3～7行目は普通の変数宣言。

9行目 $(“input:visible[type!=’password’],textarea”) はセレクターと言って、DOM構築後documentオブジェクトから、inputタグで見えていてpasswordじゃないもの、またはtextareaタグを選択する。

その次の .each(function(){ は、選択されたオブジェクト一つ一つに対して無名関数10～14行目を実行する。

10行目 $(this).attr(“name”) は、現在のオブジェクト this を $ で jQueryオブジェクト型にして、attr(“name”)でそのオブジェクトのname属性を返す。そして連想配列 activeName[] に定義されているかどうか判定している。

11行目 $(this).css(“ime-mode”, “active”); は、現在のオブジェクトのスタイル “ime-mode” に “active”を設定している。これでフォーカスがこのタグに来るとIMEがオンになる。13行目はその逆。

このように、jQueryの基本は、操作対象のタグをセレクターで選択して、選択されたタグに操作をする、という流れになり、このような処理が簡単にできる。

jQueryには他にも非同期通信とかAjaxに便利な機能が色々あるので、また紹介したい。

参考サイト

関連しているかもしれない記事

このエントリーをはてなブックマークに追加
LINEで送る

投稿者: 村上 和久

アクセス解析・Webコンサルティングのアナライズネット代表・Webアナリスト。Googleアナリティクスの導入とカスタマイズ、ウェブ分析、アクセス解析に関するセミナーなどを行っている。

3件のコメント

コメントする →

  1. celebrities
    2013年4月30日 10:37 AM

    It is actually a great and helpful piece of info. I’m happy that you just shared this helpful information with us. Please stay us up to date like this. Thank you for sharing.

  2. SJ
    2011年10月12日 3:04 PM

    こんにちは。大変参考になりました。

    一点、気になる点がありますが、
    フォーム内に、PHPで複数受け取る場合、name=”name[]”　のようなname属性になりますが、その場合は、どのように　var activeName　に追加すればいいのでしょうか。単純に「name[]:1,」としたところ、エラーで動作しないようです。
    ご教授いただけますと幸いです。

    • 村上 和久
      2011年10月15日 7:01 PM

      SJさん
      ”name[]“　のようなname属性は想定していませんでした(^^;)
      「’name[]’:1,」のようにしてダメだったら、連想配列ではなく普通の配列を使うように書き換える必要がありますね。

      汎用でなくてよければif文に直接 || $(this).attr(“name”) == ‘name[]’ を追加してみてください。