/**
 * @description ポップアップメニュー表示クラス
 * @param{Object} jQueryCommon 利用するjQuery オブジェクトを渡す。静的に使いまわすので、2回目以降はNULL指定可能。
 * @param{Object} menuList 表示するポップアップメニューリスト。title, action メンバを持つこと。
 */ 
function PopupMenu( jQueryCommon, menuList ){
	/**
	 * @description ポップアップメニューに表示するリスト。title, action メンバを持つ。
	 */
	this.itsMenuList = menuList;
	/**
	 * @description 設定されたポップアップメニューの最大文字列。デフォルト14文字。
	 */
	this.itsMaxStringLength = (function( list, defaultLength ){
		var i, n = list.length, title, action;
		for( i=0; i<n; i++ ){
			title = list[i].title;
			action = list[i].action;
			if( (title && action) && ( defaultLength < title.length ) ){
				defaultLength = title.length;
			}
		}
		return defaultLength;
	}(menuList, 14));

	this.itsId = "_id_popup"; // ※init()の中で数字を付加してユニーク化される。
	this.init( jQueryCommon );
};
(function(){
	/**
	 * @description ポップアップメニューのdiv要素CSS
	 */
	var MENU_DIV_CSS = {
		"position" : "absolute",
		"min-width" : "200px",
		"background-color" : "#eeeeee",
		"border": "1pt solid #666666",
		"box-shadow" : "2px 2px 4px 0px #666666"
	};
	/**
	 * @description ポップアップメニューのulタグのCSS
	 */
	var MENU_UL_CSS = {
		"border": "0pt",
		"margin" : "2px",
		"padding" : "6px",
		"line-height": "12pt",
		"color": "#000",
		"list-style" : "none",
		"font-size" : "11pt"
	};
	/**
	 * @description ポップアップメニュー項目のCSS
	 */
	var LI_CSS = {
		"padding" : "6px",
		"background-color" : "#eeeeee",
		"border" : "1px solid transparent"
	};
	/**
	 * @description ポップアップメニュー項目のHover時のCSS
	 */
	var LI_CSS_HOVER = {
		"background-color" : "#d1e2f2",
		"border" : "1px solid #78aee5"
	}; // http://www.tohoho-web.com/wwwxx035.htm
	/**
	 * @description このクラスで利用するjQuery。
	 */
	var jQ = null;
	/**
	 * @description 生成されたポップアップメニューIDのリスト。
	 */
	var menuIds = [];
	/**
	 * @description 全てのポップアップメニューを非表示にする。
	 * @param{String} exceptId 捜査対象外のID。null指定なら、全部を「非表示」にする。
	 */
	var hideAll = function( exceptId ){
		var n = menuIds.length;
		var target;
		while( 0<n-- ){
			target = jQ("#" + menuIds[n]);
			if( (menuIds[n] != exceptId) && (target.size() > 0) ){
				target.hide();
			}
		}
	}
	/**
	 * @description 最近のshow()で渡された、第一引数Eventと、第二引数。
	 */
	var staticLastEvent = null, staticLastParam = null;
	/**
	 * @description 本クラスの初期化。
	 * @param{Object} initJQuery jQueryオブジェクトを渡す。初回以降はnullでも構わない。
	 */
	PopupMenu.prototype.init = function( initJQuery ){
		var BIND_INDEX_ATTR = "data-action-index";
		var i, list = this.itsMenuList, n = list.length, str, title, action;
		var target, item;
		jQ = (!jQ) ? initJQuery : jQ;
		this.itsId += "_" + menuIds.length;
		target = jQ("body");
		target.append( "<div id='" + this.itsId + "' style='display:none;'><div>" );
		target = jQ("#" + this.itsId);
		target.css( MENU_DIV_CSS );

		str = "<ul>";
		for( i=0; i<n; i++ ){
			title = list[i].title;
			action = list[i].action;
			if( title && action ){
				str += "<li " + BIND_INDEX_ATTR + "='" + i + "'>" + title + "</li>";
			}
		}
		str += "</ul>";
		target.append( str );

		target = target.children("ul").eq(0);
		target.css( MENU_UL_CSS );

		target = jQ("#" + this.itsId + " ul li" );
		target.css( LI_CSS );
		target.hover( 
			function(){ jQ(this).css( LI_CSS_HOVER ); },
			function(){ jQ(this).css( LI_CSS ); } 
		);
		target.click(function(event){
			var item = jQ(this);
			var index = item.attr( BIND_INDEX_ATTR );
			hideAll(null);
			list[ index ].action( staticLastEvent, staticLastParam );
		})

		menuIds.push( this.itsId );
	}
	/**
	 * @description ポップアップメニューを表示する。
	 * 　　　　　　　メニュー以外の場所をクリックすると消える。他のポップアップメニューが表示された時も、以前のは消える。
	 * @param{event} event jQuery.click(function(event){})で渡されるeventオブジェクトを指定する。
	 * 　　　　　　　　　　　呼び出し先の関数の引数にそのまま渡す。
	 * @param{Object} paramObj newの際のactionパラメータに指定された関数呼び出し時の第二引数に渡される。
	 * 　　　　　　　　　　　　　通常はthisを渡すこと。
	 */
	PopupMenu.prototype.show = function(event, paramObj){
		/*
		[メモ] click() はeventが渡される仕様。
		---
		jQueryのイベントは、コールバック関数の最初の引数でjQuery.Eventオブジェクトを受け取ることができます。
		このオブジェクトを使って、規定のイベント動作のキャンセルや、バブリングの抑制などを行います
		http://semooh.jp/jquery/api/events/click/fn/
		*/
		var target = jQ("#" + this.itsId);
		var isShowed = (target.css("display") == "none");
		var pos;

		hideAll( this.itsId );
		if( isShowed ){
			pos = this.getMenuPosition( event );
			target.css({
				"top" : pos.pageY + "px",
				"left" : pos.pageX + "px",
			});
			target.slideDown("fast");
			staticLastEvent = event;
			staticLastParam = paramObj;
		}else{
			target.hide();
		}
	};
	/**
	 * @description ポップアップメニュー表示毎に、表示位置決めのためにcallbackされる。
	 *              サブクラスで任意にオーバーライドのこと。
	 */
	PopupMenu.prototype.getMenuPosition = function( event ){
		return { "pageX" : event.pageX, "pageY" : event.pageY };
	};
	/**
	 * @description 表示中のポップアップメニューを全て非表示にする。
	 */
	PopupMenu.prototype.hide = function(){
		hideAll( null );
	};
}());

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type='text/javascript' src='./jquery-1.12.3.js'></script>
<script type='text/javascript' src='./jquery.cookie.js'></script>
<script>

