Blazorって便利なフレームワークですよね。バックエンドだけじゃなくてフロント側もC#で書けます。私はまだプログラム初心者なので、正直覚えることが多いとしんどい…ってなりがちなんですが、Blazorはその点かなり助かってます。
そんなBlazorにローコード機能を組み込むと、さらに効率的にアプリを作れるようになります。それをかなえられる世界唯一（たぶん）のライブラリ Codeer.LowCode.Balzor をご紹介します。
1. Codeer.LowCode.Balzorとは
Codeer.LowCode.BalzorとはBlazorアプリにローコード機能を埋め込むためのライブラリです。ざっくりいうとこんなことができます。
- WPFのデザイナアプリとBlazorのWebアプリを作成
- デザイナアプリで作ったローコード設定をWebアプリで読み込んで動的に画面/機能を作成
詳しくはこちらをご参照ください。サンプルサイトを見てもらえば、どんな画面が作れるかイメージできると思います。
2. Blazorのコードを組み合わせて書いてみた
Codeer.LowCode.Balzorを使って開発する際は、基本はローコード中心で作れます。その上で、ローコードとフルスクラッチを組み合わせられるのもCodeer.LowCode.Balzorの強みの一つです。ただ、すべてをフルスクラッチで作るのではなくて、使えるところはローコード機能を使うことで実装がだいぶ楽になります。
今回はフルスクラッチで作ったBlazor画面から、ローコード機能を呼び出すサンプルを作ってみます。
今回使うローコード機能
データベースへのアクセス
Blazor単体ではDBから値を取れないので、DapperやEF CoreなどのDBアクセス手段を選んで、SQL/モデル作成、接続設定して、呼び出し用サービス層などを用意して...というように表示するだけでも周辺準備が多くて結構大変ですよね。サーバーサイドの実装も必要です。
Codeer.LowCode.Balzorでは、ローコードで設定したものを活用することで、簡単にデータベースにアクセスできます。
それでは、C#からモジュールを呼び出してデータを取ってくるところをやってみます。
ポイント
1. データとして使いたいモジュールを作成
今回はクエリフィールドを使ったモジュールを作成します。
詳細は省きますが、Codeer.LowCode.Balzorではクエリで書いた内容をローコードのモジュールにマッピングできます。ちなみにクエリの発行はサーバーで実行されます。DBに関する情報はフロントには持ってきていません。
詳しくはこちらをご参照ください
クエリフィールド
クエリフィールドサンプル
2. モジュールからFieldDataクラスを作成
モジュールを右クリックしてCreate FieldData Classを選択します。
C#で使用できるクラスが生成されます。
3. 生成したクラスをC#で呼び出す
-
Client.Sharedに先ほど生成したクラスを追加しますq_売上集計.csusing Codeer.LowCode.Blazor.Repository.Data; namespace LowCodeSamples.Client.Shared.Mapping.Data { public class q_売上集計 { public TextFieldData? 商品コード { get; set; } public TextFieldData? 商品名 { get; set; } public NumberFieldData? 合計金額 { get; set; } public DateFieldData? 期間開始日 { get; set; } public DateFieldData? 期間終了日 { get; set; } } }
2. データを取得
ここがポイントです。先ほどのクエリに条件を設定して一覧を取得します。
using Codeer.LowCode.Blazor.DataIO;
using LowCodeSamples.Client.Shared.Mapping.Data;
namespace LowCodeSamples.Client.Shared.Samples.BubbleList
{
public static class BubbleListLogic
{
public static async Task<List<q_売上集計>> GetSalesSummaryData(
this Codeer.LowCode.Blazor.RequestInterfaces.Services services,
DateOnly start,
DateOnly end)
{
var list = (await services.ModuleDataService.GetListAsync<q_売上集計>
(e => e.期間開始日!.Value == start && e.期間終了日!.Value == end)).ToList();
return list ?? new();
}
}
}
3. コンポーネントの実装
ProCodeModuleBaseを付けるのがポイントです。
@using Codeer.LowCode.Blazor.ProCode;
@using LowCodeSamples.Client.Shared.Mapping.Data
@using Codeer.LowCode.Blazor.RequestInterfaces
@inherits ProCodeModuleBase
@inject Services Services;
@code
{
// 生成したFieldDataクラスを使って、データを受け取るプロパティを用意します
private List<q_売上集計> SalesSummaryData { get; set; } = new();
private DateOnly Start { get; set; } = new DateOnly(2025, 12, 1);
private DateOnly End { get; set; } = new DateOnly(2025, 12, 31);
protected override async Task OnInitializedAsync()
{
// メソッドを呼び出して、データを取得します
SalesSummaryData = await Services.GetSalesSummaryData(Start, End);
StateHasChanged();
}
}
// 取得したデータはライブラリ独自の型で入ってくるので
// UIで扱いやすい形に整えていきます
private sealed record SalesBubble(string Code, string Name, decimal Amount, DateOnly PeriodStart, DateOnly PeriodEnd);
private IEnumerable<SalesBubble> SalesBubbles
=> SalesSummaryData
.Select(r => new SalesBubble(
Code: r.商品コード?.Value ?? string.Empty,
Name: r.商品名?.Value ?? string.Empty,
Amount: r.合計金額?.Value ?? 0,
PeriodStart: Start,
PeriodEnd: End
))
.Where(x => !string.IsNullOrWhiteSpace(x.Name));
あとは見た目や動作をいい感じに整えていきます。
4. ページフレームで作成したコンポーネントを選択
コンポーネントにProCodeModuleBaseを付けたことで、デザイナアプリでモジュールとして設定できるようになります。
5. 完成！
実際に作ってみた画面をサンプルサイトに載せているので、よければ見てみてください。
こちらにコードも公開しています。
3. まとめ
今回やったこと
-
こだわりの画面はフルスクラッチで作成
画面の表現を自分好みに作り込める -
データ取得はローコード側の仕組みで実装
サーバーサイドのコードを書かずに実装可能
今回は一点もののコンポーネントとして作成する方法でしたが、もう少し頑張れば汎用的なFieldにすることもできます。そちらについては、また別記事でまとめようと思います。