翔星 Be ランド日記 : 2021年02月 - livedoor Blog（ブログ）

カラオケ動画をブラウザ上でリクエストをするためツール「ゆかり」をゆーふうりんさんが開発してくれているが、これを Blazor WebAssembly 化したらどうなるか、ということでゆかり Blazor WebAssembly デモを作ってみている。

このデモの目的は 2 つある。

Blazor WebAssembly の体験（開発者側＆ユーザー側）
ゆかりシンプルモードのイメージアイディア出し

開発側の体験

1 つめの目的については、「開発側の体験」と「ユーザー側の体験」の両方を含む。

開発者にとって Blazor WebAssembly は、ウェブサイトないしは SPA（ウェブのアプリ化）を C# で構築できるフレームワーク。正式リリースは 2020 年 5 月なのでまだ 1 年も経っていない。画期的だけど歴史は浅いフレームワークがどれほど実用的に使えるか、を確認したかった。

2 ヶ月ほど開発しての印象は「かなり良い」。

いくら開発言語が C# とはいえ、デスクトップアプリの開発とは構造が全く違うため、最初は戸惑いもあったというか、今も新しいことをやる度に勉強の日々だ。しかしやはり、慣れ親しんだ C# で開発できるというメリットは大きい。async/await も使えるし。

特に、統合開発環境である Visual Studio でいきなりデバッグできるというのは非常に大きいメリットだと思う。PHP も XDebug をインストールしたりいろいろ設定すれば VS Code でデバッグできるようになるらしい。が、F5 キーを押すだけで、ブレークポイント張りから構造化された変数ウォッチ表示まで何でもできる Blazor WebAssembly のお手軽さにはかなわない。

デスクトップアプリの開発と比べてしまうと「あれも足りないこれも足りない」状態ではあるが（WPF 使えないし）、PHP だと心折れる私でも「Blazor ならいいか」と思える程度には恵まれた環境となっている。

ユーザー側の体験

ユーザーにとっては Blazor WebAssembly かどうか自体はどうでも良いことだが、「キビキビ動く」というのは大きなメリットだと思う。

通常の Web ページは当然ながらサーバーにアクセスしてからの表示だが、Blazor WebAssembly では多くの部分をサーバーと通信せずにブラウザ側だけで完結する（しかもブラウザ内の動作はバイナリコードなので速い）。

例えばこのデモでは、検索ページにアクセスしてもサーバーとは一切通信せず、ブラウザ側だけでページを描画する。このため、他のページから検索ページへの遷移は一瞬である。

検索ボタンをクリックして検索結果を取得する段階になって初めて、サーバーと通信して結果を得る。

検索結果の表示においても、結果のデータのみをサーバーから取得するだけで、表示自体はブラウザ側で行うので、通信量は最小化されて通信時間が短縮されるし、表示に要する時間も短い。

欠点としては、初回アクセス時にプログラムをダウンロードする形になるため、初回アクセスに時間がかかる点が挙げられる。しかし、何度もページ遷移するような使い方であれば、初回に時間がかかったとしても、その後キビキビ動くほうが、トータルの満足度は向上するのではと思う。

シンプルモードのイメージアイディア

ゆかりは高機能なので、初心者には使いこなすのが難しいのではないかという懸念が以前に出て、初心者向けのシンプルモードも使えるようにすると良いのではないかという発案があった。

とはいえ、具体的にどうすればいいのかという詰めは行われていないので、このデモでイメージアイディアとして作ってみた。

例えば、

動画サムネイル表示：同じ曲でも複数の動画がある場合などに選択の目安になる
検索ページのシンプル化：基本的にはキーワード入力欄が 1 つあるだけ
検索結果ページのタブ切替：検索対象や結果の並び順をワンクリックで切り替えられる
ユーザー登録：予約時の名前入力が不要になる、自分の履歴を閲覧できる
選曲・予約に関係の無い機能のそぎ落とし

などを行っている。

よさげなイメージがあったら、本家ゆかりで実現してもらえると嬉しい。

技術的キーワード

このデモで使用している主要技術は以下のような感じ。

Blazor WebAssembly (client-side Blazor / WASM) + ASP.NET Core hosted
Entity Framework Core + SQLite
JSON Web Token (JWT / トークン認証) + AuthorizeView
Server-Sent Events (SSE) + EventSource
C# 9.0 + nullable
REST API
ローカルストレージ (localStorage / Web Storage)
JavaScript (JS) 相互運用

GitHub

ゆかり Blazor WebAssembly デモ

翔星 Be ランド日記

2021年02月

ニコカラメーカーシリーズがコンテンツツリーランキング 2020 で 39 位入賞

ゆかり Blazor WebAssembly デモについて

開発側の体験

ユーザー側の体験

シンプルモードのイメージアイディア

技術的キーワード

GitHub