へぇボタン

イイネ!

色々なブログ等を見かけますが、「イイネ!」ボタンとか「B!」ボタンとかいっぱい押すところがあります。

でもこのボタン、内容がよくて「イイネ!」押したいのだけど、ログインしなくてはならず、面倒くさいのでやめてしまいます。

実際にイイネのカウンタが0ではないページは、私はあまり見かけません。

ログインしたりして、2重投票ができないようにせず、もう少し気軽に押せるボタンがないか考えてました。

トリビアの泉

トリビアの泉 〜素晴らしきムダ知識〜

昔テレビでトリビアの泉という番組がありました。この番組は無駄知識をVTRにして説明し、パネラーが「へぇ」と感じたら「へぇ」ボタンを押して得点というかへぇ数を競うようなものでした。

この「へぇ」ボタンが、ブログのフィードバックとして向いているのではないかと思っていました。

この「へぇ」はこんな感じです


「へぇ」ボタンを作る

[Server] HTTPのGETでページの要求がくる。

[Server] ページのアドレスを元にDBからページのidを取得し、htmlに埋め込み送信する。

[Browser] ページ内に作った「へぇ」ボタンで、DBから取得した(ページに埋め込まれた)idをPOSTで送信する。

[Server] POSTを受け取り、idから(Server)ページに対応したへぇ数をインクリメントする。


いたずらする人もいないだろうし、かつ個人なのでこんな感じで作ります。

あと大事なのが、「へぇ」を押したときの「へぇ」感をどのように再現するかですね。音出すわけにはいかないし。

onBtnHee()がボタンを押したときに呼ばれる関数です。満へぇが20なので、20回以降は無視します。drawhee()でアニメーションを起動します。

また、ボタンが押されたときにXMLHttpRequestでレコードのid番号を使用してPOSTを送信します。Server側ではBottleで受信して、DBのへぇ数(nHee)をインクリメントします。

「へぇ」感

へぇ感をとへぇを連打したときの感じあらわすために、バルーンに「へぇ」を入れ、0.5秒程アニメーションさせます。


function frame() {
	// タイマーで呼ばれる処理
	var i;
	for(i=0; i < obj.length; i++) {
	  obj[i].update();
	}
}

function drawhee(cnt) {
	//へぇボタンを押されたときに呼ばれる関数
	if (cnt == 0) {
		// タイマー登録
		setInterval(frame, 10);
	}

	if (cnt < 20) {
		// 20回まではバルーンを作成
		obj.push(new pophee(cnt));
		cnt = cnt + 1;
	}      
}

drawhee()でアニメーションを起動します。アニメーションオブジェクトの配列をタイマーで更新していきます。

frame()が更新処理、obj.push(new pophee(cnt))でバルーンを生成し、配列に追加していきます。

popheeは最初クラスで作成していたのですが、IEではクラスが使えなかったので、いろいろぐぐった結果以下のようになりました。


var cnt=0;
var obj=[];

// IE11でclass使えない
function pophee(id) {
    var popup = document.createElement("div");
	popup.id = "popup" + cnt;
	//hilight.js でうまく表示できないのでちょっとずらしてある
	if (id < 19) {
		popup.innerHTML = '< div class="callout_hee">へぇ';
	} else {
		popup.innerHTML = '< div class="callout_hee">満< br>へぇ';
	}
    document.body.appendChild(popup);
	var rect = document.getElementById("feedbtn").getBoundingClientRect();
	this.popup = popup;
	this.cnt = 1;
	this.x = rect.right + window.scrollX;
	this.y = rect.top + window.scrollY- 75;
	
	this.popup.style.position = "absolute";
	this.popup.style.top = this.y + Math.cos(Math.PI/40*this.cnt)*30 + 'px'; 
	this.popup.style.left = this.x + this.cnt + 'px'; 
}
pophee.prototype ={
	update: function() {
		if (this.cnt > 0)  {
			this.cnt++; 
			this.popup.style.top = this.y + Math.cos(Math.PI/40*this.cnt)*30 + 'px'; 
			this.popup.style.left = this.x + this.cnt + 'px'; 
		}
		if (this.cnt == 50) {
			this.cnt = 0; 

			var i;
			for (i=0; i < obj.length; i++) {
				if (this == obj[i] ){
					obj.slice(i,1);
					break;
				}
			}
		document.body.removeChild(this.popup);
		} 
	}
}

クラス使わないことは出来ましたが、IEでは動きがおかしいです。

モバイル対応

android等ではへぇボタンを連打しようとすると画面が拡大したりリサイズが発生します。

viewportにuser-scalable=noを設定するとリサイズしなくなり、へぇボタンの連打がうまくいくようになりました。


< meta name="viewport" content="user-scalable=no" >

へぇ感はイマイチ。やっぱ音出さないとダメかな。

IE/Edge

へぇボタンをIEで一回押すと8へぇくらい増えることが判明しました。Edgeは6回程度増えます。

WireShark等つかって調べたところ、なんか勝手にリトライを行っているようです。

httpsなので暗号化されているため、中身はわからないのですが、サーバーからのパケットをもらってからリトライしていました。

・・・で、いろいろ調査した結果、サーバーからの応答にmetaタグで「charset="UTF-8"」をいれて、postの文字コードにもutf-8を明示することで回避できました。

IEが独自仕様すぎたので、心を改めてEdgeに変更したのかと思っていましたが、まだMS独自仕様のようですね。