外国語などの入力フォーム・キーボードHTMLを簡単に生成するJavaScript


「文字入力フォーム」を簡単に作るためのJavaScriptコード。

キーボードUIを楽に作れる。

キーとして表示したい文字は,HTML内に列挙しておくだけですむ。

 

ここでは,例として「タイ語の発音記号ローマ字」をキーボード表示してみる。

 

動作デモ

タイ語の発音記号の入力フォーム
http://sourcecode-student.info/demo/2015_02_thai_pron_kbd/

ソースコード


声調符号付で,携帯電話などのシンプルなテキスト環境でも文字化けしないように記号を入れ替えてある。

<html>
<head></head>
<body>

<h2>タイ語の発音記号のキーボード</h2>

<textarea cols="70" rows="5" id="kbd_output"></textarea><br>
<br>

<div id="chars">
a  i  u ω  e ε  o っ  ∂
k kh  ng  s  c ch  t th  d  n
h f b  p ph  m y  r l w 7
(\) (V) (/) (Λ) space return
</div>


<style>

input.char_key{
	padding : 5px;
	margin : 5px;
	font-weight : bold;
	font-size : 150%;
}

div#chars{
	border : solid 1px gray;
	padding : 10px;
	background-color : ghostwhite;
}

</style>


<script>


// キーボードHTMLを出力
function make_kbd(){
	var kbd_html = $("chars")
		.innerHTML
		.split("\n")
		.compact()
		.map(function(line){
			return line
				.split("  ")
				.map(function(chars){
					return chars
						.split(" ")
						.map(function(ch){
							return key_of( ch );
						})
						.join(" ")
					;
				})
				.join(" ")
			;
		})
		.join("<br>")
	;
	
	$("chars").innerHTML = kbd_html;
}


// 一文字分のキーHTML
function key_of( ch ){
	return "<input type='button' value='"
		+ ch
		+ "' onclick='onCharKey(\""
		+ ch
		+ "\")' class='char_key'>"
	;
}


// キー押下イベント
function onCharKey( ch ){
	var r = ch;
	if( ch == "space" ){
		r = " ";
	}
	else
	if( ch == "return" ){
		r = "\n";
	}

	$("kbd_output").value += r;
}


// 以下は基礎ライブラリ

function $(dom_id){
	return document.getElementById(dom_id);
}


// 配列のイテレータ
Array.prototype.each = function( func ){
	for( var i = 0; i < this.length; i ++ ){
		func.call( this, this[i], i ); 
	}
	return this; // チェインを継続
};


// Rubyのinjectに相当するメソッド
// http://d.hatena.ne.jp/TipsMemo+computer-technology/20150110/p1
Array.prototype.reduce = function( func, init_value ){
	// 初期値をセット
	var result = init_value;
	
	// 各要素ごとに
	this.each(function( item, index ){
		// 結果を累積更新する
		result = func( result, item, index );
	});
	
	// 累積結果を返す
	return result;
};

// map
Array.prototype.map = function( func ){
	return this.reduce(function( result, item, index ){
		result.push( func.apply( result, [ item, index ] ) );
		return result;
	}, []);
};



// 条件に合うものだけ残す
Array.prototype.filter = function( func ){
	return this.reduce(
		function( result, item ){
			if( func( item ) ){
				result.push( item );
			}
			
			return result;
		},
		[]
	);
};

// 要素がnullだったり空だったりfalseだったりするものを除去
Array.prototype.compact = function(){
	return this.filter(function(item){
		return (
			( !! item )
			&&
			( ( "" + item ).length > 0 )
		);
	})
};




window.onload = make_kbd();


</script>



</body>
</html>

工夫した点

  • ソースとなる文字のセットを,列挙するだけですむと言うのがラクでGood。
  • 配列の便利メソッドを使って,シンプルにロジックを組めている。

今後:

  • アラビア文字などの各国語のキーボードを,楽に生成してみたい。