GrapeCity.devlog

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

GrapeCity

「ActiveReportsJS」のTablixコントロールで、複数データのクロス集計にトライ ― CodeZine記事

開発者のための実装系Webマガジン「CodeZine」で「『ActiveReportsJS』のTablixコントロールで、複数データのクロス集計にトライ」が公開されました。
モダンWeb開発に適した高品質な帳票開発ライブラリ「ActiveReportsJS(アクティブレポートJS)」の基本的な活用方法を紹介する連載の第3回目です。

今回は、複数データ項目を掛け合わせて集計するクロス集計をテーマに、柔軟な表が表示できるTablixレポートコントロールの利用法について紹介しています。Tablixの集計機能を利用することで、開発者は集計処理を実装することなく、集計するデータをTablixに渡すだけで複雑なクロス集計を行えます。
以下で紹介している第1回、2回と併せてご覧ください。

「ActiveReportsJS」ではじめるフロントエンド帳票開発

第1回

第2回

こんな方にオススメ

  • Webページに帳票出力機能を実装したい方
  • ActiveReportsJSの利用法を順を追って学びたい方
  • 元のデータは加工せず、データ処理はライブラリに任せたい方

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

SpreadJS V13.2Jリリース!

SpreadJS(スプレッドJS)の最新サービスパック「SpreadJS V13.2J」(以下、V13.2J)を2020年9月16日(水)にリリースしました。同バージョンでは不具合の修正に加えて、様々な機能追加が行われています。

V13.2J の概要

人気のJavaScriptフレームワークに対応したデモ

製品の使用方法を網羅的に確認できる「チュートリアルデモ」に、人気のJavaScriptフレームワークを使用したサンプルを追加しました。同デモの各ページでは、SpreadJSの機能解説と共にAngular、React、Vue.jsを使ったサンプルコードとその動作をご確認いただけます。

新しいInputManJSセル

InputManJS(インプットマンJS)の機能を使って高度な入力を実現できる「InputManJSセル」機能を強化しました。これまでに利用可能だったGcMask型セル、GcNumber型セル、GcDateTime型セルに加えて「GcComboBox型セル」の利用が可能になりました。

チャートデータラベルのカスタマイズ

チャートのデータラベルを柔軟にカスタマイズできるようになりました。この機能を利用することにより、データシリーズごとにデータラベルの文字色や背景色、境界線の幅を設定できます。

データラベルのカスタマイズ

スクロールバー表示のカスタマイズ

スクロールバー表示のカスタマイズが可能になり、スクロール操作時やシート端エリアでのマウスホバー時にのみスクロールバーが表示されるようにしたり、CSSによる外観設定ができるようになりました。

機能例:シート端のマウスホバーによるスクロールバー表示

詳細をWebサイトで確認!

このほか、グループ化したデータのソートや、ズーム操作関連のイベント追加など数々の機能追加・強化が実施されています。製品のWebサイトではこれらの詳細をご紹介していますので、是非ご確認ください。

Wijmoのカスタムエディタでデータ入力を効率化する

2020年8月19日にJavaScriptライブラリ「Wijmo(ウィジモ)」の最新バージョン「2020J v2」をリリースしました。

今回はこの「2020J v2」で追加された機能の中から、データグリッドコントロール「FlexGrid(フレックスグリッド)」の「カスタムエディタ」を使用して、セルのデータ入力を効率化する方法を紹介します。

デフォルトのデータ入力

FlexGridにはMicrosoft Excelのようなセルのデータ入力機能が実装されています。まずはFlexGridに備わっている標準の入力機能をふりかえってみましょう。

1. クイック編集

エンドユーザーは、任意のセルを選択して入力を開始するだけで簡単にデータを編集できます。

これは「クイック編集」モードと呼ばれます。このモードでは、カーソルキーを押すと編集を終了してセルの選択を移動します。

2. 完全編集

F2キーを押すか、セルをダブルクリックして入力を開始する機能です。

