はじめに
Wijmo(ウィジモ)は、グレープシティがHTML/JavaScript環境に向けて提供しているJavaScriptライブラリで、WebサイトやWebアプリケーションで活用できるUI部品を利用者に提供します。記事執筆時点の最新版は2022年4月に公開された「2022J v1」です。
Wijmoが提供する機能は多岐にわたり、表を表示するFlexGrid、チャートを表示するFlexChart、利用者のデータ入力を支援するUI部品など、Webページ作成に利用できるさまざまな部品の詰め合わせといえます。グレープシティのデモページでサンプルコードの一覧を見ると、その多機能ぶりがうかがえます。
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を使って作成していきます。
このWebページは、表1に示す機能を備えます(No.は図3に示した番号に対応します)。各機能を実現するために利用するWijmoの部品(コントロール)もここで示します。
No. | 概要 | 説明 |
利用する Wijmo部品 |
---|---|---|---|
1 | 都道府県ツリー | 地方単位で都道府県をツリー表示 | ツリービュー |
2 | 都道府県の選択 | ドロップダウン選択と文字入力の両方をサポート | オートコンプリート |
3 | データ表 | 日時と気象データを表示 | FlexGrid |
4 | データチャート | データ表の内容をチャート表示 | FlexChart |
5 | タブ切替 | 複数チャートをタブで切替 | タブパネル |
まずプロジェクトを生成して環境を整えよう
今回は初回なので、最初に実装の元となるプロジェクトを生成する方法を説明します。
手順1:基本的なプロジェクトの整備
任意のパスに「p001-wijmo」フォルダーを作成して、その中で「npm init」コマンドを実行します。このコマンドでは対話的にプロジェクトの設定ができますが、今回はすべてリターンキーを押してデフォルト値を受け入れます。コマンドの実行が終わると、プロジェクト設定ファイルpackage.jsonが生成されます。
「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の通りコマンドを定義します。
"scripts": { "start": "lite-server" },
ここまで設定後「npm run start」コマンドを実行するとlite-serverが実行され、Webブラウザーが開いてindex.htmlの内容が表示されるようになります。
手順2:Wijmoとライブラリファイルを導入
次に、生成したプロジェクトに、実行に利用するWijmoとその他のライブラリファイルを導入します。Wijmoは、公式サイトからダウンロードしたトライアル版のZipファイルから、配布物であるDistフォルダーをプロジェクトに追加して、フォルダー名を「wijmo」に変更します。
また本サンプルでは、CSVファイルを解析する処理(詳細は後述)に「node-csv」ライブラリを使用します。packages/csv/dist/iife/index.jsファイルを、プロジェクトに作成した「csv」フォルダーに配置します。
手順3:JavaScriptとCSSファイルを配置してindex.htmlで参照させる
Webページのスタイルを記述するCSSファイルindex.css、Webページの振る舞いを実装するJavaScriptファイルindex.jsを、それぞれプロジェクトに配置します。これらをWijmoやnode-csvとともに、index.htmlでリスト2の通り参照させます。
<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の参照を増やしていきます。
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ページが完成します。
表とチャートを表示する下準備
まずindex.htmlの<body>内に、表とチャートを表示するリスト3の記述を追加します。
<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)は表とチャートの高さの指定です。
/* (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ページに表示されます。
wijmo.setLicenseKey('<ライセンスキー>');
データの表をグリッド(FlexGrid)で実装
表(FlexGrid)を表示する処理の実装はリスト6の通りです。
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引数はグリッドのオプションで、指定内容は表の通りです。
No. | ファイル名 | 役割 |
設定値 |
---|---|---|---|
1 | autoGenerateColumns | データに合わせて列を自動生成するか | false(生成しない) |
2 | isReadOnly | 読み取り専用にするか | true(読み取り専用にする) |
3 | columns | 表示する列の定義 | (表4参照) |
columnsの配列には、表示する列の定義を指定するJavaScriptオブジェクトを、列の数だけ記述します。設定するJavaScriptの属性は表4の通りです。
No. | 名前 | 意味 |
---|---|---|
1 | binding | 列に対応するデータの名前 |
2 | header | 列ヘッダーに表示する文言 |
3 | allowSorting | 並び替えを許可(ここでは許可しない) |
4 | format | 列の表示形式(「F1」は小数第1位まで表示の意味) |
データのグラフをチャート(FlexChart)で実装
チャート(FlexChart)を表示する処理の実装はリスト7の通りです。
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の通りです。
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の通りです。
No. | 名前 | 意味 |
---|---|---|
1 | binding | 系列に対応するデータの名前 |
2 | name | チャートに表示される系列の名前 |
データを取得して表やチャートに設定
データを取得して表やチャートに表示する処理は、リスト8の通り実装します。
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の公式ドキュメントにリストされています。
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の状態に加工したものです。
FlexGridやFlexChartでは、binding属性(FlexGridでは表4のNo.1、FlexChartでは表6のNo.1)に指定されたデータ項目名と、データのヘッダーに付与された「date」「maxTemperature」「minTemperature」の指定を紐づけて、表やチャートを描画します。
まとめ
本連載では、全4回にわたり、Wijmoが提供するUI部品を複数組み合わせて本格的なWebページを作成します。初回となる今回は、CSVファイルから取得したデータをグリッド(FlexGrid)とチャート(FlexChart)に表示しました。
今回表示したのは最低気温と最高気温のみでしたが、次回は表示項目を増やしていきます。ただ表示項目を増やしただけではチャートの表示が煩雑になるので、各項目を複数のチャートに分けて表示して、タブパネルで切替表示できるように改造します。