あきちゃんの飽き飽き備忘録

ほぼ死んでるブログ

ちょいちょい忘れるシリーズ①

初めまして、アキちゃんです。

備忘録をかねてブログを書くことにしました。

今回はInvokeについて書きます。

それでは早速・・・インボーーーク

Lesson.1 事の発端

C#を書き始めて7年目に突入しそうな僕ですが、いまだにInvokeをラムダで書くときにぱっと出てこない瞬間があります。

検索すればいくらでもでてくるものですが、設計者としてそれってどうなのお・・・って思ったので記事にしようと思います。

あとなんか理由つけて(記事)書かないと最終更新から1年たちそうだし・・・。

Lesson.2 書き方

Invoke(new Action(() =>
{
 label1.Text = "非同期描画:" + (++cnt);
}));

基本の書き方はこうなります。

使い道は、UIスレッドとは違うスレッドからUIをいじるときにだと思います。

(.Net系は基本スレッドセーフであるので相当特殊なことをしない限りは上記以外に使いどころはないと思います。)

Lesson.3 動き

動作が見えないと安心して使えないと思うので以下に一例を示します。

UserControlにして動かしていますが味噌なのは赤字の部分だけなので、使ってるなあ・・・程度の認識で見ていてください

UcInvoke.cs(クリックで展開) UcInvoke.cs(クリックで圧縮)
using System;
using System.Threading;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace DebugApp.Sample
{
 public partial class UcInvoke : UserControl
 {
  public CancellationTokenSource TokenSource { get; private set; }
  public UcInvoke()
  {
   InitializeComponent();
  }
  private async void BtnStart_Click(object sender, EventArgs e)
  {
   BtnStart.Enabled = false;
   try
   {
    TokenSource = new CancellationTokenSource();
    await Task.WhenAll(LoopTask(TokenSource.Token));
   }
   catch (TaskCanceledException ex)
   {
   }
   finally
   {
    label1.Text = "待機中";
    TokenSource = null;
   }
   BtnStart.Enabled = true;
  }

  private Task LoopTask(CancellationToken token)
  {
   return Task.Factory.StartNew(() =>
   {
    var cnt = 0;
    while (true)
    {
     // 今回はデバックのため使うが基本的にTaskをWaitしてはならない
     // (UIスレッドのデッドロックが発生する原因となるため)
     
Task.Delay(100).Wait();
     
// このInvokeのラムダ内でUI描画を行う
     
Invoke(new Action(() =>
     
{
      
label1.Text = "非同期描画:" + (++cnt);
     }));
     if (token.IsCancellationRequested)
     
{
      
break;
     
}
    
}
   
});
  
}
  private void BtnStop_Click(object sender, EventArgs e)
  {
   
if (TokenSource == null)
   {
   
}
   
else
   
{
    
TokenSource.Cancel();
   
}
  
}
 }
}

Lesson.4 まとめ

さぼらないでちゃんと更新するようにしなければ・・・

以上!!

Let's BlazorServer+Radzen ♪ ⑧ (2023/06 時点での最新環境)

初めまして、アキちゃんです。

備忘録をかねてブログを書くことにしました。

今回は2023/06 時点での最新環境で変わったことについて書きます。

それでは早速・・・2023/06 時点での最新環境で変わったこと!

Lesson.1 事の発端

久しぶりに新しい社内Webアプリをリリースしようと思ってRadzenについて調べたらいろいろ進化していました。

その中に過去の記事で行っていた面倒な手間が不要となっていたため、せっかくなんで記事にしようと思います。

Lesson.2 プロジェクト作成~Radzen導入まで

プロジェクト作成~Radzen導入までは、今までと特にかわりませんが、Nugetパッケージから取得するRadzenのバージョンのみ現在の最新(4.13.2)にしておきます。

akr9915.hatenablog.com

基調のデザインについてもいろいろ追加されていました。

無料で使えるものの中で、個人的にhumanisticがおしゃれだったので

"Pages\_Layout.cshtml"の

<link rel="stylesheet" href="_content/Radzen.Blazor/css/material-base.css">

を、

<link rel="stylesheet" href="_content/Radzen.Blazor/css/humanistic-base.css">

に修正します。

Lesson.3 公式デザイン導入の簡略化

僕は過去に以下のような記事を書きましたが、その手間が一切なくなりました。

