GrapeCity.devlog

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

GrapeCity

Angular & Wijmoクイックスタート(Visual Studio for Mac)

本記事では、Wijmo(ウィジモ)を使用して、データグリッドでデータ表示を行うAngularアプリケーションをVisual Studio for Macで作成する方法を紹介します。

Visual Studio 2019と同じように、Visual Studio for MacにもASP.NET Core Web APIをサーバーサイド(バックエンド)にしたシングルページアプリケーション(Single Page Application:SPA)を作成するためのプロジェクトテンプレートが含まれているので、こちらを使用して作成していきます。

プロジェクトの作成

Visual Studio for MacでASP.NET Core Webアプリケーションを選択し、さらにAngularのプロジェクトテンプレートを選択します。

Angularのプロジェクトテンプレート

プロジェクト名はWebApplication1で作成します。

Angularのプロジェクトテンプレート

Angularのプロジェクトテンプレート

ターミナルを起動する

Visual Studio for Macのメニューから[表示]‐[パッド]‐[Terminal]をクリックします。

ターミナルを起動する

Visual Studio for Macにターミナルが表示されます。

ターミナルを起動する

ターミナルでcd WebApplication1/ClientAppを入力してClientAppフォルダに移動しておきます。

ターミナルを起動する

Wijmoのパッケージをインストール

ClientAppフォルダの中身はクライアントサイド(フロントエンド)のAngularアプリケーションになっていますので、ここでnpm installコマンドを使用してWijmoのパッケージをインストールできます。WijmoのAngular用パッケージは

npm install @grapecity/wijmo.angular2.all

でインストールできます。

Wijmoのパッケージをインストール

インストール後、ClientApp\src\app\app.module.tsにJavaScriptモジュールWjGridModuleとして、Wijmoのデータグリッド「FlexGrid(フレックスグリッド)」のパッケージ@grapecity/wijmo.angular2.gridと日本語のカルチャーファイル@grapecity/wijmo.cultures/wijmo.culture.jaを追加します。

import { WjGridModule } from '@grapecity/wijmo.angular2.grid';
import '@grapecity/wijmo.cultures/wijmo.culture.ja';
:

@NgModule({
 :
  imports: [
    WjGridModule,
 :
  ]
})

ClientApp\src\styles.cssにWijmoのスタイル@grapecity/wijmo.styles/wijmo.cssも追加します。

@import '@grapecity/wijmo.styles/wijmo.css';

Wijmoを使うAngularコンポーネントの追加

Wijmoを使うAngularコンポーネントFlexgridComponentを追加します。コマンドプロンプトでAngular CLIのコマンド

ng generate component flexgrid --module=app.module

を実行します。実行するとClientApp\src\appflexgridフォルダが作成されてFlexgridComponentとしてapp.module.tsにコンポーネントが追加されます。

Wijmoを使うAngularコンポーネントの追加

作成したコンポーネントへのルーティングを追加します。

RouterModule.forRoot([
  :
  { path: 'flexgrid', component: FlexgridComponent }
])

コンポーネントへのリンクを追加

ClientApp\src\app\nav-menu\nav-menu.component.htmlを編集してFlexgridComponentへのパスflexgridへのリンクを追加します。

<ul class="navbar-nav flex-grow">
  <li class="nav-item"
              [routerLinkActive]="['link-active']"
              [routerLinkActiveOptions]="{ exact: true }">
    <a class="nav-link text-dark" [routerLink]="['/']">Home</a>
  </li>
  <li class="nav-item" [routerLinkActive]="['link-active']">
    <a class="nav-link text-dark" [routerLink]="['/counter']">Counter</a>
  </li>
  <li class="nav-item" [routerLinkActive]="['link-active']">
    <a class="nav-link text-dark" [routerLink]="['/fetch-data']">Fetch data</a>
  </li>
  <li class="nav-item" [routerLinkActive]="['link-active']">
    <a class="nav-link text-dark" [routerLink]="['/flexgrid']">FlexGrid</a>
  </li>
</ul>

データグリッドを追加

ClientApp\src\app\flexgrid\flexgrid.component.htmlにWijmoのデータグリッド「FlexGrid」を追加します。

<p>flexgrid works!</p>

<wj-flex-grid [itemsSource]="gridData">
  <wj-flex-grid-column header="ID" binding="id" [width]="60"></wj-flex-grid-column>
  <wj-flex-grid-column header="商品名" binding="product" [width]="200"></wj-flex-grid-column>
  <wj-flex-grid-column header="受注日" binding="date" [width]="120"></wj-flex-grid-column>
  <wj-flex-grid-column header="金額" binding="amount" [width]="100" format="c"></wj-flex-grid-column>
</wj-flex-grid>

ClientApp\src\app\flexgrid\flexgrid.component.tsにFlexGridで表示するデータを追加します。

