スキルアップを始める

【GAS】doGetを使って簡易店頭受付システムを構築する-Part2

GAS(GoogleAppsScript)
メルマガ購読できます

簡単1ステップ!届いたメールの「フォローを確認」クリックでメルマガ登録!一緒にスキルアップを目指しましょう!

57人の購読者に加わりましょう

前回で呼び出しボタンを表示できました。

押したら音が鳴るようにする

呼び出しボタンなので、音が鳴るようにしています。

まずは、メディアライブラリに音源をアップロードします。

効果音素材 1,302件 1/261 ページ|フリーBGM DOVA-SYNDROME
フリーBGM DOVA-SYNDROME 効果音素材素材一覧の1ページ目です。

下記のようにJavaScriptを組むことで、ボタンを押下時に音が鳴ります。

<script>
  document.addEventListener('wpcf7submit', function(event) {
    var sound = new Audio('/wp-content/uploads/call.mp3');
    sound.play();
  });
</script>

このコードは、’wpcf7submit’イベントが発火したとき(つまり、フォームが送信されたとき)に音を再生します。

ブラウザで音を再生するためには通常 <audio> タグが必要ですが、JavaScriptのAudioオブジェクトを使用することで直接音声ファイルを読み込み再生することも可能です。

ボタンを押したら、音が鳴るかと思います。

ボタンイベントを送信する

GASに対してfetchで送信をします。

<script>
  var isSubmitting = false;
  document.addEventListener('wpcf7submit', function(event) {
    if (isSubmitting) {
      return; // すでに送信中の場合は処理を中断
    }

    isSubmitting = true; // 送信フラグを立てる

    //音を鳴らす
    var sound = new Audio('/wp-content/uploads/call.mp3');
    sound.play();


    fetch('https://script.google.com/macros/s/XXXXXXXXX/exec')
      .then(response => {
        if (response.ok) {
          console.log('リクエスト成功');
        } else {
          throw new Error('リクエスト失敗');
        }
      })
      .catch(error => {
        console.log('エラーが発生しました:', error.message);
      })
      .finally(() => {
        isSubmitting = false; // 送信フラグ解除
      });
  });
</script>

以下のような流れでスクリプトが実行されています。

  1. フラグ isSubmitting が真のとき(すでにフォームの送信が進行中のとき)、これ以上の実行を中止します。
  2. isSubmitting フラグが偽の場合(送信がまだ始まっていない場合)、フラグを真にします。これにより、フォームの送信が進行中であることを示します。
  3. call.mp3 という音声ファイルを再生します。
  4. 指定されたURL(https://script.google.com/macros/s/XXXXXXXXX/exec)にフェッチリクエストを送信します。
  5. リクエストが成功した場合、コンソールに ‘リクエスト成功’ と表示します。リクエストが失敗した場合、エラーメッセージをコンソールに表示します。
  6. 最後に、isSubmitting フラグを偽にして、フォームの送信が終了したことを示します。

isSubmitting フラグが無いと、ボタン押下が連続で送信できてしまい、doGetでうまくキャッチできないので、フラグを使って送信中かどうかを判定しています。

まとめ

このコードはフォームの送信中に音を鳴らし、同時に指定したURLへリクエストを送信します。

このURLは通常、Google Apps ScriptのウェブアプリのURLで、このリクエストが発生すると指定されたGASのコードが実行されます。

続きは、また。

会員登録するとご利用できます。
Kindle Unlimited 会員は無料で購読できます
購読はこちら
Kindle Unlimited 会員は無料で購読できます
購読はこちら