GrapeCity.devlog

グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の、製品のTIPSや発売などに関する最新情報をお届けします。

GrapeCity

Blazor WebAssemblyアプリをAzure Static Web Appsでホストする

本記事では、Visual Studio 2019を使用して作成したBlazor WebAssemblyアプリケーションを、Azure Static Web Appsへデプロイする方法を紹介します。

Azure Static Web Apps

Azure Static Web Appsは静的コンテンツ(HTML、JavaScript、CSS)で作成したWebアプリケーションをホストするためのクラウドサービスです。GitHubのリポジトリに置いたWebアプリケーションを更新するたびにGitHub Actionsにより自動的にビルドとデプロイが行われます。

Angular、React、Vue.jsといったJavaScriptフレームワークにも対応しており、バックエンドにはAPIとしてAzure Functionsを利用することも可能です。

Blazor WebAssemblyアプリケーション用のチュートリアル

Azure Static Web AppsのドキュメントにはBlazor WebAssemblyアプリケーション用のチュートリアルが用意されています。

こちらの手順を参考にAzure Static Web AppsにBlazor WebAssemblyアプリケーションをデプロイしていきます。

Blazor WebAssemblyアプリケーションの作成

まずはデプロイするアプリケーションを作成します。Visual Studioで「新しいプロジェクトの作成」-「Blazor アプリ」を選択してBlazorWasmApp1プロジェクトを作成します。

Blazor WebAssemblyアプリケーションの作成

[作成]をクリックして「Blazor WebAssembly App」を選択してさらに[作成]をクリックします。

Blazor WebAssemblyアプリケーションの作成

これでBlazor WebAssemblyアプリケーションの準備ができました。

Blazor WebAssemblyアプリケーションの作成

ソース管理(GitHub)への追加

Visual Studioのメニューから「ファイル」-「ソース管理に追加」をクリックします。

ソース管理(GitHub)への追加

[作成とプッシュ]をクリックしてGitリポジトリを作成してGitHubへプッシュします。

ソース管理(GitHub)への追加

作成とプッシュが完了すると、Visual Studioの「チームエクスプローラー」およびGitHubに作成したリポジトリのサイトで確認できます。

ソース管理(GitHub)への追加

ソース管理(GitHub)への追加

Azure Static Web Appsの準備

現時点ではVisual Sutido 2019の拡張機能には、Visual Studio CodeのようなGitHubリポジトリからGitHub Actionsを使用してAzure Static Web Appsへ作成したアプリケーションをデプロイする機能がまだありません。

そこで、AzureポータルかAzure CLIを使用して準備することになります。本記事ではAzureポータルからAzure Static Web Appsを準備していきます。

Azureポータルから「静的 Web アプリ (プレビュー)」を選択して[追加]をクリックします。

Azure Static Web Appsの準備

「リソース グループ」はblazor-wasm-static-app、「名前」はBlazorWasmAzureStaticWebAppを設定します。「地域」はEast Asiaを選択します。

Azure Static Web Appsの準備

続いてGitHubの設定をします。最初にVisual Studioからプッシュしたリポジトリを所有するアカウントを設定し、組織とリポジトリBlazorWasmApp1とブランチmasterを設定します。

Azure Static Web Appsの準備

最後にビルドの設定をします。「ビルドのプリセット」はBlazorを設定し「アプリの場所」はプロジェクトのフォルダBlazorWasmApp1を設定します。「API の場所」と「アプリの成果物の場所」はデフォルトのままにして[確認及び作成]をクリックして進めます。

Azure Static Web Appsの準備

さらに[作成]をクリックします。

Azure Static Web Appsの準備

作成が完了したら[リソースに移動]をクリックします。

Azure Static Web Appsの準備

これでAzure Static Web Appsの準備ができました。

Azure Static Web Appsの準備

確認してみる

以下の通知をクリックしてGitHubのリポジトリにあるGitHub Actionsのステータスを確認します。

GitHub Actions

GitHub Actionsのページで実行状況が確認できます。以下の実行結果をクリックします。

GitHub Actions

ビルドとデプロイの状況を確認できます。

GitHub Actions

Azureポータルで「URL」をクリックするとGitHub Actionsでビルド&デプロイされたアプリケーションが表示されます。

GitHub Actions

GitHub Actions

勿論ですがGitHub ActionsによるCI/CDも行えるので、Visual Sutidoでコンテンツを更新してコミットしGitHubにプッシュすると、自動的にビルドとデプロイが実行されてAzure Statics Web Appsへ反映されます。

GitHub Actions

GitHub Actions

GitHub Actions

「.NET 5」の正式版がついにリリース!新しく追加された機能をまとめて解説

普段のお仕事に役立つ普遍的なプログラミングTIPSや、業界で注目度が高い最新情報をお届けする「編集部ピックアップ」。
今回はついに正式リリースとなった「.NET 5」についてお届けします。


2020年11月10日からマイクロソフト社が開催しているバーチャルイベント「.NET Conf 2020」の初日に、「.NET 5」の正式版のGAが発表されました。

.NET 5注目の新機能

.NET 5では、「.NET Framework」と「.NET Core」が統合され、大きな節目となるリリースとなっています。もちろん新機能も多数追加されておりますので、気になったものをいくつか紹介していきたいと思います。

C# 9.0対応

.NET 5 では、C#の既定のバージョンが 9.0にアップされます。C# 9.0で新たに追加される要素として注目されているのが「Record型」です。

Record型については、「Java 14」でも同様の機能が追加されており、C#にもその後追いのようなかたちで実装されたことになります。

Record型は、クラスと同程度の拡張性に加え、構造体のような比較処理をあわせ持っており、冗長な比較処理を長々と記述する面倒さを排除できます。

単一の実行ファイルの強化

.NET Coreでもサポートされていた単一の実行ファイルの作成機能が強化されました。.NET Coreにおける単一の実行ファイルの作成については、以下の記事でも紹介していましたが、これまでは実行するときにすべてのファイルを一時ディレクトリに展開してから実行する、という動作でした。

この動作が.NET 5.0では改善され、一時ディレクトリに展開することなく直接実行することができるようになりました。

Windows Formsの強化

Windows Formsにも新しいタスクダイアログが追加されるなど、新機能の追加があります。また、メモリ使用量やパフォーマンスも改善が行われているようです。

さらに、.NET 5ではWindows Formsのデザイナでサードパーティのコントロールもサポートされるようになります。弊社にとっても待望の機能強化です!

Windows Formsの新機能

ClickOnceのサポート

.NET Coreではサポートされない、と言われていたClickOnceのサポートも追加されました。.NET 5だけでなく、.NET Coreでも使用可能です。

ClickOnceのサポート追加

VB.NET対応の拡大

.NET 5におけるVBのサポートについては、以前より以下ブログにてアナウンスがされておりました。

