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

GAS(GoogleAppsScript)

2023.08.18

この記事は約4分で読めます。

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

押したら音が鳴るようにする
ボタンイベントを送信する
まとめ

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

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

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

効果音素材 1,311件　1／263 ページ｜フリー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>

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