デスノート書き込みが遅い時の２重押し送信連投を防止するために、ローディング画面としてアニメーションを表示するようにしました [Ask-me]

デスノートを書き込みするとき、たまに遅いときがあります。そんなとき、判らない人たちは、何度も書き込みボタンを押してしまい、結果として２重送信になり、同じ書き込みが何個も連投されてしまう、ということがあります。

旦那デスノートに限ったことではありませんが、２１時くらいのアクセスが集中する混雑時は、どうしても遅くなりがちです。連投してしまう悩みは今に始まったことではありませんが、ようやく良い対策案を思いつき、送信ボタン２重押し連投防止措置として導入しました。

今、デスノートの書き込みボタンを１回押すと、２回連続で書き込みボタンが押せないようになり、アニメーションが表示されるようになっています。これらの制御は、全てjavascript、jQueryで対応しました。以前に、コメントが多いランキングの処理を紹介したのと同じように、今回もソースコードを公開してみます。
コメントが多い順のランキングページを作りました

私は有能なプログラマーでは無いので、まだまだプログラムを磨き上げることは出来ると思います。もしよろしければ、参考にしてみてください。後半に、合わせて、ローディングのアニメーションとして使用させて頂いた、死神GIFについても書いています。

jQuery(document).ready(function( $ ){
  
    $('div.ask_question').append('<div id="overlay"></div>');
    $('#overlay').append('<div class="flex"></div>');
    $('.flex').append('<div class="overlay-inner"></div>');

    let nqf = '.new-question-form';
  
    $( nqf + ' ' + '[type="submit"].add_qu').click(function(){

   if( $( nqf + ' ' + 'select[name="category"]').val() != -1 && $( nqf + ' ' + 'textarea[name="comment"]').val() != '' ) {
//    if(true){

        $(this).prop('disabled',true);//ボタンを無効化する

     const homeurl = 'https://danna-shine.com';
       const img_upload_dir = '/cms/wp-content/uploads/2021/12/';

       img_src = homeurl + img_upload_dir + 'shinigami_03.gif';

      $('.overlay-inner').append('<img src="' + img_src + '">').append('<p>デスノートに書き込み中...</p>');
      $("#overlay").fadeIn();
      
        setTimeout(function(){
            $('form' + nqf).submit();
        }, 1500);
      }
    });
});

あえてコメントも残してあります。ローディング画面を出す条件として、書き込み時に入力できる、カテゴリの選択と、メッセージが記入されている時、です。いずれかの条件に当てはまらないときは、死神アニメのローディングは出しません。

記入ミスがあると、書き込み画面に戻りますし、投稿もされないので、死神が出てくると理屈が通りません。

その条件の部分に、if(true)のコメントを残してあります。テストをする時には全てOKにして通しています。理由は、都度、カテゴリを選択して、メッセージを入力するのが面倒だからです。何か問題が起こった時には、条件をtrueにして、動きを見る、という風にするためです。

ローディング画面を出す時、たぶん、これは非同期処理をやっているんだと思います。非同期は苦手で調べまくって、このコードに落ち着きました。非同期の部分は、setTimeoutです。ここで、1.5秒間は、あえて書き込みの処理を遅くしています。

というのも、混雑していない時だと、ローディングである死神のGIFアニメが一瞬しか表示されないんです。連投防止措置なので、それはそれでスムーズで良いのですが、ここはあえて、旦那デスノートとしてのファンタジー、死神がノートを読んでいるというアクションを見せたいのです。

なので、たとえ混雑してなくとも少しだけ見せるには、setTimeoutを使い、GIFアニメを見せるようにしました。書き込みが遅いときは、死神がしばらく表示され、書き込みをチェックしている感じになります。

追記です。実装してから一週間、連投がほぼ無くなりました。今ままでは１日に１０件くらいは２重、３重送信があったのですが、今はほぼ無しです。

ここからGIFアニメについて紹介します。

死神GIFアニメの使用を快く許可してくれた亡王スカルムクロさま

旦那デスノートは、サイトのイメージに伴い、死神というキャラクターを扱っています。旦那デスノートの開設当初からの悩みだったのですが、画像やGIFアニメ素材として、死神というキーワードはとても少ないのです。特に、無料素材は限りなく少ないです。

たとえ、素材として死神の画像などがあっても、おどろおどろしい、不気味すぎて私がイメージしている死神とは程遠いものが多かったです。旦那デスノートのメインイメージとしている死神は、無料素材のシルエットデザインの画像を使用しています。
死神のシルエットデザイン