akr9915.hatenablog.com

新しく追加されたLayoutコンポーネントを使用することで、メイン画面にてハンバーガーメニューをより簡単に実装することができるようになりました。

blazor.radzen.com

Shared/MainLayout.razorを、以下のように書き換えます。

MainLayout.razor(クリックで展開) MainLayout.razor(クリックで圧縮)
@inherits LayoutComponentBase
@using Radzen
@using Radzen.Blazor
@using System.Text.Json
@inject NavigationManager Navigation
<RadzenDialog />
<RadzenNotification />
<RadzenTooltip />
<RadzenContextMenu />

<RadzenLayout Style="grid-template-columns: auto 1fr auto; grid-template-areas: 'rz-header rz-header rz-header' 'rz-sidebar rz-body rz-right-sidebar'">
 <RadzenHeader>
 <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0">
 <RadzenRow class="w-100">
<RadzenColumn Size="6">
<div class="d-flex align-items-center">
<RadzenSidebarToggle Click="@(() => sidebar5Expanded = !sidebar5Expanded)" />
<RadzenLabel Text="Radzen 4.13.2">
</RadzenLabel>
</div>
</RadzenColumn>
<RadzenColumn Size="6">
<div class="rz-text-align-right">
<RadzenSidebarToggle Click="@(() => sidebar6Expanded = !sidebar6Expanded)" />
</div>
</RadzenColumn>
</RadzenRow>
</RadzenStack>
</RadzenHeader>
<RadzenSidebar @bind-Expanded="@sidebar5Expanded">
<RadzenPanelMenu>
<RadzenPanelMenuItem Text="Home" Icon="home" Path="" />
<RadzenPanelMenuItem Text="Counter" Icon="count" Path="counter" />
<RadzenPanelMenuItem Text="Fetch" Icon="fetch" Path="fetchdata" />
</RadzenPanelMenu>
<div class="rz-p-4">
Left Sidebar
</div>
</RadzenSidebar>
<RadzenBody>
<ChildContent>
<RadzenContentContainer Name="main">
@Body
</RadzenContentContainer>
</ChildContent>
</RadzenBody>
<RadzenSidebar @bind-Expanded="@sidebar6Expanded" Style="width: 300px; grid-area: rz-right-sidebar">
<div class="rz-p-4">
Right Sidebar
</div>
</RadzenSidebar>
</RadzenLayout>
@code {
bool sidebar5Expanded = true;
bool sidebar6Expanded = true;
}

この状態で実行すると以下のような画面がでてきます。

Lesson.4 まとめ

以前までの記事のやり方ですると、IDEを一回入れてプロジェクトを作成し、ソースコードを引っ張て来てプロジェクトを作るたびに手を入れてあげなければいけなかったため手間でしたが、コーディングだけで実装できることがわかり、かなり楽になりました。

またコンポーネントについても、特にレイアウトにかかわる部分が追加・更新されていてcssで頑張っていたところも、コンポーネントが勝手に実装してくれるようになっていました。

以上!!

github.com

Http通信のWrapperクラス

初めまして、アキちゃんです。

備忘録をかねてブログを書くことにしました。

今回はIHttpClientFactoryのWrapperクラスついて書きます。

それでは早速・・・IHttpClientFactoryのWrapperクラス!

Lesson.1 事の発端

BlazorでControllerを使用する際に、基本的にはIHttpClientFactoryを使用すると思います。

これを毎回べたに書くと思いのほか記述が多くなるためWrapperクラスを作ろうと思います。

Lesson.2 HttpWrapper

StatusCode等の応答に対する実装は考慮していませんのでそこは別で実装する必要がありますが、値を取得する・設定する等のシンプルな実装は以下となります。

ざっくりこうです。

public class HttpWrapper
{
        IHttpClientFactory ClientFactory;
        public HttpWrapper(IHttpClientFactory clientFactory)
        {
            ClientFactory = clientFactory;
        }
      public async Task<string> AsyncGetString(string uri)
        {
            var request = new HttpRequestMessage(HttpMethod.Get, uri);
            var client = ClientFactory.CreateClient();
            var response = await client.SendAsync(request);
            return await response.Content.ReadAsStringAsync();
        }
      public async Task<byte[]> AsyncGetByteArray(string uri)
        {
            var request = new HttpRequestMessage(HttpMethod.Get, uri);
            var client = ClientFactory.CreateClient();
            var response = await client.SendAsync(request);
            return await response.Content.ReadAsByteArrayAsync();
        }
       