gridData = [
  { id: 15, product: 'ピュアデミグラスソース', date: '2017/01/10', amount: 6000 },
  { id: 17, product: 'だしこんぶ', date: '2017/01/08', amount: 14500 },
  { id: 18, product: 'ピリカラタバスコ', date: '2017/01/12', amount: 4000 },
  { id: 84, product: 'なまわさび', date: '2017/01/21', amount: 8000 }
]

これで準備は完了です!

実行してみる

Visual Studio for Macからデバッグ実行してみます。まずトップページが表示されます。

Visual Studio for Macからデバッグ実行

ナビゲーションメニューの「FlexGrid」をクリックするとhttps://localhost:5001/flexgridにページ遷移します。FlexGridでデータが表示されていればOKです!

Visual Studio for Macからデバッグ実行

ASP.NET Core Web APIから取得したデータも表示してみる

冒頭でも述べたようにこのアプリケーションのサーバーサイドはASP.NET Core Web APIで構成されています。このWeb APIは以下のように天気情報を返すようになっています。

ASP.NET Core Web APIから取得したデータも表示

せっかく用意されているので、上記ページと同じようにFlexGridでもこの天気情報を表示するようにしてみます。

さらにFlexGridを追加

ClientApp\src\app\flexgrid\flexgrid.component.htmlにFlexGridを追加します。

<p>flexgrid works!</p>

<wj-flex-grid [itemsSource]="gridData">
  <wj-flex-grid-column header="ID" binding="id" [width]="60"></wj-flex-grid-column>
  <wj-flex-grid-column header="商品名" binding="product" [width]="200"></wj-flex-grid-column>
  <wj-flex-grid-column header="受注日" binding="date" [width]="120"></wj-flex-grid-column>
  <wj-flex-grid-column header="金額" binding="amount" [width]="100" format="c"></wj-flex-grid-column>
</wj-flex-grid>

<wj-flex-grid [itemsSource]="forecasts">
  <wj-flex-grid-column header="Date" binding="date" [width]="300"></wj-flex-grid-column>
  <wj-flex-grid-column header="Temp. (C)" binding="temperatureC" [width]="200"></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]="100"></wj-flex-grid-column>
</wj-flex-grid>
Web APIから天気情報の取得

ClientApp\src\app\flexgrid\flexgrid.component.tsにHttpClientを注入してさらにWeb APIからデータを取得するコードを追加します。このコードはClientApp\src\app\fetch-data\fetch-data.component.tsに記載されています。

import { Component, OnInit, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-flexgrid',
  templateUrl: './flexgrid.component.html',
  styleUrls: ['./flexgrid.component.css']
})
export class FlexgridComponent implements OnInit {

  ngOnInit() {
  }

  gridData = [
    { id: 15, product: 'ピュアデミグラスソース', date: '2017/01/10', amount: 6000 },
    { id: 17, product: 'だしこんぶ', date: '2017/01/08', amount: 14500 },
    { id: 18, product: 'ピリカラタバスコ', date: '2017/01/12', amount: 4000 },
    { id: 84, product: 'なまわさび', date: '2017/01/21', amount: 8000 }
  ]

  public forecasts: WeatherForecast[];

  constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
    http.get<WeatherForecast[]>(baseUrl + 'weatherforecast').subscribe(result => {
      this.forecasts = result;
    }, error => console.error(error));
  }
}

interface WeatherForecast {
  date: string;
  temperatureC: number;
  temperatureF: number;
  summary: string;
}

実行してみる

先程と同じようにVisual Studio for Macからデバッグ実行してナビゲーションメニューの「FlexGrid」をクリックするとhttps://localhost:5001/flexgridにページ遷移します。2つ目のFlexGridでもデータが表示されていればOKです!

Visual Studio for Macからデバッグ実行

もちろんFlexGridでデータ表示しているのでソートや列幅の変更なども可能です。

Visual Studio for Macからデバッグ実行

Visual Studio for Macからデバッグ実行

まとめ

クライアントサイドはVisual Studio CodeでAngularアプリ、サーバーサイドはVisual StudioでASP.NET Core Web APIアプリという開発方法が一般的かもしれませんが、Visual Studio for Macに用意されているプロジェクトテンプレートを利用することで、Visual Studio for Macだけでも「ASP.NET Core Web API + Angular」なアプリケーションを作成できます。

Wijmoは2020/4/1に最新バージョン「2020J v1」をリリースしました。

新機能も色々と追加しています。

Visual Studio 2019を利用する場合はこちらの記事をご覧ください。

SPAの基本と3大JavaScriptフレームワーク(Angular、React、Vue.js)の最新動向 ~2020年版~

