GrapeCity.devlog

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

GrapeCity

Wijmo 2020J v3の新機能

Wijmo(ウィジモ)」の最新バージョン「2020J v3」を、2020年12月2日(水)にリリースします。

Wijmo 2020J v3

「2020J v3」では、主に以下のような機能の改善と追加を行っています。

  • セルエディタのプレースホルダー(FlexGrid)
  • 複数円グラフのレイアウト制御(FlexPie)
  • 複数月カレンダーの表示、日付範囲の選択(Calendar、InputDate)
  • 入力文字列で始まる項目だけを表示(AutoComplete)
  • 検索時の大文字と小文字の区別(MultiSelect、MultiSelectListBox)
  • 動的な計算フィールド(CollectionView)
  • 新しいコントロール(日付範囲(InputDateRange)コントロール)
  • Angular 11対応(Angular)
  • React 17対応(React)

この他にも機能強化が行われており、製品のWebサイトでは「2020J v3」の新機能を実際に確認できるサンプル付きで紹介していますので、ぜひご確認ください。

開発支援ツールの活用事例を知る5日間! ~ 「GrapeCity ECHO week 2020」

GrapeCity ECHO week 2020

開発支援ツールの活用事例をとことん紹介する1週間

2015年より開催してきたグレープシティの技術イベント「ECHO」。 今般の新型コロナウイルスの感染拡大の状況を鑑み、お客さまおよびスタッフの安全確保ならびに社会的な感染拡大防止の観点から、今年はオンラインで開催いたします。

テーマは「グレープシティ開発支援ツールの活用事例紹介」。

新型ウイルスの影響により世の中の動きが不透明な中、企業はリモートワークを前提とした業務プロセスへの変革が求められ、既存システムの刷新や更新は先送りになっている傾向にあります。今後はこの先送りとなっていた案件に加え、リモートワークで課題となる電子化されていない業務のデジタル化が推進され、エンジニアの需要がますます高まり続けることは想像に難くありません。

グレープシティでは、開発支援ツールを提供していくことでエンジニアの開発生産性向上に貢献したいと考えています。開発支援ツールを導入する企業の生の声をお伝えすることにより、受講者の開発のヒントとなることを目指します。

グレープシティからのクリスマスプレゼント

イベントに申し込みをし、配信を視聴した方限定のキャンペーンを実施します。
視聴すればするほど良いことあるかも?詳細はお申込みいただいた方にお知らせしますのでお楽しみに♪

▼お申込みはこちら

開催概要

開催日時 2020年12月21日(月)~25日(金)
会場 オンライン
費用 無償(事前申込制)
主催 グレープシティ株式会社 ツール事業部
ハッシュタグ #エコー2020

気になるセッションの詳細は公式サイトをご覧ください。

ActiveReportsJSとUIコンポーネントを組み合わせて帳票データの入力環境を強化 ― CodeZine記事

デベロッパーの成長と課題解決に貢献するメディア「CodeZine」で、JavaScript帳票開発ライブラリ「ActiveReportsJS(アクティブレポートJS)」の活用事例記事が公開されました。

ActiveReportsJSは単体でWebページでの帳票出力に利用できますが、弊社が提供しているJavaScriptライブラリ「InputManJS(インプットマンJS)」や「Wijmo(ウィジモ)」と組み合わせることで、帳票におけるデータ入力から出力まで快適に実現できるWeb帳票アプリケーションが作成できます。
本記事では、ActiveReportsJSをInputManJS、Wijmoと組み合わせて、帳票へのデータ入力環境を強化する方法を解説しています。

こんな方にオススメ

  • Webページに帳票出力機能を実装したい方
  • ActiveReportsJSをより深く活用したい方
  • JavaScriptのUI部品に興味がある方

ActiveReportsJSの活用法は以下よりご確認いただけます。


グレープシティ製品のTIPSやイベントレポートなど、CodeZineに掲載している記事は以下よりご確認いただけます。

【オンラインセミナー】多様な要件にコレ1つ!オールインワンなJavaScriptライブラリ「Wijmo」の魅力

オンラインセミナー「多様な要件にコレ1つ!オールインワンなJavaScriptライブラリ「Wijmo」の魅力」

