Hextomino

電卓を表示するブックマークレットです。それだけ。

次のをブックマークして適当なページで開いてみてください。もちろん、このページででリンクをクリックしても電卓みたいなものが表示されます。が、このページでスクロールをしない状態で実行するとトップのFlashにかぶってしまってどうにもならなくなります。Flashが見えなくなるくらいまでスクロールしてから実行するとよいです。

電卓ブックマークレット

自分で試してみた限り、ブラウザが落ちるといったような障害は起きてませんが、使用は自己責任でお願いします。

問題点として、複数起動した際に古い電卓の移動ができない、というものがあります。まぁ、複数起動することなんて無いでしょうが、起動のしすぎにはご注意ください。

不具合・アドバイス等ありましたらコメント欄にお願いします。

ソースコードはつづきから。

外部からスクリプト本体とCSS、画像をロードしてます。本体のソースコードはこちら。下のものより若干コメントが多いです。

bodyにdivを追加してそこにbuttonを並べてるだけ。電卓の挙動を再現するのに無駄に時間がかかりました･･･。

(function(){
	////////////////////////////////////////
	// CSS
	////////////////////////////////////////
	
	// CSSをロード
	var css = document.createElement('link');
	css.charset = 'UTF-8';
	css.rel = 'stylesheet';
	css.href = 'http://www.coins.tsukuba.ac.jp/~i0611251/blog/090627/style.css?t=' + (new Date()).getTime();
	document.getElementsByTagName('head')[0].appendChild(css);	
	
	
	
	////////////////////////////////////////
	// Flags
	////////////////////////////////////////
	
	var flag = [];
	flag['first'] = true;		// 「＝」を押した直後の入力かどうか
	flag['newInput'] = true;	// 「+-*/」を押した直後の入力かどうか
	flag['drag'] = false;	// ドラッグ中かどうか
	
	
	
	////////////////////////////////////////
	// Buffers
	////////////////////////////////////////
	
	var buffer = [];
	buffer['num'] = '0';	// 数字用バッファー
	buffer['ope'] = '';		// オペレーター用バッファー
	
	
	
	////////////////////////////////////////
	// Body and Display
	////////////////////////////////////////
	
	// calc本体
	var calc = document.createElement('div');
	calc.setAttribute('id', 'bookmarklet-calc');
	calc.style.top = (document.body.scrollTop || document.documentElement.scrollTop) + 30 + 'px';
	calc.style.left = (document.body.scrollLeft || document.documentElement.scrollLeft) + 30 + 'px';
	document.body.appendChild(calc);
	
	// タイトルバー
	var title = document.createElement('div');
	title.className = 'title';
	// ドラッグ移動のための設定
	title.onmousedown = function() {
		flag['drag'] = true;
		return false;
	}
	window.document.onmousemove = function(eve) {
		if(flag['drag']) {
			calc.style.top = (eve ? eve.pageY : event.y) - 10 + 'px';
			calc.style.left = (eve ? eve.pageX : event.x) - 10 + 'px';
		}
		
		return false;
	}
	window.document.onmouseup = function() {
		flag['drag'] = false;
		return false;
	}
	calc.appendChild(title);
	
	// 「閉じる」ボタン
	var btnClose = document.createElement('button');
	btnClose.className = 'close';
	btnClose.onclick = function() {
		calc.parentNode.removeChild(calc);
		var script = document.getElementById('bookmarklet-calc-script');
		script.parentNode.removeChild(script);
	}
	calc.appendChild(btnClose);
	
	// ディスプレイ部分
	var display = document.createElement('input');
	display.className = 'display';
	display.value = '0';
	calc.appendChild(display);
	
	
	
	////////////////////////////////////////
	// Buttons
	////////////////////////////////////////
	
	// 数字入力ボタン
	var btnNum = [];
	for(var i = 0; i <= 9; i++) {
		btnNum[i] = document.createElement('button');
		btnNum[i].value = i;
		btnNum[i].className = 'num' + i;
		btnNum[i].onclick = function() {
			if(display.value == '0' || flag['newInput']) {
				display.value = this.value;
			}
			else {
				display.value += this.value;
			}
			
			flag['newInput'] = false;
			
			return false;
		}
		calc.appendChild(btnNum[i]);
	}
	
	
	// ピリオド入力ボタン
	var btnDot = document.createElement('button');
	btnDot.className = 'dot';
	btnDot.onclick = function() {
		display.value = display.value.replace(/\./, '');
		display.value += '.';
		flag['newInput'] = false;
		
		return false;
	}
	calc.appendChild(btnDot);
	
	
	// オペレーター入力ボタン
	var btnOpe = [];
	btnOpe['plus'] = makeOperator('plus');
	calc.appendChild(btnOpe['plus']);
	
	btnOpe['minus'] = makeOperator('minus');
	calc.appendChild(btnOpe['minus']);
	
	btnOpe['mul'] = makeOperator('mul');
	calc.appendChild(btnOpe['mul']);
	
	btnOpe['div'] = makeOperator('div');
	calc.appendChild(btnOpe['div']);
	
	btnOpe['solve'] = makeOperator('solve');
	calc.appendChild(btnOpe['solve']);
	
	
	// クリアボタン
	var btnClear = document.createElement('button');
	btnClear.className = 'clear';
	btnClear.onclick = function() {
		flag['first'] = true;
		flag['newInput'] = true;
		buffer['num'] = '0';
		buffer['ope'] = '';
		display.value = '0';
		
		return false;
	}
	calc.appendChild(btnClear);
	
	// バックスペースボタン
	var btnBS = document.createElement('button');
	btnBS.className = 'bs';
	btnBS.onclick = function() {
		var str = display.value;
		if(str != '0') {
			display.value = str.substring(0, str.length - 1);
		}
		return false;
	}
	calc.appendChild(btnBS);
	
	
	
	////////////////////////////////////////
	// Functions
	////////////////////////////////////////
	
	// オペレーター入力ボタンをつくって返す	
	function makeOperator(name) {
		var ope = document.createElement('button');
		ope.value = name;
		ope.className = 'ope' + name;
		ope.onclick = function() {
			// Operator is "="
			if(name == 'solve') {
				if(buffer['ope'] != '') {
					display.value = solve();
					flag['first'] = true;
					flag['newInput'] = true;
				}
			}
			// Operator is "+-*/"
			else {
				if(buffer['ope'] != '' && !flag['first']) {
					display.value = solve();
				}
				
				buffer['num'] = display.value;
				buffer['ope'] = name;
				flag['first'] = false;
				flag['newInput'] = true;
			}
		}
		
		return ope;
	}
	
	// 計算
	function solve() {
		// Convert to Number from String
		var ope1 = buffer['num'] -= 0;
		var ope2 = display.value -= 0;
		buffer['ans'] = 0;
		switch(buffer['ope']) {
			case 'plus' :
				buffer['ans'] = ope1 + ope2;
				break;
			case 'minus' :
				buffer['ans'] = ope1 - ope2;
				break;
			case 'mul' :
				buffer['ans'] = ope1 * ope2;
				break;
			case 'div' :
				if(ope1 == 0 || ope2 == 0) {
					
				}
				else {
					buffer['ans'] = ope1 / ope2;
				}
				break;
		}
		
		return buffer['ans'];
	}
	
	return false;
})();