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

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

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

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

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

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

図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）

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

図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）