現在、様々な業界でDX(デジタルトランスフォーメーション)というワードに注目が集まっています。これは、テクノロジーを使いビジネスをより良いものにして行こうという取り組みのことです。日本では経済産業省がこれを後押しする姿勢を見せており、2018年には同省より「DX推進ガイドライン」が発表されました。

こうした流れを受け、現在、各国内企業では既存業務のシステム化や老朽化したシステムの刷新が課題になっています。このようなシステムは、デスクトップ形式のアプリケーションによって構築されるイメージが今も根強くありますが、近年に見られるWebテクノロジーの進歩もあり、近頃はWebアプリケーションで実現される例も増えてきました。
また、現在のコロナ禍においては自宅からリモートで業務を行う機会も飛躍的に増加しており、そのような意味でもWebシステム開発へのニーズが高まってきています。

今回はそんなWebシステム開発、もしくはそのフロントエンド開発で便利にご利用いただけるオールインワンなJavaScriptライブラリ「Wijmo(ウィジモ)」の魅力について解説します。40以上にわたる収録ライブラリの中から人気のコントロールや便利な機能をピックアップし、その特長や活用法をご紹介していきます。

こんな方にオススメ
  • Webアプリケーション開発に使える業務用コンポーネントをお探しの方
  • Webアプリケーションとして業務システムの移行をご検討されている方
  • Wijmoの導入をご検討されている方

▼お申込みはこちら

開催概要

開催日時 2020年11月30日(月)14:00~14:40
会場 オンライン
定員 30名
参加費 無料
主催 グレープシティ株式会社 ツール事業部

PythonのWebアプリケーションフレームワーク「Django」を試してみた

普段のお仕事に役立つ普遍的なプログラミングTIPSや、業界で注目度が高い最新情報をお届けする「編集部ピックアップ」。
今回はPythonのWebアプリケーションフレームワーク「Django」についてお届けします。


Pythonは近年人気な言語の一つで、開発に利用される場面も多くなっています。そんなPythonでWebアプリケーションを開発するためのフレームワークの一つに「Django(ジャンゴ)」というものがあります。今回はパワフルなフレームワークであるDjangoについてご紹介します。

Djangoとは

DjangoはWebアプリケーションを早く簡単に開発できるフレームワークです。

Pythonには複数のWebアプリケーションフレームワークが存在していますが、Djangoはその中でも最も高レベルのフレームワークです。3条項BSDライセンスのオープンソースのフレームワークであり、商用での利用も可能です。

Webアプリケーションを開発する際には、ルーティングなどの共通した処理を実装する必要がありますが、これをWebアプリを開発する度に毎回実装していては、開発にかかる時間やコストが大きくなってしまいます。

Djangoはそのように必要な共通の処理をフレームワークとして提供することで、車輪の再発明をすることなく開発に集中することができます。

Djangoで作れるアプリ

世界的に有名なアプリケーションの中にもDjangoを使ったものが多く、一例をあげるとYouTubeやDropbox、Instagramなどが挙げられます。これらの例からも分かる通り様々な種類や利用用途のアプリケーションの開発が可能であることが分かるでしょう。

また、最近では機械学習があらゆる事業で利用されるようになっています。Pythonは機械学習でよく使われる言語でもあり、それらの機械学習の機能を比較的簡単にアプリケーションに統合できるという意味からも使い勝手が良く好んで使われることが多いです。

使ってみよう!Djangoクイックスタート

Djangoの利用は非常に簡単です。以下の手順でセットアップしてみましょう。

Djangoのインストール

DjangoはPythonの利用環境があれば簡単に利用することが可能です。Pythonのインストール方法はOSごとに異なりますので、以下などを参考にインストールを行ってください。

ただし、Pythonは3.4以上のバージョンであることが推奨されています。Python2系はDjango2.0以上のバージョンでは利用できなくなっているため、使用しないことをお勧めします。

現在のDjangoの最新バージョンは3.1.3となっており、セキュリティや利便性の観点からなるべく新しいバージョンを利用するようにしましょう。

ここからはDjangoをインストールしてみましょう。今回の実行環境のバージョン情報は以下の通りです。