今回のリリースでは、Windows FormsやWPFもサポート対象となりました。 VBのプロジェクトテンプレート

ASP.NET Coreの強化

ASP.NET Coreでは、.NET 5のAPIのサポートのほか、パフォーマンスが大幅に向上しており、特にJSONでの処理に関して、スループットやレイテンシーが改善しています。

参考:https://devblogs.microsoft.com/aspnet/announcing-asp-net-core-in-net-5/#performance-improvements

.NET Confのキーノートの中でもBlazor WebAssemblyのパフォーマンス向上に関して紹介がありました。

Blazor WebAssemblyのパフォーマンス向上

また、新しく「dotnet watch」と呼ばれる機能が追加され、開発者がコードが変更されたときにブラウザを自動更新し、変更を即反映して確認ができます。

グレープシティの.NET 5対応コンポーネント

弊社の開発ツールも.NET 5への対応に向け開発を進めておりますが、今回は直近で対応予定のある(または対応済み)2製品についてご紹介します。

DioDocs

ExcelやPDFを作成・編集するAPIライブラリ「DioDocs(ディオドック)」は、.NET Standard 2.0以上に準拠のプラットフォームをサポートします。

今回リリースされた.NET 5もサポート対象となりますので、ぜひフレームワークをアップデートしてお試しいただければと思います。

ComponentOne

.NET開発コンポーネントセット「ComponentOne(コンポーネントワン)」では、2020年末にリリース予定の新バージョン「2020J v3」にて、.NET 5対応のコンポーネントをリリース予定です。

なお、ComponentOneの.NET 5対応のコンポーネントについては、英語版で先行してベータ版を公開しています。

ちょっとわかりにくいのですが、コントロール名の右上に「5」と付いているのが、ベータ版対応しているコントロールです。「2020J v3」ではこれらに加えさらに対応コントロールが増える予定なので、ご期待いただければと思います。

.NET 5対応コンポーネント

DioDocsをBlazor WebAssemblyで使ってみる

DioDocsとBlazorに関する記事としては、「Blazor Server」のリリースに合わせてDioDocsを使用する手順を紹介しました。

2020年5月に「Blazor WebAssembly」がリリースされていますので、今回は「DioDocs(ディオドック)」を利用したExcelファイルとPDFファイルの生成を、このBlazor WebAssemblyアプリケーションで実行する手順を紹介します。

Blazor

ちょっとだけふりかえります。BlazorはC#(.NET Core)とHTMLを使ってWebアプリケーション(シングルページアプリケーション、SPA)を作成できるASP.NET Coreのフレームワークです。

フロントエンド(クライアントサイド)のUIをHTMLとCSSで、実行する処理をJavaScriptではなくC#で作成できます。大きなメリットとしてはバックエンド(サーバーサイド)もフロントエンド(クライアントサイド)もC#で開発ができるということで、ここ最近C#(.NET)開発者には非常に注目されている機能となっています。

Blazor WebAssemblyとBlazor Server

Blazorには2種類の実装方法があり、「Blazor WebAssembly」と「Blazor Server」があります。

Blazor WebAssemblyは「クライアントサイド Blazor」とも呼ばれているモノで、WebAssemblyを利用してブラウザでC#で記載した処理を実行します。

Blazor Serverは「サーバーサイド Blazor」とも呼ばれているモノで、バックエンド(サーバーサイド。ASP.NET Core)でC#で記載した処理を実行します。

アプリケーションで実装する内容

実装する内容は非常にシンプルなモノです。まず、DioDocsを使用してExcelファイルとPDFファイルを作成します。その後、作成したExcelファイルとPDFファイルをAzure Storage EmulatorのBLOBに保存します。BLOBへの保存にはAzure Storage Blobs client library for .NETを使用します。

アプリケーションの作成

作成するにはVisual Studio 2019が必要ですので、事前にインストールしておきます。

Visual Studioを起動して「新しいプロジェクト」-「Blazor アプリ」を選択して「次へ」をクリックします。

アプリケーションの作成

プロジェクト名を「DioDocsBlazorWasmApp1」として「作成」をクリックします。

アプリケーションの作成

「Blazor WebAssembly App」を選択して「作成」をクリックします。

Blazor WebAssembly App

これでBlazor WebAssemblyアプリケーションが作成できました。

NuGetパッケージの追加

NuGet パッケージ マネージャーから以下のパッケージを追加します。

  • GrapeCity.DioDocs.Excel.ja:DioDocs for Excel
  • GrapeCity.DioDocs.Pdf.ja:DioDocs for PDF
  • Azure.Storage.Blobs:Azure Storage Blobs client library for .NET

NuGetパッケージ

BLOB Storageの準備

Visual Studioから「Cloud Explorer」を開いてAzure Storage EmulatorのBLOBにdiodocsという名前のBLOBコンテナーを作成します。こちらにアプリケーションで作成したExcelファイルとPDFファイルを保存します。

Cloud Explorer

appsettings.jsonの準備

プロジェクトにappsettings.jsonを追加します。Blazor WebAssemblyではこのような構成ファイルを追加した場合、デフォルトの状態ですとクライアントサイドにそのままダウンロードできてしまうので内容が丸見えです。

そこで以下のように「ビルドアクション」と「出力ディレクトリにコピー」の設定を変更しておきます。

appsettings.json

Azure Storage Emulatorの接続文字列とDioDocsのライセンスキーを記載します。

{
  "ConnectionStrings": {
    "dev": "Azure Storage Emulatorの接続文字列",
    "product": "本番環境用の接続文字列"
  },
  "LicenseStrings": {
    "DioDocsExcel": "DioDocs for Excelのライセンスキー",
    "DioDocsPdf": "DioDocs for PDFのライセンスキー"
  }
}

Azure Storage Emulatorの接続文字列はVisual Studioの「Cloud Explorer」で参照できます。

Cloud Explorer

オプションを扱うクラスを追加

プロジェクトにDataフォルダを追加して、その配下にSettingAccessor.csを追加します。こちらにLicenseStringsAzStorageStringsを追加します。このクラスはAzure Storage Emulatorの接続文字列とDioDocsのライセンスキーを読み込んで利用するためのクラスです。

public class LicenseStrings
{
    public string DioDocsExcel { get; set; }
    public string DioDocsPdf { get; set; }
}

public class AzStorageStrings
{
    public string Dev { get; set; }
    public string Product { get; set; }
}

Azure BLOB Storageを使うクラスを追加

Dataフォルダ配下にAzStorage.csを追加します。このクラスはUploadExcelAsyncUploadPdfAsyncで、次で作成するDDExcelServiceDDPdfServiceで呼び出され、DioDocsで作成したExcelファイルとPDFファイルをAzure BLOB Storageへ保存(アップロード)します。

public class AzStorage
{
    private readonly string storageConnectionString;

