SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

JavaScriptライブラリ「Wijmo」のさまざまな部品を徹底活用(AD)

JavaScriptライブラリ「Wijmo」のさまざまな部品を徹底活用!~まずは表とチャートから解説~

JavaScriptライブラリ「Wijmo」のさまざまな部品を徹底活用 第1回

  • X ポスト
  • このエントリーをはてなブックマークに追加

 グレープシティのJavaScriptライブラリ「Wijmo(ウィジモ)」は、Webページ作成に利用できるさまざまな部品の詰め合わせです。本連載ではこれらの部品を複数組み合わせて本格的なデータ表示Webページを構築する例を、複数回にわたって紹介していきます。初回となる今回は、CSVファイルから取得した気温データをもとに、FlexGridを使った表と、FlexChartを使ったチャートを表示させます。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 Wijmo(ウィジモ)は、グレープシティがHTML/JavaScript環境に向けて提供しているJavaScriptライブラリで、WebサイトやWebアプリケーションで活用できるUI部品を利用者に提供します。記事執筆時点の最新版は2022年4月に公開された「2022J v1」です。

図1 Wijmoの製品ページ(https://www.grapecity.co.jp/developer/wijmo)
図1 Wijmoの製品ページ

 Wijmoが提供する機能は多岐にわたり、表を表示するFlexGrid、チャートを表示するFlexChart、利用者のデータ入力を支援するUI部品など、Webページ作成に利用できるさまざまな部品の詰め合わせといえます。グレープシティのデモページでサンプルコードの一覧を見ると、その多機能ぶりがうかがえます。

図2 Wijmoデモページのサンプルコード群(https://demo.grapecity.com/wijmo/demos/)
図2 Wijmoデモページのサンプルコード群

 CodeZineではこれまでも、過去記事において、Wijmoに追加された新機能や新部品、ReactやVue.jsといったJavaScriptライブラリ・フレームワークと組み合わせての利用法などを紹介してきましたが、今回はWijmo自身のさまざまな機能に着目して、複数の機能を幅広く組み合わせていく例を紹介します。今回を含め全4回の連載で、WebページにWijmoの機能を随時盛り込んでいき、Wijmoの多彩な部品を紹介していきます。

対象読者

  • UI部品としてWijmoの利用を検討されている方
  • Wijmoのさまざまな機能を使ってみたい方
  • 一部のUI部品しか使ったことのないWijmoユーザーの方

必要な環境

 本記事のサンプルコードは、以下の環境で動作を確認しています。

  • Windows 10 64bit版
  • Wijmo 5.20221.857
  • Node.js 18.12.1 64bit版
  • Microsoft Edge 107.0.1418.56

 サンプルコードでは、ReactやVue.jsといったUIフレームワークやライブラリ、Babelやwebpack、TypeScriptといったJavaScriptファイルを変換するツールは使いません。基本的にindex.htmlをWebブラウザーで直接表示すればサンプルを実行できますが、実行時の利便性を高めるため、サンプルコードにはNode.js上で動作する簡易Webサーバーlite-serverを含めています。

 サンプルコードを実行するには、プロジェクトフォルダーにWijmoの配布物をコピー(詳細は後述)して、「npm install」コマンドでlite-serverなどをインストール後、「npm run start」コマンドを実行すると、Webブラウザーで「http://localhost:3000」がロードされてWebページが表示されます。

目標とするWebページの設計

 今回含め4回の記事では、都道府県ごとの気象データを表とチャートで表示する、図3に示すWebページを、Wijmoを使って作成していきます。

図3 本記事がゴールとする気象データWebページの設計
図3 本記事がゴールとする気象データWebページの設計

 このWebページは、表1に示す機能を備えます(No.は図3に示した番号に対応します)。各機能を実現するために利用するWijmoの部品(コントロール)もここで示します。

表1 図3の構成要素と対応するWijmoコントロール
No. 概要 説明

利用する

Wijmo部品

1 都道府県ツリー 地方単位で都道府県をツリー表示 ツリービュー
2 都道府県の選択 ドロップダウン選択と文字入力の両方をサポート オートコンプリート
3 データ表 日時と気象データを表示 FlexGrid
4 データチャート データ表の内容をチャート表示 FlexChart
5 タブ切替 複数チャートをタブで切替 タブパネル

まずプロジェクトを生成して環境を整えよう

 今回は初回なので、最初に実装の元となるプロジェクトを生成する方法を説明します。

手順1:基本的なプロジェクトの整備

 任意のパスに「p001-wijmo」フォルダーを作成して、その中で「npm init」コマンドを実行します。このコマンドでは対話的にプロジェクトの設定ができますが、今回はすべてリターンキーを押してデフォルト値を受け入れます。コマンドの実行が終わると、プロジェクト設定ファイルpackage.jsonが生成されます。

図4 npm initコマンドでプロジェクトを初期設定(p001-wijmo)
図4 npm initコマンドでプロジェクトを初期設定(p001-wijmo)

 「npm install --save-dev lite-server」コマンドを実行して、プロジェクトにlite-serverをインストールします。「--save-dev」は開発ツールとしてインストールする意味です。この時、package.jsonのdevDependenciesにlite-serverが追記されるほか、依存パッケージを含めたパッケージの詳細が記された「package-lock.json」が生成されます。

 次にフォルダーにHTMLファイルindex.htmlを任意の内容で追加します。lite-serverを利用してindex.htmlを表示するため、package.jsonのscriptsにリスト1の通りコマンドを定義します。

[リスト1]lite-serverを実行するコマンド(p001-wijmo/package.json)
"scripts": {
  "start": "lite-server"
},

 ここまで設定後「npm run start」コマンドを実行するとlite-serverが実行され、Webブラウザーが開いてindex.htmlの内容が表示されるようになります。

手順2:Wijmoとライブラリファイルを導入

 次に、生成したプロジェクトに、実行に利用するWijmoとその他のライブラリファイルを導入します。Wijmoは、公式サイトからダウンロードしたトライアル版のZipファイルから、配布物であるDistフォルダーをプロジェクトに追加して、フォルダー名を「wijmo」に変更します。

図5 プロジェクトにWijmoのファイルを追加(p001-wijmo)
図5 プロジェクトにWijmoのファイルを追加(p001-wijmo)

 また本サンプルでは、CSVファイルを解析する処理(詳細は後述)に「node-csv」ライブラリを使用します。packages/csv/dist/iife/index.jsファイルを、プロジェクトに作成した「csv」フォルダーに配置します。

図6 プロジェクトにnode-csvのファイルを追加(p001-wijmo)
図6 プロジェクトにnode-csvのファイルを追加(p001-wijmo)

手順3:JavaScriptとCSSファイルを配置してindex.htmlで参照させる

 Webページのスタイルを記述するCSSファイルindex.css、Webページの振る舞いを実装するJavaScriptファイルindex.jsを、それぞれプロジェクトに配置します。これらをWijmoやnode-csvとともに、index.htmlでリスト2の通り参照させます。

[リスト2]index.htmlでJavaScriptとCSSファイルを参照する記述(p001-wijmo/index.html)
<head>
(略:charsetやviewportなど)
    <!-- WijmoのCSSを参照 ...(1)-->
    <link rel="stylesheet" href="wijmo/styles/wijmo.min.css">
    <!-- スタイルを設定するCSSを参照 ...(2)-->
    <link rel="stylesheet" href="index.css">
    <title>Document</title>
</head>
<body>
(略:リスト3の内容)
    <!-- WijmoのJavaScriptを参照 ...(3)-->
    <script src="wijmo/controls/wijmo.min.js"></script>
    <script src="wijmo/controls/cultures/wijmo.culture.ja.min.js"></script>
    <script src="wijmo/controls/wijmo.chart.min.js"></script>
    <script src="wijmo/controls/wijmo.grid.min.js"></script>
    <!-- CSV解析のJavaScriptを参照 ...(4)-->
    <script src="csv/index.js"></script>
    <!-- 処理を実装するJavaScriptを参照 ...(5)-->
    <script src="index.js"></script>
</body>

 CSSは、Wijmoが提供するwijmo.min.css(1)と、自分で追加したindex.css(2)を参照します。JavaScriptは、Wijmoが提供するファイル(3)とnode-csvのファイル(4)、自分で追加したindex.js(5)を参照します。(3)で参照するWijmoのJavaScriptファイルを表2に示します。No.1と2は必ず必要で、さらに今回はチャートとグリッドを使用するのでNo.3と4を追加で参照します。今後使用するWijmoの機能が増えるごとに、JavaScriptの参照を増やしていきます。

表2 index.htmlから参照するWijmoのJavaScriptファイル(p001-wijmo)
No. ファイル名 役割
1 wijmo/controls/wijmo.min.js Wijmo本体
2 wijmo/controls/cultures/wijmo.culture.ja.min.js カルチャ(日本語)
3 wijmo/controls/wijmo.chart.min.js チャート(FlexChart)
4 wijmo/controls/wijmo.grid.min.js グリッド(FlexGrid)

今回の目標:表とチャートを表示

 ここまでで生成したプロジェクトをもとに、今回は図3のうち大きな割合を占める表とチャートを実装します。今回の作業を行うと、図7のWebページが完成します。

図7 今回実装するWebページ(p001-wijmo)
図7 今回実装するWebページ(p001-wijmo)

表とチャートを表示する下準備

 まずindex.htmlの<body>内に、表とチャートを表示するリスト3の記述を追加します。

[リスト3]表とチャートを表示するindex.htmlの記述(p001-wijmo/index.html)
<div id="horizontal-container">
    <div id="grid-container">
        <h3>FlexGrid</h3>
        <div id="grid1"></div><!-- 表を表示 -->
    </div>
    <div id="chart-container">
        <h3>FlexChart</h3>
        <div id="chart1"></div><!-- チャートを表示 -->
    </div>
</div>

 ここでindex.cssファイルにはリスト4の通り記述します。(1)はCSSのFlexboxを利用して表とチャートを横並びにする指定、(2)は表とチャートの幅と余白の指定、(3)(4)は表とチャートの高さの指定です。

[リスト4]リスト3に対応するCSSの記述(p001-wijmo/index.css)
/* (1) */
#horizontal-container {
    display: flex;
    flex-direction: row;
}
/* (2) */
#grid-container,
#chart-container {
    width: 100%;
    padding: 10px;
}
/* (3) */
#grid1 {
    height: 550px;
}
/* (4) */
#chart1 {
    height: 500px;
}

 Wijmoの実装を行うJavaScriptファイルindex.jsの冒頭にリスト5の記述を行って、Wijmoのライセンスキーを設定します。ライセンスキーを設定しないとWijmoはトライアル版として動作し、その旨がWebページに表示されます。

