Blazor WASM を github.io で公開する
調べてみると、Blazor WASM を github.io で公開するにはいくつかファイルの作成が必要みたい。 パッケージにこれを自動でやってくれるものがあるようなので、試してみる。
調べてみると、Blazor WASM を github.io で公開するにはいくつかファイルの作成が必要みたい。 パッケージにこれを自動でやってくれるものがあるようなので、試してみる。
いわさです。 WebアプリケーションのクライアントサイドをC#で実装出来る Blazor という技術があります。 弊社でも以前取り扱った記事があります。 実は、Blazorには Blazor Server と Blazor WebAssembly の2種類があります。 上記記事はBlazor Serverに関する記事となりまして、SPAなど検討される場合は Blazor WebAssembly が選択肢となってきます。 本日は Blazor WebAssembly に入門してみました。 ちょっと悩んだのですが WebAssemblyとはなんぞやという座学から入るのはやめて、一旦この記事では、Visual Studio for Mac での実行と、ソリューション構成の解析から入門するというアプローチを取ってみようかなと思います。 Visual Studio for Macでとりあえず実行して
やりたいこと ASP.NET Core で作った Web アプリを PWA 化する Blazor Wasm は使わない 環境 Visual Studio Community 2022 Version 17.11.2 .NET 8(C#12) 使うパッケージ WebEssentials.AspNetCore.PWA JavaScript の実装なしに C# のみで実現できます。設定方法もここに書いてある通りにやればOKです。 やったこと ASP.NET Core MVC アプリの PWA 化 ASP.NET Core MVC アプリケーションの作成 テンプレートプロジェクトを追加します。 実行してみましょう。 NuGet パッケージの追加 NuGet パッケージの管理から WebEssentials.AspNetCore.PWA をインストールします。 アイコンファイルを追加 icon192
Blazor WebAssembly アプリは、シングル ページ アプリケーション (SPA) と同じ方法でセキュリティ保護します。 ユーザーを SPA で認証する方法はいくつかありますが、最も一般的で包括的な方法は、OpenID Connect (OIDC) などの OAuth 2.0 プロトコルに基づく実装を使用することです。 Blazor WebAssembly のセキュリティ ドキュメントでは、主にユーザー認証と承認のタスクを実行する方法に焦点を当てています。 OAuth 2.0/OIDC の一般的な概念の対象範囲については、主要な概要に関する記事の「その他のリソース」セクションのリソースを参照してください。 クライアント側/SPA セキュリティ Blazor WebAssembly アプリの .NET/C# コードベースはクライアントに提供されるので、アプリのコードをユーザーによ
meetup app osaka@6 に登壇します。 meetupapp.connpass.com 推しの技術を発表するという企画。僕の押しの技術はSeleniumとFriendlyなんですが、最近は仕事でBlazorもやってます。でこの三つなんですがじゃあ全部入りでやってみようと作ってみました。コードはここに置いてます。 github.com 使い方 結果から。使い方としてこんな感じでできるようになりました。 [Test] public void Counter() { var driver = new ChromeDriver(); driver!.Url = "https://localhost:7128/counter"; //ロードされるまで待つ while (driver.Title != "Counter") Thread.Sleep(100); //Blazor操作用オブジ
.NET 5におけるBlazor WebAssemblyのマルチスレッド対応状況のまとめ 【▲→川俣晶の縁側→ソフトウェア→技術雑記】
かつて、Blazor WebAssemblyのマルチスレッド対応は.NET 5とされていたが実現されていない現在は.NET 6のロードマップに乗っている(Real multithreading (on supported browsers))async/awaitを利用した擬似マルチタスクは動作するが、UIスレッドの実行権をawaitでシステムに返さないとハングしてしまう問題があるJavaScriptのWorkerの仕組みを利用したマルチスレッドのライブラリとしてTewr/BlazorWorkerがあるが、自分の手元では2.0.0が正常に動いていない (コンパイルエラーになる) 現状の選択肢はおそらく3つ。 .NET 6を待つ (.NET 5を待っても実現されなかった実績があるので、不確定。そもそもWebAssemblyの仕様に含まれないらしい。個別ブラウザのスレッドの実装はある)asyn
こんにちは、kenzauros です。 .NET Core 3.0 の正式リリースに伴い、本記事を書き直しましたので、新記事をお読みください。 [ASP.NET Core] Blazor Server 入門 (セットアップ編) 今回 ASP.NET Core でBlazor を利用してみたくなって調べていたところ、 Preview 9 になっていて、正式リリースまでに大きな仕様変更もないようなので、使ってみることにしました。 概要 まず Blazor とはなんやねんという話ですが、一言で言えば、 Blazor とはフロントエンドもバックエンドも C# で書けちゃうという C#er にとっては夢のような Web アプリフレームワークです。 公式の話は ASP.NET Core での Blazor の概要 | Microsoft Docs でも参照してください。 私の考える主な強みは下記の 3
![[ASP.NET Core] Blazor Preview 9 入門 (セットアップ編)](https://cdn-ak-scissors.b.st-hatena.com/image/square/7613297693178b62b2129e6545a23d7061ab509c/height=288;version=1;width=512/https%3A%2F%2Fmseeeen.msen.jp%2Fwp-content%2Fuploads%2F2019%2F09%2Fscreenshot_20190916_155859.png)
Blazor Advent Calendar の Day 12 に投稿いただいた、@sugimomoto さんの記事「Blazor で API Explorer を作って色々悩んだお話 ＃GyutanKaigi2019」にて、「(Blazor での) 動的な入力フォームの INPUT維持・取得」で困ってるとのこと。 自分、ちょうど今時期、まとまった時間が取りにくく、@sugimomoto さんの公開されているソースコードにも目をとおせていません。 そのため、的ハズレなことを書いているかもしれませんが、せめて何かしら参考になるかも、と思いまして、「Blazor で、行が動的に増減する入力フォームを実装してみる」というテーマで記事投下したいと思います。 作るもの こんなの作ります。 なるべくシンプルにして本質のみを示そうと思いまして、編集結果 (オブジェクトの状態) は、ブラウザの開発者コンソ
ASP.NET Core Blazor（以下Blazor）とは、.NET環境のC#で対話型のWeb UIを構築するためのフレームワークです。Blazorには、サーバーサイドで動作するモデル（Blazor Server）と、クライアントサイドで動作するモデル（Blazor WebAssembly）が含まれますが、本連載では、主に、クライアントサイドのフレームワークであるBlazor WebAssemblyについて解説します。 対象読者 C#とWebシステムの基礎的な知識がある方を対象とします。C#の基本文法などの解説は割愛します。 はじめに 今回は、日記アプリの作成のつづきです。前回までに、カレンダーを表示するコンポーネントができましたので、次に、日記データの保存と、読み込む処理を追加します。 日記アプリ 作成するアプリは次のように、カレンダー表示、テキスト入力、ボタンだけが配置されたページ
ログイン プロセスをカスタマイズする InteractiveRequestOptions の新しいインスタンスで次のメソッドを 1 回以上使用して、ログイン要求への追加パラメーターを管理します。 TryAddAdditionalParameter TryRemoveAdditionalParameter TryGetAdditionalParameter 次の LoginDisplay コンポーネントの例では、ログイン要求にパラメーターが追加されています。 prompt が login に設定されています。ユーザーがその要求に対して資格情報を入力するように強制し、シングル サインオンを否定します。 loginHint が peter@contoso.com に設定されています。ユーザーのサインイン ページのユーザー名/メール アドレス フィールドを peter@contoso.com に事
はじめに Blazor は JavaScriptのかわりにc#を使ってウェブアプリが開発できるフレームワークです。 バックエンドサーバで稼働する「Blazor Server」と、フロントエンドのみで稼働する「Blazor Web Assembly」の2種類があります。 🤔 < Blazor Serverアプリをデプロイするサーバはどのような構成があるの？？ という方を想定し、この記事では「Blazor Server」をデプロイする際、どのような方法・システム構成があるか紹介します。 この記事に書かれていること Blazor Serverをデプロイする環境として、レンタルサーバは使用できません。BaaSまたはVPSになります。 BaaSであれば、Azure App Serviceになります。OSからミドルウェアの部分の構築が不要なので、管理がらくになります。 VPSであれば、Windows
成果物 => blazorserver-devcontainer-playground この記事は? VSCodeの拡張機能「Dev Containers」を用いて、ASP.NET Core BlazorのBlazor Serverテンプレートの開発環境構築したので、それをメモしたものです。 対象読者 ASP.NET Core アプリケーション開発をDev Containersで行いたい人 前提 Docker、Docker Compose、dotnet CLIやC#のビルド周りについての詳しい説明は省略します💦 間違い、改善点があればご指摘いただけると幸いです。 本題 Dev Containersとは？ Dev Containersは、VS Codeの拡張機能の1つであり、Docker環境を利用して開発を行うことができます。 通常のDockerと同様に、ホストのファイルやディレクトリをコ
この記事では、Blazorで簡単なCRUDアプリケーションのサンプルを公開したいと思います。Blazorではスキャフォールディングで簡単にCRUDを作成するような機能がないため、簡単なデータの一覧画面や編集を行う画面のサンプルを作成しました。 実際にアプリケーションを作成していただく際に、少しでも参考になれば幸いです。 汎用的に利用できればと思い、自社（インフラジスティックス・ジャパン）のコンポーネントは使用せず、MudBlazorを利用しております。 MudBlazorとは Blazor用のMaterial DesignなUIコンポーネントライブラリのひとつです。 MudBlazorを含め、その他のコンポーネントについても以下で紹介されておりますので、ご参考ください。 MudBlazorの導入 公式サイトではコマンドで導入して行く手順も掲載されておりますが、テンプレートを導入すれば、Vi
グレープシティ、.NET/Xamarin/Blazor用業務アプリケーション開発UIコンポーネントセット「ComponentOne」の新バージョン2021 v3、2021年12月22日にリリース グレープシティ株式会社は2021年12月22日に、業務アプリケーション開発UIコンポーネントセット「ComponentOne」の新バージョン2021 v3をリリースした。 .NET 6への対応、Windows デスクトップアプリ開発UIフレームワーク「WinUI 3」対応コンポーネントセットを追加 ComponentOneの最新版「2021J v3」 「ComponentOne」は、.NET/Xamarin/Blazorに対応しているWindows用業務アプリケーションをサポートするUIコンポーネントセット。今回のv3では、2021年11月8日（米国時間）に発表されたMicrosoftの開発フレー
2024年7月4日、日本マイクロソフトオフィスにおいて「Blazor＋ローコードで実現する.NET資産のモダナイズ」と題したセミナーが開催された。Webアプリケーション開発フレームワークであるBlazorにローコード機能を組み込む「Codeer.LowCode.Blazor」と、連携するCData Softwareやインフラジスティックスのツールで、どんな開発スタイルが実現できるのか？セミナーをレポートする。 Blazorにローコード開発機能を追加するライブラリ BlazorことASP.NET Core Blazorは、JavaScriptの代わりにC＃を用いて対話型のWebアプリケーションを構築できるフレームワークになる。単一のプログラミングモデルで、サーバー側とのレンダリング、リッチなクライアントとの対話機能を両方サポートするのも特徴だ。 セミナーのテーマである「Codeer.LowC
"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
.NET 7 対応した「Blazor WebAssembly アプリケーションプログラミング自習書」の紹介とその歴史 - Qiita
2023年12月時点で、「Blazor WebAssembly アプリケーションプログラミング自習書」は .NET 8 に対応しています。 参照: 「Blazor WebAssembly アプリケーションプログラミング自習書」が .NET 8 対応しました その前に - そもそも "Blazor" って何? "Blazor" (ブレイザー) とは、JavaScript の代わりに C# でクライアント Web アプリケーションを実装できてしまうフレームワーク、ツール、実行環境です。 サーバー側で動作する "Blazor Server" と、Web ブラウザの WebAssembly 上で動作する "Blazor WebAssembly" という二形態があります。 公式サイトは下記リンク先になります。 JavaScript 以外の言語でクライアント Web アプリケーションを実装する選択肢と
初めに Blazorでリストの削除や追加にアニメーションを付けるには少し工夫する必要があります． Reactの場合も同様ですが，react-transition-groupというライブラリを利用すれば比較的簡単かつ宣言的に実現できます． react-transition-group アニメーションはより良いUI/UXを求めるにはとても重要になってきます． アニメーションのためにコードが長くなったり，ViewとModelの分離ができなくなるのも面倒です． 現状調べた感じreact-transition-groupと同等の機能があるライブラリは存在しませんでした． したがってBlazorでもreact-transition-groupのような機能が欲しいと考えたため自作することにしました． 作ったもの Blazorでリストのアニメーションを実現するライブラリを作成しました． 以下のようなアニメ
![Blazorで簡単にリストの追加/削除アニメーションを実現する [BlazorTransitionGroup]](https://cdn-ak-scissors.b.st-hatena.com/image/square/b76930d7e16c09af2b7c1efbbed693edc3a43e7e/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--aKVHNEp0--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3ABlazor%2525E3%252581%2525A7%2525E7%2525B0%2525A1%2525E5%25258D%252598%2525E3%252581%2525AB%2525E3%252583%2525AA%2525E3%252582%2525B9%2525E3%252583%252588%2525E3%252581%2525AE%2525E8%2525BF%2525BD%2525E5%25258A%2525A0%25252F%2525E5%252589%25258A%2525E9%252599%2525A4%2525E3%252582%2525A2%2525E3%252583%25258B%2525E3%252583%2525A1%2525E3%252583%2525BC%2525E3%252582%2525B7%2525E3%252583%2525A7%2525E3%252583%2525B3%2525E3%252582%252592%2525E5%2525AE%25259F%2525E7%25258F%2525BE%2525E3%252581%252599%2525E3%252582%25258B%2525E3%252580%252580%25255BBlazorTransitionGroup%25255D%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3ALe-nn%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzVmNTI5MzFkNGMuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
Blazor のコードビハインド、プロパティ・インジェクション、C# の null 許容参照型、を組み合わせたときの警告 CS8618 を黙らせる方法 - Qiita
C# 8.0以降、C# のプログラミングでは「null 許容参照型」という機能が使えるようになりました。 これにより、C# でより堅牢なアプリケーションを構築することができます。 この機能を有効にする方法のひとつとして、C# のプロジェクトファイル（.csproj）に <Nullable>enable</Nullabl> MSBuild プロパティ値を追加する方法があります。
Blazorとは、 Blazor は、.NET を使って対話型のクライアント側 Web UI を構築するためのフレームワークです。 ・JavaScript の代わりに C# を使って、優れた対話型 UI を作成します。 ・.NET で記述された、サーバー側とクライアント側のアプリのロジックを共有します。 ・モバイル ブラウザーを含めた広範なブラウザーのサポートのために、HTML および CSS として UI をレンダリングします。 ・Docker などの最新のホスティング プラットフォームと統合します。 https://docs.microsoft.com/ja-jp/aspnet/core/blazor/?view=aspnetcore-3.1 なるほど、すごいですね。 BlazorをDocker上で動かしてみたのでその手順をまとめたいと思います。 今回はASP.NET Core Bla
.NET 8 で ASP.NET Core Hosted な Blazor WebAssembly プロジェクトを新規作成する - Qiita
.NET 8 で ASP.NET Core Hosted な Blazor WebAssembly プロジェクトを新規作成するBlazor 先に結論 タイトルの件、下記リンク先の手順に従って Blazor Minimum プロジェクトテンプレートをインストールし、「Blazor WebAssembly アプリ (空)」プロジェクトテンプレートから作るといいかもです。 背景 - .NET 8 では Blazor WebAssembly + ASP.NET Core Host の選択肢が削除 先日 2023 年 11 月にリリースされた .NET 8 とその SDK では、Blazor WebAssembly のプロジェクトの新規作成時、対象フレームワークに .NET 8 を選択すると、「ASP.NET Core Hosted」のオプションが選択できません。 下図は Visual Studio
C#だけでJavaScriptを書く! Blazor.DynamicJSを作りました ③DispatchProxy - ささいなことですが。
2023/03/03（今日ですね） にある meetup app osaka@7 で話すやつです。 meetupapp.connpass.com dynamic で JavaScript を書けるのですが、それではインテリセンスも使えないし再利用するためにはラップするなりで型をつけてやった方がいいですね。それで interface を定義して定義するだけで使えるようにしました。内部的には DispatchProxy を使っています。こんな感じで書けます。 <script> class Rectangle { constructor(height, width) { this.height = height; this.width = width; } getArea() { return this.height * this.width; } } function sum(...theAr
ASP.NET Core Blazor 状態管理
サーバー側 Blazor はステートフル アプリ フレームワークです。 アプリでは、ほとんど常に、サーバーとの接続が維持されています。 ユーザーの状態は、"回線" の中のサーバーのメモリに保持されます。 たとえば、回線には次のようなユーザー状態が保持されます。 レンダリングされた UI での、コンポーネント インスタンスの階層と最新のレンダリング出力。 コンポーネント インスタンスに含まれるフィールドとプロパティの値。 回線に範囲が設定されている依存関係の挿入 (DI) サービス インスタンスに保存されているデータ。 ユーザー状態は、JavaScript 相互運用の呼び出しによって設定される、ブラウザーのメモリ内の JavaScript 変数にも存在する場合があります。 ユーザーが一時的にネットワークに接続できなくなった場合は、Blazor により、ユーザーを元の状態で元の回線に再接続する
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Blazor WebAssembly に入門してみた | DevelopersIO
Blazor Wasm でない ASP.NET Core アプリを PWA 化する - Qiita
ASP.NET Core Blazor WebAssembly をセキュリティで保護する
Selenium.Friendly.Blazor - ささいなことですが。
[ASP.NET Core] Blazor Preview 9 入門 (セットアップ編)
Blazor で、行が動的に増減する入力フォームを実装してみる - Qiita
IndexedDBを利用した、Blazorコンポーネントのデータベース処理
ASP.NET Core Blazor WebAssembly のセキュリティに関するその他のシナリオ
c# Blazor Serverアプリのいろいろな公開用サーバ構築方法
Dev Containers でBlazor Server開発環境構築メモ - Qiita
MudBlazorを使ってBlazor ServerのCRUDアプリのサンプルを作ってみた
グレープシティ、.NET/Xamarin/Blazor用業務アプリケーション開発UIコンポーネントセット「ComponentOne」の新バージョン2021 v3、2021年12月22日にリリース | gihyo.jp
Blazorでローコード開発 手軽さもコストも作り込みもあきらめない (1/2)
Blazorのカレンダー | Advent Calendar 2023 - Qiita
Blazorで簡単にリストの追加/削除アニメーションを実現する [BlazorTransitionGroup]
Blazor(C#)をDockerで動かす方法 - Qiita