var CookieBind = function( cookieName ){
	// コンスタラクタ
	// ⇒グローバル変数で定義する。
	//
	this._cookieName = cookieName;
	this.itsLoadedStr = this.load(); // このタイミングでは未定義のメソッドも指定可能。
};
(function(){
	//
	// 続いて、prototypeを用いてメソッドを定義
	// ⇒即時関数の中で行うことで、静的praivate変数／メソッドを実装可能。
	// 　クロージャーの仕組みを利用している。
	//
	// ⇒動的なpraivate変数は諦める。
	// 　（メソッドは、適宜thisを渡すことで動的な実装は可能）。
	//
	// ⇒JavaScriptの場合は、メソッドは「静的な枠」＋「動的なメンバ変数」で実装する。
	//
	// ※prototype内で function(){} 定義するときは、thisに注意。
	// 　⇒ function(){ の内部 } では、thisは呼び出し元になり、このクラスインスタンスを指さない。
	// 　⇒ function() の親側で var self = this; して、function(){ の内部 } では、
	// 　　 self.〜の形式で呼ぶこと（selfはクロージャーになる）。
	//
	var COOKIE_OPTION = { expires: 7 }; // 静的プライベート変数

	CookieBind.prototype.save = function( str ){
		$.cookie( this._cookieName, str, COOKIE_OPTION );
	};
	CookieBind.prototype.load = function(){
		return $.cookie( this._cookieName );
	};
	CookieBind.prototype.getValue = function(){
		return this.itsLoadedStr;
	}
	CookieBind.prototype.getCookieName = function(){
		return this._cookieName;
	}
}());




// クラス継承はこちら。
var CookieBind2Input = function( cookieName, id_input, id_button ){
	var self = this;

	CookieBind.call( this, cookieName ); // 継承元のコンスタラクタを明示的に呼び出す。
	this._idInput = id_input;
	this._idButton = id_button;

	this.load2Input();
	$("#" + this._idButton).click( function(){
		self.saveByButton(); // この位置は、thisが異なるので注意。
	});
};
// 親のメソッドを「継承」する。
CookieBind2Input.prototype = Object.create( CookieBind.prototype ); 
// サブクラスでのメソッド追加も、同様に即時関数内で行う。
(function(){
	// 明示的にインスタンスを渡すことで、praivateな動的メソッドを実装可能。
	var privateFunc = function( instance, value ){ 
		var str = value + "\r\nをcookie名 ";
		str += instance._cookieName;
		str += " に保存しました！";
		alert( str );
	};

	CookieBind2Input.prototype.load2Input = function(){
		var value = this.getValue();
		if( value ){
			$("#" + this._idInput).val( value );
		}
	};
	CookieBind2Input.prototype.saveByButton = function(){
		var value = $("#" + this._idInput).val();
		if( value.length > 0 ){
			this.save( value );
			privateFunc( this, value );
		}
	};
	CookieBind2Input.prototype.del = function(){
		this.save( null );
	}
}());


