🐥note.

小鳥とMicrosoft <3 なエンジニアの技術Blog📚

Blazor

ElementReferenceと@refを使用しBlazorからJavaScript側へHTML要素の参照を渡す話

BlazorでJavaScriptのライブラリをラップしたい場合なんかに有用なRazorのElementReferenceと@refの小話です。

属性スプラッティングで自作Razor ComponentへHTML属性(id, classなど)を設定する方法

自作Razor ComponentにHTML属性を割り当てたいケースは多々あるかと思います。 例えばid, classなんかはその最たるものではないでしょうか。

Blazor WebAssemblyでgRPC-Webを使用する - Standalone編 -

前回のHosted編はBlazor WebAssemblyとgRPCサーバーが一体となった構成でした。 今回はStandalone編ということで、Blazor WebAssemblyとgRPCサーバーを分けて作ります。 お互いを分離することでBlazor Assemblyは静的なWebサイトとして置いて、gRPCサーバはP…

Blazor WebAssemblyでgRPC-Webを使用する - Hosted編

先月の話ですが、Blazor WebAssemblyからgRPC-Webを使用する実験的サポートの発表がありました。 blog.stevensanderson.com devblogs.microsoft.com 本エントリはBlazor WebAssemblyプロジェクトのREST通信をgRPC-Webに置き換える手順を追ってみたいと思いま…

Blazor WebAssembly Ver3.2.0 Preview1の変更点とPreview2のアイテムについて

先日.NETを使用したgRPC-Webの実験的サポートが発表されたばかりですが、今日はBlazor WebAssembly Ver 3.2.0 Preview1がリリースされたようです。 それに伴いdevblogsが更新されてました。 devblogs.microsoft.com なお、GitHubのRepositoryとBranchはこち…

BlazorでNative Mobileアプリを開発できるMobile Blazor Bindingsを試してみる

現在開催されている.NET Conf: Focus on BlazorのEilon Lipton氏のセッション Mobile Blazor Bindings – Using Blazor to build mobile appsでMobile Blazor Bindindsという名の実験的ライブラリが発表されました。 devblogs的には以下の記事です。 ※実はセ…

Server side BlazorをAzure Web AppsにDeployする

以前Azure Blob Storage上に静的サイトとしてClient side Blazorをデプロイする記事を書きました。 blog.piyosi.com Azure CLIに慣れる目的で、今回はServer side BlazorをAzure上にデプロイしたいと思います。 使うサービスはAzureのWeb Apps, Key Vault, S…

Blazorの未来

本エントリはBlazor Advent Calender 2019の25日目の記事です。 Blazorのことをつい最近知った方々を対象に、「Blazorは今後どのような方向へ進化していくのか」という点を簡単にまとめてみました。 ※12/22(日)の時点でAdvent Calenderの開いてる記事が残り…

Blazorチョット(だけ快適に開発)デキルようになる(かもしれない)小技

本エントリはBlazor Advent Calender 2019の16日目の記事です Blazorの開発を行う上でチョット(だけ快適に開発)デキルようになる(かもしれない)小技を紹介します。

BlazorでPrismのEvent Aggregatorを使用しViewModel間通信を試した備忘録

本エントリはBlazor Advent Calender 2019の15日目の記事です

BlazorのComponent間のデータのやり取りや状態管理ライブラリのメモ

Observer, EventAggregator, Fluxパターンとかそこら辺のメモです。

2019年11月のMicrosoft DocsのUpdateについて

Redditに2019年11月のMicrosoft Docsの更新状況について投稿がありました。 対象期間は2019/11/01 ~ 2019/12/04の間です。 www.reddit.com なお、先月の更新状況は以下の通りです。 blog.piyosi.com 今月のテーマ 今月のテーマとしては以下の点が挙げられる…

ASP.NET Core 3.1の変更点について

ついに.NET Core 3.1 LTSがリリースされましたね! あわせてASP.NET Core 3.1もリリースされました。 devblogs.microsoft.com Microsoft Docsの特設ページはこちらです。 docs.microsoft.com 変更点は以下の通りです。 Here’s what’s new in this release fo…

ASP.NET Core MVCにServer side Blazorのコンポーネントを共存させる話

本エントリはBlazor Advent Calender 2019の4日目の記事です はじめに .NET Core 3.0がリリースされてから3か月近く経過しました。 ※追記(12/04):本日.NET Core 3.1 LTSがリリースされました! 皆さんはお仕事でBlazor書いてますでしょうか?勿論私は書けて…

Client side Blazor on WPF WebViewを実験的に作って挫折した話

WPF(.NET Core)のWebView上に、publishしたClient side Blazorを表示するDesktop Appを実験的に作って挫折したのでその備忘録です。 ※挫折した、という点がポイントです。 Demo 最低限動くところまでは作ったので、その様子だけ載せておきます。 demo きっか…

.NET Core 3.1 Preview3がリリースされました