[リスト5]Wijmoのライセンスキーを設定する記述(p001-wijmo/index.js)
wijmo.setLicenseKey('<ライセンスキー>');

データの表をグリッド(FlexGrid)で実装

 表(FlexGrid)を表示する処理の実装はリスト6の通りです。

[リスト6]FlexGridを表示する処理の実装(p001-wijmo/index.js)
const grid1 = new wijmo.grid.FlexGrid('#grid1', {
  autoGenerateColumns: false,
  isReadOnly: true,
  columns: [
    { binding: 'date', header: '日時', allowSorting: false },
    { binding: 'maxTemperature', header: '最高気温', allowSorting: false, format: 'F1' },
    { binding: 'minTemperature', header: '最低気温', allowSorting: false, format: 'F1' },
  ],
});

 グリッドを表示する要素のCSSセレクター「#grid1」(idが「grid1」の要素に対応)を第1引数に指定してwijmo.grid.FlexGridクラスのコンストラクターを実行すると、FlexGridを表示できます。第2引数はグリッドのオプションで、指定内容は表の通りです。

表3 FlexGridに指定するオプション(p001-wijmo/index.js)
No. ファイル名 役割

設定値

1 autoGenerateColumns データに合わせて列を自動生成するか false(生成しない)
2 isReadOnly 読み取り専用にするか true(読み取り専用にする)
3 columns 表示する列の定義 (表4参照)