普段のお仕事に役立つ普遍的なプログラミングTIPSや、業界で注目度が高い最新情報をお届けする「編集部ピックアップ」。
今回はSPA(Single Page Application)と、SPAを開発するのに最適な3大JavaScriptフレームワークについてお届けします。


新しいWebアプリケーションの形式として、SPA(Single Page Application)が注目され始めてしばらく経ちますが、今もフレームワークの開発が積極的に行われるなど、未だ勢いは衰えていません。

この記事では、SPAの基本的な考え方と、開発に便利なフレームワーク(Angular、React、Vue.js)の2020年の最新動向を紹介します。

SPAの概要

SPAは近年注目を集めているWebアプリケーションの形式の1つで、「1つのWebページによって、1つのアプリを構築する」というものです。

従来型のアプリケーションでは、ユーザのアクションに応じてサーバーからHTMLを受け取りそのたびにヘッダやフッダを含めて全て更新する方式をとっていました。一方で、SPAでは、最初にHTMLやCSS、JavaScriptを受け取った後は必要なデータだけをサーバに要求し差分を表示する方式で構築されます。

SPAの概念図

上図のように、ページをHTTPで最初にロードしたら、あとは手元のデータを処理するだけでインターフェースが構成されます。必要なデータはサーバーから非同期的にJSONデータとして受け取ることで、通信量を最小限に抑えることも可能です。

SPAのメリット

SPAはユーザーのアクションに応じて必要な差分のデータだけを取得して表示するものでした。そのため、ユーザーの操作の度にデータを丸ごと更新する必要がありません。それにより以下のようなメリットが生まれます。

アプリケーションのUIをリッチにできる

必要なデータだけの更新で良いため、画面遷移のグラフィックなどリッチな表現が可能になります。

高速な更新が可能になる

更新が早くなるため、ユーザーが画面が変わるまで待ち続ける必要がなくなります。

ネイティブアプリのようなアプリを作れる

ダウンロードして利用するタイプのネイティブアプリと同じような挙動を作ることも可能なため、ウェブアプリとネイティブアプリ両方の良さを兼ね備えたアプリも開発できます。

SPAのデメリット

一方、デメリットとして以下のようなものがあります。

最初のローディングに時間がかかる

最初のローディングの際にHTMLやJavaScriptなど全てのデータを取得する必要があるため、比較的初期ローディングに時間がかかります。

実装にコストがかかる

実装する際には、履歴の管理やルーティングなどSPAならではのポイントがあるため、これらを意識した開発が必要になり、また学習コストもかかります。

SPAを作成するためのJavaScriptフレームワーク

SPAを開発するにはコストがかかる、というのをデメリットとして挙げましたが、フレームワークを利用すれば比較的効率的かつ安全に開発を行うことが可能です。ここではAngular、React、Vue.jsの3つの主要なフレームワークを紹介します。

Angular(アンギュラー)

AngularはGoogleが中心となったコミュニティによって開発されているフレームワークです。機能が豊富で、企業向け大規模開発向きといわれることが多いです。

非常に開発スピートが早く年2回のアップグレードが行われることがGoogleからアナウンスされており、2020年6月25日に最新バージョンの「Angular 10」がリリースされたばかりで、2020年秋には次のバージョンの「Angular 11」のリリースが予定されています。

バージョン10では、TypeScript 3.9への対応など依存ライブラリのバージョンアップ、Angular Materialの新しい日付範囲ピッカー、プロジェクト生成時のstrictオプションといった新機能が追加されました。また、ESモジュールが推奨されるようになり、CommonJSやAMDのようなその他のモジュールをバンドルすると、ビルド/実行時に警告が表示されるように変更されています。

React(リアクト)

ReactはFacebookが中心となったコミュニティによって開発されているフレームワークです。

JavaScript の中で HTML/XML を記述する「JSX」という技術が利用可能で、Babel というトランスパイラでES5 のJavaScriptに変換できます。

2020年3月に16.13.1がリリースされています。このリリースでは、React DOMと呼ばれる仮想DOMのバグが修正されています。2020年中にバージョン17がリリースされる予定で、このバージョンではSuspenseと呼ばれる非同期処理をより簡単に行える機能が追加されるなどとして注目を集めています。

Vue.js(ビュージェーエス)

Vue.jsはオープンソースで開発が進められているフレームワークです。

AngularJSの開発に携わっていたEvan You氏により2014年にリリースされたフレームワークで、今回ご紹介する3つのなかでは最も後発です。比較的シンプルであり、既存アプリケーションの一部のみをVue.jsを使ったものに置き換えられる、日本語のドキュメントも充実している、といった点で学習コストが低いと言われています。

Vue.jsは2020年中にv3がリリースされる予定です。メジャーアップデートとなるため、Vueインスタンスの作り方がnew vueからcreateAppを利用するように変更されたり、Teleportと呼ばれるコンテンツを別のエリアへ転送することができる機能が追加されたりと、大幅な更新が行われる予定です。