      public async Task AsyncPost(string uri, MultipartFormDataContent content)
        {
            var request = new HttpRequestMessage(HttpMethod.Post, uri);
            var client = ClientFactory.CreateClient();
            {
                request.Content = content;
                await client.SendAsync(request);
            }
        }
}

別段気を付けることはありませんが、String・Binary以外の戻り値を取る際はresponse.Contentの変数を使い分ける必要があります。

またPost通信のContentについては使用する側から用意する実装としています。

Lesson.3 使い方

使い方は、HttpWrapperの変数を宣言しOnInitializedで@injectしたIHttpClientFactoryのインスタンスを引数にnewしてあげます。

@inject IHttpClientFactory ClientFactory
@code {
    HttpWrapper httpWrapper;
   protected override void OnInitialized()
    {
        httpWrapper = new HttpWrapper(ClientFactory);
    }
}

あとは、ControllerのUrlとか送りたいデータをMultipartFormDataContentにして渡してあげれば大丈夫です。

AsyncGetString

var response = await httpWrapper.AsyncGetString($"https://localhost:7272/get");
var getData = JsonSerializer.Deserialize<List<TClass>>(response );

AsyncPost

var content = new MultipartFormDataContent();
content .Add(new StringContent(JsonSerializer.Serialize<List<TClass>>(TClassData.ToList())), "file", "test.json");
await httpWrapper.AsyncPost($"https://localhost:7272/set", content);
content.Dispose();

Lesson.4 あとがき

以上!!

Blazor Serverで簡易ファイル共有(後編:ファイルダウンロード)

初めまして、アキちゃんです。

備忘録をかねてブログを書くことにしました。

今回はBlazor Serverで簡易ファイル共有(後編:ファイルダウンロード)について書きます。

それでは早速・・・Blazor Serverで簡易ファイル共有(後編:ファイルダウンロード)!

Lesson.1 前回まで

前回まででファイルをアップロードするところまで作成しました。

akr9915.hatenablog.com

今回はアップロードしたファイルをダウンロードするところまでしようと思います

Lesson.2 事前準備

Blazorでファイルをダウンロードする方法は少ないですがいくつかあります。

今回はMicrosoftが紹介している以下サイトの方法で行おうと思います。

learn.microsoft.com

Pages/_Layout.cshtmlに、以下の記述を追記します。

_Layout.cshtml(クリックで展開) _Layout.cshtml(クリックで圧縮)
@using Microsoft.AspNetCore.Components.Web
@namespace FileShare.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en">
<script>
    window.downloadFileFromStream = async (fileName, contentStreamReference) => {
        const arrayBuffer = await contentStreamReference.arrayBuffer();
        const blob = new Blob([arrayBuffer]);
        const url = URL.createObjectURL(blob);
        const anchorElement = document.createElement('a');
        anchorElement.href = url;
        anchorElement.download = fileName ?? '';
        anchorElement.click();
        anchorElement.remove();
        URL.revokeObjectURL(url);
    }
</script>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="FileShare.styles.css" rel="stylesheet" />
    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
    @RenderBody()
    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.server.js"></script>
</body>
</html>

Lesson.3 ファイル一覧・ダウンロード

アップロードしたファイル一覧を取得し、任意のファイルをダウンロードするコントローラーを作りたいため、Controllerフォルダに 追加→コントローラー→MVCコントローラー - 空 を選択し、DownloadController.csを作成します。

できたDownloadController.csをざっくり以下のように修正します。