    public AzStorage(string connectionstring)
    {
        storageConnectionString = connectionstring;
    }

    public async void UploadExcelAsync(MemoryStream uploadstream)
    {
        BlobContainerClient container = new BlobContainerClient(storageConnectionString, "diodocs");

        BlobClient blob = container.GetBlobClient("Result.xlsx");

        await blob.UploadAsync(uploadstream);
    }

    public async void UploadPdfAsync(MemoryStream uploadstream)
    {
        BlobContainerClient container = new BlobContainerClient(storageConnectionString, "diodocs");

        BlobClient blob = container.GetBlobClient("Result.pdf");

        await blob.UploadAsync(uploadstream);
    }
}

DioDocsを使うクラスを追加

Dataフォルダ配下にDDExcelService.csDDPdfService.csを追加します。それぞれのクラスでDioDocsを使用してExcelファイルとPDFファイルを作成します。

public class DDExcelService
{
    public void Create(string platformname, string key, string connectionstring)
    {
        // ライセンスキー設定
        //Workbook.SetLicenseKey(key);

        // ワークブックの作成
        Workbook workbook = new Workbook();

        // ワークシートの取得
        IWorksheet worksheet = workbook.Worksheets[0];

        // セル範囲を指定して文字列を設定
        worksheet.Range["B2"].Value = "Hello DioDocs!";
        worksheet.Range["B3"].Value = "from " + platformname;

        // メモリストリームに保存
        MemoryStream ms = new MemoryStream();
        workbook.Save(ms, SaveFileFormat.Xlsx);
        ms.Seek(0, SeekOrigin.Begin);

        // BLOBストレージにアップロード
        AzStorage storage = new AzStorage(connectionstring);
        storage.UploadExcelAsync(ms);
    }
}
public class DDPdfService
{
    public void Create(string platformname, string key, string connectionstring)
    {
        // ライセンスキー設定
        //GcPdfDocument.SetLicenseKey(key);

        // PDFドキュメントを作成します。
        GcPdfDocument doc = new GcPdfDocument();

        // ページを追加し、そのグラフィックスを取得します。
        GcPdfGraphics g = doc.NewPage().Graphics;

        // ページに文字列を描画します。
        g.DrawString("Hello, DioDocs!" + Environment.NewLine + "from " + platformname,
            new TextFormat() { Font = StandardFonts.Helvetica, FontSize = 12 },
            new PointF(72, 72));

        // メモリストリームに保存
        MemoryStream ms = new MemoryStream();
        doc.Save(ms, false);
        ms.Seek(0, SeekOrigin.Begin);

        // BLOBストレージにアップロード
        AzStorage storage = new AzStorage(connectionstring);
        storage.UploadPdfAsync(ms);
    }
}

なお、ライセンスキーを設定する部分だけコメントアウトしていますが、DioDocsはライセンスキーを設定しなくても機能制限がありますが動作を試すことができます。機能制限なしで確認したい場合はトライアル版を利用してライセンスキーを設定してください。

DioDocsを使うページを追加

Pagesフォルダ配下にDioDocs.razorを追加します。このページではボタンクリック時にDioDocsRunを呼び出しています。

DioDocsを使うページを追加

@page "/diodocs"

@using DioDocsBlazorWasmApp1.Data

@inject DDExcelService ddexcelservice
@inject DDPdfService ddpdfservice

@inject LicenseStrings licensestrings
@inject AzStorageStrings azstoragestrings


<h1>DioDocs</h1>

<p>Current platform: @platformname</p>

<button class="btn btn-primary" @onclick="DioDocsRun">Create</button>

<p></p>

<p>Status: @status</p>

@code {
    string platformname = "Blazor Wasm App (Client-Side Blazor)";

    string status = "Ready";

    void DioDocsRun()
    {
        ddexcelservice.Create(platformname, licensestrings.DioDocsExcel, azstoragestrings.Dev);

        ddpdfservice.Create(platformname, licensestrings.DioDocsExcel, azstoragestrings.Dev);

        status = "Finished!";
    }
}

Program.csを更新

ProgramクラスのMainを以下のように更新します。LicenseStringsAzStorageStringsappsettings.jsonで設定したAzure Storage Emulatorの接続文字列とDioDocsのライセンスキーをAddSingletonでインジェクションします。さらにAddSingletonDDExcelServiceDDPdfServiceをインジェクションします。

public class Program
{
    public static async Task Main(string[] args)
    {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        builder.RootComponents.Add<App>("app");

        builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

        var configuration = new ConfigurationBuilder()
                                    .AddJsonStream(Assembly.GetExecutingAssembly().GetManifestResourceStream("DioDocsBlazorWasmApp1.appsettings.json"))
                                    .Build();

        builder.Services.AddSingleton(p => configuration.GetSection("LicenseStrings").Get<LicenseStrings>());
        builder.Services.AddSingleton(p => configuration.GetSection("ConnectionStrings").Get<AzStorageStrings>());

        builder.Services.AddSingleton<DDExcelService>();
        builder.Services.AddSingleton<DDPdfService>();
            
        await builder.Build().RunAsync();
    }
}

NavMenuを更新

NavMenu.razorDioDocs.razorにナビゲーションするための要素を追加します。

<div class="top-row pl-4 navbar navbar-dark">
    <a class="navbar-brand" href="">DioDocsBlazorWasmApp1</a>
    <button class="navbar-toggler" @onclick="ToggleNavMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>

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

