javascript – igreks開発日記

JavaScriptでスマホがスリープから回復した時にカウントアップ(ダウン)を調整する

PWAアプリ化した場合でもそうなんですが、スマホをロックしたり自動で消灯した際、SetTimeoutの処理は一旦停止されます。その後画面を復帰させると、SetTimeoutの処理が再度復活します。

つまり、簡易ストップウォッチ機能とか、何かしらの時間測定をJS側で行っていると、スマホがスリープしていた時間はカウントされない場合があります。

今回はこの対策として、SetTimeout処理の中でスリープによってズレた時間を自動補正します。

HTMLには以下のように書いておきます。

    <div id="watch" class="mx-auto text-center h1 text-monospace">00:00:00</div>
    <!-- スマホのスリープなどで時間がずれた時用の記録用 -->
    <span id="last_check" style="display:none;"></span>

SetTimeoutの中で、最終チェック時の経過時間からズレが5秒以上になったら自動的にズレた分を経過時間に追加します。(jQuery利用)

<script type="text/javascript">
    $(function(){
        "use strict";  

    // タイムカウント
    $(window).on('load', function(){
        let watch = null;
        if($("#watch").length){
            // 1秒ごとに秒数カウントアップ
            watch = setInterval(panda, 1000);
        };
    });
    let panda = function() {
        // 経過時間をトータル秒数で取得
        let init_time = $("#watch").html().replace(/\r?\n|\s/g,"");;
        let total_sec = (parseInt(init_time.slice(0,2)) * 3600) +  
                        (parseInt(init_time.slice(3,5)) * 60 )  +
                         parseInt(init_time.slice(6,8));

        let now = Date.now();
        let last_check = $("#last_check").text();
        // ズレをマイクロ秒で取得
        let diff = now - parseInt(last_check, 10);

        // ズレが5秒以上なら経過時間にズレた時間を追加
        if ( diff && diff > 5000){
            total_sec += diff/1000;
        }
        else{
            total_sec += 1;
        }
        let byo = Math.floor(total_sec) % 60;
        let fun = Math.floor(total_sec / 60) % 60;
        let ji = Math.floor(total_sec / 3600) % 60;

        // 時間の表示を更新
        $("#watch").text(
            ('00' + ji).slice(-2) + ":" + ('00' + fun).slice(-2) + ":" + ('00' + byo).slice(-2)
        );
        // 現在時間を記録しておく
        $("#last_check").text(now);
    }

</script>

$(function(){

"use strict";

// タイムカウント

$(window).on('load', function(){

let watch = null;

if($("#watch").length){

// 1秒ごとに秒数カウントアップ

watch = setInterval(panda, 1000);

};

});

let panda = function() {

// 経過時間をトータル秒数で取得

let init_time = $("#watch").html().replace(/\r?\n|\s/g,"");;

let total_sec = (parseInt(init_time.slice(0,2)) * 3600) +

(parseInt(init_time.slice(3,5)) * 60 ) +

parseInt(init_time.slice(6,8));

let now = Date.now();

let last_check = $("#last_check").text();

// ズレをマイクロ秒で取得

let diff = now - parseInt(last_check, 10);

// ズレが5秒以上なら経過時間にズレた時間を追加

if ( diff && diff > 5000){

total_sec += diff/1000;

}

else{

total_sec += 1;

}

let byo = Math.floor(total_sec) % 60;

let fun = Math.floor(total_sec / 60) % 60;

let ji = Math.floor(total_sec / 3600) % 60;

// 時間の表示を更新

$("#watch").text(

('00' + ji).slice(-2) + ":" + ('00' + fun).slice(-2) + ":" + ('00' + byo).slice(-2)

);

// 現在時間を記録しておく

$("#last_check").text(now);

}

</script>

今回は簡易的なストップウォッチなのでこのような方法でやりましたが、欠点としては、ズレ補正の度に、若干（数ミリ秒ずつ）のずれが発生する可能性があります。

正確にズレ補正を行う場合は、計測スタート時に、開始時刻をミリ秒で記録しておくのが一番確実でしょう。

【ECCUBE2】スパム対策としてお問合せフォームにreCaptchaを導入

定期的に中国から来る迷惑なお問合せフォームを利用したスパム。

スパムの一例↓

　　：
この度のお問い合せ誠にありがとうございます。

以下の内容で承りました。

回答を要するもので、万一、ご回答メールが届かない場合は、
受信トラブルの可能性もありますので
大変お手数ではございますがもう一度お問い合わせいただくか、
お電話にてお問い合わせください。

今後ともご愛顧賜りますようよろしくお願い申し上げます。


■会社団体名　: 城特邀，彩�牡首拵送э0%【】网址:[www.clf30.com]
■フリガナ　　: 未登録
■お名前　　　: 来了就送 城特邀，彩�牡首拵送э0%【】网址:[www.clf30.com] 様
■フリガナ　　: カタカ カタカ 様
■電話番号　　　：--
■メールアドレス：henson77777@qq.com

■お問い合わせの内容
城特邀，彩�牡首拵送э0%【】网址:[www.clf30.com]
　　：

　　：

この度のお問い合せ誠にありがとうございます。

以下の内容で承りました。

回答を要するもので、万一、ご回答メールが届かない場合は、

受信トラブルの可能性もありますので

大変お手数ではございますがもう一度お問い合わせいただくか、

お電話にてお問い合わせください。

今後ともご愛顧賜りますようよろしくお願い申し上げます。

■会社団体名　: 城特邀，彩�牡首拵送э0%【】网址:[www.clf30.com]

■フリガナ　　: 未登録

■お名前　　　: 来了就送城特邀，彩�牡首拵送э0%【】网址:[www.clf30.com] 様

■フリガナ　　: カタカカタカ様

■電話番号　　　：--

■メールアドレス：henson77777@qq.com

■お問い合わせの内容

城特邀，彩�牡首拵送э0%【】网址:[www.clf30.com]

　　：

このように、メールアドレス欄に不特定多数のメールアドレスを指定し、自動返信機能を利用してメールを送り付けている。

今までは接続元IPを特定して、apacheの設定ファイルなり.htaccessで個別にアクセスを拒否するなど、対症療法をしていましたが、業務の負担になりつつあるので、導入することにしました。

結果として効果はかなりあったようで、対策後およそ1か月、未だスパムによる被害は1回もうけていません。

reCaptchaをECCUBE2のお問合せフォームに導入する手順は以下の通りです。

サイトキーとシークレットキーの取得

reCaptchaにアクセスし「Admin console」を開きます。Googleアカウントが必要になります。
必要事項を入力し、サイトキーとシークレットキーを取得します。（今回は「」を採用します。）

テンプレートを修正

ECCUBE2のお問合せフォーム(確認画面)のテンプレートファイルを修正します。

  :
<form name="form1" id="form1" method="post" action="?">
     :
  <!-- <form>～</form>の任意の場所に以下を追記 ------------------>
  <!-- reCAPTCHA v3 -->
  <input type="hidden" name="recaptchaResponse" id="recaptchaResponse" />
  <!------------------------------------------------------------->
     :
</form>
  :

<!-- 任意の場所に以下のjsコードを追記 ----------------->
<!-- reCAPTCHA v3 Start -->
<script src="https://www.google.com/recaptcha/api.js?render=サイトキー"></script>
<script>
	grecaptcha.ready(function () {
    	grecaptcha.execute('サイトキー', {action: 'homepage'}).then(function(token) {
    	    var recaptchaResponse = document.getElementById('recaptchaResponse');
    	    recaptchaResponse.value = token;
    	});
	});
</script>
<!-- reCAPTCHA v3 End   -->

</form>

grecaptcha.ready(function () {

grecaptcha.execute('サイトキー', {action: 'homepage'}).then(function(token) {

var recaptchaResponse = document.getElementById('recaptchaResponse');

recaptchaResponse.value = token;

});

</script>

スマホページも運用している場合はそちらのテンプレート(data/Smarty/templates/sphone/contact/confirm.tpl)も同様に修正します。

PHPファイルの修正

お問い合わせの受付・自動返信メール送信処理を行うPHPファイルを修正します。

          :
        case 'complete':

            //reCAPTCHA v3の処理を追加 /////////////////////////////////
            if(isset($_POST['recaptchaResponse']) && !empty($_POST['recaptchaResponse'])){
                $secret = 'シークレットキー';
                $verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$_POST['recaptchaResponse']);
                $reCAPTCHA = json_decode($verifyResponse);
                if (!$reCAPTCHA->success){
                    SC_Utils_Ex::sfDispSiteError(
                        FREE_ERROR_MSG,
                        '',
                        false,
                        "スパム対策機能により送信がブロックされました。お手数ですがブラウザの戻るボタンを押して、再度ご送信お願いします。
                    ");
                    exit;
                }
            }else{
                SC_Utils_Ex::sfDispSiteError(
                    FREE_ERROR_MSG,
                    '',
                    false,
                    "スパム対策機能により送信がブロックされました。お手数ですがブラウザの戻るボタンを押して、再度ご送信お願いします。
                ");
                exit;
            }
            ///////////////////////////////////////////////////////////////

            $this->lfInitParam($objFormParam);
            $objFormParam->setParam($_POST);
            $this->arrErr = $objFormParam->checkError();
            $this->arrForm = $objFormParam->getFormParamList();
            if (SC_Utils_Ex::isBlank($this->arrErr)) {
                $this->lfSendMail($this);
                // 完了ページへ移動する
                SC_Response_Ex::sendRedirect('complete.php');
                exit;
            } else {
                SC_Utils_Ex::sfDispSiteError(CUSTOMER_ERROR);
                exit;
            }
            break;
              :

case 'complete':

//reCAPTCHA v3の処理を追加 /////////////////////////////////

if(isset($_POST['recaptchaResponse']) && !empty($_POST['recaptchaResponse'])){

$secret = 'シークレットキー';

$verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$_POST['recaptchaResponse']);

$reCAPTCHA = json_decode($verifyResponse);

if (!$reCAPTCHA->success){

SC_Utils_Ex::sfDispSiteError(

FREE_ERROR_MSG,

'',

false,

"スパム対策機能により送信がブロックされました。お手数ですがブラウザの戻るボタンを押して、再度ご送信お願いします。

");

exit;

}

}else{

SC_Utils_Ex::sfDispSiteError(

FREE_ERROR_MSG,

'',

false,

"スパム対策機能により送信がブロックされました。お手数ですがブラウザの戻るボタンを押して、再度ご送信お願いします。

");

exit;

}

///////////////////////////////////////////////////////////////

$this->lfInitParam($objFormParam);

$objFormParam->setParam($_POST);

$this->arrErr = $objFormParam->checkError();

$this->arrForm = $objFormParam->getFormParamList();

if (SC_Utils_Ex::isBlank($this->arrErr)) {

$this->lfSendMail($this);

// 完了ページへ移動する

SC_Response_Ex::sendRedirect('complete.php');

exit;

} else {

SC_Utils_Ex::sfDispSiteError(CUSTOMER_ERROR);

exit;

}

break;

確認

確認画面の右下に、以下のようなreCAPTCHAアイコンが表示されていれば、適用完了です。

参考サイト）

Chrome使用時にfocusイベント内でalertするとダイアログが延々と繰り返される場合の対策

簡単な処理やデバッグ時などでは、まだまだ重宝するalert()。

例えばよくあるこんな処理。

$("input").focus(function () {
	alert("Hello!!");
	return false;
});

$("input").focus(function () {

alert("Hello!!");

return false;

});

ところがGoogle Chromeを使用した場合、「Hello!!」のダイアログを消しても消しても、延々とダイアログが表示し続ける無限ループが発生する場合がある。

アラートを出した後に、自動的に要素に対してフォーカスが行われ、その結果処理の繰り返しになるらしい。

なので、単純な解決策としては、アラートを出した後に、フォーカスを外してやればよい。

$("input").focus(function () {
	alert("Hello!!");
	$(this).blur(); // focusを外す
	return false;
});

$("input").focus(function () {

alert("Hello!!");

$(this).blur(); // focusを外す

return false;

});

なお、アラート後、また同じ要素にフォーカスさせ、かつ無限ループさせない方法はこちらを参照。