DownloadController.cs(クリックで展開) DownloadController.cs(クリックで圧縮)
using Microsoft.AspNetCore.Mvc;
using System.Text;
using System.Text.Json;
namespace FileShare.Controllers
{
    public class DownloadController : Controller
    {
        private readonly IWebHostEnvironment environment;
        public DownloadController(IWebHostEnvironment environment)
        {
            this.environment = environment;
        }
        [Route("api/getfiles")]
        public IActionResult GetFiles()
        {
            try
            {
                var rslt = new List<string>();
                var files = Directory.GetFiles(Path.Combine(environment.WebRootPath + @"\share"));
                foreach (var i in files)
                {
                    rslt.Add(Path.GetFileName(i));
                }
                return Content(JsonSerializer.Serialize(rslt.ToArray()), "application/json", Encoding.UTF8);
            }
            catch (Exception ex)
            {
                return StatusCode(500, ex.Message);
            }
        }
        [Route("api/download/file")]
        public async Task<IActionResult> DownloadDocument(IFormFile file)
        {
            try
            {
                using (var memoryStream = new MemoryStream())
                {
                    await file.CopyToAsync(memoryStream);
                    byte[] buffer = memoryStream.ToArray();
                    var fileName = JsonSerializer.Deserialize<string>(Encoding.ASCII.GetString(buffer));
                    var filePath = Path.Combine(environment.WebRootPath + @"\share", fileName);
                    return File(System.IO.File.ReadAllBytes(filePath), "application/octet-stream", fileName);
                };
            }
            catch (Exception ex)
            {
                return StatusCode(500, ex.Message);
            }
        }
    }
}

アップロードしたファイル一覧を表示し、任意のファイルをダウンロードする画面を作りたいため、Pagesフォルダに追加→Razorコンポーネントを選択し、Download.razorを作成します。

できたDownload.razorをざっくり以下のように修正します。

Download.razor(クリックで展開) Download.razor(クリックで圧縮)
@page "/download"
@using System.Text.Json
@inject IJSRuntime JSRuntime
@inject IHttpClientFactory ClientFactory
@foreach (var i in files)
{
    <button @onclick="(s => ButtonClick(i))">@i</button>
}
@code {
    List<string> files = new List<string>();
    protected override async Task OnParametersSetAsync()
    {
        var request = new HttpRequestMessage(HttpMethod.Get, "https://localhost:7281" + "/api/getfiles");
        var client = ClientFactory.CreateClient();
        var response = await client.SendAsync(request);
        var getVal = await response.Content.ReadAsStringAsync();
        files.AddRange(JsonSerializer.Deserialize<string[]>(getVal));
    }
    async void ButtonClick(string fileName)
    {
        var content = new MultipartFormDataContent();
        content.Add(new StringContent(JsonSerializer.Serialize<string>(fileName)), "file", "file.json");
        var request = new HttpRequestMessage(HttpMethod.Get, "https://localhost:7281" + "/api/download/file");
        var client = ClientFactory.CreateClient();
        request.Content = content;
        var response = await client.SendAsync(request);
        var getVal = await response.Content.ReadAsStreamAsync();
        using var streamRef = new DotNetStreamReference(getVal);
        await JSRuntime.InvokeVoidAsync("downloadFileFromStream", fileName, streamRef);
    }
}

Download.razorにアクセスできるようにするために、Shared/NavMenu.razorを以下のように修正します。

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="upload">
                <span class="oi oi-data-transfer-upload" aria-hidden="true"></span> Upload
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="download">
                <span class="oi oi-data-transfer-download" aria-hidden="true"></span> Download
            </NavLink>
        </div>
    </nav>
</div>

ここまできたら実行しUploadで任意のファイルをアップロードします。(今回は困った18.pngをアップロード)

ファイルアップロード後、Downloadに遷移するとUploadで選択したファイル名のボタンが存在しています。(困った24.pngは前回記事で上げたものです。)

任意のボタンを押下しダウンロードが完了したらアップロードしたファイルがダウンロードされているはずです。

Lesson.4 あとがき

以上!!

github.com

Blazor Serverで簡易ファイル共有(前編:ファイルアップロード)

初めまして、アキちゃんです。

備忘録をかねてブログを書くことにしました。

今回はBlazor Serverで簡易ファイル共有(前編:ファイルアップロード)について書きます。

それでは早速・・・Blazor Serverで簡易ファイル共有(前編:ファイルアップロード)!

Lesson.1 事の発端

たまにファイルを共有したいことがありますよね、なのでアップロードしたファイルを共有できる簡易ファイル共有アプリを作ろうと思います。

Lesson.2 プロジェクト作成(FileShare)

プロジェクト名はFileShareで、Blazor Server プロジェクト(.Net6)で作成します。

基本デフォルトのまま次へ押しとけば大丈夫ですが一応以下記事にまとめています。

akr9915.hatenablog.com

Lesson.3 事前準備

今回は取り敢えずファイルアップロードを実装しようと思います。

作成したプロジェクトのwwwrootの下にshareフォルダを作成します。