また、クリスマス限定のロゴデザインは、クラウドワークスにて有料で作って頂きました。メチャクチャ気に入ってて、毎年使っています。

で、死神の素材が少ない中で、今回はさらに探すのが難しいGIFアニメです。そもそもGIFアニメの素材自体が少なく、さらに、死神というキーワードになると、もっと少なくなります。思ったとおり、調べても良いものは見つかりません。

そんな時に、ビビビビッ！と来た素材が、亡王スカルムクロさんのLINEスタンプだったのです。最初に、感じたのは「やっべ！すっご！これだよ！」です。絵に愛が感じられる。不気味で怖いんだけど、可愛らしい。素敵、最高。

今は、GIFアニメとしての素材ではなく、LINEスタンプなんですね。サイト制作でGIFアニメを探している方は、LINEスタンプを探すと良いです。時代的にそっちみたいです。

ここからが、さらに悩んだのですが、このLINEスタンプは有料なのです。とは言っても、250円。旦那デスノートで使いたい！製作者に相談してみよう！と思ったのですが、製作者の方と連絡を取る手段が無いのです。

LINEスタンプって、クリエイターの方は簡単に探せるように登録していないのでしょうか。今回、ビビビッと来た死神GIFアニメの亡王スカルムクロさんも、ウェブで検索しても、ちょこっとしかヒットしないのです。ヒットしても連絡を取る手段がない。

そこでTwitterで調べたところ、製作者の方に辿り着くことができました。Googleでは検索結果に出てこないですが、Twitterでは出てくるんですね。時代なんでしょうか。

そこで、さっそく製作者の亡王スカルムクロさんに、使用の許諾を得ようとTwitterリプライからDMをさせてもらったところ、速攻で快諾して頂きました。これはマジで嬉しかったです。

というのもですね、製作者の方はたくさんLINEスタンプなどでイラストを書かれていたり、アルファポリスという漫画サイトで連載をされていた漫画家さんのようで、芸術家の方なんですね。こんなすごい人が、快諾してくださったことに感激です。

もうね、この死神の絵のタッチというか、動きというか、メチャクチャ私のイメージしていた死神にマッチしたんです。旦那デスノートにピッタリ。怖くて可愛い、コワカワイイ。素晴らしい。画像をタップすると、LINEスタンプに飛びます。ぜひ、アニメーションを見てみてください。

アルファポリスで連載されていた漫画の絵も、すごく良い。画像をタップすると、アルファポリスの漫画へ飛びます。

LINEスタンプをウェブ上で使うときは、GIFアニメとしてダウンロードして、ループ回数を無限に設定しましょう。ダウンロードした段階では１回の動きなので、今回した使用目的のように、処理が重く時間が掛かってしまうときは、アニメーションが終わってしまいます。

アニメーションが終わってしまうのはダサいので、もしものために、GIFアニメは無限ループにしておきましょう。

先にも書いたとおり、もしGIFアニメを探している時は、GIFアニメとして探すより、LINEスタンプを探した方が効率が良いです。素材としてもGIFアニメより、数百倍も数があります。良いLINEスタンプを見つけたら、製作者の方に連絡をして交渉をしてみることをオススメします。

もちろん、まずはLINEスタンプを購入してからです。私は、LINEは全く使わないですが、今回のために購入しました。漫画もそうだし、交渉もそうだし、何でも気持ちと愛は大切です。あなたのLINEスタンプに愛を感じたので、ぜひ使わせてください、という気持ちです。

亡王スカルムクロさんの死神を始めとしてLINEスタンプの絵には、メチャクチャ愛を感じます。怖いけど、コミカルで、可愛くて、愛らしくて、魅力的。

漫画に限ったことではありませんが、芸事というのは、能力ももちろんですが、タイミングや運も大事です。今はまだ大ヒットとはなっていないかもしれませんが、自分の絵や漫画に、今と変わらない愛を注いでいれば、必ず日の目を見る機会が来ます。

私も、Googleみたいに季節ごとのロゴを使いたい、と思うときは多々あります。そんな時は、もしかしたら制作料の提案とともに、お願いしに行くかもしれません。というか、死神のイラストへの愛が素晴らしいでの、本当に頼みたいです。

ふと、ローディング用の素材としてGIFアニメを探し当てましたが、ウェブ上だけであっても、とても良い出会い、関係が築けたな、と嬉しい限りです。
亡王スカルムクロ スタンプ 絵文字 40 件

追記です。評判が良いです。

電話でも、死神のアニメーションが面白い！と感想を頂いております。やって良かった！