> python -V
Python 3.6.10

> pip -V
pip 20.2.4

Djangoをインストールする際は、以下のようにpipを利用してインストールするのが簡単です。

pip3 install django

以下のようなログが出力されればインストール成功です。よくみてみると、django-3.1.2の他にasgiref-3.2.10、pytz-2020.1、sqlparse-0.4.1も一緒にインストールされています。

Collecting django
  Downloading Django-3.1.3-py3-none-any.whl (7.8 MB)
     |████████████████████████████████| 7.8 MB 5.5 MB/s 
Collecting asgiref~=3.2.10
  Downloading asgiref-3.2.10-py3-none-any.whl (19 kB)
Collecting sqlparse>=0.2.2
  Downloading sqlparse-0.4.1-py3-none-any.whl (42 kB)
     |████████████████████████████████| 42 kB 2.0 MB/s 
Collecting pytz
  Downloading pytz-2020.1-py2.py3-none-any.whl (510 kB)
     |████████████████████████████████| 510 kB 9.1 MB/s 
Installing collected packages: asgiref, sqlparse, pytz, django
Successfully installed asgiref-3.2.10 django-3.1.3 pytz-2020.1 sqlparse-0.4.1

さて、Djangoがちゃんとインストールして使える状態かを確認しましょう。まずテスト用のプロジェクトtestpjを作成するディレクトリを作成してそこに移動しましょう。

> mkdir testpj
> cd testpj

testpjディレクトリ内でテスト用のスケルトンサイトを作成します。ここでは、django-adminというツールを利用します。Djangoをインストールできていればすぐに利用することができます。以下のコマンドを実行するとsampleというディレクトリが作成されます。django-adminはDjangoで各種管理タスクを実行するためのコマンドで、今回のようにWebサーバーを立ち上げるだけでなく様々な場面で利用されます。

> django-admin startproject sample

上記のコマンドで作成されたsampleディレクトリに入ると、ディレクトリの中にmanage.pyというファイルとtestディレクトリが生成されています。

> cd sample
> ls
manage.py  sample

最後にこのmanage.pyを利用して以下のコマンドを実行します。なお、このコマンドはWebサーバーを立ち上げるためのコマンドです。

> python manage.py runserver

以下のログが出力されれば、正常に開発用のWebサーバーが実行されています。

Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).

You have 18 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
November 06, 2020 - 17:38:45
Django version 3.1.3, using settings 'sample.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

ここでログに以下のようなメッセージが出力されていますが、最初の立ち上げ時は特に意識しなくても大丈夫です。

You have 18 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.

ここまでのログが確認できたら、ブラウザでhttp://127.0.0.1:8000/ にアクセスしましょう。以下のような画面が表示されたら成功です。

Djangoの動作確認

おわりに

今回の記事では、Djangoの概要や、環境構築の方法についてご説明しました。なお、グレープシティではDjangoをはじめとした、様々なWebアプリケーションフレームワークと一緒に使えるJavaScriptライブラリを提供しています。

これらの製品とDjangoを一緒に使う方法については、また別の機会にご紹介させていただきたいと思います。

Wijmoロードマップ(2020J v3)

Wijmo(ウィジモ)をご利用いただいている皆さま、お待たせしました。Wijmoロードマップのご案内です!

本記事では2020年11月にリリースを計画している「Wijmo 2020J v3」において、追加予定の新機能を紹介します。

はじめに

本記事で紹介する新機能についてはあくまで現時点で追加を予定している機能であり、Wijmo 2020J v3における追加を確約するものではありません。今後の開発状況によっては追加の予定が変更される可能性もあることを予めご了承ください。

では早速紹介していきます!

FlexGrid

  • セルエディターのプレースホルダー
    空欄のセルを編集する際にプレースホルダーを表示できるようになります。
  • 編集禁止のセルを飛ばして次のセルに移動
    TabまたはEnterキーが押されたときに、編集禁止のセルを飛ばして次のセルに移動することができるようになります。
  • DataMapセル編集時の入力補完を強化
    DataMapセルを編集する際に大文字と小文字を考慮した入力補完ができるようになります。
  • カスタムセルエディタとセルテンプレート利用時のドロップダウン表示を改善
    カスタムセルエディタとセルテンプレートが同時に利用されている際にセルの右側にドロップダウンボタンが表示されるようになります。