3大JavaScriptフレームワークにも対応した高機能UIライブラリ

グレープシティでは、今回紹介した3大JavaScriptフレームワークでも使える高機能なJavaScriptライブラリを提供しています。

製品Webサイトではブラウザ上で気軽に試せるデモアプリケーションなどを公開しておりますので、ぜひ一度ご覧ください。

また、昨年弊社で開催したセミナーでは、「SPA」をテーマに、実際に弊社製品とAngularやReactを一緒に使用して開発した事例をご紹介しました。弊社ではこのようなトレンドの技術をテーマとしたセミナーを定期的に開催しております。

数値も日付も色も、マウス操作で簡単入力!SpreadJSのドロップダウンオブジェクト

SpreadJS(スプレッドJS)」の「ドロップダウンオブジェクト」の機能を使用すると、日付・時刻、数値、リスト項目、色をマウス操作だけで簡単に入力できます。

ドロップダウンオブジェクトは、以下の記事でも少しだけ紹介させていただきましたが、今回はさらに掘り下げて、その機能や利用方法を詳しくご説明したいと思います。

  1. ドロップダウンオブジェクトとは?
  2. ドロップダウンオブジェクトを設定する
  3. 「8種類のオブジェクト」の機能と実装例
  4. おわりに
続きを読む

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

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

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

はじめに

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

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

FlexGrid

  • チェックボックス、ラジオボタンのタグを改善
    チェックボックスやラジオボタンのタグの構造を改善して、カスタムスタイルを適用しやすくなります。

MultiRow

  • 行ヘッダーのレイアウト
    行ヘッダー/左上セルを複数行&複数列のレイアウトで表示します。
  • 任意の位置のセルを縦に結合
    任意の位置のセルを縦に結合します。

FlexChart

  • WebGLによるチャートの描画
    WebGL描画に対応してパフォーマンスが向上します。

Input

  • 検証エラー時のフォーカス移動を禁止
    検証エラー発生時に、メッセージを表示して入力コントロールからフォーカスを移動できなくします。
  • ラベル付き入力フォーム
    Angular Materialのように、入力コントロールの状況に応じてスタイルが変化するラベルを表示します。

PopUp

  • ウィンドウ外部への移動を禁止
    ウィンドウ外部への移動を禁止します。
  • 表示位置
    ポップアップの表示位置を指定します。

ToolTip

  • 表示位置
    ツールチップの表示位置を指定します。

PDF

  • セキュリティ設定
    パスワードや印刷許可などのセキュリティ機能を設定します。
  • 双方向テキスト
    アラビア文字などのテキストを右から左に向かって描画します。

新しいコントロール

  • 転置複数行グリッド
    複数行グリッド(MultiRow)の行と列を入れ替えて表示します。
  • アコーディオン
    展開/縮小可能な複数のパネルを表示します。
  • バーコード
    QRコード、GS1-128(コンビニバーコード)などのバーコード画像を表示します。

クラウドサービス連携(Google)

  • Googleスプレッドシート
    Googleスプレッドシートとデータ連結します。
  • Cloud Firestore
    Cloud Firestoreとデータ連結します。リアルタイムでのデータ更新も可能になります。
  • Google APIのOAuth 2.0認証
    Google APIのOAuth 2.0認証処理を行います。

Vue.js

  • Vue.js 3.0
    Vue.js 3.0に対応します。

全般

  • タッチ操作でドラッグアンドドロップ
    タッチイベント処理を実装しなくても、タッチデバイスでドラッグ&ドロップ操作を可能にします。
  • 新しい数値書式
    指数、桁区切り付き固定小数点、桁区切り付き全般、といった書式に対応します。

さいごに

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

セル値と数式、文字列を連結!SpreadJSの「書式文字列」機能を使う

WebアプリケーションのクライアントサイドでExcelライクなUIを実現できる高性能JavaScriptライブラリ「SpreadJS(スプレッドJS)」。今回は最新版の「V13.1J」で追加された新しい機能「書式文字列」の使い方を詳しくご紹介します。

書式文字列

プログラミングのご経験がある方は様々な言語に実装されているprintf関数をお使いになったことがあるかと思います。C言語の例を挙げると

int num = 20;
printf("降水確率は%dパーセントです", num);

とすることで、以下のような出力を得られる関数です。

降水確率は20パーセントです。

この関数の第1引数に設定された文字列は「書式文字列」と呼ばれる特殊な文字列です。変換指定子('%d'の部分)を含んだ記述が可能になっており、printf関数はこの指定子を第2引数以降に設定された変数の内容に変換して、最終的な出力にします。

「V13.1J」で追加されたSpreadJSの書式文字列機能は、このprintf関数のような出力をセル上で実現する機能です。以下では同機能の基本的な使い方と実用例をご紹介します。

