ASP.NET: 処理時間が長いWebアプリが終了したときに音楽を流して知らせるには？

説明文の表示ライブデモを見る▶

ようこそ「ASP.NET」へ...

ASP.NET»記事(Article026) ◀前の記事次の記事▶

処理時間が長いWebアプリが終了したときに音楽を流して知らせるには？

AmazonのMWS API等を利用したWebアプリを開発するときは、処理時間が数時間かかるといったことがあります。このようなWebアプリを実行するときは、処理が終了したときに音楽を流してアプリが終了したことを知らせると便利です。ここではWebアプリの処理が終了したときに音楽を流して知らせる方法を解説します。

作成手順

VS2019(Visual Studio 2019 or Visual Studio 2022)を起動したら新規のWebフォーム「Article026.aspx」を作成します。

Webフォームのヘッダータグ内(<head>...</head>)にSCRIPTタグを追加してjQueryのライブラリーを取り込みます。さらに、SCRIPTタグを追加したら以下のようなjQueryのコードを入力します。


Article026.aspx:

<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="  crossorigin="anonymous"></script>
<script type="text/javascript">                

    // jQuery Document Ready Event...
    $(function () {               
        $('input.btnSubmit').click(function () {
            $('.lblMessage').html('<img src="../../../images/progress.gif" alt="" /> Processing... Please wait 3 seconds!');
            $(this).attr('disabled', 'disabled');              
        });
    });  
    
</script>

VS2019のツールボックスからButtonコントロールをドラッグ＆ドロップして配置します。 ButtonにCssClassプロパティを追加して「btnSubmit」を設定します。 BackColorプロパティには「Orange」、UseSubmitBehaviorプロパティには「false」を設定します。 Textプロパティには「Run a long running task」を設定します。最後にOnClickイベントを追加します。次に、HTMLのHRタグ追加したら、ツールボックスからPlaceHolderコントロールをドラッグ＆ドロップして配置します。 PlaceHolderのIDプロパティを「plhSound」に書き換えます。
```
Article026.aspx:

<asp:Button ID="btnRun" runat="server" CssClass="btnSubmit" BackColor="Orange" 
    UseSubmitBehavior="false" 
    Text="Run a long running task" OnClick="btnRun_Click" />

<hr />
<asp:PlaceHolder ID="plhSound" runat="server"></asp:PlaceHolder> 
```

VS2019からArticle026.aspxのコードビハインド(Article026.aspx.cs)を選択して表示したら以下のコードを入力します。


Article026.aspx.cs:

// Run a long running task
protected void btnRun_Click(object sender, EventArgs e)
{
    SleepSeconds(3);
    PlayMusic();
}

// PlayMusic()
private void PlayMusic()
{
    plhSound.Controls.Add(new LiteralControl("<audio controls autoplay>")); // audio controls autoplay loop
    plhSound.Controls.Add(new LiteralControl("<source src=\"sound/YoYoMa.mp3\" type=\"audio/mp3\" />"));
    plhSound.Controls.Add(new LiteralControl("</audio>"));
}

// Sleep Seconds
private void SleepSeconds(int intSeconds)
{
    int intMilliSeconds = 1000 * intSeconds;
    System.Threading.Thread.Sleep(intMilliSeconds);
}

操作手順と解説

サンプルが表示されたら[Run a long running task]ボタンをクリックします。このボタンには「UseSubmitBehavior="false"」が指定されているのでWebフォームはASP.NET経由でポストバックされます。
クライアント側のButtonのクリックイベントが発生して3-6行目のクリックイベントが実行されます。 4行目ではメッセージ領域（LabelコントロールのTextプロパティ）に処理中を示すGIFアニメーションと「Processing... Please wait 3 seconds!」のメッセージを設定して表示します。 5行目ではButton要素のdisabled属性に「disabled」を設定してボタンを無効にします。クリックのイベントから戻るとASP.NET経由でWebフォームがポストバックされます。
```
<asp:Label ID="lblMessage" ForeColor="Red"  runat="server" CssClass="lblMessage" Text="Welcome to ASP.NET..." />     
    
$('input.btnSubmit').click(function () {
    $('.lblMessage').html('<img src="../../../images/progress.gif" alt="" /> Processing... Please wait 3 seconds!');
    $(this).attr('disabled', 'disabled'); 
}
```

Webサーバーにコントロールが移って1-5行目のButtonのクリックイベント（サーバー側）が実行されます。 3行目ではSleepSeconds(3)関数を呼び出して３秒間スリープします。３秒経過したら4行目でPlayMusic()関数を呼び出します。 PlayMusic()関数の8-10行目ではHTMLのAUDIOタグを追加しています。

protected void btnRun_Click(object sender, EventArgs e)
{
    SleepSeconds(3);
    PlayMusic();
}
private void PlayMusic()
{
    plhSound.Controls.Add(new LiteralControl("<audio controls autoplay>")); // audio controls autoplay loop
    plhSound.Controls.Add(new LiteralControl("<source src=\"sound/YoYoMa.mp3\" type=\"audio/mp3\" />"));
    plhSound.Controls.Add(new LiteralControl("</audio>"));
}
private void SleepSeconds(int intSeconds)
{
    int intMilliSeconds = 1000 * intSeconds;
    System.Threading.Thread.Sleep(intMilliSeconds);
}

PlayMusic()では1行目のPlaceHolderコントロールに3-5行目のAUDIOタグを追加しています。 4行目ではSOURCEタグのSRC属性には音楽のファイル「YoyoMa.mp3」を設定しています。
```
<asp:PlaceHolder ID="plhSound" runat="server"></asp:PlaceHolder>  
    
<audio controls autoplay>
  <source src="sound/YoYoMa.mp3" type="audio/mp3" />
</audio>
```
Webフォームがブラウザに送信されると、HTMLのAUDIOタグに「autoplay」が指定されているので音楽が自動的に流れます。
Live DEMOを実行するときは、「説明文の表示・非表示切り替え」をクリックして説明文を非表示にしてメッセージ領域が見えるようにしてください。

Live DEMO

Go Top

ASP.NET {Article026}

処理時間が長いWebアプリが終了したときに音楽を流して知らせるには？

作成手順

操作手順と解説

Live DEMO