プロジェクト直下にControllersというフォルダを作成します。

ファイルのアップロードとダウンロードはControllerから取得したいのでProgram.csに以下のコードを追加します。

app.UseRouting();
app.UseEndpoints(userEndPpoints =>
{
    userEndPpoints.MapControllers();
});
app.MapBlazorHub();

Controllerを使用するためHttpRequestMessageを使用したいため、Program.csに以下コードを追記します。

builder.Services.AddSingleton<WeatherForecastService>();
builder.Services.AddHttpClient();

var app = builder.Build();

ここまででプロジェクトファイルは以下のようになっていると思います。

Lesson.4 ファイルアップロード 

ファイルをアップロードするコントローラーを作りたいため、Controllerフォルダに 追加→コントローラー→MVCコントローラー - 空 を選択し、UploadController.csを作成します。

できたUploadController.csをざっくり以下のように修正します。

UploadController.cs(クリックで展開) UploadController.cs(クリックで圧縮)
using Microsoft.AspNetCore.Mvc;
namespace FileShare.Controllers
{
    public class UploadController : Controller
    {
        private readonly IWebHostEnvironment environment;
        public UploadController(IWebHostEnvironment environment)
        {
            this.environment = environment;
        }
        [Route("api/upload/file")]
        public async Task<IActionResult> UploadDocument(IFormFile file)
        {
            try
            {
                using (var memoryStream = new MemoryStream())
                {
                    await file.CopyToAsync(memoryStream);
                    var data2 = memoryStream.ToArray();
                    var filePath = Path.Combine(environment.WebRootPath + @"\share", file.FileName);
                    using (var fs = new FileStream(filePath, FileMode.Create, FileAccess.Write))
                    {
                        fs.Write(data2, 0, data2.Length);
                        fs.Close();
                    }
                };
                return StatusCode(200);
            }
            catch (Exception ex)
            {
                return StatusCode(500, ex.Message);
            }
        }
    }
}

ファイルをアップロードする画面を作りたいため、Pagesフォルダに追加→Razorコンポーネントを選択し、Upload.razorを作成します。

できたUpload.razorをざっくり以下のように修正します。

Upload.razor(クリックで展開) Upload.razor(クリックで圧縮)
@page "/upload"
@inject IHttpClientFactory ClientFactory
<label style=" height:30px;line-height:30px;color:black;background-color:greenyellow;  border-radius: 5px; ">
    ファイル選択
    <InputFile style="display:none" OnChange="@(args => FileUpload(args))" />
</label>
@code {
    async Task FileUpload(InputFileChangeEventArgs e)
    {
        foreach (var file in e.GetMultipleFiles())
        {
            var ms = new MemoryStream();
            await file.OpenReadStream(file.Size).CopyToAsync(ms);
            ms.Position = 0;
            var fileContent = new StreamContent(ms);
            using var content = new MultipartFormDataContent();
            content.Add(fileContent, "file", file.Name);
            var request = new HttpRequestMessage(HttpMethod.Post, "https://localhost:7281" + "/api/upload/file");
            var client = ClientFactory.CreateClient();
            {
                request.Content = content;
                await client.SendAsync(request);
            }
        }
    }
}

upload.razorにアクセスできるようにするために、Shared/NavMenu.razorを以下のように修正します。

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="upload">
                <span class="oi oi-data-transfer-upload" aria-hidden="true"></span> Upload
            </NavLink>
        </div>
    </nav>
</div>

ここまできたら実行しUploadを選択後、ファイル選択を押下します。

表示された開く画面から任意のファイルを選択し開くorダブルクリックします。

表示された開く画面が閉じた後、プロジェクトのwwwroot/shareフォルダに選択したファイルがアップロードされているはずです。

Lesson.5 あとがき

年明けましたね!

年末年始忙しすぎて全然記事書けなかった!

ソースコードは後編で公開します。

また、記事では使用しないように実装しましたが

OpenReadStream().ReadAsync(buffer)

を使用するとうまく動作しないみたいです。詳しくは以下記事を確認ください。

github.com

github.com

Blazor ServerでExcelに電子印鑑(後編:Excel画像貼り付け)

初めまして、アキちゃんです。

備忘録をかねてブログを書くことにしました。

今回はBlazor ServerでExcelに電子印鑑(後編:Excel画像貼り付け)について書きます。