columnsの配列には、表示する列の定義を指定するJavaScriptオブジェクトを、列の数だけ記述します。設定するJavaScriptの属性は表4の通りです。

表4 columnsに指定するJavaScriptオブジェクトの属性(p001-wijmo/index.js)
No. 名前 意味
1 binding     列に対応するデータの名前
2 header 列ヘッダーに表示する文言
3 allowSorting 並び替えを許可(ここでは許可しない)
4 format 列の表示形式(「F1」は小数第1位まで表示の意味)

データのグラフをチャート(FlexChart)で実装

 チャート(FlexChart)を表示する処理の実装はリスト7の通りです。

[リスト7]FlexChartを表示する処理の実装(p001-wijmo/index.js)
const chart1 = new wijmo.chart.FlexChart('#chart1', {
  header: '北海道',
  chartType: wijmo.chart.ChartType.Line,
  axisX: {
    format: 'MM/dd'
  },
  bindingX: 'date',
  series: [
    { binding: 'maxTemperature', name: '最高気温' },
    { binding: 'minTemperature', name: '最低気温' },
  ],
});

 FlexGrid同様、CSSセレクター「#chart1」を第1引数に指定してwijmo.grid.FlexChartクラスのコンストラクターを実行します。第2引数に指定するオプションは表5の通りです。

