はじめに 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
対象読者 C#とWebシステムの基礎的な知識がある方を対象とします。C#の基本文法などの解説は割愛します。 はじめに 前回のつづきで、ASP.NET Coreでホストされたプロジェクトのアプリを作成します。今回は、天気予報が記述されたXMLファイルの処理からとなります。また、Blazorアプリを公開する方法も紹介します。 天気予報の表示 気象庁防災情報XML 天気予報や注意報、警報などの防災情報は、気象庁のサイトで、XMLファイルとして一般に公開されています。 気象庁防災情報XMLフォーマット形式電文の公開（PULL型） このXMLファイルを処理する手順は、大きくわけて次の2つになります。 Atomフィードから気象情報XMLのURLを取得する XMLファイルを処理して表示する なお、気象庁の防災情報XMLの内容については詳細を割愛しますので、興味がある方は、気象庁のサイトを参照してください
はじめに - "C# で SPA を作る Blazor とは?" 「C# で SPA が作れるって、どういうこと?」 「C# で SPA が作れたら何がうれしいの?」 「Blazor って、クライアントサイド版とサーバーサイド版があるって聞いたんだけど」 そんな話題については、下記スライドなどが参考になろうかと思います。 改めて - C# で SPA を作る Blazor の、開発環境の作り方 - CLI 編 Blazor アプリを開発する環境を構築するには、Windows 上で行なう場合は、Visual Studio 2019 をインストールする方法もあります。 ですが今回は、CLI (コマンドラインインターフェース) を使った、OS の違いに左右されない開発環境の構築手順について記していきます。 CLI ベースでの Blazor アプリ開発環境の構築手順は、大きく分けて 3 つです。
Blazor Server でサーバーとの接続障害からの復旧後、「再読込」をユーザに押させることなく自動でページ再読み込みする - Qiita
Blazor Server でサーバーとの接続障害からの復旧後、「再読込」をユーザに押させることなく自動でページ再読み込みするBlazor Blazor Server Web アプリケーションは常時接続が必須・途切れると操作がロックされる Blazor Server で実装された Web アプリケーションは、その実行の仕組み上、ブラウザ - Webサーバ間の常時接続 (大抵の場合は WebSocket による) が必須です。 一時的な回線接続不良などでこの常時接続が途切れると、ブラウザの表示上、白いマスクでページ全体が覆われ、「再接続を試行中...」のプログレス表示がぐるぐる表示されつつ、接続が復旧するまで操作不能にロックされます。 このあと程なくして回線が復旧し再接続できれば、この白いマスク表示は消えて、引き続きこの Blazor Server Web アプリをそのまま使用続行できます。
僕はXamarinアプリだ。 僕の機能は5W1Hで予言をすること。 予言って言えば聞こえは良いんだけど、流行りのAIでもクラウドネイティブとかなんかではなく、ただただノリで作られただけのスタンドアローンなアプリなんだ。いわゆるクソアプリだ。 あ〜あ、今日も利用者が全然いない・・・。 いっその事、生まれ変わりたいよ。 はぁ・・・ ドンっ！ 何だ！何が起きたんだ！ ・・・どうやら僕は急に出てきたトラックに轢かれたみたいだ。 あ〜あ、これは死んだなー。 つまらないアプリ人生だったよ。 ・・・ ・・・ん、まだ生きてる？ いや、何だここは！ ここはWEBだ！ 僕はWEBアプリになったんだ！ しかもなんだか凄い力が・・・これはクラウドだ！ どうやらクラウドというチート能力がついたようだ。 やれやれ、もう楽になれると思ったのに、まだ僕のアプリ人生は続くようだ。 XamarinアプリからBlazorへの移
この記事は以下のツイートから始まる疑問に対する回答みたいな記事です。 満たしたい要件としては、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におけるDIの各Scopeについて、Blazor Server、Blazor WebAssemblyそれぞれの観点で見てみようと思います。 DIとは？ DIとはDependency Injectionの略で、依存性注入と訳されます。クラスを疎結合にし、柔軟なソフトウェア開発を可能にします。 例えば、メール送信のためにサードパーティのライブラリがあるとします。通常、このライブラリを利用する場合は、ライブラリのクラスのインスタンスを作成して利用します。この方法ですと、ライブラリのクラスと使用するクラスが密結合になってしまいます。 DIをすると、インターフェイスを経由してクラスのインスタンスを取得できるため、クラス間を疎結合にできます。 DIの詳細については、ここでは述べませんので、他の記事や書籍等を参照してください。 DIのScopeとは？ DIによってクラスのインス
GitHub - dotnet/MobileBlazorBindings: Experimental Mobile Blazor Bindings - Build native and hybrid mobile apps with Blazor
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
この記事は、.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
Azure Static Web Apps は、GitHub リポジトリからアプリをビルドすることによって、サーバーレス バックエンドによってサポートされる Web サイトを運用環境に発行します。 このチュートリアルでは、サーバーレス API によって返される気象データを表示する C# Blazor WebAssembly アプリをデプロイする方法を示します。 前提条件 GitHub アカウント Azure アカウント。 Azure サブスクリプションを持っていない場合は、無料試用版アカウントを作成できます。 1. リポジトリを作成する この記事では、簡単に作業を開始できるように、GitHub テンプレート リポジトリを使用します。 テンプレートには、Azure Static Web Apps にデプロイできるスターター アプリが含まれます。 GitHub にサインインしていることを確認し
はじめに 複数のファイルを連番で管理するときにはプログラムでソートしやすいようにゼロ埋めしたファイル名を利用していました。Blazor WebAssemblyのアプリで複数のファイルをアップロードして処理した際、ファイル名の順番がWindowsと異なっていると言われて確認したところ、Windowsのエクスプローラーではファイル名の並べ替えが自然順になっていました。 現状の動作の確認 Blazor WebAssemblyのアプリで複数ファイルを指定するとき、以下のようなコードを書いていました。 private void LoadImageFiles(InputFileChangeEventArgs e) { foreach (var file in e.GetMultipleFiles(maxAllowedFiles)) { } } e.GetMultipleFiles()で取得できるファイ
This browser is no longer supported. Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
美しい Web アプリを構築する Blazor .NET と C# の機能を利用して、JavaScript を 1 行も記述せずにフル スタック Web アプリを構築します。
Blazor Server Blazor Server ホスティング モデルを使用すると、コンポーネントは ASP.NET Core アプリ内からサーバー上で実行されます。 UI の更新、イベント処理、JavaScript の呼び出しは、WebSocket プロトコルを使用して SignalR 接続経由で処理されます。 接続されている各クライアントに関連付けられているサーバー上の状態は、"回線" と呼ばれます。 回線は特定のネットワーク接続に関連付けられず、一時的なネットワークの中断や、接続が切断されたときにクライアントがサーバーに再接続しようとすることを許容します。 従来のサーバーでレンダリングされるアプリでは、複数のブラウザー画面 (タブまたは iframes) で同じアプリを開いても、通常、サーバー上で追加のリソースは要求されません。 Blazor Server ホスティング モデル
CSS in Blazor Components
はじめに WPF(Windows Presentation Foundation)をベースにしたBlazor Hybridアプリの構築方法はマイクロソフトの下記のサイトにて紹介されております。しかし、Visual StudioのBlazor Webassemblyで生成されるテンプレートにあるようなサイドビューが付いておりませんので、ここでご紹介いたします。 そもそも、なぜWPFベースで行うのか？ <一言でいえば、外部アプリケーションを制御したいから> Blazor HybridはMAUIをベースにした方法が一般的ですが、外部のアプリケーション（例えば、3D CADソフトなど）の専用APIやSDKを使用した開発を行いたい場合に、WPFやWinFormsでないと対応できない場合が存在します。そのため、Blazorの機能を使用して外部アプリケーションを制御するソフトウェアの開発において、WPF
Tom FitzMacken この記事では、Razor 構文を使用した ASP.NET Web ページを使用したプログラミングの概要について説明します。 ASP.NET は、Web サーバー上で動的 Web ページを実行するための Microsoft のテクノロジです。 この記事では、C# プログラミング言語の使用に焦点を当てています。 学習内容: Razor 構文を使用したプログラミング ASP.NET Web ページの使用を開始するための上位 8 つのプログラミングヒント。 必要な基本的なプログラミングの概念。 サーバー コードと Razor 構文 ASP.NET すべてについて説明します。 ソフトウェア バージョン ASP.NET Web ページ (Razor) 3 このチュートリアルは、ASP.NET Web ページ 2 でも動作します。 プログラミングに関するトップ 8 のヒント
BlazorでSPAするぞ！(5) - レイアウト -正式版対応済 - ryuichi111stdの技術日記
※最終更新日: 2020/5/24 正式リリース版に対応修正しました。 という事で、↓↓↓の続きです。 ryuichi111std.hatenablog.com 今回はレイアウト機能について。 1. レイアウト機能とは これはよくあるやつですね。 ASP.NET Coreでの「_Layout.cshtml」と大体同じことです。 ヘッダやフッター、メニューなど、アプリケーション内の複数のページで共通する画面項目(UI)がある場合に使われます。 すべての画面定義に「ヘッダ、フッター、メニュー」をペタペタとコピペしても画面実装は可能ですが、煩雑ですしメンテナンス性も失われます。 そこで、複数画面で共通して利用するUIを「レイアウト」として定義します。そして、画面毎に異なるコンテンツ部分を個別に実装し、それらを共通レイアウトに差し込む事ができます。 2. 自動生成コードから学ぶ dotnet ne
ボタンの二度押しを禁止したい。 とてもよくある要望だと思います。ということでやっていきましょう。 シンプルなケース 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
inheritance - Your object's family tree - Beehive Management System - 計算機科学のブログ
Head First C#: A Learner’s Guide to Real-World Programming with C# and .NET Core (Andrew Stellman(著)、Jennifer Greene(著)、O’Reilly Media)のChapter 6(inheritance - Your object’s family tree)、p.320(Long Exercise)の解答を求めてみる。 コード Bee.cs using System; namespace BeehiveManagementSystem { public class Bee { public string Job { get; private set; } public virtual float CostPerShift { get; } public Bee(string
Blazor Server アプリは、インターネット上へ公開しての運用のみならず、下記「Blazor serverをラズパイに入れてFAしたい」の記事のように、Blazor Server プログラム (これはつまるところ、コンソールアプリです) をそのまま、内蔵の Kestrel で稼働させる使い方もあります。 さて、一般的な造りの Blazor Server プログラムの場合、"dotnet publish" コマンドなどで発行したプログラムファイルを実行すると、ローカルループバックアドレスの TCP 5000 番および 5001 番 (それぞれ HTTP、HTTPS) で待ち受けするのが既定の動作です。 この既定の動作のままですと、いわゆる "外部" からの HTTP 要求に、この Blazor Server アプリケーションは返答してくれません。 外部からの接続も受け付けるようにする
Blazor 新規プロジェクトの作成（Visual Studio for Mac/ Blazor Server） - rksoftware
一通りのプロジェクト新規作成をためした一連の記事をまとめた記事を書きました。 こちらの記事で一気読みできます。 Blazor 新規プロジェクトの作成（Visual Studio for Mac/ Blazor Server） 最近話題の Blazor ですが、意外とまだ様子見の方も多いのではないでしょうか？ 私もです。 Blazor によるモバイルアプリ開発やデスクトップアプリなどの計画も発表されており、期待はしていますがまだ触れる物は少ないです。 ■ Blazor サーバー サーバーサイドで動く？ Blazor で、今正式に触れる唯一の形式です。 最近 mac の Visual Studio for Mac が Blazor サーバー に対応したので、今回は mac の Visual Studio for Mac でこの形式のプロジェクトを新規作成します。 新しいプロジェクトの作成 プロ
(An English version of this article is also available.) この記事ではBlazorで状態管理（State Management）を行う手法について紹介していきます。 今回使用したのはFluxorという.NET向けのFlux/Redux実装です。 状態管理とは 状態管理、State Managementとは多くのコンポーネントに散らばりがちなアプリケーション内の状態を集約する形でアプリケーションの状態変化（ユーザーの入力等）に柔軟に対応できるようなシステムです。 使用したプロジェクト 今回使用したプロジェクトは拙作の仙狐ビュワーです。完全なソースは公開していませんが、仕組み自体はシンプルなプロジェクトですので、コードサンプルを交え、その実装の仕組みについて紹介していきます。 プロジェクトの内容 仙狐ビュワーは高解像度の画像を公開するための
ASP.NET Core Blazor projects - Visual Studio for Mac Learner's Guide - 計算機科学のブログ
Head First C#: A Learner’s Guide to Real-World Programming with C# and .NET Core (Andrew Stellman(著)、Jennifer Greene(著)、O’Reilly Media)のappendix ⅰ(ASP.NET Core Blazor projects - Visual Studio for Mac Learner’s Guide)、p.699(Exercise)の解答を求めてみる。 BlazorMatchGame コード index.razor @page "/" <style> .container { width:400px; } button { width: 100px; height:100px; font-size:50px; } </style> <div class="co
Blazor WebAssembly アプリの GitHub Pages への発行を、より楽にする - Qiita
Blazor WebAssembly アプリは、GitHub Pages 上にも配置できる Blazor は C# で SPA を実装するフレームワークやランタイムでありますが、とりわけ Blazor の WebAssembly 版は、JavaScript 製の SPA フレームワークと同じくブラウザ上で動作します。 そのため、静的コンテンツを配置・配信可能な Web サーバーであれば何であっても、そのサーバー上に Blazor WebAssembly アプリの発行成果物を配置すれば、それをブラウザで開いて動作させることができます。 実際、Blazor WebAssembly アプリは、GitHub Pages 上に配置することもできます。 自分が GitHub Pages 上に配置・公開している Blazor WebAssembly アプリを以下に2つほど例示しておきます。 Awesom
ASP.NET Core Blazor - Blazor WebAssembly と Blazor Server の違いは？ ５つのポイント - Qiita
ASP.NET Core Blazor についての記事となります。 Blazor は "WebAsssembly" と "Server" いずれかを選択する事になりますが、 それぞれの選択ポイントについて紹介します。 Blazor WebAssembly と Blazor Server それぞれの特徴 出典元: https://docs.microsoft.com/ja-jp/aspnet/core/blazor/hosting-models?view=aspnetcore-3.1 選ぶポイント 1. アクセス高負荷時のスケーラビリティを考慮するか？ Blazor WebAssembly はスケーラビリティの相性が良いです Blazor Server は スケーラビリティの相性が悪いです Blazor WebAssembly は 配布するためのサーバがあれば、運用ができサーバレスアプリとし
内容としては、ここらへんで紹介されているものになります。 Blazor のコンポーネントで URL のクエリ パラメーターを使うのが凄く簡単になりました。今までは自分でクエリパラメーターを取得するような処理を書かないといけなかったのですが、.NET 6 では基本的にこの機能で賄えるようになると思います。 因みに今までクエリパラメーター使おうと思うと大体以下のような感時にする必要がありました。クエリパラメーターをパースしてくれるライブラリを参照に追加（例えば Microsoft.AspNetCore.WebUtilities) して、コンポーネントの OnInitialized メソッドでパラメーターを解析して頑張る！ ちょっとやってみましょう。Blazor WebAssembly のプロジェクトを新規作成して Index.razor に実装していきます。 @page "/" @using
こんにちは！ ねこじょーかーです。 みなさんは「Blazor」を知っていますか？ Blazor は、C# と .NET Core を用いて Web アプリケーションの開発ができるようになるフレームワークのことです。 ASP.NET Core Blazor とも呼ばれます。 フロントエンドに HTML と CSS を使用するのは変わりませんが、バックエンドのロジック部分を C# で書くことができます。 この記事は、Blazor をゼロから学習して、簡易的な EC サイトが作れるように解説した本を執筆した話をします。 執筆したお知らせツイートと EC サイトの完成イメージはこちら↓ 執筆した話の 5W や EC サイトに実装されている機能を紹介していきたいと思います。 執筆した話の5W 執筆者は誰？ 普段は「ねこじょーかー」という名前で発信しています。 C# と執筆が好きで、書籍は 11 冊を
Web.configで文字列をHTTPヘッダーに追加したのにデバッグ実行してもヘッダーが反映されない 【▲→川俣晶の縁側→ソフトウェア→技術雑記】
問題 § Visual Studioで作成したBlazor WebAssemlyのプロジェクトのルートにweb.configを追加し、ヘッダーに文字列を追加するコードを追加した。 このあとデバッグ実行しても追加したヘッダーが付いていない。
ASP.NET Web Forms フレームワークは、2002 年に .NET Framework が最初に出荷されて以降、.NET Web 開発の中心となってきました。 Web の大部分が未成熟であった頃、ASP.NET Web Forms では、デスクトップ開発に使用されていたパターンの多くを採用することで、簡単で生産性の高い Web アプリ作成を実現しました。 ASP.NET Web Forms では、再利用可能な UI コントロールから Web ページをすばやく組み立てることができます。 ユーザーによる操作は、イベントとして自然に処理されます。 Web Forms UI コントロールの豊富なエコシステムが Microsoft およびコントロール ベンダーによって提供されています。 これらのコントロールにより、データ ソースに接続し、高度なデータ視覚化を表示する作業が容易になります。
encapsulation - Keep your privates… private - fields, properties, getter, setter - 計算機科学のブログ
Head First C#: A Learner’s Guide to Real-World Programming with C# and .NET Core (Andrew Stellman(著)、Jennifer Greene(著)、O’Reilly Media)のChapter 5(encapsulation - Keep your privates… private)、p.267(Exercise)の解答を求めてみる。 コード SwordDamage.cs using System; namespace BlazorSwordDamage { public class SwordDamage { private const int BASE_DAMAGE = 3; private const int FLAME_DAMAGE = 2; private int roll; priv
Created at: 2020-12-25 これは Blazor Advent Calendar 2020 の25日目のエントリーです。 Blazor はお手軽に Single Page Application を作れるのですがコンポーネントのライフサイクル、ステート関連について知らないと若干不思議な仕組みで動いているように見えます。 例えばプロジェクトテンプレートの Counter は @onclick="IncrementCount" でプライベート変数 currentCount をインクリメントするとページのカウントがアップしますが、これは初見ではなかなか不思議な挙動です。Blazor は currentCount の変更をどうやって知ったのか?としばらく不思議に思っていました。そういったこともライフサイクルを知ることで理解できます。 基本的には ASP.NET Core Blaz
Azure上のBlazorアプリを更新してもChrome上のアプリが更新されない 【▲→川俣晶の縁側→ソフトウェア→技術雑記】
問題 § AzureのApp ServiceにBlazorアプリをデプロイしている。 コードを書きかえて再デプロイしてもChrome上のアプリに修正が反映されない。 リロードボタンを押してもキャッシュクリアしてもだめ。
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>
Blazor WebAssembly と Azure Functions を Azure Static Web Apps で公開する - 放浪軍師のアプリ開発局
次の休日まであと50日もあるという現実に打ちひしがれている放浪軍師です。みなさん頑張りましょうね…。さて今回は表題の件をやってみようと思います。 言葉の説明 今までこのブログでは紹介していない言葉が並んでいるので、そこから説明していきたいと思います。 Blazor WebAssembly docs.microsoft.com 前に紹介していますが一応。C# で静的 Web アプリが作れてしまう凄いやつです。フロントエンドだけでなくバックエンドも同時に作れてしまうので、一部のコードを共通化したりできて非常に便利！複数言語なんて覚えてられるか！C# で全部やらせろ！って私みたいなタイプには特にお勧めです。(但しCSSやhtmlやjsの知識はどうしても必要)。尚、Blazor Serverというものもありますが、詳しくはリンク先を読んでください(ぶん投げ)。要は動画をダウンロードして見る(Web
こんにちは、TechFULでアルバイトをしているAtriaです。 現在はTechFULで出題される問題の作成をしています。 さて、みなさんはWebフロントエンド開発を行う際にどのようなフレームワークを利用するでしょうか。 Vue, React, Angular, Django, Ruby on Rails.... 様々なものがありますね。 そんな様々なWebフレームワークがある中で、私が最近特にアツイと思っているものが Blazor になります。 https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor Blazorってなんだ Blazor(読み : ぶれいざー) とは JavaScriptの代わりにC#で記述することができるWeb開発フレームワーク です。ASP.NETの一機能とされています。 C#を利用するため、型に守られながら
.NETの新しいWeb技術であるBlazor、大きくBlazor ServerとBlazor WebAssemblyの2種類の動作形態があることは皆さんご存知（？）ですね。そして.NET 8では、これにさらに様々な新機能も追加されてきています。 今回はこのうちBlazor WebAssemblyの実行パフォーマンスについて検証してみます。 WebAssemblyは速いだろうと思っていたな？ まず最初に、WebAssemblyは下記Wikipediaの解説にもあるとおり、ネイティブ（バイナリ）相当のコードが実行されるため速い！というイメージがありますね。 ネイティブコード相当の高速性・隔離環境でのメモリ安全な実行による安全性・仮想マシンによるハードウェア/プラットフォーム可搬性・ソースプログラミング言語中立性などを特徴とする。 それを期待してベンチマークをとってみたのが、2023年に登壇した
はじめに 選択した画像ファイルをアプリ上で表示する機能をBlazorで実装したいと思い調べていたのですが、少し苦労したことがあったので共有します。 環境 Blazor Server (.NET 6) Microsoft Visual Studio Professional 2022 (64-bit) 17.2.5 実装手順 実装する方法は以下のドキュメントにある通りです。 docs.microsoft.com ここでは主にコードを抜粋します。 まずはPages/_Layout.cshtmlのbodyタグ内に以下を記述します。 <script> window.setImage = async (imageElementId, imageStream) => { const arrayBuffer = await imageStream.arrayBuffer(); const blob =
はじめに 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
MonoGame で制作したゲーム「リトルセイバー」を Web (Blazor + WebGL) で動かしてみた話 | おのでらの創作日記 in ソーサリーフォース
Web で動くゲームを作ってみようと思った話 現在 Steam や DLsite, Microsoft Store, Google Play で配信中のアクションゲーム「リトルセイバー」ですが、動作フレームワークとして「MonoGame」を使用しています。 当ゲームは有料での販売であるため各々で体験版を配布しているのですが、よりお手軽にゲームを体験できるようにするために開発中のデモ版も含めて以前まで Web で公開していました。 その時は「Silverlight + XNA」をフレームワークとして作り公開していましたが、残念ながら 2021 年にサポートが終了し、唯一動く IE もサポートが終了してしまったため、現在 Web で試せる環境はなくなってしまいました。まあ一応「β版開発室」にはずっとページは残っているのですが。 Unity など他のゲーム開発プラットフォームでは WebGL が
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Blazor向けにコンポーネント間で状態を共有する状態管理ライブラリを作った
ASP.NET CoreでホストされたBlazorアプリを公開する
C# で SPA を作る Blazor の、開発環境の作り方 - CLI 編 - Qiita
Xamarinアプリが生まれ変わったらBlazorアプリになっていた件 - Qiita
.NET 8 の Blazor で WASM + API のプロジェクトを作る
BlazorにおけるDIのScopeについて - Qiita
.NET 8 の Blazor で WASM + gRPC のプロジェクトを作る
Azure Static Web Apps に Blazor アプリをデプロイする
Blazor WebAssemblyでファイル名を自然順でソート - Qiita
ASP.NET Core Razor component lifecycle
Blazor | C# を使用したクライアント Web アプリケーションのビルド | .NET
ASP.NET Core Blazor のホスティング モデル
BlazorStyled Documentation Site
WPFをベースにしたサイドビュー付きのBlazor Hybridアプリの構築方法
Razor 構文を使用した ASP.NET Web プログラミングの概要 (C#)
.NET 8 の ASP.NET Core Blazor で二度押しを抑止したい
Blazor Sever のプロセス実行時、待ち受けアドレス/ポートを指定する 4 つの方法 - Qiita
BlazorでFluxorを使った状態管理 - Qiita
.NET 6 の Blazor のコンポーネントでクエリ パラメーターを使うのが簡単になりました
【Blazor】約300ページにわたる技術書をひとりで執筆した話
ASP.NET Web Forms 開発者向け Blazor の概要 - .NET
Blazor のコンポーネントのステートについて - ぷろじぇくと、みすじら。
C#によるSPA開発が可能になるフレームワークBlazorの紹介 - TechFULの中の人
Blazor WebAssemblyのベンチマークをとってみた - Qiita
Blazorで画像を選択して表示する - JBS Tech Blog
ASP.NET Core Blazor 向けに TypeScript で開発する方法