それでは早速・・・Blazor ServerでExcelに電子印鑑(後編:Excel画像貼り付け)!

Lesson.1 前回まで

前回までで印鑑っぽい画像のBitmapを返すControllerを作成しました。

*2022/12/26に誤りが確認でき、記事のLesson.4の修正を行いました。

akr9915.hatenablog.com

今回はHttpRequestMessageでBitmapを取得しExcelの任意のセルに張り付けるところまでしようと思います。

Lesson.2 NPOI

C#Excelを操作することのできるライブラリは結構たくさんあります。

画像やグラフの操作に関してはNPOIが一番簡潔だと思うので使わせてもらいましょう。

Nugetパッケージの管理からNPOIをインストールします。

Lesson.3 Excel画像貼り付け

前回までに、Stamp画像のStreamを取得できるControllerを作成しました。

なので今回はStreamを渡してExcelに張り付けるControllerを作ろうと思います。

Controllerフォルダに 追加→コントローラー→MVCコントローラー - 空 を選択し、SealStampController.csを作成します。

できたSealStampController.csをざっくり以下のように修正します。

SealController.cs(クリックで展開) SealController.cs(クリックで圧縮)
using Microsoft.AspNetCore.Mvc;
using NPOI.SS.UserModel;
using NPOI.XSSF.UserModel;
namespace ExcelStamp.Controllers
{
    public class SealStampController : Controller
    {
        private readonly IWebHostEnvironment environment;
        public SealStampController(IWebHostEnvironment environment)
        {
            this.environment = environment;
        }
        [HttpPost]
        [Route("api/sealstamp")]
        public async Task<IActionResult> SealStamp(IFormFile[] file)
        {
            var guid = Guid.NewGuid();
            try
            {
                var orgFileName = Path.Combine(environment.WebRootPath + @"\excel", "test.xlsx");
                var newFileName = Path.Combine(environment.WebRootPath + @"\delete", $"{guid}.xlsx"); ;
                System.IO.File.Copy(orgFileName, newFileName);
                using (var stampMs = new MemoryStream())
                {
                    await file[0].CopyToAsync(stampMs);
                    var stamp = stampMs.ToArray();
                    var anchor = new XSSFClientAnchor()
                    {
                        AnchorType = AnchorType.DontMoveAndResize,
                        Row1 = 0,
                        Row2 = 4,
                        Col1 = 0,
                        Col2 = 2,
                        Dx1 = XSSFShape.EMU_PER_PIXEL * 5,
                        Dx2 = XSSFShape.EMU_PER_PIXEL * -5,
                        Dy1 = XSSFShape.EMU_PER_PIXEL * 5,
                        Dy2 = XSSFShape.EMU_PER_PIXEL * -5,
                    };
                    SealStamp(newFileName, newFileName, "Sheet1", anchor, stamp);
                }
                return StatusCode(200);
            }
            catch (Exception ex)
            {
                return StatusCode(500, ex.Message);
            }
        }
        protected void SealStamp(string inpath, string outpath, string sheetName, XSSFClientAnchor anchor, byte[] data)
        {
            var book = WorkbookFactory.Create(inpath);
          var sheet = book.GetSheet(sheetName);
            var pictureidx = book.AddPicture(data, (PictureType)XSSFWorkbook.PICTURE_TYPE_PNG);
            var patriarch = sheet.CreateDrawingPatriarch();
            patriarch.CreatePicture(anchor, pictureidx);
         
            using (var fs = new FileStream(outpath, FileMode.OpenOrCreate))
            {
                book.Write(fs, true);
            }
          book.Close();
        }
    }
}

動作としてはwwwroot/excel/text.xlsxを発行したGUID.xlsxでwwwroot/delete/{GUID}.xlsxでコピーを取りそのファイルに画像を貼り付けてStatusCode(200)を返しています。

Excelのシートへの画像貼り付けはRow1,Row2,Col1,Col2で位置調整します。

Lesson.4 HttpRequestMessage

あとは、それぞれ作ったControllerを使用するためHttpRequestMessageを使う準備をします。

Program.csに以下コードを追記します。

builder.Services.AddSingleton<WeatherForecastService>();
builder.Services.AddHttpClient();

var app = builder.Build();

社名・日付・名前・権限を入力できるようにIndex.razorを以下のように修正します。

