Blazorで作成したLowCodeライブラリのCodeer.LowCodeとそれを作った時の技術の説明です

1. BlazorでCodeer.LowCode作った話
Blazorで NoCode/LowCode/ProCodeライブラリ作ってみた

2. 石川達也
Codeer代表取締役
→社員募集中
プログラマ(C, C++, C#)
テスト自動化ライブラリ/ツール開発
Microsoft MVP 2014～
趣味はギターとOSSライブラリ作成
Twitter: @StoneGuitar777
自己紹介

3. ギターが趣味です
同じ趣味の人はブリ食べながら語りましょう！

4. Codeer.LowCode
https://codeerwebsite.azurewebsites.net/LowCode
ノー/ローコードとフルスクラッチのいいとこどり！
あなたのWebアプリをノー/ローコードアプリにするためのフレームワークです！
詳細はこちら
(2024年2月末リリース予定)

5. Codeer.LowCode
Blaozrで作ったライブラリです。
VisualStudioでプロジェクトを新規作成することで
Codeer.LowCodeを参照するアプリの
テンプレートで作成されます。
テンプレートコード
Codeer.LowCode.dll
認証機能やDBのコネクションの取得などは
こちらに作成されている
カスタマイズ可能
オリジナルのフィールドも追加可能

6. Codeer.LowCode
デモ

7. Blazorのいいところ
メリットとして C# で書いてると処理を抜き出しやすいので
大部分を一般的なC#のコードで書ける
結局昔から言われているようにホントのViewの部分は薄くつくるのが一番
NumberFieldComponent
NumberField(VM)
ロジックとかはこっちにある
スクリプトでもこちらを操作
Blazorをあまりかかなくてよい！

8. @if (IsViewMode == true) <span … />
else <input …/>
@code {
[Parameter]
public NumberField? Field { get; set; }
protected override void OnParametersSet()
{
base.OnParametersSet();
Field?.SetStateChangedReciver(StateHasChanged);
}
…
}
public virtual async Task SetValue(T? value)
{
if (IsSame(Current.Value, value)) return;
Current.Value = value;
await ExecuteOnDataChanged();
await NotifyDataChanged();
}
public void NotifyStateChanged() => _notfyStateChange();
UI
VM
ViewModel的なクラスを作成
WPFのINotifyPropertyChangedのイメージ

9. DynamicComponent
設定によってコンポーネントを切り替える

10. <DynamicComponent Type="@field.GetPresenterType()"
Parameters="GetPresenterParameters(design)"/>
DynamicComponent
public class DynamicComponent
{
public Type Field? SetStateChangedReciver { get; set; }
public IDictionary<string, object>? Parameters { get; set; }
…
}
Typeはイメージ的には同一の抽象クラスからの派生
パラメータはvirtualなプロパティ
@if (IsViewMode == true) <span … />
else <input …/>
@code {
[Parameter]
public FieldBase? Field { get; set; }
[Parameter]
public FieldDesignBase? Design { get; set; }
protected override void OnParametersSet()
{
base.OnParametersSet();
Field?.SetStateChangedReciver(StateHasChanged);
}
…
}
Dictionary<string, object?> GetPresenterParameters(FieldDesignBase design)
{
var parameters = new Dictionary<string, object?>();
parameters["Design"] = design;
parameters["Field"] = design.CreateField();
return parameters;
}

11. WPF+Blazor
Microsoft.AspNetCore.Components.WebView.Wpf
周りはWPFで
この部分だけBlazor

12. <blazor:BlazorWebView
Focusable ="True"
x:Name="BlazorWebViewElement"
HostPage="wwwroot/index.html"
Services="{StaticResource services}">
<blazor:BlazorWebView.RootComponents>
<blazor:RootComponent ComponentType="{x:Type tabs:FormLayoutDesigner}" Selector="#app" />
</blazor:BlazorWebView.RootComponents>
</blazor:BlazorWebView>
Xaml
var services = new ServiceCollection();
services.AddWpfBlazorWebView();
services.AddSingleton<BlazorComponentManager>();
Resources.Add("services", services.BuildServiceProvider());
@inject BlzorComponentManager BlazorComponentManager
…
protected override async Task OnInitializedAsync() {
await base.OnInitializedAsync();
//逆にBlazorのオブジェクトをWPFからアクセスできるようにしておく
BlazorComponentManager.FormLayoutDesigners[Design?.Name ?? string.Empty] = this;
}
DIでオブジェクトをやり取り
ServiceCollection
BlazorのComponentの型

13. WPF部分とBlazor部分の通信
パラメータでオブジェクトを渡す
public FormLayoutControl()
{
BlazorWebViewElement.RootComponents[0].Parameters = new Dictionary<string, object?>
{
["UpdateValue"] = Guid.NewGuid(),
["DesignAndScript"] = ViewModel.GetForm(name),
["FormDesigns"] = ViewModel.GetForms().Select(e => e.Design).ToArray()
};
}
[Parameter]
public FormDesign[] FormDesigns { get; set; } = Array.Empty<FormDesign>();
[Parameter]
public FormDesignAndScript? DesignAndScript { get; set; }
[Parameter]
public Guid UpdateValue { get; set; }
WPF
Blazor

14. WebViewer 備考
デバッグ楽

15. Publishハマった
かずきさん、
ありがとうございました！
WebViewer 備考
WebViewerってか
.NET系のデスクトップアプリ全般だけど・・・

16. Script
BlazorではRoslynのコード解析はできるけどコード実行はできない
//実行できないよ
var value = await CSharpScript.EvaluateAsync<int>("return 100;");
位置が指定されていないアセンブリのメタデータ参照を作成できません。
とにかく無理らしい

17. Formをクラスみたいにnewしたいとか
Fieldをプロパティ的に扱いたい
というのもあったので
Script
解析はできるので後はそれを見ながら実行（力業）

18. Jsonのポリモフィズム
public abstract class JsonAbstract
{
public string TypeFullName { get; set; } = string.Empty;
protected JsonAbstract(string typeFullName)
=> TypeFullName = typeFullName;
}
public class TextFieldDesign : ValueFieldDesignBase
{
public TextFieldDesign() : base(typeof(TextFieldDesign).FullName!) { }
…
}
TypeFullNameを持っておく
public class FormDesign
{
public List<FieldDesignBase> Fields { get; set; } = new();
}
これをJsonに保存したい

19. public class JsonAbstractClassConverter<T> : JsonConverter<T> where T : JsonAbstract
{
public override T Read(ref Utf8JsonReader reader, Type typeToConvert, JsonSerializerOptions options)
{
using JsonDocument document = JsonDocument.ParseValue(ref reader);
if (!document.RootElement.TryGetProperty("TypeFullName", out JsonElement typeProperty) &&
!document.RootElement.TryGetProperty("typeFullName", out typeProperty))
throw new JsonException("TypeFullName property is missing.");
var typeFullName = typeProperty.GetString() ?? string.Empty;
var type = TypeFinder.GetType(typeFullName);
if (type == null || !typeof(T).IsAssignableFrom(type))
throw new JsonException($"Type {typeFullName} is not a valid {typeof(T)} type.");
var deserializeMethod = typeof(JsonSerializer).
GetMethod("Deserialize", new[] { typeof(JsonElement), typeof(JsonSerializerOptions) })!.MakeGenericMethod(type);
var obj = deserializeMethod.Invoke(null, new object[] { document.RootElement, options });
return (T)obj!;
}
public override void Write(Utf8JsonWriter writer, T value, JsonSerializerOptions options)
=> JsonSerializer.Serialize(writer, (object)value, options);
}
Jsonのポリモフィズム

20. public static void AddJsonConverters(this IList<JsonConverter> Converters)
{
Converters.Add(new JsonAbstractClassConverter<JsonAbstract>());
foreach (var e in GetJsonAbstracts())
{
Converters.Add((JsonConverter)Activator.CreateInstance(typeof(JsonAbstractClassConverter<>).MakeGenericType(e))!);
}
}
static List<Type> GetJsonAbstracts()
{
var assemblies = AppDomain.CurrentDomain.GetAssemblies();
var fieldDesigns = new List<Type>();
foreach (var assembly in assemblies)
{
var types = assembly.GetTypes();
fieldDesigns.AddRange(types.Where(t => t.IsClass && !t.IsGenericType &&
t.IsAbstract && t.IsSubclassOf(typeof(JsonAbstract))));
}
return fieldDesigns;
}
Jsonのポリモフィズム

21. ClosedXmlとPDFSharp
フロントで動く
(System.Drawaing.Commonの依存がなくなってた)
var searchFile = new FormSearcher("TestFiles");
searchFile.AddEquals("Name.Value", "Quotation");
var file = searchFile.Execute()[0];
var excel = file.File.GetExcel();
excel.OverWrite(this);
excel.DownloadPdf();
フロントでスクリプト内で動いている
※でもフォント配布の問題とかあって
サーバーサイド実行に変えるかも