@code {
    private bool collapseNavMenu = true;

    private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

確認してみる(エラー)

Visual Studioでデバッグ実行してみます。

デバッグ実行

左側のメニューから「DioDocs」をクリックするとDioDocsページが表示されます。

DioDocsページ

ページにある[Create]ボタンをクリックするとDioDocsでExcelファイルとPDFファイルが作成され、Azure Storage EmulatorのBLOBコンテナdiodocsへ保存されるハズ…がエラーになってしまいます。

DioDocsページ

これはAzure Storage EmulatorのBLOBでCORSの設定がないためです。エラー内容はブラウザの開発者ツールから参照できます。

開発者ツール

Blazor WebAssemblyアプリケーションの情報を予め利用するクラウドサービス側でCORSの設定をしておく必要があります。

Azure Storage EmulatorでCORSの設定をする

設定する情報はプロジェクトのPropertiesフォルダにあるlaunchSettings.jsonに記載されています。

launchSettings.json

アプリケーションをホストする際のURLhttp://localhost:6415https://localhost:44332をAzure Storage Emulatorに設定します。設定は残念ながらVisual SutidoのCloud Explorerでは出来ないので、「Microsoft Azure Storage Explorer」を使用します。

「Blob Container」を右クリックしてメニューから「CORS の設定の構成」をクリックします。

CORSの設定の構成

「追加」をクリックします。

CORSの設定の構成

「許可されたオリジン」にhttp://localhost:6415https://localhost:44332を、「許可されたヘッダー」と「公開ヘッダー」に*を設定します。

CORSの設定の構成

確認してみる(成功)

以上で準備は完了です。先程と同じようにデバッグ実行してDioDocsページで「Create」ボタンをクリックすると、DioDocsでExcelファイルとPDFファイルが作成され、Azure Storage EmulatorのBLOBコンテナdiodocsへ保存されるのが確認できます。

DioDocsページ

出力結果

構成ファイルappsettings.jsonの利用方法に若干の違いはありましたが、Blazor Serverと同じようにBlazor WebAssemblyでもDioDocsを利用することができました。

実際に動作を確認できるサンプルはこちらです。

DioDocsでExcelのワークブックやワークシートをHTMLに出力する

今回は、「DioDocs(ディオドック)」でExcelファイルに含まれるワークブックやワークシートをHTMLファイルに出力する機能を紹介したいと思います。こちらは2020年9月16日(水)にリリースされた「DioDocs V3J SP2」でDioDocs for Excelに追加された機能です。

ExcelファイルをHTML化することで、Adobe Acrobat ReaderのようなPDFビューワーがインストールされていない環境のブラウザやWebアプリケーションでWebページとしてExcelファイルのデータを表示・参照することができます。

この機能を使用してHTMLファイルに出力できる内容は以下の3種類です。

  • ワークブック
  • ワークシート
  • セル範囲

以下のようなワークシートを持つExcelファイルBreakEven.xlsxにこの機能を使用してみます。

Excelファイル(BreakEven.xlsx)

Excelファイル(BreakEven.xlsx)

ワークブックを出力する

まず、Excelファイルを読み込みます。

// 新規ワークブックの作成
var workbook = new Workbook();

// xlsxファイルを開く
workbook.Open("BreakEven.xlsx");

次にHTML形式を指定して保存します。

// ワークブックをHTML形式に保存します
workbook.Save("saveworkbooktohtml.html", SaveFileFormat.Html);

デフォルトではHTMLファイルsaveworkbooktohtml.htmlと画像ファイル(PNG)、CSSファイルを含むフォルダsaveworkbooktohtml_filesが出力されます。

出力結果(ワークブック)

HTMLファイルsaveworkbooktohtml.htmlでは、フッター部分のボタンでワークシートを切り替えることができます。

出力結果(ワークブック)

出力結果(ワークブック)

ワークシートを出力する

まず、Excelファイルを読み込んで、HtmlSaveOptionsを使用して対象のワークシートを設定します。

// 新規ワークブックの作成
var workbook = new Workbook();

// xlsxファイルを開く
workbook.Open("BreakEven.xlsx");

HtmlSaveOptions options = new HtmlSaveOptions();

// 最初のシートを出力
options.ExportSheetName = workbook.Worksheets[0].Name;

次にHTML形式を指定して保存します。

// ワークシートをHTML形式に保存します
workbook.Save("saveworksheettohtml.html", options);

デフォルトではHTMLファイルsaveworksheettohtml.htmlと画像ファイル(PNG)、CSSファイルを含むフォルダsaveworksheettohtml_filesが出力されます。

出力結果(ワークシート)

ワークブックと同じく、HTMLファイルsaveworksheettohtml.htmlもブラウザで表示することができます。

出力結果(ワークシート)

セル範囲を出力する

まず、Excelファイルを読み込んで、HtmlSaveOptionsを使用して対象のワークシートと出力するセル範囲を設定します。

// 新規ワークブックの作成
var workbook = new Workbook();

// xlsxファイルを開く
workbook.Open("BreakEven.xlsx");

HtmlSaveOptions options = new HtmlSaveOptions();

// 最初のシートを出力
options.ExportSheetName = workbook.Worksheets[0].Name;

// 出力する範囲を設定
options.ExportArea = "D2:G23";

次にHTML形式を指定して保存します。

// ワークシートをHTML形式に保存します
workbook.Save("saverangetohtml.html", options);

デフォルトではHTMLファイルsaverangetohtml.htmlと画像ファイル(PNG)、CSSファイルを含むフォルダsaverangetohtml_filesが出力されます。

出力結果(セル範囲)

ワークブックやワークシートと同じく、HTMLファイルsaveworkrangetohtml.htmlもブラウザで表示することができます。

出力結果(セル範囲)

サブフォルダに画像やCSSを出力せずにHTMLに埋め込むには?

以下のようにExportImageAsBase64ExportCssSeparatelyを設定します。

// 新規ワークブックの作成
var workbook = new Workbook();

// xlsxファイルを開く
workbook.Open("BreakEven.xlsx");

HtmlSaveOptions options = new HtmlSaveOptions();

// 最初のシートを出力
options.ExportSheetName = workbook.Worksheets[0].Name;

// base64として画像が出力されるよう設定
options.ExportImageAsBase64 = true;

// html内にcss styleが出力されるよう設定
options.ExportCssSeparately = false;

今回紹介した機能はDioDocsのデモで確認できます。

ワークブックをHtmlに保存

ワークシートをHtmlに保存

範囲をHtmlに保存

単一のHtmlに保存


今月末に開催するオンラインセミナーでは、DioDocsでExcel帳票を作成する機能を紹介する予定です。ぜひお気軽にご参加ください。

DioDocs V3J SP2リリース

DioDocs V3J(ディオドック)の最新サービスパック「Service Pack2」(以下、V3J SP2)を、本日2020年9月16日(水)にリリースしました。

今回のSP2においても製品の不具合修正だけでなく、お客様からいただいたご要望をもとに「DioDocs for Excel」と「DioDocs for PDF」の2つの製品に多くの機能を追加しています。

DioDocs for Excel

  • テンプレート構文の強化
    • テンプレート構文を使用して以下を作成できるようになります。
      • PDFフォーム
      • スパークライン
      • テーブル
    • 固定レイアウト
      明細行などの行数が固定されたレイアウトを維持したままデータを追加できるようになります。
  • HTMLエクスポート
    ワークブック、ワークシート、セルの範囲をHTMLファイルへ出力できるようになります。
  • デジタル署名
    Excelファイルにデジタル署名を追加できるようになります。

DioDocs for PDF

  • フォントのアウトライン
    PDFファイルのフォントをアウトライン化できるようになります。
  • フォームのフラット化
    PDFファイルに含まれるPDFフォームをフラット化できるようになります。
  • フォントの埋め込みオプション
    PDFファイルへのフォントの埋め込みを設定するFontEmbedModeに新しいオプションEmbedSubsetNoFormsが追加されます。

V3J SP2では、この他にも多くの機能強化が行われています。

V3J SP2の新機能の動作については以下のデモで簡単にお試しいただけます。

DioDocsの最新版V3J SP2はNuGetから取得してご利用いただけます。

DioDocsでHTMLをPDFと画像に出力する

今回は、「DioDocs(ディオドック)」でHTMLのコンテンツをPDFや画像に出力する機能を紹介したいと思います。こちらは2019年12月18日(水)にリリースされた「DioDocs V3J」でDioDocs for PDFに追加された機能です。

HTMLを扱うために必要なNuGetパッケージについては製品ヘルプに記載されています。

DioDocs for PDF - HTML の PDF への描画

この機能を使用してPDFと画像に出力できるHTMLコンテンツは以下の3種類です。

  • HTMLドキュメント(HTML文字列)
  • HTMLファイル
  • HTMLページ(Webページ)

1. PDFに出力

(1) HTMLドキュメント(HTML文字列)

シンプルなHTML文字列を描画するにはDrawHtmlを使用します。

var doc = new GcPdfDocument();
var page = doc.NewPage();
var g = page.Graphics;

var html = @"
    <!DOCTYPE html>
    <html>
      <head>
        <style>
            p.round {
              font: 28px Yu Gothic;
              color: Blue;
              padding: 3px 5px 3px 5px;
            }
        </style>
      </head>
      <body>
        <p class='round'>Hello, World!</p>
        <p class='round'>こんにちは、DioDocs(ディオドック)です</p>
      </body>
    </html>";

g.DrawHtml(html, 72, 72, new HtmlToPdfFormat(false), out SizeF size);

doc.Save("HTMLStringToPDF.pdf");

PDFに出力(HTMLドキュメント)

(2) HTMLファイル

HTMLファイルの場合はSystem.IO.File.ReadAllTextで対象のHTMLファイルのHTML文字列を読み取ってDrawHtmlに設定します。

var doc = new GcPdfDocument();
var page = doc.NewPage();
var g = page.Graphics;

g.DrawHtml(File.ReadAllText("ActiveReports.html"),
           72,
           72,
           new HtmlToPdfFormat(false),
           out SizeF size);

doc.Save("ActiveReports.pdf");

PDFに出力(HTMLファイル)

(3) HTMLページ(Webページ)

HTMLページの場合はSysytem.Uriで対象のWebページのURLを指定してGcHtmlRendererに設定します。

var pdffile = @"HTMLPageToPDF.pdf";
var uri = new Uri(@"https://docs.grapecity.com/help/diodocs/pdf/#overview.html");

var gcHtmlRenderer = new GcHtmlRenderer(uri);

gcHtmlRenderer.RenderToPdf(pdffile, new PdfSettings());

PDFに出力(HTMLページ)

2. 画像に出力

(1) HTMLドキュメント(HTML文字列)

シンプルなHTML文字列を描画するにはGcHtmlRendererを使用します。RenderToJpegでJPEGに、RenderToPngでPNGに出力できます。

var doc = new GcPdfDocument();
var page = doc.NewPage();
var g = page.Graphics;

var html = @"
    <!DOCTYPE html>
    <html>
      <head>
        <style>
            p.round {
              font: 28px Yu Gothic;
              color: Blue;
              padding: 3px 5px 3px 5px;
            }
        </style>
      </head>
      <body>
        <p class='round'>Hello, World!</p>
        <p class='round'>こんにちは、DioDocs(ディオドック)です</p>
      </body>
    </html>";

var gcHtmlRenderer = new GcHtmlRenderer(html);
gcHtmlRenderer.RenderToJpeg("HTMLStringToImage.jpeg", new JpegSettings());
gcHtmlRenderer.RenderToPng("HTMLStringToImage.png", new PngSettings());

画像に出力(HTMLドキュメント)

(2) HTMLファイル

HTMLファイルの場合はSystem.IO.File.ReadAllTextで対象のHTMLファイルのHTML文字列を読み取ってGcHtmlRendererに設定します。

var doc = new GcPdfDocument();
var page = doc.NewPage();
var g = page.Graphics;

var gcHtmlRenderer = new GcHtmlRenderer(File.ReadAllText("ActiveReports.html"));

gcHtmlRenderer.RenderToJpeg("HTMLFileToPDF.jpeg", new JpegSettings());
gcHtmlRenderer.RenderToPng("HTMLFileToPDF.png", new PngSettings());

画像に出力(HTMLファイル)

(3) HTMLページ(Webページ)

HTMLページの場合はSysytem.Uriで対象のWebページのURLを指定してGcHtmlRendererに設定します。

var jpegfile = @"HTMLPageToPDF.jpeg";
var pngfile = @"HTMLPageToPDF.png";
var uri = new Uri(@"https://docs.grapecity.com/help/diodocs/pdf/#overview.html");

var gcHtmlRenderer = new GcHtmlRenderer(uri);

gcHtmlRenderer.RenderToJpeg(jpegfile, new JpegSettings());
gcHtmlRenderer.RenderToPng(pngfile, new PngSettings());

画像に出力(HTMLページ)


今回紹介した機能を記載しているデモはこちらです。

今回紹介した機能を記載しているサンプルはこちらです。

GrapeCityJP/DDPdfHtmlDocument(HTMLドキュメント)

GrapeCityJP/DDPdfHtmlFile(HTMLファイル)

GrapeCityJP/DDPdfHtmlWebPage(HTMLページ)

DioDocsは2020年5月20日に最新バージョンの「V3J SP1」をリリースしています。

Blazor WebAssemblyで高機能なデータグリッドコントロールを使用する

.NET 5で対応されないASP.NET Web Formsの移行先としても注目を集める「ASP.NET Core Blazor」ですが、その本命とも言われている「Blazor WebAssembly」が2020年5月に正式リリースされました。

こちらは2020年7月17日まで開催中のオンラインイベント「de:code 2020」にて、マイクロソフト コーポレーションの井上章さんのセッションの中で詳しい解説やデモを見ることができます。

今回の記事では、Blazor WebAssemblyの公式のプロジェクトテンプレートをベースに、Blazor WebAssemblyの基本的な使い方や、標準のテーブルを高機能なデータグリッドに置き換える手順などをご紹介したいと思います。

ASP.NET Core Blazorとは

ASP.NET Core BlazorはC#とHTMLを使ってSPA(Single Page Application)を作成できるASP.NET Coreのフレームワークです。

SPAは従来のサーバーサイドアプリケーションのように、クライアントからのリクエストに応じてサーバー側で都度HTMLを生成するのではなく、非同期通信で差分のデータをJSONなどで受けとり、画面の更新はクライアント側で行う方式です。詳しくは以下の記事もご覧ください。

SPA開発の主流は上記記事で紹介しているようなJavaScriptフレームワークを使用する方法ですが、ASP.NET Core Blazorは、SPA開発において本来はJavaScriptを使って行うような処理をC#で書くことが可能です。

つまり、バックエンド(サーバーサイド)もフロントエンド(クライアントサイド)もC#で開発ができる、というところが大きな特長です。

「Blazor Server」と「Blazor WebAssembly」の2種類のホスティングモデルがあり、前者はアプリケーションの実行自体はサーバー側で行い、UIの更新などはSignalRで通信して実現するのに対して、後者はブラウザのWebAssemblyとしてクライアント側で実行されます。

WebAssemblyとは

WebAssemblyは、Webブラウザ上でバイナリコードを実行する技術で、C、C++、Rustなどのプログラミング言語をコンパイルして実行することもできます。

クライアント側の処理を高速化することが主目的ですが、Blazor WebAssemblyでは、Webブラウザ上で .NETのコードを使用する目的として使われている側面が強いです。

Blazor WebAssemblyアプリケーションを作成する

それではBlazor WebAssemblyアプリケーションを作成してみたいと思います。 事前準備として、Visual Studio 2019 16.6以降と .NET Core SDK 3.1.300以降を開発環境にインストールしておいてください。

Visual Studio 2019を開き、[Blazorアプリ]プロジェクトテンプレートを選択します。

プロジェクトテンプレートの選択

プロジェクト名を入力し進みます。

プロジェクト名の入力

次にホスティングモデルを選択します。今回は[Blazor WebAssembly App]を選択します。

また、右下にオプションとして[ASP.NET Core hosted]と[Progressive Web Application]が選択できます。[ASP.NET Core hosted]は、サーバー側のASP.NET Core Web APIを呼び出すような場合に必要なオプションなので今回は不要です。[Progressive Web Application]は作成したアプリをPWAとしても実行可能にする場合のオプションで、今回はこちらのチェックを入れてプロジェクトを作成します。

ホスティングモデルの選択

プロジェクトが作成されたら早速実行してみます。

サンプルの実行

ページをリロードして、ブラウザの開発者ツールでネットワークのトラフィックを見てみると、Blazor WebAssemblyでは.NETのdllが大量にクライアントにダウンロードされてきているのがわかります。

Blazor Serverの通信状況

Blazor WebAssemblyの通信状況

[Counter]をクリックすると、簡易的なカウンターのアプリケーションが開きます。ボタンをクリックするとカウントがインクリメントしていきます。

カウンターのサンプル

こちらのコード部分はPages/Counter.razorファイルに書かれています。HTMLのタグのほか、@Code{}で囲われた部分にはボタンクリック時の処理がC#で書かれています。

カウンターのコード

開発者ツールでボタンクリック時のネットワークのトラフィックを見てみても、HTTPの通信などは発生しておらず、先ほどのC#のコードがクライアント側で実行されていることがわかります。

カウンタークリック時のトラフィック

また、Visual Studioのデバッグ処理にも対応しています。先ほどのインクリメント処理を行っている部分にブレークポイントを設定し、デバッグ実行を行って、再度ボタンをクリックして見ると、ブレークポイントを設定した箇所で処理がストップし、変数の中身などを確認することが可能です。

Visual Studioでのデバッグ

このように、C#での処理の記述や、Visual Studioでのデバッグなど、ASP.NET Web Formsを使用していた方にとって、これまでと同じようなスタイルでSPA開発ができる、という点がASP.NET Core Blazorの大きな特長になります。

標準のテーブルをデータグリッドに置き換える

[Fetch data]をクリックすると、データの取得と表示を行うサンプルが開きます。このテンプレートのサンプルでは、データ表示に標準のTableを使用しています。

標準のテーブル

このTableでは編集、並べ替え、フィルタリング、グループ化のような機能を使うことはできませんが、「ComponentOne(コンポーネントワン)」が提供するBlazor UIコントロールを使用して、上記のような高度な機能をユーザーに提供することができます。
※ ComponentOneのBlazor UIコントロールは、2020年7月現在、英語版でのみ提供しております。日本語版のライセンスでは使用できませんのでご注意ください。

今回はこちらを使用して、標準のTableを高機能なデータグリッドに置き換えてみたいと思います。

NuGetパッケージのインストール

まずはComponentOneのデータグリッドコントロールである「FlexGrid(フレックスグリッド)」のNuGetパッケージをプロジェクトにインストールします。
プロジェクトを右クリックし、[NuGetパッケージの管理]から[NuGetパッケージマネージャ]を開き、[参照]から「C1.Blazor.Grid」を検索してインストールします。

NuGetパッケージのインストール

FlexGridの設定

次にwwwroot/index.htmlを開き、<head>タグに以下のCSSファイルの参照を追加します。

    <link rel="stylesheet" href="_content/C1.Blazor.Core/styles.css" />  
    <link rel="stylesheet" href="_content/C1.Blazor.Grid/styles.css" />  
    <link rel="stylesheet" href="_content/C1.Blazor.ListView/styles.css" />  
    <link rel="stylesheet" href="_content/C1.Blazor.Input/styles.css" />  
    <link rel="stylesheet" href="_content/C1.Blazor.DataPager/styles.css" />

また、<body>タグには以下のJSファイルの参照を追加します。

    <script src="_content/C1.Blazor.Core/scripts.js"></script>  
    <script src="_content/C1.Blazor.Input/scripts.js"></script>  
    <script src="_content/C1.Blazor.Grid/scripts.js"></script>

Blazorのテンプレートのサンプルでは、FetchData.razorファイル内のWeatherForecastクラスで、wwwroot/sample-data/weather.jsonから取得したデータをTableに表示しています。この仕組みをそのまま流用し、Tableだけをデータグリッドに置き換えます。

FetchData.razorファイルの先頭に以下のコードを追加します。

@using C1.Blazor.Grid

そしてtableタグ部分を以下のようにFlexGridに置き換えます。

・・・
@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <FlexGrid ItemsSource="forecasts" AutoGenerateColumns="false" DefaultColumnWidth="GridLength.Star" ColumnHeaderStyle="@("font-weight:bold")">  
        <FlexGridColumns>  
            <GridColumn Binding="Date" Format="d"/>  
            <GridColumn Binding="TemperatureC" Header="Temp. (C)" />  
            <GridColumn Binding="TemperatureF" Header="Temp. (F)" />  
            <GridColumn Binding="Summary" />  
        </FlexGridColumns>  
    </FlexGrid>
}
・・・