FlexPie

  • 複数円グラフのレイアウト制御
    複数の円グラフが表示されている際にレイアウトを制御できるようになります。

Calendar

  • 前後に追加の週を表示
    現在の月の前後に追加の週を表示できるようになります。
  • 複数月カレンダーの表示
    複数の月のカレンダーを表示できるようになります。
  • 日付範囲の選択
    日付範囲を選択できるようになります。

InputDate

  • 複数月カレンダーの表示
    複数の月のカレンダーを表示できるようになります。
  • 日付範囲の選択
    日付範囲を選択できるようになります。

AutoComplete

  • 入力文字列で始まる項目だけを表示
    入力した文字列で始まる項目だけをリスト表示できるようになります。

MultiSelect

  • 検索機能の改善
    検索時の遅延時間を設定できるようになります。

MultiSelectListBox

  • 検索機能の改善
    検索時の遅延時間と、大文字と小文字を区別するかどうかを設定できるようになります。

UndoStack

  • ページング対応
    ページングが設定されている場合に、元に戻す/やり直すを実行した時にページも自動的に移動されるようなります。

CollectionView

  • 動的な計算フィールド
    同一のデータソース内の項目を利用して動的な計算フィールドを追加できるようになります。
  • currentChangedイベントの発生改善
    フィルタリングやページングを実行後にセルの選択位置が同じ場合でもcurrentChangedイベントが発生するようになります。
  • getErrorの全体エラーメッセージ表示
    getErrorメソッドで行ヘッダーセルに表示されるメッセージを設定できるようになります。

新しいコントロール

  • 日付範囲コントロール
    日付の範囲を選択できるコントロールが追加されます。

Angular

  • ツールチップの表示位置
    ツールチップの表示位置を指定できるようになります。

React

  • React 17対応
    React 17に対応します。

Vue.js

  • ツールチップの表示位置
    ツールチップの表示位置を指定できるようになります。

さいごに

以上が「Wijmo 2020J v3」で追加を予定している新機能になります。確定した際には以下のように新機能の紹介記事で公開させていただきますので、そちらもご確認ください。

さまざまなグラフを帳票に表示できる「ActiveReportsJS」のチャート機能 ― CodeZine記事

「『ActiveReportsJS』ではじめるフロントエンド帳票開発」と題し、JavaScript帳票ライブラリ「ActiveReportsJS(アクティブレポートJS)」の基本的な利用方法を、開発者のための実装系Webマガジン「CodeZine」で連載しています。
帳票にデータやリストを表示する方法や、データの集計やグループ化、フィルタ処理を行う方法、複数データ項目を掛け合わせて集計する方法など、これまで3回にわたってActiveReportsJSの帳票出力機能をご紹介してきました。

最新の第4回目の記事では、さまざまなグラフを帳票に出力できるChartレポートコントロールの利用方法をご紹介しています。

今回ご紹介しているChartレポートコントロールを利用することで、棒グラフや折れ線グラフなどを表示して表現力豊かな帳票を作成することが可能です。
以下のような方にお役立ていただける記事となっておりますので、ぜひご覧ください。

こんな方にオススメ

  • Webページに帳票出力機能を実装したい方
  • 帳票にグラフを表示したい方
  • 視覚にアピールできる帳票を作成したい方

本連載は以下よりご確認いただけます。


グレープシティ製品のTIPSやイベントレポートなど、CodeZineに掲載している記事は以下よりご確認いただけます。

SpreadJSの入力にInputManJSセルを使う

SpreadJS(スプレッドJS)」には、InputManJSを統合するInputManJSセルという機能があります。バージョンV13.2Jでは、このInputManJSセルに、新しくGcComboBox型セルが追加されました。

今回は、このGcComboBox型セルに従来からのGcMask、GcNumber、GcDateTimeの各セル型を加えた4つのInputManJSセルの豊富な機能と使い方をご紹介します。