こちらは「完全編集」モードと呼ばれます。このモードでは、カーソルキーを押すとエディタ内でキャレットが移動され、編集を終了するためにはEnterTabEscキーいずれかをクリックする必要があります。

「クリック編集」と「完全編集」のどちらのモードでも、入力されたデータをFlexGridが自動的に解析し、それをセルの適切なデータ型に変換します。変換が失敗した場合は元の値が復元されます。

データに合わせた入力方法(カスタムエディタ)

日付や時刻、固定の増分を持つ数値、県名や市町村名などリストで保持しておける固有名称のテキストなどの入力では、上記の入力方法で一文字ずつ入力していくのはどうしても手間がかかります。そこで登場するのが、これらのデータを効率よく入力するための「カスタムエディタ」です。

このカスタムエディタは以下のように入力したいデータにあわせて、Wijmoの入力コントロールをFlexGridのセルのエディタとして設定できます。

  • 日付入力:InputDateコントロール
  • 時刻入力:InputTimeコントロール
  • 数値入力:InputNumberコントロール
  • テキスト入力:ComboBoxコントロール、AutoCompleteコントロール

実際のコードではColumnクラスcolumnseditorプロパティで使用する入力コントロールを設定します。

new FlexGrid('#theGrid', {
    :
    :
    columns: [
        { header: 'ID', binding: 'id', width: 80, isReadOnly: true },
        {
            header: '日付', binding: 'date', format: 'd',
            editor: new InputDate(document.createElement('div'))
        },
        {
            header: '時刻', binding: 'time', format: 't',
            editor: new InputTime(document.createElement('div'), {
                isEditable: true,
                format: 't',
                min: '7:00',
                max: '22:00',
                step: 30
            })
        },
        {
            header: '国', binding: 'country',
            editor: new ComboBox(document.createElement('div'), {
                itemsSource: getCountries()
            })
        },
        {
            header: '商品', binding: 'productId',
            dataMap: new DataMap(getProducts(), 'id', 'name'),
            editor: new AutoComplete(document.createElement('div'), {
                itemsSource: getProducts(),
                selectedValuePath: 'id',
                displayMemberPath: 'name'
            })
        },
        {
            header: '金額', binding: 'amount', format: 'n2',
            editor: new InputNumber(document.createElement('div'), {
                format: 'n2',
                step: 10,
                min: 0,
                max: 1000
            })
        },
    ],
    :
    :
});

このようにデータのフォーマットに合わせてカスタムエディタを利用することで、セルへのデータ入力を効率よく行うことが可能になります。


本記事ではカスタムエディタを紹介しましたが、その他にもFlexGridは豊富な機能を揃えています。実際の動作はこちらのデモでご確認いただけます。

Wijmoの「2020J v2」には今回紹介したカスタムエディタ以外にも様々な新機能追加・機能強化が行われており、その内容はこちらのページで確認することができます。

Angular 10の新機能「日付範囲ピッカー」を試してみた

普段のお仕事に役立つ普遍的なプログラミングTIPSや、業界で注目度が高い最新情報をお届けする「編集部ピックアップ」。
今回は「Angular 10」で追加されたAngular Materialの「日付範囲ピッカー」についてお届けします。


フロントエンドJavaScriptフレームワーク「Angular」では現在、メジャーバージョンとして2020年6月末にリリースされた10系が利用可能です。

Angular 10では、さまざまな面で改良が加えられていますが、今回はその中からAngular Materialに新しく追加された日付範囲ピッカーをご紹介したいと思います。

Angular 10について

Angular 10は、リリースが遅れたAngular 9のリリースからわずか4カ月でリリースされました。このメジャーバージョンアップでは、この記事で紹介する日付範囲ピッカーの他にも以下のような変更が行われています。

  • CommonJSインポートに関する警告
  • strictオプションによる厳格な設定
  • エコシステムの最新化
  • 新しいデフォルトのブラウザ設定

この中でも特に、エコシステムを最新に保つための変更と、デフォルトブラウザの設定変更には注意しておきましょう。

Angular 10になってから、利用されているTypeScriptは3.9へ変更されTSLintはv6に変わっています。また、デフォルトブラウザに対しては、古いブラウザやあまり利用されていないブラウザの除外が行われており、全体的に対応しているブラウザが整理されています。

このようなバージョン関連の変更は予期せぬエラーの原因になる可能性があるため、適切に対応するようにしましょう。

Angular Materialとは

Angular Materialは、Angularで利用できるコンポーネントで、Angularの開発の中心であるGoogleが提唱しているMaterial Designに基づいた設計となっています。提供されているコンポーネントを組み合わせることで効率的にUIを組み立てることが可能です。

入力やボタン、カードなど使用頻度の高いコンポーネントから、プログレススピナーやステッパーなどよりリッチなUIのコンポーネントまで、さまざなものが提供されています。

今回Angular 10で追加された日付範囲ピッカーは、Angular 9以前から提供されていた日付ピッカーの一部として利用可能になっています。

Angular Materialのインストール

日付範囲ピッカーの説明の前に、まずはAngular Materialの使い方を紹介したいと思います。

こちらを参考に新しいAngularアプリケーションを作成したら、コンソールなどから以下のコマンドを実行してAngular Materialをインストールします。途中、使用するテーマや、アニメーションの有効化について確認されますが、今回はすべてデフォルトの設定で進めます。

ng add @angular/material

日付ピッカーの使い方

Angular Materialの日付ピッカーは、「Input」や「Form Field」などいくつかの別のコンポーネントやディレクティブと共に機能します。app/app.module.tsに以下を追加して、必要なコンポーネントをインポートします。

import {MatFormFieldModule} from '@angular/material/form-field';
import {MatInputModule} from '@angular/material/input';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatNativeDateModule} from '@angular/material/core';
・
・
・
  imports: [
・
・
    MatFormFieldModule,
    MatInputModule,
    MatDatepickerModule,
    MatNativeDateModule
  ],

app/app.component.htmlの内容を以下に書き換えます。

<mat-form-field appearance="fill" class="example-form-field" >
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

app/app.component.cssに以下を追加して、余白の設定を行います。

.example-form-field {
    margin: 1em 0.5em 1.5em 1em;
  }

以下のコマンドを実行して、アプリケーションを起動します。

ng serve --open

起動すると、以下のように日付ピッカーが表示されます。このコンポーネントで特徴的な部分は、入力とカレンダーのポップアップがmatDatepickerを介して統一されているところです。

カレンダーの表示はカスタマイズ可能で、一例として「startView」「[startAt]」を設定することで、カレンダーの初期表示の状態を変更できます。startViewには、monthyearmulti-yearが選択でき、デフォルトではmonthが設定されています。

app/app.component.htmlの中のmat-datepickerの記述を以下のように変更します。

<mat-datepicker #picker startView="year" [startAt]="startDate"></mat-datepicker>

また、app/app.component.tsに、以下のように初期表示する日付を定義します。今回はカレンダーを開いたときに2021年1月が最初に表示されるように設定します。

export class AppComponent {
  startDate = new Date(2021, 0, 1);
}

初期表示をカスタマイズ

日付範囲ピッカーの使い方

ここから日付範囲ピッカーの紹介です。ユーザーに日付を一つだけではなく範囲で入力させたい場合、「mat-date-range-input」および「mat-date-range-picker」コンポーネントを使用します。これらはmat-datepickerと同じように機能します。

mat-date-range-inputコンポーネントではinputが2つの必要で、それぞれ開始日と終了日を指定します。app/app.component.htmlの内容を以下のように書き換えます。

<mat-form-field class="example-form-field" >
  <mat-label>Enter a date range</mat-label>
  <mat-date-range-input [rangePicker]="picker">
    <input matStartDate matInput placeholder="Start date">
    <input matEndDate matInput placeholder="End date">
  </mat-date-range-input>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>

再度実行すると、以下のように日付の範囲入力が可能になります。