基本的な使い方

2つの変換指定子

SpreadJSの書式文字列で使える変換指定子は下記の2種類です。

@アットマーク。書式文字列内でのセルの値を示します。
{{}} 二重波括弧。書式文字列内で数式を使う際に使用します。

以降の項目では各指定子を利用した書式文字列機能の基本的な用法をご紹介します。

変換指定子「@」

「@」は書式文字列内でセルの値を示します。以下はこの変換指定子を使ったコード例です。

// セルB2に担当者名を設定します
var cell = sheet.getCell(1,1);
cell.value("グレープ太郎");

// 書式文字列機能を使い「担当:」の文字とセル値を組み合わせて表示します
var style = sheet.getStyle(1, 1);
style.formatter = "担当:@";

このコードでは「グレープ太郎」という値をもったセルに書式文字列「担当者:@」を設定しています。実行結果はこちらのサンプルで確認可能です。


書式文字列にある「@」がセル値となって表示されました。また、B2セルをダブルクリックして編集状態にすることで、セル値が「グレープ太郎」のみであることも確認できます。

変換指定子「{{}}」

「{{}}」を使って書式文字列内に数式を記述できます。またこの際、SpreadJS組み込みの表計算関数も利用可能です。以下はこの変換指定子を使ったコード例です。

// セルにデータを設定します
sheet.setValue(1,1,"午前");
sheet.setValue(1,2,"午後");
sheet.setValue(1,3,"集計データ");
sheet.setValue(2,1, 123);
sheet.setValue(2,2, 732);
sheet.setValue(2,3, "1日の合計は");

// 書式文字列機能を使い数式とセル値を組み合わせて表示します
var style = sheet.getStyle(2, 3);
style.formatter = "午前{{=B3}}、午後{{=C3}}、{{=@}}{{=SUM(B3:C3)}}です。";
sheet.setStyle(2,3,style);

このコードでは、B3とC3セルの内容およびその合計を文字列に代入してセルに表示しています。実行結果はこちらのサンプルで確認可能です。


実用例

基本的な用法を押さえたところで、次は実際の活用例を考えてみたいと思います。今回は以下のような明細表示画面を想定し、2つのポイントで書式文字列機能を使います。

ご注文明細

1. 敬称の自動付与

Excelで入力フォームや名前入りの明細を作る際、以下のようなレイアウトを組んだことのある方は多いのではないでしょうか。

テンプレート中の敬称表記例

名前を入れるセルと「様」などの敬称を表示するセルを分けてつくるやり方です。実際のデータになる部分と、テンプレート上のラベルに相当する部分を分離するため、スプレッドシート上でこのようなレイアウトになるのはほぼ必然なのですが敬称の表記用に1マス分を確保しながらレイアウト調整するのは大変です。

SpreadJSの書式文字列機能を使うと、この問題を回避しつつ画面のレイアウトもより簡潔にすることができます。以下にコード例を示します。

// 「お名前」のデータを設定します
sheet.setValue(3, 2, "グレープ太郎");

// 書式文字列で敬称「様」が表示されるように設定します
var styleName = sheet.getStyle(3, 2);
styleName.formatter = "@ 様";
sheet.setStyle(3, 2, styleName);

このコードでは、変換指定子「@」と文字列「様」を組み合わせて名前の末尾に敬称を付与しています。実行結果はこちらのサンプルで確認可能です。


このようにすることで、前述のようなレイアウトで敬称表示の為だけにセルを用意する必要がなくなります。

2. シートデータと連動するメッセージ

アプリケーションの利用者に対して、動的なデータを含むメッセージを表示したい場合、プログラミングでは独自の実装、ExcelではCONCATENATE関数やTEXTJOIN関数を用いたデータと文字列の連結などが必要になってきます。このような処理もSpreadJSの書式文字列機能を使えばたった数行のコードで実現することが可能です。

今回は同機能を使って、以下のようなメッセージを表示してみたいと思います。赤字で示した部分の表示を変換指定子「{{}}」を利用した数式の記述で実現します。


ご注文ありがとうございました。
ご購入数(シート上にある「個数」データの合計)点、
合計で(シート上にある「価格」データの合計)円です。

本日(TODAY関数を使った日付の表示)から7日以内に
ご登録住所へ請求書をお送りいたします。

以下にコード例を示します。

// 書式文字列を設定して、シート上の情報とその計算結果を含む文字列を表示します
sheet.setValue(12, 1, "ご注文ありがとうございました。");
var styleStoreMessage = sheet.getStyle(12, 1);
styleStoreMessage.formatter = '{{=@}}\nご購入数 {{=sum(C7:C9)}} 点、合計で {{=sum(D7:D9)}} 円です。\n\n本日 {{=TEXT(TODAY(),"yyyy年m月d日")}} から 7 日以内に\nご登録住所へ請求書をお送りいたします。';
sheet.setStyle(12, 1, styleStoreMessage);