Index.razor(クリックで展開) Index.razpr(クリックで圧縮)
@page "/"
@inject IHttpClientFactory ClientFactory
<PageTitle>Index</PageTitle>
<div class="form-group">
    <label>
        会社名:
        <input @bind="compInput" size="50" />
    </label>
</div>
<div class="form-group">
    <label>
        ユーザー名:
        <input @bind="userInput" size="50" />
    </label>
</div>
<div class="form-group">
    <label>
        日付文字列:
        <input @bind="datestrInput" size="50" />
    </label>
</div>
<div class="form-group">
    <label>
        権限文字列:
        <input @bind="powerInput" size="50" />
    </label>
</div>
<button @onclick="Send">作成</button>
@code {
    private string? compInput;
    private string? userInput;
    private string? datestrInput;
    private string? powerInput;
    private async Task Send()
    {
        byte[] stampBinary;
        {
            var request = new HttpRequestMessage(HttpMethod.Get, "https://localhost:7009" + "/api/stamp/getstamp/" + compInput + "/" + userInput + "/" + powerInput + "/" + datestrInput);
            var client = ClientFactory.CreateClient();
            var response = await client.SendAsync(request);
            stampBinary = await response.Content.ReadAsByteArrayAsync();
        }
        {
            var request = new HttpRequestMessage(HttpMethod.Post, "https://localhost:7009" + "/api/sealstamp");
            var content = new MultipartFormDataContent();
            content.Add(new ByteArrayContent(stampBinary), "file", "stamp.bin");
            var client = ClientFactory.CreateClient();
            {
                request.Content = content;
                await client.SendAsync(request);
            }
        }
    }
}

赤字のポート番号はお手前のプロジェクトに合わせてください。

ここまで来たら実行してみて以下のように入力して作成を押下します。

するとプロジェクトのwwwroot/deleteにExcelファイルができるのでこれをダブルクリックで開きます。

すると黒印鑑でA1~B4のセルに黒い印鑑画像が貼り付けられていたらここまで完了です。

また権限を1にすることで赤い印鑑画像が貼り付けられます。

Lesson.5 あとがき

