BlazorWebAssemblyを使ってコメントスクリーンみたいなものを作った話
今回、割と目新しい技術であるBlazorWebAssemblyを使って開発をやったので、どんな感じに開発をしたのかまとめてみます
作ったソフトの名前はbolideといいます。
コメントスクリーンとは
コメントスクリーンはZoomなどで画面共有している所に、ニコニコ動画のようなコメントを流せるソフトです。
コメントスクリーン非常に使いやすいのですが、複数のユーザーのPCでコメントを流すことが出来なかったり（実はできた）、有料化でかなり使いにくくなっていたので似たようなソフトをOSSで開発しようという話になりました。
システム構成
システムとしては、コメントを送信するWebクライアントアプリ（Blazorで作成）・コメントを受信してデスクトップにコメントを表示するデスクトップクライアント・コメントをWebクライアントアプリとデスクトップクライアントで受け渡すサーバーアプリで構成されています。
Webクライアントアプリ
コメントを送信＆他の人が送信したコメントも見れるWebクライアントアプリです。
技術としてはC#+BlazorWebAssemblyを利用しています。
デスクトップクライアント
サーバから送られてきたコメントをデスクトップ画面上に表示するアプリです。
技術としてはC#+WindowsFormsを利用しています。
サーバーアプリ
これに関しては自分ではなく、
cordx56先輩に作成していただきました。
技術としてはPython+Flaskで組まれています。
サーバーアプリではWebクライアントアプリからコメントがPOSTされてくるので、それをWebSocketに流す作業を行なっています。
BlazorWebAssemblyを採用した理由
BlazorWebAssemblyはC#用フロントエンドフレームワークBlazorとWebAssemblyが組み合わさった物です。
WebAssemblyを使っていないBlazorとしてBlazorServerというものがあります。これはブラウザ側のアクションをサーバーに送り、そこでC#で処理するものです。そのため、オフラインでの動作やGitHubPagesのような静的ページのホスティングしかできないサービスでは使用できません。
BlazorWebAssemblyではBlazorServerでの問題を解決しており、また当たり前ですがC#でロジックの実装ができます。そのため、今回作ったシステムではデスクトップクライアントとコードが一部共有でき、開発の短縮に繋がりました。
具体的に、デスクトップクライアントを作ったあと、フロントエンドの実装には30分もかかっていません。
もし、自分がReact+TypeScriptで同じクライアントを作ろうとしたら、最低でも2時間はかかってしまうと思います。
また、処理にバグが見つかった際も同じように修正ができ、機能追加も簡単にできます。
BlazorWebAssemblyのデメリット
散々ベタ褒めしたわけですが、デメリットもあります。
- ネット上の資料が少ない
- 実行速度が割と遅い
- 初回アクセス時のダウンロードするものが多い
まず、ネット上の資料が少ない理由ですが、これは正式版リリースが2020年の5月と、まだあまり時間が経っていません。
BlazorWebAssemblyでは実行にWebAssemblyで記述されたインタプリタで実行しています。そのため、他のWebAssemblyに直接コンパイルするものに比べ遅いらしいです。
参考資料↓
初回アクセス時のダウンロード量が多い問題は、C#のランタイムをダウンロードしていることが大きいです。サイズとしては1.5MBほどです。