// 実行例
$(document).ready(function(){
	var text_cookie1 = new CookieBind( "key-sample1" );
	var text_cookie2 = new CookieBind2Input( "key-sample2", "id_text2", "id_button2" );
	var text_cookie3 = new CookieBind2Input( "key-sample3", "id_text3", "id_button3" );

	if( text_cookie1.getValue() ){
		$("#id_text1").val( text_cookie1.getValue() );
	}
	$("#id_button1").click( function(){
		var text = $("#id_text1").val();
		text_cookie1.save( text );
		alert( text + "\r\nをcookieに保存しました" );
	})

	$("#id_clear").click( function(){
		text_cookie1.save( null );
		text_cookie2.save( null ); // スーパークラスのメソッド呼んでみる。
		text_cookie3.del();
		alert( "cookieを削除しました" );
	})
});


  
</script>
</head>
<body>
<form>
	<input id="id_text1"   type="text" style="width: 128;"></input>
	<input id="id_button1" type="button" value="保存1"></input>
	<br>
	<br>
	<input id="id_text2"   type="text" style="width: 128;"></input>
	<input id="id_button2" type="button" value="保存2"></input>
	<br>
	<br>
	<input id="id_text3"   type="text" style="width: 128;"></input>
	<input id="id_button3" type="button" value="保存3"></input>
	<br>
	<br>
	<input id="id_clear"   type="button" value="クッキー削除"></input>
</form>
</body>
</html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type='text/javascript' src='./jquery-1.12.3.js'></script>
<script type='text/javascript' src='./jquery.cookie.js'></script>
<script>

var LikeClass = function( name ){
	// コンスタラクタ
	// ⇒グローバル変数で定義する。
	//
	this._name = name;
	this._unique = this.createUnique();
};
(function(){
	var privateVal = {}; // 疑似的なprivateメンバ変数。カウンタとして利用する。
	var _uq = 0; // privateメンバをインスタンス毎に識別するための識別子。
	var privateCountUp = function( instance ){ // 疑似的なprivateメソッド
		privateVal[ instance._unique ]++;
	};

	LikeClass.prototype.createUnique = function(){
		privateVal[ ++_uq ] = 0; //インスタンス毎に、カウンタを初期化
		return _uq;
	};
	LikeClass.prototype.getName = function(){
		privateCountUp( this ); // 呼び出し毎にカウントアップ。
		return this._name;
	};
	LikeClass.prototype.getCount = function(){
		return privateVal[ this._unique ];
	}
}());



// クラス継承はこちら。
var LikeClassSub = function( name, addStr ){

	LikeClass.call( this, name );
	this._addStr = addStr;
};
LikeClassSub.prototype = Object.create( LikeClass.prototype ); 
(function(){
	LikeClassSub.prototype.getName = function() {
		// privateCountUp( this ); // 親のprivateメソッドは呼べない。
		return this._name + "!" + this._addStr; // 親のpublicメンバ＋サブクラス側のメンバ。
	};
}());




// 実行例
$(document).ready(function(){
	var text1 = new LikeClass( "key-sample1" );
	var text2 = new LikeClass( "key-sample2" );
	var text3 = new LikeClassSub( "key-sample3", "◆" );

	$("#id_button1").click( function(){
		$("#id_text1").val( text1.getName() + " [" + text1.getCount() + "]" );
	})
	$("#id_button2").click( function(){
		// alert( text2.privateVal ); // 当然、undefined になる。
		$("#id_text2").val( text2.getName() + " [" + text2.getCount() + "]" );
	})
	$("#id_button3").click( function(){
		$("#id_text3").val( text3.getName() + " [" + text3.getCount() + "]" );
	})
});

  
</script>
</head>
<body>
<form>
	<input id="id_text1"   type="text" style="width: 128;"></input>
	<input id="id_button1" type="button" value="更新1"></input>
	<br>
	<br>
	<input id="id_text2"   type="text" style="width: 128;"></input>
	<input id="id_button2" type="button" value="更新2"></input>
	<br>
	<br>
	<input id="id_text3"   type="text" style="width: 128;"></input>
	<input id="id_button3" type="button" value="更新3"></input>
	<br>
