Blazor WASM × Code-first gRPC で始める C# ⼤統⼀理論
■イベント イマドキのC# .NET Web開発 〜gRPC, GraphQL, Blazorもあるよ〜 https://sansan.connpass.com/event/316664/ ■発表者 Sansan Engineering Unit Data Hubグループ 今村 有人 ■ Sansan Data Hub エンジニア採用情報 https://media.sansan-engineering.com/datahub-engineer
■イベント イマドキのC# .NET Web開発 〜gRPC, GraphQL, Blazorもあるよ〜 https://sansan.connpass.com/event/316664/ ■発表者 Sansan Engineering Unit Data Hubグループ 今村 有人 ■ Sansan Data Hub エンジニア採用情報 https://media.sansan-engineering.com/datahub-engineer
はじめに Blazor が .NET Core 3.1 の頃に出てきて、Single Page Application を C# + HTML/CSS + ちょっとのJavaScript で作れる技術という立ち位置で .NET 5 頃までいました。 そこから Blazor Hybrid や .NET 8 で Blazor United という俗称で呼ばれる新しい Blazor の形が出てきました。 正直、のほほーんと外から Blazor を眺めているだけだと何が何だかわからない状態だと思うので、.NET 8 時点での Blazor の形を整理してみようと思います。今回は基本的に整理するだけで、実際にコードとしてどのように実装するのかといった所までは踏み込みません。個々の詳細についてはドキュメントなどを参照してください。 関連するドキュメントや私の記事などは、関係する説明の途中にリンクを貼っ
※Blazor Serverについて知らなかった人に興味を持ってもらいやすくする為、タイトルを「Blazor Serverの非同期処理がめちゃくちゃ直感的に書けて感激した件」から変更しました。 今更ですがBlazor Serverをちょっと試してみて、そのあまりのすごさに驚いたので記事にしてみます。C#があれば、ReactもVueもSvelteも要らんかったんや…（言い過ぎ）。 Blazor Serverは比較的新しいフレームワークで、「サーバ側もクライアント側も全てC#で記述しよう」という野心的なフレームワークです。2020年頃に正式リリースされ、.NET 3.1以降で使えるので、.NET6がLTSで既に.NET8がリリースされようとしている現在では、割と安定した技術と言えるでしょう。 同じBlazorブランドで展開している似た技術に「Blazor WebAssembly」というものもあ
はじめに 同じようなタイトルで 1 年と半年前に以下の記事を書きました。 この時には Fluent UI Blazor イマイチだなぁと思っていたのですが、あれから 1 年半で Fluent UI Blazor が結構進化していました。そして .NET 8 で Blazor が大進化を遂げたのにも、しっかり対応していました。 まだ、細かいところをみると .NET 8 の Blazor の進化への対応は、ドタバタしてる感じはありますが、即対応版を出してくれているところは安心感があります。 ということで .NET 8 で Fluent UI Blazor を試してみて感想を書いていこうと思います。 Fluent UI Blazor とは Fluent UI Blazor は Microsoft のデザイン システムの Fluent UI に沿ったコンポーネントを提供する Blazor 向けの
はじめに 現在、Blazor Server を使用してアプリケーションを作成しています。.NET 7のサンプルアプリから徐々に改良して作成していきました。 2023/11/14に.NET 8がリリースされました。早速、Target frameworkを「.NET 8」に変更してみると、これが動かないんですよね。 既に社内ライブラリーは、.NET 8に上げてしまったので正直焦りました。 原因を調査するには時間が足りないため、しばらくは.NET 7のまま開発を進めていました。 そして、冬季休暇になった段階で、ようやく落ち着いて調べることが出来ました。 変更点 .NET 8のサンプルアプリから徐々に現在のアプリケーションに近づける方法で調査していきました。 フォルダ構成 .NET 7では、直下にPagesフォルダとSharedフォルダがありましたが、.NET 8では、直下にComponentsフ
この記事は以下のツイートから始まる疑問に対する回答みたいな記事です。 満たしたい要件としては、ASP.NET Core Blazor WebAssembly をフロントにしつつ、サーバーサイドは ASP.NET Core で Web API も作れて、同じサイトにフロントエンドとバックエンドの両方を配置できるようなプロジェクトを作ることです。 箇条書きにすると以下のような感じですね。 フロントエンドは ASP.NET Core Blazor WebAssembly バックエンドは ASP.NET Core Web API (もしくは Minimal APIs) 発行すると1つに纏まってフロントエンドとバックエンドと同じサイトに配置できる 先に解説 ASP.NET Core は DI コンテナ内にどんなサービスを登録するかということと、どんなミドルウェア（リクエストを処理するパイプライン）を
//省略 #if ANDROID using TestApp.Platforms.Android; #elif WINDOWS using TestApp.Platforms.Windows; #endif namespace TestApp; public static class MauiProgram { public static MauiApp CreateMauiApp() { //省略 #if ANDROID builder.Services.AddSingleton<IDeviceNameService, AndroidDeviceNameService>(); #elif WINDOWS builder.Services.AddSingleton<IDeviceNameService, WindowsDeviceNameService>(); #endif return
はじめに Blazorにおいてメモリ内で利用する状態（サービス，クラスインスタンス）はどのように管理していますか？ Blazorerの中にはReactやVueなどのJavascriptフレームワークを利用したことがない方も多いと思います． BlazorにおけるUIの更新方法ですが， Blazorは，WPFやUWPなどのMVVMのアーキテクチャとは根本的に違い， どちらかというとReactやVueに近いアーキテクチャを持っています． 私はBlazorにおいて，MVVMで利用していたプラクティスは必ずしも理想的ではないと考えています． ReactやVueの世界ではコンポーネント（UI）間で状態を共有する際に別途状態管理（Store）ライブラリを導入するケースが多いです． 例: Reactの場合 Redux Flux Recoil Mobx 例: Vueの場合 Vuex Pinia 中にはRed
この記事は、.NET 8 の Blazor で WASM + gRPC のプロジェクトを作る方法を紹介します。 基本的には、以前書いた.NET 8 の Blazor で WASM + API のプロジェクトを作るの記事と同じですが、gRPC に変更する部分を主に紹介します。 プロジェクトの作成 ここら辺は基本的に前回と同じなのでさくっと説明します。Blazor Web App で WebAssembly を Global で有効になるようにしてプロジェクトを作成します。 そして Routes.razor を以下のようにして静的 SSR の時には Loading... と表示するようにします。 @if (!OperatingSystem.IsBrowser()) { <div>Loading...</div> } else { <Router AppAssembly="typeof(Prog
はじめに WPF(Windows Presentation Foundation)をベースにしたBlazor Hybridアプリの構築方法はマイクロソフトの下記のサイトにて紹介されております。しかし、Visual StudioのBlazor Webassemblyで生成されるテンプレートにあるようなサイドビューが付いておりませんので、ここでご紹介いたします。 そもそも、なぜWPFベースで行うのか？ <一言でいえば、外部アプリケーションを制御したいから> Blazor HybridはMAUIをベースにした方法が一般的ですが、外部のアプリケーション（例えば、3D CADソフトなど）の専用APIやSDKを使用した開発を行いたい場合に、WPFやWinFormsでないと対応できない場合が存在します。そのため、Blazorの機能を使用して外部アプリケーションを制御するソフトウェアの開発において、WPF
ボタンの二度押しを禁止したい。 とてもよくある要望だと思います。ということでやっていきましょう。 シンプルなケース Blazor で対応するには以下のような感じで実装すれば良いです。 @page "/" @rendermode InteractiveServer <PageTitle>Home</PageTitle> <h1>カウンター</h1> <p>Current count: @_currentCount</p> @* _isProcessing が true の時は押せなくする *@ <button @onclick="IncrementAsync" disabled="@_isProcessing">Increment</button> @code { private bool _isProcessing; private int _currentCount = 0; publi
(An English version of this article is also available.) この記事ではBlazorで状態管理（State Management）を行う手法について紹介していきます。 今回使用したのはFluxorという.NET向けのFlux/Redux実装です。 状態管理とは 状態管理、State Managementとは多くのコンポーネントに散らばりがちなアプリケーション内の状態を集約する形でアプリケーションの状態変化（ユーザーの入力等）に柔軟に対応できるようなシステムです。 使用したプロジェクト 今回使用したプロジェクトは拙作の仙狐ビュワーです。完全なソースは公開していませんが、仕組み自体はシンプルなプロジェクトですので、コードサンプルを交え、その実装の仕組みについて紹介していきます。 プロジェクトの内容 仙狐ビュワーは高解像度の画像を公開するための
Web ブラウザの View Transition 機能 ここでいう "View Transition" というのは、Web ブラウザが提供する機能のことで、2 つの表示状態の遷移にアニメーション効果を付けることのできる、JavaScript API として公開されている機能です。 下記リンク先の冒頭の動画がわかりやすいです。画面間の遷移がアニメーション効果で滑らかに繋がってヌルヌル動きます。 MDN の説明は以下のリンク先を参照ください。 基本的な使い方はとてもシンプルで、表示を変更・書換えを行なう処理を、document オブジェクトの startViewTransition メソッドに渡すだけです。こうすると、変更前の表示状態と、変更後の表示状態が、アニメーション効果で滑らかに繋がって遷移します。下記例は同期処理を startViewTransition の引数に渡していますが、Pr
ASP.NETアプリでWindows認証を設定するとHTTP Error 500.30 - ASP.NET Core app failed to startとなって起動しない 【▲→川俣晶の縁側→ソフトウェア→技術雑記】
解決 § こんな感じでcsprojファイルに<AspNetCoreHostingModel>OutOfProcess</AspNetCoreHostingModel>を入れれば良いようだ。 <PropertyGroup> <TargetFramework>net6.0</TargetFramework> <Nullable>enable</Nullable> <ImplicitUsings>enable</ImplicitUsings> <AspNetCoreHostingModel>OutOfProcess</AspNetCoreHostingModel> </PropertyGroup>
.NETの新しいWeb技術であるBlazor、大きくBlazor ServerとBlazor WebAssemblyの2種類の動作形態があることは皆さんご存知（？）ですね。そして.NET 8では、これにさらに様々な新機能も追加されてきています。 今回はこのうちBlazor WebAssemblyの実行パフォーマンスについて検証してみます。 WebAssemblyは速いだろうと思っていたな？ まず最初に、WebAssemblyは下記Wikipediaの解説にもあるとおり、ネイティブ（バイナリ）相当のコードが実行されるため速い！というイメージがありますね。 ネイティブコード相当の高速性・隔離環境でのメモリ安全な実行による安全性・仮想マシンによるハードウェア/プラットフォーム可搬性・ソースプログラミング言語中立性などを特徴とする。 それを期待してベンチマークをとってみたのが、2023年に登壇した
はじめに ASP.NET Core Blazor で色々開発していくと、どうしても JavaScript でやりたいということが出てくると思います。 その場合に TypeScript でなるべく開発する方法について書いていこうと思います。 Razor コンポーネントに紐づく TypeScript ファイルを作成する方法 まずは、Razor コンポーネントに紐づく JavaScript ファイルを使う方法から説明します。 普通は Components/Pages/Home.razor という Razor コンポーネントに対して Components/Pages/Home.razor.js という JavaScript ファイルを作成します。 これを Components/Pages/Home.razor.ts という TypeScript で開発できるようにしたいと思います。 TypeScr
.NET Maui BlazorアプリはBlazor Server相当らしいという仮説 【▲→川俣晶の縁側→ソフトウェア→技術雑記】
問題提起 § .NET Maui Blazorアプリで抱え込んだ謎がある。 Console.WriteLineでコンソールにデバッグメッセージを出せないのはなぜかリロードしてもプロセス空間がリセットされないのはなぜか ページ切換がサクサクできることから、Blazor WebAssembly相当の機能が動いていると考えると謎である。 結論 § Blazor Server相当の機能が動いている。 サクサク動くのは、Blazor Server相当の機能とWebブラウザ相当の機能が直結しているから。
BlazorアプリがWebAssemblyで実行中かServerで実行中か実行時に判定したい 【▲→川俣晶の縁側→ソフトウェア→技術雑記】
問題 §BlazorアプリがWebAssemblyで実行中かServerで実行中か判定したい。 共用されるRazorライブラリを作るとそれが知りたい。 解決 §RuntimeInformation.OSDescription == "Browser"が成立しているときはWebAssembly。 RuntimeInformation.OSDescription == "web"としているサイトがあるが少なくとも手元の環境(Windows 11+Chrome)では違った。
はじめに エンハンスド株式会社の@KennethEHDと申します。 弊社ではBlazorを活用した業務システムやERPの開発を行っております。 今回はすでに業務システムやERPとしてクライアント様に提供しているBlazorのデザインコンポーネントをご紹介いたします。 HAVIT Blazorとは 皆様はHAVIT Blazorをご存じでしょうか？ Blazorのデザインコンポーネントとしては、 【OSS】 MatBlazor https://github.com/SamProf/MatBlazor Radzen Blazor https://github.com/radzenhq/radzen-blazor MudBlazor https://github.com/MudBlazor/MudBlazor Ant Design Blazor https://github.com/ant-de
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
.NET 8 での Blazor を整理整頓して理解しよう
非同期なHTMLのレンダリングもサーバ側から全部やっちゃう「Blazor Server」が凄すぎる - Qiita
Blazor で HTML を書きたくないよぉ…(Fluent UI Blazor 編 on .NET 8)
Blazor Serverで.NET 7から.NET 8への移行方法 - Qiita
.NET 8 の Blazor で WASM + API のプロジェクトを作る
.NET MAUI+blazorでプラットフォーム固有コードを呼び出す。 - Qiita
Blazor向けにコンポーネント間で状態を共有する状態管理ライブラリを作った
.NET 8 の Blazor で WASM + gRPC のプロジェクトを作る
WPFをベースにしたサイドビュー付きのBlazor Hybridアプリの構築方法
.NET 8 の ASP.NET Core Blazor で二度押しを抑止したい
BlazorでFluxorを使った状態管理 - Qiita
Blazor でも View Transition したい - Qiita
Blazor WebAssemblyのベンチマークをとってみた - Qiita
ASP.NET Core Blazor 向けに TypeScript で開発する方法
軽量かつ高機能なHAVIT Blazorを使ったBlazor開発 - Qiita