再度実行し、[Fetch data]のメニューを開くと、選択した行の強調表示、入力、ソートなどが可能なデータグリッドが使用できます。

FlexGridで表示

また、以下のようにフィルター用の行を追加することもできます。

    <FlexGrid ItemsSource="forecasts" AutoGenerateColumns="false" DefaultColumnWidth="GridLength.Star" ColumnHeaderStyle="@("font-weight:bold")">
        <FlexGridRows>
            <GridFilterRow Placeholder="Enter Text To Filter" AutoComplete="true" />
        </FlexGridRows>
        <FlexGridColumns>
・・・

実行すると以下のようにフィルターも可能になります。

フィルターの実行

PWA(Progressive Web Apps)で実行

プロジェクト作成時にオプションで指定した通り、Blazor WebAssemblyからPWA(Progressive Web Apps)を作成することも可能です。

アドレスバーの右側にある[+]アイコンをクリックすると、インストールのダイアログが表示されます。

PWAのインストール

[インストール]をクリックすると、このBlazorのアプリケーションがPWAの形式でクライアント環境にインストール、実行されます(Blazorの方のアプリは自動的に閉じられます)。もちろんFlexGridのソートやフィルター機能もそのまま使用可能です。

PWAで実行

コントロールパネルにもインストールしたPWAが表示されます。