前回記事ではソースがないのにミスコードを上げてしまい申し訳なかったです。: (_;´꒳`;) :_

以上・・・

github.com

Blazor ServerでExcelに電子印鑑(前編:印鑑画像)

初めまして、アキちゃんです。

備忘録をかねてブログを書くことにしました。

今回はBlazor ServerでExcelに電子印鑑(前編:印鑑画像)について書きます。

それでは早速・・・Blazor ServerでExcelに電子印鑑(前編:印鑑画像)!

Lesson.1 事の発端

世の中ではDXを推進してるなか、僕の会社では印刷したExcelに印鑑押してスキャンしたpdfでドキュメント管理をしています。

すべてを電子化すればよいというわけではないですが、いくらなんでも社内文書くらいは電子化したいので頑張ろうと思います。

Lesson.2 プロジェクト作成(ExcelStamp)

プロジェクト名はExcelStampで、Blazor Server プロジェクト(.Net6)で作成します。

基本デフォルトのまま次へ押しとけば大丈夫ですが一応以下記事にまとめています。

akr9915.hatenablog.com

Lesson.3 事前準備

今回は取り敢えず印鑑の画像を作成し、取得するところまでしようと思います。

作成したプロジェクトのwwwrootの下にexcelフォルダ、stampフォルダ、deleteフォルダを作成します。

stampフォルダの下に、inkan-brack.png・inkan-red.pngの名前で以下の画像を保存します。

 

excelフォルダの下に、test.xlsxの名前でExcelファイルを作ります。

作成した test.xlsx のシート Sheet1 で A1~B4 セルの背景を白く塗りつぶします。

ここまでしたら、wwwrootフォルダは以下のようになっていると思います。

プロジェクト直下にControllersというフォルダを作成します。

例にもよって印鑑の画像とExcelファイルはControllerから取得したいのでProgram.csに以下のコードを追加します。

app.UseRouting();
app.UseEndpoints(userEndPpoints =>
{
    userEndPpoints.MapControllers();
});
app.MapBlazorHub();

Lesson.4 印鑑画像Stream取得

画像をいじるにあたってNugetパッケージの管理より System.Drawing.Common をインストールします。

Controllerフォルダに 追加→コントローラー→MVCコントローラー - 空 を選択し、StampController.csを作成します。

できたStampController.csをざっくり以下のように修正します。

StampController.cs(クリックで展開) StampController.cs(クリックで圧縮)
using Microsoft.AspNetCore.Mvc;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
namespace ExcelStamp.Controllers
{
    public class StampController : Controller
    {
        string pnginkan_red = string.Empty;
        string pnginkan_brack = string.Empty;
        private readonly IWebHostEnvironment environment;
        public StampController(IWebHostEnvironment environment)
        {
            this.environment = environment;
            pnginkan_red = Path.Combine(environment.WebRootPath, "stamp/inkan-red.png");
            pnginkan_brack = Path.Combine(environment.WebRootPath, "stamp/inkan-black.png");
        }
        [Route("api/stamp/getstamp/{compName}/{userName}/{authority}/{date}")]
        public IActionResult GetStamp(string compName, string userName, int authority, string date)
        {
            try
            {
                byte[] img;
                var userColor = authority > 0 ? pnginkan_red : pnginkan_brack;
                var userFontColor = authority > 0 ? Brushes.Red : Brushes.Black;
                using (var userStamp = CreateStamp(userColor, userFontColor, compName, userName, date))
                using (var ms = new MemoryStream())
                {
                    userStamp.Save(ms, ImageFormat.Png);
                    img = ms.GetBuffer();
                }
               return File(img, "image/png", $"{compName}_{userName}_{authority}_{date}.png");
            }
            catch (Exception ex)
            {
                return StatusCode(500, ex.Message);
            }
        }
        Bitmap CreateStamp(string path, Brush fontColor, string compName, string name, string dateTime)
        {
            var rslt = new Bitmap(path);
            using (var g = Graphics.FromImage(rslt))
            using (var stringFormat = new StringFormat(StringFormat.GenericTypographic))
            using (var font = new Font("Arial", 15, FontStyle.Bold))
            {
                g.SmoothingMode = SmoothingMode.AntiAlias;
                g.PixelOffsetMode = PixelOffsetMode.HighQuality;
                var compSize = g.MeasureString(compName, font, 1000, stringFormat);
                var dateSize = g.MeasureString(dateTime, font, 1000, stringFormat);
                var nameSize = g.MeasureString(name, font, 1000, stringFormat);
              g.DrawString(compName, font, fontColor, rslt.Width / 2 - compSize.Width / 2, rslt.Height / 6 * 1 - compSize.Height / 2 - -5, stringFormat);  
              g.DrawString(dateTime, font, fontColor, rslt.Width / 2 - dateSize.Width / 2, rslt.Height / 6 * 3 - dateSize.Height / 2 - -2, stringFormat); ;
              g.DrawString(name, font, fontColor, rslt.Width / 2 - nameSize.Width / 2, rslt.Height / 6 * 5 - nameSize.Height / 2 - 0, stringFormat);  
                rslt.MakeTransparent(Color.White);
            }
            return rslt;
        }
    }
}

api/stamp/getstamp/{compName}/{userName}/{authority}/{date}のパラメータについてですが

compName:会社名

userName:ユーザーの名前

authority:ユーザーの権限(0なら黒印鑑、1以上なら赤印鑑)

date:印鑑の日付

となっています。

日付はフォーマットが色々想定されるためDatetime型ではなくstring形で実装をしております。

ここまできたら実行して、(port番号:7239は、お手前の環境に合わせてください)

https://localhost:7239/api/stamp/getstamp/Aki/aki/0/20221220

とUrlに入力し実行するとAki_aki_0_20221220.pngという名前で以下画像がダウンロードされ

https://localhost:7239/api/stamp/getstamp/Aki/aki/1/20221220

とUrlに入力し実行するとAki_aki_1_20221220.pngという名前で以下画像がダウンロードされると思います。

Lesson.5 あとがき

後半も見て頂ければと思います。

*2022/12/26追記

紹介したソースコードですがLesson.4のStampController.csに間違いがあり以下に修正しました、

pnginkan_red = Path.Combine(environment.WebRootPath, "stamp/inkan-red.png");
pnginkan_brack = Path.Combine(environment.WebRootPath, "stamp/inkan-black.png");

以後無いように気を付けるので引き続き見て頂けたらと思います。: (_;´꒳`;) :_

以上!