1.のサンプルにこのコードを加えた動作サンプルを以下に示します。


赤い点線で強調されている部分が、今回ご紹介の書式文字列機能を用いた部分です。それぞれのセルをダブルクリックして編集状態にすると、セルに設定されている生のデータを確認できます。このとき表示される文字列以外はすべて書式文字列機能によって生成・表示されています。

シート下部にある「ストアからのメッセージ」では、変換指定子「{{}}」を使用してシート上のデータを参照しながらメッセージを表示していることが確認できます。なお、これらのデータを変更した場合はメッセージも追従して更新されます。

Excelより使いやすく

今回はSpreadJS V13.1Jで登場した書式文字列機能をご紹介しました。「Excelライク」をコンセプトに開発されたSpreadJSですが今回のように「Excelよりも使いやすく」なる機能も実はたくさん搭載されています。弊社のウェブサイトでは、そのような部分も含めて網羅的に機能をお試しいただける製品デモを公開していますので、是非こちらもご確認ください。

ASP.NET MVC で Wijmo を使う ― ブログ記事紹介

株式会社 芳和システムデザイン」様のブログで弊社のJavaScriptライブラリ「Wijmo(ウィジモ)」をご紹介いただきました。

同ブログでは、ASP.NET MVCアプリケーションのビュー(View)としてWijmoに収録されている高機能データグリッド「FlexGrid(フレックスグリッド)」でデータを表示する方法が詳しく解説されています。

JavaScriptライブラリというと、フロントエンド開発においてHTML + JavaScript + CSSで作成するシングルページアプリケーション(SPA:Single Page Application)での利用をイメージする方が多いかと思いますが、同ブログでご紹介いただいているようにASP.NET MVCアプリケーションで使用することも可能です。

具体的な実装手順を解説いただいていますので、ASP.NET MVCでのWijmoの利用方法が気になった方は是非ご覧ください!

この記事に続く連載を楽しみに待っている弊社の編集部です。


ASP.NET MVCといえば…

弊社でリリースしているASP.NET MVCを対象にした製品といえば「ComponentOne for ASP.NET MVC(コンポーネントワン)」があります。こちらはWijmoとは異なり、ASP.NET MVCとASP.NET Core MVCでのみご利用いただけます。


Wijmoが気になった方はこちらのデモで機能をお試しいただけます。

ActiveReportsJSでブラウザ上にPDFを直接表示する

先日公開した記事では、帳票ビューワのサイドバーからレポートをPDFエクスポートする方法をご紹介しました。

この方法で出力されたPDFは、一旦クライアント環境に保存して開くことになりますが、要件によっては、保存せずにそのままブラウザ上にPDFを出力したい場合もあると思います。

今回はActiveReportsJSで作成したPDFをブラウザに直接表示する方法をご紹介したいと思います。

アプリケーションの作成

前述の記事で作成したアプリケーションをベースにします。
お急ぎの方はGitHubでソースコードを公開しているので、こちらをお使いください。

HTMLファイルの修正

index.htmlを以下のように書き換え、ビューワを使用せずにPDF出力用のボタンを配置します。

<body>
    <button onclick="runExport()" style="font-size: 3em;">PDF出力</button>
</body>

JSファイルの修正

index.jsを以下のように書き換え、exportDocumentメソッドが返却するBLOBオブジェクトからPDFを開きます。 なお、IEやChromium版でない旧Edgeでは、セキュリティの関係上、直接ブラウザには表示できませんのでご注意ください。

// IEで動作させる場合は以下も追加
import '@grapecity/activereports/dist/ie-polyfills';
import * as GCAR from '@grapecity/activereports';
import '@grapecity/activereports-localization';

// レポートファイル読込
import './reports/invoice_green_ipa.rdlx-json';
import './fonts/ipag.ttf';

window.runExport = function(){
    const pageReport = new GCAR.Core.PageReport();
    const pdfExport = GCAR.PdfExport;

    // フォント記述子の定義
    var IPAGothic = {
        name: 'IPAゴシック',
        source: './fonts/ipag.ttf'
    };

    const setting = {
        pdfVersion: '1.7',
        fonts: IPAGothic
    };

    pageReport.load('./reports/invoice_green_ipa.rdlx-json')
        .then(function() { return pageReport.run() })
        .then(function(pageDocument) { return pdfExport.exportDocument(pageDocument, setting) })
        .then(function(result) { 
            if (window.navigator.msSaveOrOpenBlob)
            {
                // IE,Edgeの場合、保存ダイアログを開きます
                window.navigator.msSaveOrOpenBlob(result.data, "sample.pdf");  
            }
            else 
            {
                // PDF表示用のURLを生成し、別タブで開きます
                var url = URL.createObjectURL(result.data); 
                window.open(url);
            }    
        });
}