注意
InputManJSセルの使用には、SpreadJSInputManJSのライセンスが必要です。


  1. InputManJSセルとは?
  2. GcMask型セル
  3. GcDateTime型セル
  4. GcNumber型セル
  5. GcComboBox型セル
  6. 実行サンプル
  7. おわりに
続きを読む

Blazor WebAssemblyでJavaScriptスプレッドシートライブラリを使う

ASP.NET Core Blazorでは、.NETのメソッドからJavaScriptの関数を呼び出したり、逆にJavaScriptの関数から.NETのメソッドを呼び出したりする、「JavaScript相互運用」が可能です。

今回の記事では、Blazor WebAssemblyのアプリケーション上で、ExcelライクなJavaScriptスプレッドシートライブラリ「SpreadJS(スプレッドJS)」のラッパーを作成して使用する方法をご紹介します。

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

開発環境

  • Visual Studio 2019(Version 16.7.4)
  • SpreadJS V13.2J(13.2.3)

まずはBlazor WebAssemblyのアプリケーションを作成します。Blazor WebAssemblyについてはこちらの記事もご覧ください。

Visual Studioのプロジェクトテンプレートから[Blazor アプリ]を選択します。

Blazorアプリの選択

プロジェクト名を「SpreadJS-Blazor-App」として進みます。

プロジェクト名の設定

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

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

Blazorコンポーネントの作成

Blazor WebAssemblyのプロジェクトを作成したら、次はそこにBlazor用のコンポーネントを追加していきます。

ソリューションを右クリックし、[追加]⇒[新しいプロジェクト]を選択し、[Razor クラス ライブラリ]を追加します。

Razorクラスライブラリの追加

プロジェクト名を「SpreadJS_Blazor_Lib」として進みます。

Razorクラスライブラリのプロジェクト名を設定

プロジェクトが作成されたら、SpreadJSの製品版、またはトライアル版のZipファイルからJSファイルとCSSファイルをwwwroot配下にコピーします。

SpreadJSのファイルをコピー

exampleJsInterop.jsを以下のように修正します。こちらのコードがC#からJavaScriptのコードを実行するためのブリッジの役割を果たします。

window.sjsAdaptor = {
    init: function (host, config) {
        // GC.Spread.Sheets.LicenseKey = "ライセンスキーがある場合は設定します。";
        if (config.hostStyle) {
            var hostStyle = config.hostStyle;
            var styles = hostStyle.split(';');
            styles.forEach((styleStr) => {
                var style = styleStr.split(':');
                host.style[style[0]] = style[1];
            });
            delete config.hostStyle;
        }

        return new GC.Spread.Sheets.Workbook(host, config);
    },

    setCulture: function (locale) {
        GC.Spread.Common.CultureManager.culture(locale);
    }
};

プロジェクトにデフォルトで追加されるComponent1.razorのファイル名をSpreadJS.razorに変更し、以下のコードを記述します。

@using Microsoft.JSInterop
@inject IJSRuntime JSRuntime


<div @ref="host"></div>

@code {
    [Parameter]
    public int SheetCount { get; set; }

    [Parameter]
    public string HostStyle { get; set; }

    private ElementReference host;

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            JSRuntime.InvokeVoidAsync("sjsAdaptor.setCulture", "ja-jp");
            JSRuntime.InvokeVoidAsync("sjsAdaptor.init", host, new Dictionary<string, object>() {
            { "sheetCount", SheetCount},
            { "hostStyle", HostStyle }
        });
        }
    }
}

BlazorアプリケーションからBlazorコンポーネントを呼び出す

次に、作成したBlazorコンポーネントをBlazorアプリケーションから参照して実行します。

「SpreadJS_Blazor_App」プロジェクトを右クリックし、[追加]⇒[プロジェクト参照]をクリックし、「SpreadJS_Blazor_Lib」を追加します。

プロジェクト参照を追加

「SpreadJS_Blazor_App」のPages/Index.razorを以下のように修正します。

@page "/"

@using SpreadJS_Blazor_Lib

<h1>Hello, SpreadJS!</h1>

<SpreadJS SheetCount="3" HostStyle="@HostStyle" />

