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

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

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

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

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

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

 

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

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

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

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

スパムの一例↓

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

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

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

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

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

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

テンプレートを修正

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

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

PHPファイルの修正

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

確認

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

 

参考サイト)

 

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

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

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

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

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

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

 

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