Codeer.LowCode.Blazorとは

Blazorでローコードアプリのような操作でwebアプリが作れるツールです。

一般的なノーコード・ローコードツールでは不足した機能を補うため別のサービスを利用、連携する事が主流だと思います。
Codeer.LowCode.Blazorは足りない機能をVisualStudioで追加する事ができるため、エンジニアの方であれば開発を行いながら、ローコード開発のスピードも手に入る、というメリットがあります。

対象読者

本記事は、以下のような方を想定しています。

Blazorを使ったことがあり、簡単なコンポーネント開発経験がある方
社内向けツールなど、業務アプリを素早く開発したいエンジニア
ローコード開発に興味があり、.NET系技術でどこまで効率化できるかを知りたい方

ここでは、サンプルプログラムを動作するまでの工程を順を追って解説します。

Codeer.LowCode.Blazorで感じたメリット

Blazorがローコードになる
C#で書ける
データベースにSQL Serverが利用できる（それ以外でも利用可能）
データベースが既にある場合、画面だけをCodeer.LowCode.Blazorに置き換える事ができる
デバッグできる
作ったものがソースになるのでgit等で管理できる

準備

Codeer.LowCode.BlazorはVisual Studioを利用するのでインストールされていない場合は先にインストールする必要があります。

Visual Studio 2022

Codeer.LowCode.Blazor.Templates

marketplaceより、Codeer.LowCode.Blazor.Templatesをダウンロードし、インストールします。

※ 30日間の評価版との事です。

プロジェクトの作成

Visual Studioを起動し「新しいプロジェクトの作成」を選択。

検索画面で「Codeer」と入力し「Codeer.LowCode.Blazor」を選択しプロジェクトを作成します。

ソリューションの確認

作成されたソリューションは大きく分けて「Tools」と「WebApp」の２種類が確認できます。
ToolsとWebAppの２種類をビルドしていきます。

Toolsのビルド

LowCodeApp1.Designerを右クリックし、スタートアッププロジェクトに設定を選択し、その後ビルドを実行します。

ビルドが終了したら、LowCodeApp1.Designerを実行します。

実行すると、画面が起動します。このアプリケーションが画面やデータベースを設定できるローコード開発ツールとなります。

このアプリケーションは後程使うので、タスクバーにピン留めを行い、一度画面を終了します。

次に、webサーバーをビルドします。LowCodeApp1.Serverを選択し、スタートアッププロジェクトに設定を選択し、ビルドを実行します。

ビルドが完了すると実際に動かしてみます。

web画面が起動します。

ローコード開発を体験する

先程、タスクバーにピン留めしたアプリを起動します。

ファイル→新規作成からプロジェクトを作成します。

ダイアログが出るので以下の様に入力します。

Nameは任意のもの
Folderは変更しなくても大丈夫です
TemplateはGettingStartedを選択

初期テンプレートを読み込んだ画面が作成されました。

Codeer.LowCode.Blazorのサンプルプログラムにはsqliteに初期データが格納されています。

この状態で「デプロイ」を実行すると、アプリケーション内での編集を行ったものがwebアプリケーションに更新されます。

モジュールの中にある項目が画面項目となります。

デプロイする

Home画面の文字列を変更してデプロイを実行すると、webアプリケーションに反映されるデモです。

※ gifアニメーションになってます。

画面のレイアウトについて

赤枠部分の高さを調整した場合、ドキュメントアウトラインのRowを選択し、Heightの値を変更します。

終わりに

ドキュメントが少ないと思ったりしましたが、豊富なサンプルが用意されているので、調べればなんとかなりそう。