@code {
    private string HostStyle { get; set; } = "width:90wh;height:70vh;border: 1px solid darkgray";
}

wwwroot/index.htmlを以下のように修正して、SperadJSのスクリプトとCSSファイルへの参照を追加します。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>BlazorApp1</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />

    <link href="_content/SpreadJS_Blazor_Lib/SpreadJS/css/gc.spread.sheets.excel2013white.13.2.3.css" rel="stylesheet" />
    <script src="_content/SpreadJS_Blazor_Lib/SpreadJS/scripts/gc.spread.sheets.all.13.2.3.min.js" type="text/javascript"></script>
    <script src="_content/SpreadJS_Blazor_Lib/SpreadJS/scripts/resources/ja/gc.spread.sheets.resources.ja.13.2.3.min.js" type="text/javascript"></script>
    <script src="_content/SpreadJS_Blazor_Lib/exampleJsInterop.js" type="text/javascript"></script>
</head>

<body>
    <app>Loading...</app>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
</body>

</html>

「SpreadJS_Blazor_App」をスタートアッププロジェクトに設定して実行すると、以下のようにBlazorの画面上にSpreadJSが表示できます。

BlazorでSpreadJSを表示

SpreadJSの機能の使用

SpreadJSをBlazorの画面に表示することができたので、次はSpreadJSの各種機能を使用してみます。今回は指定したセルに値を設定する「setValueメソッド」と「Excelファイルのインポート機能」をそれぞれ追加してみます。

「SpreadJS_Blazor_Lib」のexampleJsInterop.jsを以下のように書き換えます。

window.sjsAdaptor = {
    init: function (host, config) {
        //GC.Spread.Sheets.LicenseKey = "ライセンスキーがある場合は設定します。";
        if (config.hostStyle) {
            var hostStyle = config.hostStyle;
            var styles = hostStyle.split(';');
            styles.forEach((styleStr) => {
                var style = styleStr.split(':');
                host.style[style[0]] = style[1];
            });
            delete config.hostStyle;
        }

        return new GC.Spread.Sheets.Workbook(host, config);
    },

    setCulture: function (locale) {
        GC.Spread.Common.CultureManager.culture(locale);
    },

    setValue: function (host, sheetIndex, row, col, value) {
        var spread = GC.Spread.Sheets.findControl(host);
        if (spread) {
            var sheet = spread.getSheet(sheetIndex);
            sheet.setValue(row, col, value);
        }
    },

    openExcel: function (host, inputFile) {
        var spread = GC.Spread.Sheets.findControl(host);
        if (spread) {
            var excelIO = new GC.Spread.Excel.IO();
            excelIO.open(inputFile.files[0], function (json) {
                spread.fromJSON(json);
            })
        }
    }
};

SpreadJS.razorを以下のように書き換えます。

@using Microsoft.JSInterop
@inject IJSRuntime JSRuntime


<div @ref="host"></div>

@code {
    [Parameter]
    public int SheetCount { get; set; }

    [Parameter]
    public string HostStyle { get; set; }

    private ElementReference host;

    public void setValue(int sheetIndex, int row, int col, object value)
    {
        JSRuntime.InvokeVoidAsync("sjsAdaptor.setValue", host, sheetIndex, row, col, value);
    }

    public void OpenExcel(ElementReference inputFile)
    {
        JSRuntime.InvokeVoidAsync("sjsAdaptor.openExcel", host, inputFile);
    }

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            JSRuntime.InvokeVoidAsync("sjsAdaptor.setCulture", "ja-jp");

            JSRuntime.InvokeVoidAsync("sjsAdaptor.init", host, new Dictionary<string, object>() {
            { "sheetCount", SheetCount},
            { "hostStyle", HostStyle }
        });
        }
    }
}

「SpreadJS_Blazor_App」のwwwroot/index.htmlを以下のように書き換えます。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>BlazorApp1</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />

    <link href="_content/SpreadJS_Blazor_Lib/SpreadJS/css/gc.spread.sheets.excel2013white.13.2.3.css" rel="stylesheet" />
    <script src="_content/SpreadJS_Blazor_Lib/SpreadJS/scripts/gc.spread.sheets.all.13.2.3.min.js" type="text/javascript"></script>
    <script src="_content/SpreadJS_Blazor_Lib/SpreadJS/scripts/resources/ja/gc.spread.sheets.resources.ja.13.2.3.min.js" type="text/javascript"></script>
    <script src="_content/SpreadJS_Blazor_Lib/SpreadJS/scripts/interop/gc.spread.excelio.13.2.3.min.js" type="text/javascript"></script>
    <script src="_content/SpreadJS_Blazor_Lib/SpreadJS/scripts/plugins/gc.spread.sheets.shapes.13.2.3.min.js" type="text/javascript"></script>
    <script src="_content/SpreadJS_Blazor_Lib/SpreadJS/scripts/plugins/gc.spread.sheets.charts.13.2.3.min.js" type="text/javascript"></script>
    <script src="_content/SpreadJS_Blazor_Lib/exampleJsInterop.js" type="text/javascript"></script>
</head>

<body>
    <app>Loading...</app>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
</body>

</html>

Pages/Index.razorを以下のように修正します。

@page "/"

@using SpreadJS_Blazor_Lib

<h1>Hello, SpreadJS!</h1>
<table>
    <tr>
        <td>
            <label>シート</label>
            <input @bind-value="@SheetIndex" />
        </td>
        <td>
            <label>行</label>
            <input @bind-value="@Row" />
        </td>
        <td>
            <label>列</label>
            <input @bind-value="@Column" />
        </td>
        <td>
            <lable>値</lable>
            <input @bind-value="@Value" />
        </td>
    </tr>
    <tr>
        <td>
            <button @onclick="doSomething">アップデート</button>
        </td>
    </tr>
    <tr>
        <td>
            <input type="file" @ref="inputFileEle" @onchange="ImportExcel" />
        </td>
    </tr>
</table>
<br />
<SpreadJS SheetCount="3" HostStyle="@HostStyle" @ref="ss" />

@code {
    private SpreadJS ss;

    private ElementReference inputFileEle;

    public int SheetIndex { get; set; } = 0;

    public int Row { get; set; } = 0;

    public int Column { get; set; } = 0;

    public string Value { get; set; } = "";

    private string HostStyle { get; set; } = "width:90wh;height:70vh;border: 1px solid darkgray";

    private void doSomething()
    {
        ss.setValue(SheetIndex, Row, Column, Value);
    }

    private void ImportExcel()
    {
        ss.OpenExcel(inputFileEle);
    }
}

実行結果

実行結果は以下の通りです。

setValueを実行

Excelインポートを実行

おわりに

JavaScript相互運用は、ファイルアクセスなどBlazorに足りない機能を補うために欠かせないものです。また、SpreadJSのような高機能なJavaScriptライブラリをそのまま使えるというのも魅力の一つです。

今回作成したサンプルは以下で公開しています。

製品WebサイトではSpreadJSの機能を手軽に試せるデモをご用意していますので、ぜひご覧ください。

Angular & ActiveReportsJSクイックスタート

JavaScript帳票ライブラリ「ActiveReportsJS(アクティブレポートJS)」では、Angular、React、Vue.jsといった、主要なJavaScriptフレームワークに対応したパッケージをそれぞれ用意しています。今回はその中からAngularでActiveReportsJSを使う方法をご紹介いたします。

※ 以下、Node.jsが環境にインストールされていることが前提となります。インストールしていない場合は、あらかじめこちらより推奨版をインストールしてください。また、エディタとしてVisual Studio Codeを使用します。

Angular CLIのインストール

まずはAngularアプリの作成や実行など、Angularでの開発に欠かせないコマンドラインツール「Angular CLI」をインストールします。
※ すでにインストール済みの場合、この手順は不要です。

なお、2020年10月時点でのAngularの最新バージョンは「Angular 10」ですが、この時点でActiveReportsJSがサポートしているAnuglarのバージョンは「Angular 9」までなので、今回はバージョンを指定してインストールします。

ターミナルやコマンドプロンプトを開き、以下のコマンドを実行して、Angular CLIパッケージをグローバルにインストールします。

npm install -g @angular/cli@9.1.12

