JavaScript開発ライブラリ「Wijmo（ウィジモ）」はAngularをサポートしており、Angularの標準的な方法でグリッド／チャート／入力などのエンタープライズ向けの高機能なUIコンポーネントを利用することができます。
本記事では、Visual Studio 2022とWijmoのデータグリッドコントロール「FlexGrid」でデータ表示を行うAngularアプリケーションを作成する方法を紹介します。
開発環境
今回使用する開発環境は以下の通りです。
- OS：Windows 11（22H2）
- IDE：Visual Studio 2022（Version 17.6.6）
プロジェクトの作成
Visual Studio 2022にはASP.NET Core Web APIをサーバーサイド（バックエンド）にしたシングルページアプリケーション（Single Page Application：SPA）を作成するためのプロジェクトテンプレートが含まれています。バージョン17.5以降はより構成手順が簡略されたテンプレートが用意されているので、今回はそちらを使います。
Visual Studio 2022を起動し、「Angular および ASP.NET Core（プレビュー）」のプロジェクトテンプレートを使用してプロジェクトを作成します。
ソリューション名を「Wijmo-Angular-Sample」として進みます。
フロントエンド部分の「angularapp」プロジェクトと、バックエンド部分の「webapi」プロジェクトの2つのプロジェクトを含むソリューションが作成されます。
この時点で一度実行してみます。「デバッグ」メニューから「デバッグの開始」を実行します。
Angular CLIが起動し、以下のようにAngular CLIの分析データの収集をするかどうかの質問が表示されるので、「y」か「N」いずれかを入力します。
ブラウザが起動し、以下のようにASP.NET CoreのWeb APIから取得したデータを表示するAngularアプリが表示されます。
AngularアプリにWijmoの組み込み
ここからは先ほどのAngularアプリにWijmoのコントロールを組み込んで、データを表示する方法を紹介していきます。
PowerShellの起動
Visual Studio 2022のメニューから「ツール」⇒「コマンド ライン」⇒「開発者用 PowerShell］を選択してPowerShellを起動します。
PowerShell起動後、コマンドプロンプトで以下のコマンドを実行し、「angularapp」フォルダに移動しておきます。
cd angularapp
Wijmoのパッケージのインストール
「angularapp」フォルダ配下はフロントエンドのAngularアプリケーションになっていますので、ここでnpm installコマンドを実行して、Wijmoパッケージをアプリケーションにインストールします。
npm install @grapecity/wijmo.angular2.allインストールが完了したら「src\app\app.modules.ts」にWijmoのデータグリッドコントロールであるFlexGridを含むモジュール「WjGridModule」とカルチャーをインポートします。
※ ライセンスキーを設定しない場合トライアル版を示すメッセージが表示されます。ライセンスキーの入手や設定方法についてはこちらをご覧ください。
import { WjGridModule } from '@grapecity/wijmo.angular2.grid';
import * as wijmo from '@grapecity/wijmo';
import '@grapecity/wijmo.cultures/wijmo.culture.ja';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
wijmo.setLicenseKey('ここにライセンスキーの文字列を設定します');
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule, HttpClientModule,
WjGridModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }「src\styles.css」にWijmoのスタイルをインポートします。
@import '@grapecity/wijmo.styles/wijmo.css';FlexGridの追加
「src\app\app.component.html」内の既存のテーブルの表記を以下のように書き換え、FlexGridの表示の為の「wj-flex-grid」要素を追加します。
<h1 id="tableLabel">Weather forecast</h1>
<p>This component demonstrates fetching data from the server.</p>
<p *ngIf="!forecasts"><em>Loading... Please refresh once the ASP.NET backend has started. See <a href="https://aka.ms/jspsintegrationangular">https://aka.ms/jspsintegrationangular</a> for more details.</em></p>
<wj-flex-grid [itemsSource]="forecasts" *ngIf="forecasts">
<wj-flex-grid-column header="Date" binding="date" [width]="200"></wj-flex-grid-column>
<wj-flex-grid-column header="Temp. (C)" binding="temperatureC" [width]="120"></wj-flex-grid-column>
<wj-flex-grid-column header="Temp. (F)" binding="temperatureF" [width]="120"></wj-flex-grid-column>
<wj-flex-grid-column header="Summary" binding="summary" [width]="200"></wj-flex-grid-column>
</wj-flex-grid>実行結果
以上で設定は完了です。Visual Studioから再度デバッグ実行すると、WijmoのFlexGridにWeb APIから取得したデータが表示されます。
FlexGridではデフォルトで列幅の変更やソート、列の入れ替えなどが可能です。
さいごに
クライアントサイドはVisual Studio CodeでAngularアプリ、サーバーサイドはVisual StudioでASP.NET Core Web APIアプリという開発方法が一般的かもしれませんが、Visual Studioに用意されているプロジェクトテンプレートを利用することで、Visual Studioだけでも「ASP.NET Core Web API＋Angular」なアプリケーションを作成できます。
なお、今回ご紹介したWijmoの機能はほんの一部です。製品サイトでは、Wijmoの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。
また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。