カレンダーを日本語化する

日付ピッカーは日本語ロケールの設定をすることで、日本のカレンダー書式でも表示できます。元々のロケールは「en-US」で設定されていますが、app/app.module.tsに以下を追加して、日本のロケールを設定できます。

import { MAT_DATE_LOCALE } from '@angular/material/core';
・
・
@NgModule({
・
・
  providers: [
    {provide: MAT_DATE_LOCALE, useValue: 'ja-JP'},
  ],

再度実行すると、以下のようにカレンダーが日本語化されます。

カレンダーを日本語化

ただし、この状態だと、日付にすべて「日」がくっついて表示されるのでちょっと微妙ですね…。これを解消するにはいくつか方法がありますが、日付操作ができる「momentライブラリ」を使用する方法をご紹介します。

まずは、以下の2つのパッケージをインストールします。

npm install moment
npm install @angular/material-moment-adapter

app/app.module.tsを以下のように修正します。

import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import { MAT_MOMENT_DATE_FORMATS, MomentDateAdapter } from '@angular/material-moment-adapter';
・
・
・
  providers: [
    { provide: MAT_DATE_LOCALE, useValue: 'ja-JP' },
    { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
    { provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS },
  ],
・
・

再度実行すると、以下のように日付に「日」の付かない日本語カレンダーが表示されます。

ただ、こちらもよく見ると、「9月 2020」のように、「年」と「月」の順番が入れ替わって表示されてしまうので、完璧ではないですね。他にもDateAdapterを継承してカスタムする方法など、カレンダーの日本語化にはいくつか方法があります。

2つの日付範囲を比較表示する

日付範囲ピッカーでは、日程の比較を行うことも簡単に行えます。旅行やイベントの日程を決める際によくみられるようなUIを非常に簡単に実装することができます。

app/app.module.tsに以下を追加します。

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
・
・
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
・
・
・
    FormsModule,
    ReactiveFormsModule
  ],

app/app.module.tsを以下のように書き換えます。

import { Component } from '@angular/core';
import {FormGroup, FormControl} from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  campaignOne: FormGroup;
  campaignTwo: FormGroup;

  title = 'datepicker-sample';

  constructor() {
    const today = new Date();
    const month = today.getMonth();
    const year = today.getFullYear();

    this.campaignOne = new FormGroup({
      start: new FormControl(new Date(year, month, 13)),
      end: new FormControl(new Date(year, month, 16))
    });

    this.campaignTwo = new FormGroup({
      start: new FormControl(new Date(year, month, 15)),
      end: new FormControl(new Date(year, month, 19))
    });
  }
}

app/app.component.htmlを以下のように書き換えます。

<mat-form-field class="example-form-field" appearance="fill">
  <mat-label>First campaign</mat-label>
  <mat-date-range-input
    [formGroup]="campaignOne"
    [rangePicker]="campaignOnePicker"
    [comparisonStart]="campaignTwo.value.start"
    [comparisonEnd]="campaignTwo.value.end">
    <input matStartDate placeholder="Start date" formControlName="start">
    <input matEndDate placeholder="End date" formControlName="end">
  </mat-date-range-input>
  <mat-datepicker-toggle matSuffix [for]="campaignOnePicker"></mat-datepicker-toggle>
  <mat-date-range-picker #campaignOnePicker></mat-date-range-picker>
</mat-form-field>

<mat-form-field class="example-form-field" appearance="fill">
  <mat-label>Second campaign</mat-label>
  <mat-date-range-input
    [formGroup]="campaignTwo"
    [rangePicker]="campaignTwoPicker"
    [comparisonStart]="campaignOne.value.start"
    [comparisonEnd]="campaignOne.value.end">
    <input matStartDate placeholder="Start date" formControlName="start">
    <input matEndDate placeholder="End date" formControlName="end">
  </mat-date-range-input>
  <mat-datepicker-toggle matSuffix [for]="campaignTwoPicker"></mat-datepicker-toggle>
  <mat-date-range-picker #campaignTwoPicker></mat-date-range-picker>
</mat-form-field>

再度実行すると、以下のように2つの日付範囲ピッカーに設定された日付を、比較して表示できます。

この他にも、フォームの色を変更できるようにして視認性を高めたり、日付のバリデーションを追加したりすることも可能です。

また、スマートフォンでのユーザビリティへの対応もできるようになっています。これはTouch UI modeと呼ばれる仕組みで、カレンダー部分をタップすると大きなカレンダーが表示され、日付を選択しやすくなるものです。PCだけでなく、スマートフォンのユーザーに対しても対応しやすくなっているのはありがたいポイントの一つだと言えるでしょう。

公式サイトでは、日付範囲ピッカーを含めた各種機能の使い方を、サンプルコードやStaclBlitz上で動かせるサンプルなどで確認することができるので、こちらもご覧ください。

グレープシティのUIコンポーネントの日付範囲ピッカーは?

グレープシティのJavaScriptUIコンポーネント「Wijmo(ウィジモ)」でも、近々新しいコントロールとして、日付範囲ピッカーを追加する計画があります。

新しいコントロール

  • 日付範囲入力
    開始日時と終了日時を選択します。

こちらも他のコントロール同様、日本の業務システムで使いやすいコントロールとなるよう日々開発を進めておりますので、ご期待いただければと思います。

Wijmoの日付入力をはじめとした各種コントロールはこちらのデモサイトからお試しできます。

InputManJS V2.4Jリリース!

InputManJS(インプットマンJS)の最新サービスパック「InputManJS V2.4J」(以下、V2.4J)を2020年9月2日(水)にリリースしました。同バージョンでは不具合の修正に加えて、様々な機能追加が行われています。

V2.4J 機能強化の概要

長体表示とクリアボタン

テキスト、マスク、数値、日付時刻、コンボコントロールで文字列の「長体表示」が可能になったほか、エディタ内の入力内容を削除できる「クリアボタン」の表示が可能になりました。

機能例:長体表示

機能例:クリアボタンの表示

フッタテンプレート機能の強化

リストコントロールとコンボコントロールでフッタテンプレート機能を強化され、JavaScriptコードがテンプレート内に記述できるようになりました。

機能例:JavaScript処理を使ったフッタテンプレート

パスワード入力機能の強化

テキストコントロールでパスワードの入力機能が強化され、パスワード文字による入力内容のマスクを一時的に解除できる「パスワード表示ボタン」が表示できるようになりました。

機能例:パスワード表示ボタン

詳細をWebサイトで確認!

このほかにもリストコントロールとコンボコントロールにおける「ツールチップ」の表示や、アスタリスク記号を使った比率指定によるリストボックスの列幅設定など、様々な機能強化を実施しています。製品のWebサイトではこれらの各強化機能をそれぞれ、動画付きでご紹介していますので、是非ご確認ください。

帳票出力でデータの集計や分類を行える「ActiveReportsJS」のテーブル機能 ― CodeZine記事

グレープシティ開発支援ツール製品の中でも長い歴史をもつ「ActiveReports(アクティブレポート)」。この製品のJavaScrip版である「ActiveReportsJS(アクティブレポートJS)」を皆さんにお気軽にお使いいただけるよう、開発者のための実装系Webマガジン「CodeZine」で基本的な活用方法を紹介する連載をスタートしました!

今回はその第2回として「帳票出力でデータの集計や分類を行える『ActiveReportsJS』のテーブル機能」が公開されました。データの集計やグループ化、フィルタ処理について紹介しています。

第1回では、ActiveReportsJSを初めて使うための基本的な利用法や、データをリストや表に表示する方法を解説していますので、ぜひ以下の記事と併せてご覧ください。

こんな方にオススメ
  • Webページに帳票出力機能を実装したい方
  • ActiveReportsJSの利用法を順を追って学びたい方
  • 元のデータは加工せず、データ処理はライブラリに任せたい方

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

Wijmo 2020J v2リリース!

UIコントロールを数多く収録したJavaScriptライブラリ「Wijmo(ウィジモ)」の新バージョン「2020J v2」を8月19日(水)にリリースしました。 最新のオンラインデモトライアル版も、本日よりご試用いただけます。

Wijmo 2020J v2

Wijmoは年3回のバージョンアップを行っており、最新技術への対応を追求することはもちろん、お客様のニーズに合わせて新コントロールの追加や機能の改善を繰り返しています。「2020J v2」でも、お客様からの声を反映した新機能を多数搭載しています。

  • 新しいコントロールの追加
    • 転置複数行グリッド
    • アコーディオン
    • バーコード
  • カスタムエディタ(FlexGrid)
  • WebGLによるパフォーマンス向上(FlexChart)
  • 検証エラー時のフォーカス移動を禁止(Input)
  • Angular 10対応
  • Vue.js 3.0対応

※ Wijmo Enterprise限定機能

このほかにも、多くのコントロールで機能強化が行われています。Webサイトでは「2020J v2」の機能について、実際に触れるサンプル付きでご紹介しています。

本件についてのニュースリリースは以下よりご確認ください。

Wijmo 2020J v2の新機能

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

Wijmo 2020J v2

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

  • カスタムエディタ(FlexGrid)
  • WebGLによるパフォーマンス向上(FlexChart)
  • ラベル付き入力フォーム(Input)
  • 行ヘッダーのレイアウト(MultiRow)
  • 新しいコントロールの追加(転置複数行グリッド、アコーディオン、バーコード)
  • Angular 10対応(Angular)
  • Vue.js 3.0対応(Vue.js)

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

OutSystemsでExcelライクなUIを実現できるコンポーネントを販売開始

OutSystems」上で表計算機能を実現するコンポーネント「SpreadJS for OutSystems(スプレッドJS フォー アウトシステムズ)」を2020年7月28日(火)にリリースしました。

OutSystems上で表計算機能を実現するコンポーネント「SpreadJS for OutSystems」

 「OutSystems」は、大規模/エンタープライズ向けのWebアプリケーションやモバイルアプリケーションを視覚的に開発できる、ローコード開発プラットフォームです。

今回販売を開始した「SpreadJS for OutSystems」は、OutSystems上でExcelのような外観や操作性を実現するコンポーネントです。
この製品にはグレープシティのJavaScriptライブラリ「SpreadJS(スプレッドJS)」の一部の機能が組み込まれており、ソート・フィルタ機能や条件付き書式、450種以上の表計算関数などのExcel互換機能を豊富に備えています。
OutSystemsとシームレスに連携し、Excelライクなスプレッドシートを埋め込んだWebアプリケーションを容易に開発できます。

「SpreadJS for OutSystems」の販売店は、弊社の戦略パートナーである「伊藤忠テクノソリューションズ株式会社」となります。

本件に関するニュースリリースは以下をご確認ください。

JavaScriptの処理でWebページに帳票出力できる「ActiveReportsJS」入門 ― CodeZine記事

開発者のための実装系Webマガジン「CodeZine」で「JavaScriptの処理でWebページに帳票出力できる『ActiveReportsJS』入門」が公開されました。

帳票開発に必要なあらゆる機能を備えたJavaScriptライブラリ「ActiveReportsJS(アクティブレポートJS)」を利用したさまざまな帳票出力機能の活用法を、複数回に分けてご紹介します。
今回はその第1回として、ActiveReportsJSで帳票を表示するまでの基本的な手順と、データをリストや表に表示する機能を解説しています。サンプルコード付きでわかりやすく説明されていますので、ActiveReportsJSを初めてご利用になる方にオススメの記事となっております。ぜひご覧ください。

こんな方にオススメ
  • Webページに帳票出力機能を実装したい方
  • サーバー開発よりもフロントエンド開発が得意な方
  • ActiveReportsJSの利用法を、順を追って学びたい方

 ActiveReportsJSの概要は以下でご紹介しています。


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

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