バージョン指定せず、最新版でインストールする場合は以下のようなコマンドになります。

npm install -g @angular/cli

インストールが完了したら、以下のコマンドでAngular CLIのバージョン等を確認できます。

ng --version

Angular CLIのインストール確認

Angularアプリケーションの作成

以下のコマンドを実行して、Angularアプリケーションを作成します。アプリケーションのオプションをいくつか質問されますが、全てEnterキーを押して既定値を選択します。

ng new angular-app

以上でAngularアプリケーションのひな形は完成です。作成されたアプリケーションのフォルダに移動し、ng serveコマンドで実行します。

cd angular-app
ng serve --open

ブラウザでhttp://localhost:4200/が自動的に開き、以下のようなページが表示されます。

サンプルアプリの起動

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

以下のコマンドを実行して、ActiveReportsJSのパッケージをアプリケーションにインストールします。

npm install @grapecity/activereports-angular

続いて以下のコマンドを実行して、ActiveReportsJSの日本語化パッケージをアプリケーションにインストールします。

npm install @grapecity/activereports-localization

ソースコードの修正

src/app/app.component.htmlファイルの中身を以下の内容に書き換えます。

<gc-activereports-viewer [height]="height" [language]="language" (documentLoaded)="onDocumentLoaded($event)" #reportviewer></gc-activereports-viewer>

src/app/app.module.tsファイルの中身を以下の内容に書き換えます。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ActiveReportsModule } from '@grapecity/activereports-angular';
import '@grapecity/activereports-localization';

import { AppComponent } from './app.component';

@NgModule({
 declarations: [
   AppComponent
 ],
 imports: [
   BrowserModule,
   ActiveReportsModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

src/app/app.component.tsファイルの中身を以下の内容に書き換えます。

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ViewerComponent } from '@grapecity/activereports-angular';
import { HtmlExportService, PdfExportService, XlsxExportService, AR_EXPORTS } from '@grapecity/activereports-angular';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css'],
  providers:[
   {
     provide: AR_EXPORTS,
     useClass: PdfExportService,
     multi: true
   },
   {
     provide: AR_EXPORTS,
     useClass: HtmlExportService,
     multi: true
   },
     {
     provide: AR_EXPORTS,
     useClass: XlsxExportService,
     multi: true
   }
 ]
})

export class AppComponent implements AfterViewInit {
 @ViewChild('reportviewer', { static: false }) reportviewer: ViewerComponent;

 title = 'ActiveReports Angular App';
 height = '100vh';
 language = 'ja';

 onDocumentLoaded = function(a: any){
   console.log("document loaded", a);
 };

ngAfterViewInit() {
   this.reportviewer.init.subscribe(() =>{
     this.reportviewer.registerFont({name: 'IPAゴシック', source: 'assets/ipag.ttf'}).then(()=>
       this.reportviewer.open("assets/Invoice_green_ipa.rdlx-json"))
    });
  }
}

src/styles.cssファイルに以下の内容を追加します。

@import '@grapecity/activereports/styles/ar-js-viewer.css';

レポートファイルとフォントファイルの配置

表示するレポートファイルはsrc/assetsフォルダ配下に配置します。また、PDFエクスポートを行う場合はフォントファイルも同フォルダに配置します。

以下のGitHubで公開しているサンプルレポート(Invoice_green_ipa.rdlx-json)と、フォントファイル(ipag.ttf)をダウンロードして、src/assetsフォルダ配下にコピーして下さい。

レポートファイルとフォントファイルの配置

アプリケーションの実行

以上でアプリケーションの作成は完了です。以下のコマンドを実行して、ローカル環境でアプリケーションを実行します。

ng serve --open

ブラウザでhttp://localhost:4200/が自動的に開き、以下のようにレポートが表示されます。

アプリケーションの実行

サイドバーからPDFなど各種形式へのエクスポートも実行可能です。

サイドバーからエクスポート

PDFへの出力結果

手軽に試せるデモアプリケーションを公開中

製品Webサイトでは、Angularでの使用方法を含めた、ActiveReportsJSの様々な機能をブラウザ上で手軽に試せるデモアプリケーションを公開しています。こちらもぜひご覧ください。

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