インストールされたPWAの確認

日本語版Blazor UIコントロールのリリース予定は?

今回は英語版のComponentOneのBlazor UIコントロールを試してみましたが、日本語版のBlazor UIコントロールは「2020J v3」でのリリースを予定しています。
Blazorへの対応は、すでにユーザー様からもいくつかお問い合わせを頂いておりますが、今しばらくお待ちいただければと思います。

日本語版のComponentOneの詳細はこちらをご覧ください。

GitHub ActionsでWPFアプリをビルドしてみる(前編)

普段のお仕事に役立つ普遍的なプログラミングTIPSや、業界で注目度が高い最新情報をお届けする「編集部ピックアップ」。今回はGitHub Actionsを使ったWPFアプリのビルド方法についてお届けします。


.NET Blogの以下の記事で、GitHub Actionsを使用して.NET Coreデスクトップアプリ(WPFとWindows Forms)をビルドするためのスターターワークフローテンプレートがリリースされたとアナウンスがありました。

早速このテンプレートを試してみたので、ハマったポイントを含め使用する手順を解説したいと思います。

事前準備

いきなりVisual StudioでWPFアプリを作成して、GitHubにプッシュして、GitHub Actionsを設定して~というのはちょっと無謀です。そのままで進めてしまうとエラーでひっかかるポイントがあるので、まずはしっかり準備しましょう。