アプリケーションの実行

以下のコマンドを実行して、プロジェクトをビルドします。

npm run build

ビルド完了後、distフォルダにビルドされたファイルが出力されるので、Visual Studio Codeの拡張機能の「Live Server」を使用して実行します。

distフォルダ配下に生成されたindex.htmlを右クリックし、コンテキストメニューから「Open with Live Server」をクリックします。

Live Serverで実行

起動したブラウザ上の[PDF表示]ボタンをクリックすると、PDF形式で出力された帳票が別タブで開きます。

PDFをブラウザで表示

V1.2Jをリリース!

2020年5月27日にActiveReportsJSの最新サービスパック「V1.2J」をリリースしました。新しいコントロールの追加や、SVG形式の画像表示への対応など、様々な機能強化が行われていますので、こちらも是非チェックしてみて下さい。

Eclipseが提供する統合開発環境「Eclipse Theia」。Visual Studio Codeとの違いは?

普段のお仕事に役立つ普遍的なプログラミングTIPSや、業界で注目度が高い最新情報をお届けする「編集部ピックアップ」。今回はVisual Studio Codeの代替として注目される「Eclipse Theia」についてお届けします。


Visual Studio Code」(以下、VS Code)はクロスプラットフォームで使えるコードエディタとして多くの開発者に使用されていますが、そのVS Codeの代替を目指し、Eclipse Foundationが提供しているのが「Eclipse Theia」(以下、Theia)です。

本記事では、2020年4月3日にバージョン1.0がリリースされた、Theiaの基本的な特徴や使い方を紹介します。

Theiaとは?

Theiaは、VS Codeの代替を目指す新興のエディタです。Web・クラウドベースのツールと統合開発環境(IDE)を構築するためのオープンソースプラットフォームとして提供されている点が特徴的です。

VS Codeの代替を狙っているだけあり、ワークベンチやモジュールシステム、Git統合と言ったVS Codeにも実装されている基本的な機能は提供されています。

これに加えて、Language Server Protocolに対応することで、JavaScriptやPython、Javaなどをはじめとするさまざまなプログラミング言語に対応しているため幅広い開発場面で利用できます。
Language Server Protocolとは、コード補完や文法チェックを実現するオープンな標準であり、多くの統合開発環境で利用されています。

通常、VS Codeはサードパーティ製の拡張機能をインストールして利用することができます。しかし、VS Codeを開発しているマイクロソフト社はVS Code以外から拡張機能へアクセスできない規約を用意しています。
そんな中、Open VSX Registryというマーケットプレイスを公開し、さまざまなIDEで利用できる拡張機能をアクセスし利用できるようにしています。

これは、TheiaをはじめとするIDEで自由に拡張機能を利用できるようにするもので、極めてオープンソース的な性質を帯びている仕組みになっています。

Theiaの使い方

Theiaを利用する方法はいくつかあります。

まず、公式のDockerイメージを利用する場合の利用方法です。

あらかじめ、編集したいファイルがあるディレクトリーへ移動します。その後以下のコマンドを実行してコンテナを立ち上げます。

docker run -it -p 3000:3000 -v $PWD:/home/project theiaide/theia

その後、http://localhost:3000へアクセスすると編集が可能になっています。

DockerからTheiaを実行

Dockerを使う方法以外にも、クラウド環境で使用することもできます。その場合は、以下のURLをクリックし、ページが遷移したのち、GitHubアカウントでログインします。

ログインが正常に行われるとフリーアカウントが作成されており、エディタが起動されます。

GitpodからTheiaを実行

VS Codeとの比較

TheiaはVS Codeの代替として開発されていますが、具体的にどのような点が異なるのかをみていきましょう。ここでは大きく4点取り上げます。

特定のベンダーに所属しない(ベンダーニュートラルな)オープンソース

VS Codeはマイクロソフト社によって開発されており、開発の方針や機能追加に関して同社の動向の影響を受けやすくなります。
最近では、GitHubやNPM(Node Package Manager)を買収して傘下に収めているため、機能性を大きく向上し始めています。

一方、Theiaは開発がオープンソースで進められているため、特定のプレイヤーの干渉を受けることが基本的にありません。
すでに紹介したOpen VSX Registryが特定のエディタに縛られないアクセスを提供している点からも分かる通り、このようなベンダーフリーの姿勢はVS Codeとの大きな違いになります。

多様性

VS Codeと比べてTheiaには、拡張機能の多様性に期待できる点も特徴と言えます。

すでに紹介したOpen VSX Registryは多くのIDEで利用できるようにオープンプラットフォームとして運営されていることに加え、VS Codeの拡張機能も取り込むために開発者への呼びかけを行っています。

