Blazor WASM × Code-first gRPC で始める C# ⼤統⼀理論
■イベント イマドキのC# .NET Web開発 〜gRPC, GraphQL, Blazorもあるよ〜 https://sansan.connpass.com/event/316664/ ■発表者 Sansan Engineering Unit Data Hubグループ 今村 有人 …
■イベント イマドキのC# .NET Web開発 〜gRPC, GraphQL, Blazorもあるよ〜 https://sansan.connpass.com/event/316664/ ■発表者 Sansan Engineering Unit Data Hubグループ 今村 有人 …
はじめに 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 コンテナ内にどんなサービスを登録するかということと、どんなミドルウェア（リクエストを処理するパイプライン）を
私の考える初学者がBlazorできるまでの学習方法 .NETラボ 勉強会 2024年8月 https://dotnetlab.connpass.com/event/326381/
はじめに 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
更新履歴 2024/05/25 初版 2024/07/27 コメントでの指摘事項を反映 本文 この記事は、.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...<
はじめに 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とは多くのコンポーネントに散らばりがちなアプリケーション内の状態を集約する形でアプリケーションの状態変化（ユーザーの入力等）に柔軟に対応できるようなシステムです。 使用したプロジェクト 今回使用したプロジェクトは拙作の仙狐ビュワーです。完全なソースは公開していませんが、仕組み自体はシンプルなプロジェクトですので、コードサンプルを交え、その実装の仕組みについて紹介していきます。 プロジェクトの内容 仙狐ビュワーは高解像度の画像を公開するための
はじめに お仕事にてClassic aspおよびASP.NETで作成された既存アプリケーションをBlazor Serverに作り替える作業をしています。 ラベルプリンターの印刷があるシステムの改修する段階となり、使用している外部モジュールなどもバージョンアップしました。 ただFreeSpire.PDFのバージョン 10.2.0にしたところ、印刷メソッドが削除されていました。一つ前のバージョン 8.6.0は問題ないため、このバージョンにしています。 小さい文字の印字 ラベルプリンターの印刷なので小さい文字が必要となります。 MSゴシック 6ptの文字を印字すると、Acrobat Readerでは印字した場合は細い線を保ったまま綺麗な文字で印字されるが、FreeSpire.PDFだと細い線が汚く印字される。もちろんその状態でも問題なく読めるので運用上は困ることはない。綺麗な状態を知っていると残
本記事を書いた動機 先日、立ち寄った書店にて次の書籍を購入した。 『C#ユーザーのためのWebアプリ開発パターン』（伊藤 稔 著/大田 一希 著/小山 崇 著/辻本 海成 著/久野 太三 著/赤間 信幸 著/赤間 信幸 監修/井上 章 著/井上 章 監修）（インプレス） 現在、手を動かしながら読み進めているところだが、序盤で詰まる箇所に遭遇した。 挫折者を一人でも減らすため、著作権に触れない範囲で解決方法を共有することにした。 この書籍（以下、本書とする）は、事前に準備した SQL Server をDBとして利用し、C#のBlazorをハンズオン形式で効率良く学べる構成となっている。 裏を返せば、最初に SQL Server を立てなければハンズオン形式で学ぶことが出来ないとも言える。 本書では付録として SQL Server の構築方法が複数紹介されている。 そのうちのひとつである「カス
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
TL;DR index.html ファイル内の <script src="_framework/blazor.webassembly.js"></script> の前に <script>var Module;</script> を入れることで解決 この問題について 問題発生条件 OS: iOS ブラウザ: Safari, Chrome, Opera (検証したブラウザ全部) ↑のようなエラーが発生し、画面が読み込まれない (このスクリーンショットではロードがされているが、実際はロードが98%ぐらいのところで止まっているため、サイドバーや文字は表示されない) 解決方法 プロジェクト名/wwwroot/index.html を以下のように編集する <!DOCTYPE html> <html lang="ja"> <head> ...省略... </head> <body> <div id="a
.NET Maui BlazorアプリはBlazor Server相当らしいという仮説 【▲→川俣晶の縁側→ソフトウェア→技術雑記】
問題提起 § .NET Maui Blazorアプリで抱え込んだ謎がある。 Console.WriteLineでコンソールにデバッグメッセージを出せないのはなぜかリロードしてもプロセス空間がリセットされないのはなぜか ページ切換がサクサクできることから、Blazor WebAssembly相当の機能が動いていると考えると謎である。 結論 § Blazor Server相当の機能が動いている。 サクサク動くのは、Blazor Server相当の機能とWebブラウザ相当の機能が直結しているから。
Blazor HybridとBlazor Web AppのUIをRCLで共通化する手順｜Blazorマスターへの道
Blazor Hybrid は、iOS と Android で動くネイティブアプリとデスクトップアプリの UI や一部ロジックを共通化できるものです。 さらに、RCL（Razor Class Library）を使うことで、Web の UI とも共通化することができます。 ただし、RCL を使った Web との共通化については具体的な手順が書かれておらず、いろいろと調べながら作業する必要があり、少し苦戦してしまいました。 そこで本記事では誰でも簡単にできるよう、ゼロから作成する手順について解説していきます。 Blazor Hybrid の環境構築については、この記事では割愛します。はじめての人は、公式ドキュメントもあわせて読んでみるといいかもしれません。 Blazor Hybrid と Blazor Web App の UI を RCL で共通化する手順 完成形は GitHub リポジトリで
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
"Use the power of .NET and C# to build full stack web apps without writing a line of JavaScript." C# で SPA を実装する Blazor の Qiita Advent Calendar です！ (Blazor Server、Blazor WebAssembly、Blazor SSR、.NET MAUI Blazor、またはその他の Blazor バインディング、いずれの関連記事でも構いません) 2022年: https://qiita.com/advent-calendar/2022/blazor 2021年: https://qiita.com/advent-calendar/2021/blazor 2020年: https://qiita.com/advent-calendar/202
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 のプロジェクトを作る
私の考える初学者がBlazorできるまでの学習方法
Blazor向けにコンポーネント間で状態を共有する状態管理ライブラリを作った
.NET 8 の Blazor で WASM + gRPC のプロジェクトを作る
WPFをベースにしたサイドビュー付きのBlazor Hybridアプリの構築方法
.NET 8 の ASP.NET Core Blazor で二度押しを抑止したい
BlazorでFluxorを使った状態管理 - Qiita
Blazor ServerでPDFをサイレント印刷する方法（無料のWebView2使用） - Qiita
書籍『C#ユーザーのためのWebアプリ開発パターン』の詰まりポイント #１ - Qiita
Blazor でも View Transition したい - Qiita
Blazor WebAssemblyのベンチマークをとってみた - Qiita
ASP.NET Core Blazor 向けに TypeScript で開発する方法
Blazor wasmがiOSで動かない時の解決方法 - Qiita
軽量かつ高機能なHAVIT Blazorを使ったBlazor開発 - Qiita
Blazorのカレンダー | Advent Calendar 2023 - Qiita