まずは冒頭に出てきた「スターターワークフローテンプレート」の中身を少し眺めてみます。11~33行目に重要な設定が記載されています。

まず1つ目ですが

# 1. Configure environment variables
# GitHub sets default environment variables for every workflow run. # Replace the variables relative to your project in the "env" section below.

と記載されているので、環境変数を設定するenvセクションを見てみます。

env:
Solution_Name: your-solution-name # Replace with your solution name, i.e. MyWpfApp.sln.
Test_Project_Path: your-test-project-path # Replace with the path to your test project, i.e. MyWpfApp.Tests\MyWpfApp.Tests.csproj.
Wap_Project_Directory: your-wap-project-directory-name # Replace with the Wap project directory relative to the solution, i.e. MyWpfApp.Package.
Wap_Project_Path: your-wap-project-path # Replace with the path to your Wap project, i.e. MyWpf.App.Package\MyWpfApp.Package.wapproj.

変数を見てみると、どうやらWPFアプリのプロジェクト以外にテスト用のプロジェクトとパッケージ作成用のプロジェクトも用意しておく必要があることが分かります。この情報を元に、まずはVisual Studioで「WPF App (.NET Core)」のプロジェクトを作成し、それに「NUnit テスト プロジェクト (.NET Core )」、「Windows アプリケーション パッケージ プロジェクト」を追加しておきます。

次に二つ目です。

# 2. Signing
# Generate a signing certificate in the Windows Application
# Packaging Project or add an existing signing certificate to the project.
# Next, use PowerShell to encode the .pfx file using Base64 encoding
# by running the following Powershell script to generate the output string:
#
# $pfx_cert = Get-Content '.\SigningCertificate.pfx' -Encoding Byte
# [System.Convert]::ToBase64String($pfx_cert) | Out-File 'SigningCertificate_Encoded.txt'

PowerShellを使用してパッケージプロジェクトで作成された証明書(.pfxファイル)をBase64エンコードしてSigningCertificate_Encoded.txtとして出力する必要がありそうです。

パッケージの作成方法は以下の記事を参考にしてください。ここで注意が必要なのはWPFアプリのビルド構成のデフォルトがAny CPUなので、x86x64を追加しておくとエラーにならずに済みます。また、証明書のファイル名はWapProjTemplate1_TemporaryKey.pfxで作成しておきます。この証明書の作成時に必要なパスワードはのちほど使用するので忘れないようにしてください。

さて、本題に戻ります。Visual Studioで[ツール]-[コマンドライン]-[開発者用 PowerShell]をクリックしてPowerShellを起動します。スターターワークフローテンプレートの23、24行目にあるコマンドを参考にPowerShellでコマンドを実行します。

$pfx_cert = Get-Content '.\SigningCertificate.pfx' -Encoding Byte
[System.Convert]::ToBase64String($pfx_cert) | Out-File 'SigningCertificate_Encoded.txt'

.\SigningCertificate.pfxとなっている部分は.\WapProjTemplate1\WapProjTemplate1_TemporaryKey.pfxに変更します。

実行するとSigningCertificate_Encoded.txtが作成されます。

続いて三つ目です。

# Open the output file, SigningCertificate_Encoded.txt, and copy the
# string inside. Then, add the string to the repo as a GitHub secret
# and name it "Base64_Encoded_Pfx."

SigningCertificate_Encoded.txtの中身をコピーしてGitHubのリポジトリのシークレットな環境変数にBase64_Encoded_Pfxとして追加する必要があるようです。

Visual Studioから作成したGitHubのリポジトリで[Setting]タブをクリックしさらに「Secret」を選択します。[New Secret]をクリックして「Name」にBase64_Encoded_Pfx、「Value」にSigningCertificate_Encoded.txtから文字列をコピーします。

[Add secret]をクリックして追加します。

さあ、ようやく最後です。

# Finally, add the signing certificate password to the repo as a secret and name it "Pfx_Key".
# See "Build the Windows Application Packaging project" below to see how the secret is used.

WapProjTemplate1_TemporaryKey.pfxを作成する際に使用したパスワードをGitHubのリポジトリのシークレットな環境変数にPfx_Keyとして追加する必要があるようです。先程と同じように[New Secret]をクリックして「Name」にPfx_Key、「Value」にパスワードを設定し、[Add secret]をクリックして追加します。

これで事前準備は完了です。

GitHub Actionsを設定する

GitHubのリポジトリで[Actions]タブをクリックします。一番上にサジェストされている「.NET Core Desktop」が使用するワークフローテンプレートになります。このテンプレートの[Set up this workflow]をクリックします。

すると「スターターワークフローテンプレート」と同じ内容のファイルdotnet-core-desktop.ymlが作成されるのでこちらを編集します。

envセクション(59~62行目)の各変数は以下のように更新します。