.NET Core 3.1 Preview 3が公開されました。 devblogs.microsoft.com 記事内で12月上旬に.NET Core 3.1 LTSリリース予定って言ってますね! ※もともとは11月だったのにサラッと伸びてる Visual Studio 16.4 Preview 5およびVisual Studio for Mac 8.4 Previe…

Client side BlazorとAzure Blob Storageで作る簡単PWA

Client side BlazorをPWA対応させてみました。 PWAのServiceWorkerの機能にはHTTPSが必要なので手っ取り早くAzure Blob Storageを使用します。 ちなみに環境は以下の通り .NET Core 3.1 Preview2 Microsoft.AspNetCore.Blazor.Templates 0.7.0 Blazor Templa…

BlazorでChartを描画する

個人アプリで折れ線グラフやドーナッツチャートを描画したくなったので、Blazoriseを使用して描画してみました。 本エントリはその記録です。 Library探しの旅 JavaScriptならいっぱいLibraryがありますが、歴史の短いBlazorではそうはいきません。 いい感じ…

ASP.NET Core Update in .NET Core 3.1 Preview2の新機能について

Microsoft Igniteで盛り上がるIT界の裏では.NET Core 3.1 Preview2がリリースされました。 devblogs.microsoft.com それに合わせてASP.NET CoreとEntityFramework CoreもPreviewが公開されています。 devblogs.microsoft.com 本エントリではASP.NET Coreに追…

自作RazorClassLibraryの静的ファイルのロードができずに困った話

BlazorのComponentを別プロジェクト(RazorClassLibrary)へ切り分けた際、 Blazorから別プロジェクトの静的リソースへアクセスすることが出来ずにハマったので、それの件について記録します。 SolutionとProjectの作成 以下のコマンドでBlazorAppと、Componen…

Azure DevOpsでClient Side BlazorをCI/CDしてみる

こちらの記事の続きです。 blog.piyosi.com 本エントリでは 「GitHubに作ったClient Side BlazorのPrivate Repositoryのmaster branchへのコミットをトリガーにして、Azure DevOpsでBuild, UnitTest, Publishした後、Azure Storageの静的サイトへ自動デプロ…

Client Side BlazorをAzureの静的サイトにデプロイする

Azure StorageにClient Side Blazorをデプロイします。 Client Side Blazorの作成 Blazorのプロジェクトを作成し、Publish(発行)しておきます。 dotnet new blazorwasm -o ClientSideBlazorSample cd ClientSideBlazorSample dotnet publish -c Release -o o…

BlazorでDrag and Dropを実装する

Blazorで簡単なDrag and Dropを実装してみます。 デモ こんな感じです。 デモ コード 作ったコードはこちらにUpしてあります。 github.com

BlazorでFormatting Bindingする

@bindした値を表示する際に format を整えるにはformatパラメータを追加すればよいそうです。 docs.microsoft.com <input @bind="DateRecorded" @bind:format="dd/MM/yyyy" /> @code { private DateTime DateRecorded = DateTime.Now; } Microsoft Docsによると、現在は通貨形式や数値形式など、その他の書式指定式は…

BlazorのDataBindingで発火イベントを変更する

@bindによる双方向 DataBinding は以下の通りです。 <input @bind="CurrentValue" /> @code { private string CurrentValue { get; set; } } Microsoft Docsによると、@bind するタイミング(イベント)は変更できるようです。 docs.microsoft.com @bind 構文を使用して onchange イベントを…

Blazor Event名の一覧

Blazorで使用できるEventを列挙しました。 いずれもon{Event名}で使えるはずです。 Focus events Event 名 Args onfocus FocusEventArgs onblur FocusEventArgs onfocusin FocusEventArgs onfocusout FocusEventArgs Mouse events Event 名 Args onmouseover…

Blazor - TodoAppにValidationとNotifyServiceを追加する

こちらの記事の続きです。 blog.piyosi.com Todoアプリに以下の機能の改造を加えます。 新しいTodoを追加したら画面に通知を表示する(NotifyServiceで別Componentの関数をKick) Todoの内容が空っぽの時は登録できないようValidationを追加する ※子コンポーネ…

Blazor - TodoAppで学ぶComponentへのParameter Binding

BlazorのComponentへのParameter Bindingについて学ぶため簡単なTodoアプリを作りました。 今後暫くはこのアプリに手を加える形でBlazorのお勉強をしたいと思います。 github.com Microsoft Docsで言うとこのあたり docs.microsoft.com Demo こんな感じです…

Blazorの再接続画面をカスタマイズしてかわいい文鳥の画像を表示する

先日こちらの一連のツイートを見かけました。 togetter.com なるほど~ 確かにネコちゃんとか文鳥の画像が表示されたら怒りも収まるに違いない。 というわけでBlazorのリコネクト画面をカスタマイズしてみます。 カスタマイズ結果 こんな感じになりました。 …

ASP.NET CoreまたはBlazorをLocalで起動した時の警告画面を消す方法

ASP.NET CoreやBlazorをローカル環境で動かすと この接続ではプライバシーが保護されません とか このサイトは安全ではありません とか表示されますよね?こんな感じに。 起動時に表示されるアレ 上記ページを表示されないようにする小話です。