将来的には、開発言語面や機能面で多様性が高まっていき、さまざまな開発ニーズにきめ細かく対応できるようになるでしょう。

利用環境

VS Codeはローカル環境へインストールして利用すれば、オフラインであっても利用することが可能です。

しかし、Theiaはオフライン環境で利用するには一手間必要になります。当然クラウド環境であれば、インターネット接続がない場合は使うことができません。また、Dockerコンテナをオフライン環境で使うには、予め環境をセッティングしておく必要があります。

環境依存

TheiaはDockerコンテナやクラウド環境で利用することができるため、大きな環境依存の問題が起こりにくいことが期待できます。

また、多人数で開発する際にも、同じ環境を共有することが簡単なため効率よく開発することが可能です。

Web・クラウドベースの開発環境はチーム開発が主流となっている現在では有用なツールであると言えるでしょう。


業務システム開発を支援するグレープシティのJavaScriptライブラリ

グレープシティでは業務システム開発を強力にサポートするJavaScriptライブラリを提供しています。標準ツールとしてのUIセットから用途特化型の各種コントロールや帳票ライブラリまで、豊富なラインナップを揃えています。

製品Webサイトではデモアプリケーションや無料で試せるトライアル版を公開していますので、是非一度ご覧ください。

ActiveReportsJS V1.2Jリリース!

ActiveReportsJS(アクティブレポートJS)の最新サービスパック「ActiveReportsJS V1.2J」を2020年5月27日(水)にリリースしました。

本バージョンでは、これまでにお客様からご報告いただいた不具合の修正に加えて以下のような新機能追加、機能強化を実施しています。

新機能・機能強化の概要

新しいコントロールを追加

Header、Footer、Detailsなどの「バンド」を使って帳票をデザインするデータ領域「BandedList」コントロールを追加しました。

BandedListコントロール

そのほか、PDFフォームを作成するためのレポートコントロール「InputField」も追加しています。

InputFieldコントロール

SVG形式の画像に対応

ImageコントロールでSVG形式の画像が使用できるようになりました。 デザイナ、ビューワでの表示のほか、PDF、Excel、HTML形式にエクスポートした場合にも対応します。

SVG形式の画像に対応<

Wijmoとの連携サンプル・デモを追加

JavaScript開発ライブラリ「Wijmo(ウィジモ)」のFlexGrid上に入力・表示されたデータを、ActiveReportsJSで帳票として出力するサンプルアプリケーションを、製品同梱のサンプルとして追加しました。

Wijmoとの連携サンプル・デモを追加

また、同サンプルをデモアプリケーションとして公開しています。

上記を含め、すべての新機能は製品Webサイトをご確認ください。

SpreadJS V13.1Jリリース!

SpreadJS(スプレッドJS)の最新サービスパック「SpreadJS V13.1J」(以下、V13.1J)を2020年5月15日(金)にリリースしました。

リスト幅の自動調整

同バージョンでは、これまでにお客様からご報告いただいた不具合の修正に加えて以下のような新機能追加、機能強化を実施しています。

新機能・機能強化の概要

ワークブック関連

セルに設定された数式を表示するshowFormulasオプションを追加しました。

showFormulasオプション
showFormulasオプションの動作例

シート関連

UIによる操作性が向上しました。コンテキストメニューによる「コピーしたセルの挿入」が可能になったほか、マウスとキーボードを使用した「シートタブの複数選択」が可能になりました。

コピーしたセルの挿入
コピーしたセルの挿入

セル関連

Excel互換の「ハイパーリンク表示」が可能になったほかドロップダウンオブジェクト使用時における「リスト項目の複数選択」などができるようになりました。

リスト項目の複数選択
リスト項目の複数選択

スタイル関連

「セルの状態に応じたスタイル設定」で、ダーティセル(変更のあったセル)のスタイル設定ができるようになりました。

ダーティセルの自動スタイル設定
ダーティセルの自動スタイル設定

書式設定関連

数式を使った書式設定ができる「書式文字列」機能を追加しました。

書式文字列の使用例
書式文字列の使用例

また「セルデータの省略表示」が可能になったほか、以下2つのExcel互換書式設定に対応しました。

  • 和暦初年の元年表示を指定する"[$-ja-JP-x-gannen]"
  • パーセント表記を指定する"0.00%"

チャート関連

チャート描画時の線種として、点線や破線、一点鎖線や二点鎖線を設定できるようになりました。また、チャート軸の単位として「年」「月」「日」といった時間の設定に対応しました。

様々なチャート線種
様々なチャート線種

このほか、「V13.1J」では合計20を超える機能追加・機能強化が実施されています。製品のWebサイトでは上記をはじめ各強化機能をそれぞれサンプル画像付きでご紹介していますので、是非ご確認ください。

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