表5 FlexChartに指定するオプション(p001-wijmo/index.js)
No. ファイル名 役割

設定値

1 header チャートのヘッダー 「北海道」
2 chartType

チャートの種類

wijmo.chart.ChartType.Line(線グラフ)
3 axisX X軸の指定 子要素にformat(フォーマット)「MM/dd」を指定
4 bindingX X軸に対応させる要素 date
5 series 表示する系列の定義 (表6参照)

 ここでseriesはチャートに表示する系列(グラフそれぞれの線に対応)のオプションを指定するJavaScriptオブジェクトの配列で、設定するJavaScriptの属性は表6の通りです。

表6 seriesに指定するJavaScriptオブジェクトの属性(p001-wijmo/index.js)
No. 名前 意味
1 binding     系列に対応するデータの名前
2 name チャートに表示される系列の名前

データを取得して表やチャートに設定

 データを取得して表やチャートに表示する処理は、リスト8の通り実装します。

[リスト8]データを取得して表示する処理の実装(p001-wijmo/index.js)
function fetchAndApply() {
  // CSVファイルを読み込み ...(1)
  fetch('data/data.csv')
    .then(res => res.text())
    .then(text => {
      // CSVファイルを解析 ...(2)
      csv_parse.parse(text, {
        columns: true,
        cast: true,
        cast_date: true
      }, (err, records) => {
        // 解析したデータをFlexGridとFlexChartのitemsSourceに設定 ...(3)
        grid1.itemsSource = records;
        chart1.itemsSource = records;
      })
    });
}

 (1)のfetchメソッドでデータファイルdata/data.csvを取得します。取得したデータはres.text()で文字列として解釈した後、(2)でcsv_parse.parseメソッドを利用してCSV文字列を解析します。このメソッドは図6で導入したnode-csvライブラリが提供するもので、第1引数に文字列、第2引数にオプションを指定すると、CSV文字列をJavaScriptオブジェクトの配列に変換します。ここで指定しているオプションは表7の通りです。なお、利用できるすべてのオプションはnode-csvの公式ドキュメントにリストされています。

表7 csv_parse.parseメソッドに指定するオプション(p001-wijmo/index.js)
No. ファイル名 役割

設定値

1 columns ヘッダー行から列名を解釈するか true(解釈する)
2 cast

文字列を数値として解釈するか

true(解釈する)
3 cast_date 文字列を日時として解釈するか true(解釈する)

 解析して得られたデータ変数recordを、(3)でgrid1(FlexGrid)とchart1(FlexChart)のitemsSourceプロパティに設定すると、recordのデータが表とチャートに描画されます。以上のfetchAndApplyメソッドをWebページ読み込み時に実行して、データ取得~表示の処理を行います。

 なお、リスト8(1)で取得するdata/data.csvは、気象庁の「過去の気象データ・ダウンロード」から、2022年10月の札幌の最高気温と最低気温データをダウンロード後、図8の状態に加工したものです。

図8 Webページに表示するデータのCSV(p001-wijmo/data/data.csv)
図8 Webページに表示するデータのCSV(p001-wijmo/data/data.csv)

 FlexGridやFlexChartでは、binding属性(FlexGridでは表4のNo.1、FlexChartでは表6のNo.1)に指定されたデータ項目名と、データのヘッダーに付与された「date」「maxTemperature」「minTemperature」の指定を紐づけて、表やチャートを描画します。

まとめ

 本連載では、全4回にわたり、Wijmoが提供するUI部品を複数組み合わせて本格的なWebページを作成します。初回となる今回は、CSVファイルから取得したデータをグリッド(FlexGrid)とチャート(FlexChart)に表示しました。

 今回表示したのは最低気温と最高気温のみでしたが、次回は表示項目を増やしていきます。ただ表示項目を増やしただけではチャートの表示が煩雑になるので、各項目を複数のチャートに分けて表示して、タブパネルで切替表示できるように改造します。

参考資料

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/16990 2023/01/30 19:24

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング