🐥note.

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

Blazor

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

BlazorのLifecycleとShouldRenderの挙動について

こちらのサイトによるとBlazorには以下のLifecycleがあるそうです。 OnInitialized OnInitializedAsync OnParametersSet OnParametersSetAsync OnAfterRender OnAfterRenderAsync ShouldRender ShouldRenderは画面更新前に呼ばれ、画面更新するかどうかの判…

.NET Core 3.0のBlazorで作るMarkdown Editor(修正版)

※本エントリは先日投稿したエントリのコードを修正して投稿したものです。 .NET Core 3.0のBlazorコトハジメとしてリアルタイムプレビューに対応したMarkdownエディタを作ってみました。 Blazorのことよく分かってないので雰囲気で作った感が満載です。 デモ…

The Future of Blazor on the Clientの個人的まとめ

.NET Conf 2019が終わり、興奮冷めやらぬ.NETエンジニアの多いことかと思います。 .NET Confで"The Future of Blazor on the Client"というタイトルでBlazorの未来に関する発表がされました。 The Future of Blazor on the Client こちらの発表内容で気にな…

.NET Core 3.0のBlazor + ElectronでGUIアプリ開発

Electron.NETを使って.NET Core 3.0のBlazorをElectron上で動かしてみました

.NET Core CLIのdotnet watchでチョットだけ快適なTDD開発

.NET Core CLIのdotnet watchでチョットだけ快適なTDD開発 `dotnet watch`コマンドを使ってLive Unit TestっぽくTDDする話です。