</form>
</body>
</html>

/*
	[speech_input.js]
	encoding="UTF-8"
*/


// Googleの音声入力用のクラス定義
//   ref. http://qiita.com/inouet/items/2c9e218c05f547bb6852
//   ref. http://www.cyokodog.net/blog/web-speechi-api/
// 
// noticeOverlay = null指定可能。その場合は、通知用divを自動生成。
// ,start() で、deferred が返るので、.done( text )で取得して任意に設定する。
//
// ※音声入力の実行可能不可能の自前判定は無いので、別途「スマホ／タブレットのみOK」などの
// 　処理を実装の事。
//
var SpeechInputWs = function( noticeOverlay ){
	var self = this;
	this.itsNoticeOverlayDiv = noticeOverlay;

	// 通知用のオーバーレイdivが無ければ自前で生成する。
	if( !this.itsNoticeOverlayDiv ){
		$("body").append( "<div id=\"_id_overlay_notice\">hoge</div>" );
		this.itsNoticeOverlayDiv = $("#_id_overlay_notice");
		this.itsNoticeOverlayDiv.css({
			"display" : "none",
			"width"   : "280px",
			"height"  : "160px",
			"text-align" : "left",
			"position"   : "fixed",
			"top"  : "24px",
			"left" : "24px",
			"z-index" : "100",
			"background-color": "#cccccc"
		});
	}

	// 一応、毎回初期化？？？
	window.SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition;

	// オブジェクト生成
	this.itsRecognition = new webkitSpeechRecognition();
	this.itsRecognition.lang = 'ja';
	this.itsRecognition.maxAlternatives = 3;
};
SpeechInputWs.prototype._selectTextFromSpeechResult = function( speechResult ){
	var dfd = new $.Deferred;
	var candidate = speechResult.item(0);
	var i = candidate.length;
	var str;

	if ( i == 0 ){ 
		dfd.resolve( candidate.item(0).transcript );
		return dfd.promise();
	}

	// 【FIXME】あれ？ .maxAlternatives=3 が効いてない？？？
	if( i > 5 ){ i = 5; }

	// 候補を表示してユーザー入力を待つ。
	str = ""; // 下記で作成済みのformへ追加するスタイル。
	while( 0 < i-- ){
		str += "<div><input type=\"radio\" name=\"candidate\" value=\"" + candidate.item(i).transcript + "\">";
		str += candidate.item(i).transcript;
		str += "</input></div>";
	}
	this.itsNoticeOverlayDiv.find("form").eq(0).append( str );

	this.itsNoticeOverlayDiv.find( "form div" ).each( function(){
		$(this).click( function(){
			dfd.resolve( $(this).find("input").eq(0).val() );
		});
	});
	this.itsNoticeOverlayDiv.find( "form input[type='button']" ).each( function(){
		// 動作を変更する（stop()処理が不要になる。また投げる先のdfdが異なる）。
		$(this).click( function(){
			dfd.reject( null );
		});
	});

	return dfd.promise();
};
SpeechInputWs.prototype.start = function() {
	var dfd_sound = new $.Deferred;
	var str = "　<form>音声入力中・・・   <input type=\"button\" value=\"中止\"></input><br>";
	str += "</form>";

	// 音声入力の受付を開始
	this.itsRecognition.start(); 

	// ユーザー通知系の処理
	this.itsNoticeOverlayDiv.empty();
	this.itsNoticeOverlayDiv.append( str );
	this.itsNoticeOverlayDiv.show();
	this.itsNoticeOverlayDiv.find("form input[type='button']").each( function(){
		$(this).click( function(){
			self.itsRecognition.stop();
			self.itsNoticeOverlayDiv.hide();
			dfd_sound.reject( null );
		});
	});

	// 録音終了時トリガーを設定
	this.itsRecognition.addEventListener("result", function(event){
		// この場面でのthisはグローバル扱いの可能性があるので、クロージャーのselfを経由しておく。
		// ※音声入力は常にシングルスレッドで、またユーザー通知も単一、を前提。
		var dfd = self._selectTextFromSpeechResult( event.results );
		
		dfd.done( function( text ){
			dfd_sound.resolve( text );
		}).fail( function(){
			dfd_sound.reject( null );
		}).always( function(){
			self.itsNoticeOverlayDiv.hide();
		});
	}, false);

	return dfd_sound.promise();
};