Solution_Name: WpfNetCoreApp1.sln
Test_Project_Path: NUnitTestProject1\NUnitTestProject1.csproj
Wap_Project_Directory: WapProjTemplate1
Wap_Project_Path: WapProjTemplate1\WapProjTemplate1.wapproj

81~82行目の「Execute unit tests」でdotnet testコマンドのパラメータが設定されておらすこのまま実行するとエラーになります。ここではパラメータとして$env:Test_Project_Pathを設定します。

run: dotnet test $env:Test_Project_Path

また、107~108行目の「Remove the pfx」で$env:Signing_Certificateという変数が出てくるのですが、上記のようにそのような変数は設定されておらずこのまま実行するとこの部分でエラーになります。91~95行目の「Decode the pfx」で作成されたファイルGitHubActionsWorkflow.pfxを設定すればよさそうなのでこちらをenvセクションの一番下(63行目)に設定します。

Signing_Certificate: GitHubActionsWorkflow.pfx

これでdotnet-core-desktop.ymlの編集は完了です。[Start commit]をクリックしてさらに[Commit new file]をクリックします。

GitHubレポジトリの[Action]タブをクリックしてワークフローの実行状況を確認します。

実はこの状態で実行した場合でも99~105行目の「Create the app package」でエラーになります。

Ensure that restore has run and that you have included 'netcoreapp3.1' in the TargetFrameworks for your project. You may also need to include 'win-x86' in your project's RuntimeIdentifiers.

WPFアプリのプロジェクトファイルにRuntimeIdentifierswin-x86が設定されていないため発生しているエラーのようです。Visual StudioでWpfNetCoreApp1.csprojに以下を追加して再度GitHubのリポジトリにプッシュします。

<RuntimeIdentifiers>win-x86;win-x64</RuntimeIdentifiers>

GitHub Actionsのワークフローが自動的に実行されます。今度は成功するハズです。

「Artifacts」にあるリンク「MSIX Package」をクリックするとMSIXパッケージがダウンロードできます。

MSIXパッケージからアプリケーションをインストール方法はこちらの記事を参考にしてください。

まとめ

以上がGitHub Actionsを使用したWPFアプリをビルドする手順になります。

グレープシティのWPF製品を利用したWPFアプリをビルドする手順については、現時点でまだ確定したことは言えないのですが、今回の手順にさらに一手間(Self-hosted runnersの設定)を加える必要がありそうなことが分かっています。こちらは調査が完了次第「後編」として後ほど公開したいと思います。


DioDocsでExcelのワークシートやオブジェクトを画像に出力する

今回は、「DioDocs(ディオドック)」でExcelファイルに含まれるワークシートやオブジェクトを画像に出力する機能を紹介したいと思います。こちらは2019年12月18日(水)にリリースされた「DioDocs V3J」でDioDocs for Excelに追加された機能です。

この機能を使用して画像に出力できるコンテンツは以下の4種類です。

  • ワークシート
  • セル範囲
  • シェイプ(図形)
  • チャート(グラフ)

以下のようなワークシートを持つExcelファイルにこの機能を使用してみます。

Excelのワークシート

まず、Excelファイルを読み込んで、対象のワークシートを設定します。

// 新規ワークブックの作成
var workbook = new Workbook();

// xlsxファイルを開く
workbook.Open("Template_SalesTracker_report.xlsx");
IWorksheet worksheet = workbook.Worksheets[0];

ワークシートを出力する

ワークシート全体を出力する場合はIWorksheetインタフェースのToImageメソッドを使用します。

// ワークシートを画像に出力
worksheet.ToImage("worksheet.png");

セル範囲を出力する

ワークシートのある特定の範囲を出力する場合は、IRangeインタフェースのToImageメソッドを使用します。以下のように出力したいセルの範囲を設定します。

// セル範囲を画像に出力
worksheet.Range["B15:K21"].ToImage("range.png");

シェイプ(図形)、チャート(グラフ)を出力する

シェイプやチャートを画像に変換するには、IShapeインタフェースのToImageメソッドを使用します。

// シェイプを画像に出力
worksheet.Shapes["TextBox"].ToImage("textbox.png");

// バーチャートを画像に出力
worksheet.Shapes["ProductIncomeChart"].ToImage("barchart.png");

// パイチャートを画像に出力
worksheet.Shapes["ProductIncomePctChart"].ToImage("piechart.png");

あらかじめシェイプやチャートに名前(上記コードの「TextBox」や「ProductIncomeChart」)を設定しておくと、明示的に名前で出力する対象を指定できます。

シェイプやチャートに名前を設定

こちらは2020年5月20日(水)にリリースされた「DioDocs V3J SP1」で追加された新機能になります。

今回紹介した機能はDioDocsのデモで確認できます。

既存のファイルからシートを画像に変換

既存のファイルから範囲を画像に変換

既存のファイルから図形を画像に変換

既存のファイルからチャートを画像に変換

DioDocs V3J SP1 リリース

DioDocs V3J(ディオドック)の最新サービスパック「Service Pack1」(以下、V3J SP1)を、本日2020年5月20日(水)にリリースしました。

今回のSP1においても製品の不具合修正だけでなく、お客様からいただいたご要望をもとに「DioDocs for Excel」と「DioDocs for PDF」の2つの製品に多くの機能を追加しています。

DioDocs for Excel

  • 図形のテキストの位置
    図形の内部に表示されるテキストの位置を調整できるようになります。
  • 図形のグラデーションの種類とスタイル
    図形をグラデーションで塗りつぶす際に、グラデーションの種類とスタイルを設定できるようになります。
  • セルの範囲を指定して画像を追加
    画像を追加する際に、指定されたセルの位置とサイズを取得できるようになります。
  • チャート、図形、画像に名前でアクセス
    チャート、図形、画像に名前を設定して、コードから名前を指定して各プロパティを変更できるようになります。
  • チャートのラベル角度
    チャートのタイトル、軸ラベル、データラベルにおけるテキストの角度を設定できるようになります。
  • チャートの誤差範囲
    チャートの誤差範囲の表示とカスタマイズができるようになります。

DioDocs for PDF

  • リダクションの強化
    墨消しを設定している領域のデータをPDFから削除できるようになります。
  • TIFFの圧縮オプション
    PDFをTIFFとして保存する際の圧縮オプションを設定できるようになります。
  • PDFセキュリティの強化
    「内容のコピー」と「アクセシビリティのための内容の抽出」をそれぞれ個別に設定できるようになります。
  • 署名の抽出
    PDFに追加されている署名を抽出できるようになります。

V3J SP1では、この他にも多くの機能強化が行われています。

V3J SP1の新機能の動作については以下のデモで簡単にお試しいただけます。

DioDocsの最新版V3J SP1はNuGetから取得してご利用いただけます。

  • グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の製品・技術資料をご覧ください。
  • グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の製品のデモアプリケーションをお試しください。