アナログCPU:5108843109

ゲームと音楽とプログラミング(酒と女とロックンロールのノリで)

('ω') < イザユケエンジニャー

WEB拍手を実装したメモ

初心者みたいな記事でアレですが、自分のサイトに簡易WEB拍手を実装したのでちょっとメモ。所要時間1時間くらいのマジで雑なやつ(ワンドロか?)
拍手される度にメールがくる
本当にメモなので解説なし 今イベントの準備で忙しいので…

HTML

<button id="webclap-send" class="webclap-send" onclick="webclap_send();"><span id="webclap-send-text">イイネ</span></button>
<textarea id="webclap-textarea"></textarea>

JS

// 通信成功したら成功しましたって表示するやつ
var req = new XMLHttpRequest();
req.onreadystatechange = function() {
  if (req.readyState == 4) { if (req.status == 200) { setTimeout('webclap_done();', 1000); } }
}

// テキストエリアからメッセージ拾って送信するやつ
function webclap_send() {
  webclap_progress();
  var message = document.getElementById('webclap-textarea').value;
  req.open('POST', './php/mail.php', true);
  req.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
  req.send('message=' + message);
}

// ボタンとテキストエリアを送信中状態にするやつ
function webclap_progress() {
  document.getElementById('webclap-send').classList.add("progress");
  document.getElementById('webclap-send').disabled = true;
  document.getElementById('webclap-textarea').disabled = true;
  document.getElementById('webclap-send-text').textContent = "送信中…";
}

// ボタンとテキストエリアを送信完了状態にするやつ
function webclap_done() {
  document.getElementById('webclap-send').classList.remove("progress");
  document.getElementById('webclap-send').disabled = false;
  document.getElementById('webclap-textarea').disabled = false;
  document.getElementById('webclap-send-text').textContent = "送信完了しました";
  document.getElementById('webclap-textarea').value = "";
  setTimeout('webclap_init();', 1000);
}

// ボタンを初期状態にするやつ
function webclap_init() {
  document.getElementById('webclap-send-text').textContent = "イイネ";
}

CSS

.webclap-send {
    cursor: pointer;
}
.webclap-send.progress {
    cursor: progress;
}

PHP

<?php

//宛先
$to = "***@example.jp";
//差出人
$header = "From: "."***@example.jp";
//件名
$subject = "拍手されました";
//本文
$body = "";
$body .= "メッセージ\n";
$body .= "==============================\n";
$body .= $_POST['message'];
$body .= "\n";
$body .= "==============================\n";
$body .= "\n";
$body .= "IP:" . $_SERVER["REMOTE_ADDR"] . "\n";

if (mb_send_mail($to, $subject, $body, $header))
{
    echo "OK";
} else {
    echo "NG";
}