🐥note.

小鳥とMicrosoft <3 なエンジニアの技術Blog📚

Blazorの再接続画面をカスタマイズしてかわいい文鳥の画像を表示する

先日こちらの一連のツイートを見かけました。

togetter.com

なるほど~ 確かにネコちゃんとか文鳥の画像が表示されたら怒りも収まるに違いない。

というわけでBlazorのリコネクト画面をカスタマイズしてみます。

カスタマイズ結果

こんな感じになりました。

文鳥めっちゃかわいいですね…✨🐦✨  📹🐤💕

コネクションロスト(リコネクティング)状態

f:id:piyo_esq:20191003221027p:plain
コネクションロスト(リコネクティング)のエラー画面

リコネクト タイムアウト状態

f:id:piyo_esq:20191003221120p:plain
リコネクト タイムアウトのエラー画面

変更前(デフォルト表示)

ちなみに変更前(デフォルト)だとこんな感じの表示です。

f:id:piyo_esq:20191003222044p:plain
デフォルトのコネクションロストのエラー表示

どうやるの?

以下の記事によると.NET Core 3.0 Preview 4くらいでカスタマイズの機能が追加されたっぽい?

devblogs.microsoft.com

このあたり。

To customize this UI define an element with components-reconnect-modal as its ID. The client will update this element with one of the following CSS classes based on the state of the connection:

  • components-reconnect-show: Show the UI to indicate the connection was lost and the client is attempting to reconnect.
  • components-reconnect-hide: The client has an active connection – hide the UI.
  • components-reconnect-failed: Reconnection failed. To attempt reconnection again call window.Blazor.reconnect().

Microsoft Docsにも一応変な日本で記述されているっぽい。

docs.microsoft.com

カスタマイズした感じから要約すると

  • components-reconnect-modalという名称のID要素にリコネクト時と再接続試行時の画面を作る。
  • 正常に接続できている状態ならcomponents-reconnect-hideで定義したCSSがcomponents-reconnect-modalに適応される。
  • コネクションロスト(リコネクティング)状態ならcomponents-reconnect-showで定義したCSSがcomponents-reconnect-modalに適応される。
  • リコネクト タイムアウト状態ならcomponents-reconnect-failedで定義したCSSがcomponents-reconnect-modalに適応される。

cshtml側の実装

_Host.cshtmlにcomponents-reconnect-modalを追加します。

reconnect-waitのdivがコネクションロスト(リコネクティング)状態の際に表示する画面要素
reconnect-buttonのdivがリコネクト タイムアウト状態の際に表示する画面要素です。

components-reconnect-modalに対して適応するdisplay属性値はcss/reconnect.cssで定義しています。

Reconnectボタンを押下すると、再接続できます。

@page "/"
@namespace ReconnectSample.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ReconnectSample</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
+    <link href="css/reconnect.css" rel="stylesheet" />
</head>

<body>
+    <div id="components-reconnect-modal" class="reconnect-block">
+        <div class="inner-block">
+            <div class="reconnect-wait">
+                <div class="image-block">
+                    <image src="reconnecting.jpg"></image>
+                </div>
+                サーバとの通信が切断されました。只今再接続中です...🐥💬
+            </div>
+
+            <div class="reconnect-button">
+                <div class="image-block">
+                    <img class="timeout-image" src="timeout.jpg"></img>
+                </div>
+                サーバへの再接続に失敗しました。ボタンを押して再接続してください🐥💦
+                <button class="btn btn-primary" value="Reconnect" onclick="Reconnect()">再接続</button>
+            </div>
+        </div>
+    </div>

    <app>
        @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
    </app>

    <script src="_framework/blazor.server.js"></script>
</body>

</html>

※このサンプルはレスポンシブ対応とか全くしてないのでご留意ください

※関係ないけどなんで+以外のところがハイライト表示されるんだろう…。

css側の実装

wwwroot/css/reconnect.cssを新規作成します

.reconnect-block {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: none;
    overflow: hidden;
    background-color: #fff;
    opacity: 0.8;
    text-align: center;
    font-weight: bold;
}

.inner-block {
    width: 450px;
    height: 250px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    margin: auto;
}

.image-block {
    width: 300px;
    height: 200px;
    display: block;
    margin: auto;
    text-align: center;
}

img {
    max-width: 100%;
    height: auto;
}

/* 大事なのはここから↓ */

/* 正常状態はnoneでcomponents-reconnect-modalを表示しない */
.components-reconnect-hide {
    display: none;
}

/* コネクションロスト(リコネクティング)状態はcomponents-reconnect-modalをdisplay:blockで表示 */
.components-reconnect-show {
    display: block;
}

/* リコネクト タイムアウト状態はcomponents-reconnect-modalをdisplay:blockで表示 */
.components-reconnect-failed {
    display: block;
}


.components-reconnect-show .reconnect-wait {
    display: block;
}

.components-reconnect-failed .reconnect-wait {
    display: none;
}

.components-reconnect-show .reconnect-button {
    display: none;
}

.components-reconnect-failed .reconnect-button {
    display: block;
}

参考

画面のカスタマイズはここら辺のBlogでも触れられているっぽい。

visualstudiomagazine.com

www.telerik.com

あとはGitHubのAspNetCoreのリポジトリを見た感じ、こことかここら辺でしょうか?

おわり

これで接続が切れても怒られずに済むかも…?

ちなみに文鳥の画像はこちらのフリー素材を利用させていただきました。

素敵な写真ありがとうございます。

1枚目(白文鳥):灘 伏見さんによる写真ACからの写真

2枚目(ノーマル文鳥):acworksさんによる写真ACからの写真