チャートやグラフを実装できるスクリプト -ApexChartsをWindows IE11で表示させる

WEB制作 web制作 No Comments

● チャートやグラフを実装できるスクリプト -ApexChartsをWindows IE11で表示させる

グラフやチャート表示にとても便利な「ApexCharts」というライブラリがあるのですが
標準ではマイクロソフトのWindowsIE 11に対応していません。

Xamarin、Githubに続いてnpmを買収しオープンソース戦略を積極的に推し進める マイクロソフトですが、
マイクロソフト最大の負の遺産Windows IE 11はまだ残念ながら現役です。

今回せっかくなので買収されたてほやほやのnpmを使ってWindowsIE 11対応を行ってみたいと思います。（あえてyarnではなく。）

　

● node.js のバージョン確認

今回動作検証を行ったのはnode.jsのこちらのバージョンです。

node -v

v12.14.0

　

● webpackのインストール

こちらの npm コマンドでインストールします。
（あらかじめ対象となるディレクトリを作成して、移動しておいてください。）

npm install webpack webpack-cli webpack-dev-server -D
npm init -y

　

● ソースファイルを用意する

まずディレクトリ src を作成します。

mkdir src

./src/index.js

import {Myclass} from './Myclass.js';
var m = new Myclass(1, 'Hello Webpack!');
m.alertUserName();

./src/Myclass.js

こちらは検証用のクラスです。
（ ES6 の JavaScript の記述のため、そのままではIE11では実行できません。Webpack＋babel でトランスパイルすることによって実行できるようになります。）

export class Myclass {
  constructor(id,userName) {
    this.id       = id;
    this.userName = userName;
  }
  alertUserName() {
    alert(this.userName);
  }
}

　

● webpacのビルドの実行

npx webpack

./dist/main.js が以下のような内容で作成されます

!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,r){"use strict";r.r(t);new class{constructor(e,t){this.id=e,this.userName=t}alertUserName(){alert(this.userName)}}(1,"DOWN TOWN").alertUserName()}]);

　

● index.htmlを作成し、表示させる

  1. index.html の作成

./dist/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>webpack test</title>
    <script src="./main.js"></script>
</head>
<body>
</body>
</html>
  1. webpack.config.js の作成
    mode: ‘development’ の記述はここに行います。

./webpack.config.js

module.exports = {
    devtool: 'inline-source-map' ,
    mode: 'development',    // （development: 開発　　　production: 本番）
    entry: './src/index.js',
    output: {
        path: `${__dirname}/dist`,
        filename: 'main.js'
    },
    devServer: {
        contentBase: 'dist',
        open: true
    }
};
  1. npx webpack-dev-server で サーバを起動する
npx webpack-dev-server

　

● ファイル変更時の自動更新を確認する

webpack-dev-serverを起動しておくと、対象ファイルが更新された時に自動でリコンパイルがかかります。
それを確認してみます。

./src/index.js を以下のように変更して保存する

var m = new Myclass(1, 'Hello Webpack! 変更しましたよ！');

ブラウザに切り替えて、自動的に更新されていることを確認します。
自動更新機能は便利ですね！
ただ、今回は自動更新使用しません。
「command + c」または「control + c」を押して、webpackサーバーを停止しておきます。

　

● 本番サーバへファイルをアップロードして動作を確認する

「control + c 」で webpack-dev-serverを終了してから webpack ビルドを行う。

npx webpack

「dist」フォルダをアップロードまたはそれぞれのマシンにコピーしてブラウザで表示させてみます。

Google Chrome 「表示できる」
IE 11 「表示できない」

となればOKです。

　

● babelを使ってIE11でも表示ができるようにする

ES6で書いたJavaScriptは IE11 では使えないので babel をwebpackから呼び出してIE11でも使える状態でコンパイルします

1. babel のインストール

npm install -D webpack webpack-cli babel-loader @babel/core @babel/preset-env

2. webpack.config.js の設定変更

./webpack.config.js を下記のように書き換えます。

module.exports = {
    mode: 'production', // development or production
    entry: './src/index.js',
    output: {
        path: `${__dirname}/dist`,
        filename: 'main.js'
    },
    devServer: {
        contentBase: 'dist',
        open: true
    } ,
    module: {
        rules: [{
            test: /\.js$/,
            use: [{
                loader: 'babel-loader',
                options: {
                    presets: [
                        '@babel/preset-env',
                    ]
                }
            }]
        }]
    }
};

3. webpackのビルドの実行

npx webpack

「dist」フォルダをアップロードまたはそれぞれのマシンにコピーしてブラウザで表示させてみます。

Google Chrome 「表示できる」
IE 11 「表示できる」

となればOKです。

　

● ApexChartsのインストール

1. ApexChartsのインストール

npm install apexcharts --save

2. Polyfillのインストール

npm install classlist-polyfill
npm install promise-polyfill

promise-polyfill をインストールする時に

gyp ERR! stack Error: `gyp` failed with exit code: 1*

というエラーが表示されることがありますが、Webpackは問題なく動きますので今回は気にせず進めてください。

Mac OSX 10.15 の方はこちらを参考に。
https://github.com/nodejs/node-gyp/blob/master/macOS_Catalina.md

3. ソースの変更

src/index.js

import {Myclass} from './Myclass.js';
var m = new Myclass(1, 'apexcharts テストです');
m.alertUserName();

import 'promise-polyfill/src/polyfill';
import 'classlist-polyfill'
import ApexCharts from 'apexcharts'

var options = {
  chart: {
    type: 'bar'
  },
  series: [
    {
      name: 'sales',
      data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
    }
  ],
  xaxis: {
    categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
  }
}

document.addEventListener('DOMContentLoaded', (event) => {
    var chart = new ApexCharts(document.querySelector('#chart'), options)
    chart.render()
})

./dist/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>webpack test</title>
    <script src="./main.js"></script>
</head>
<body>
    <div id="chart"></div>
</body>
</html>

3. webpackでWindows IE11対応のApexChartsのビルドの実行

npx webpack

「dist」フォルダをアップロードまたはそれぞれのマシンにコピーしてブラウザで表示させてみます。

Google Chrome 「チャートが表示できる」
IE 11 「チャートが表示できる」

となればOKです。

● 今回作成した /dist/main.js をオリジナルの apexcharts.js の代わりに使用したい。

今回作成した /dist/main.js をオリジナルの apexcharts.js の代わりに使用したい。
という場合は次のようにします。

1. index.js の変更

/src/index.js

（ロジック部分を全て削除して、最後に windows プロパティに ApexCharts を追加します。これでどこからでも ApexCharts が使用できるようになります。）

import 'promise-polyfill/src/polyfill';
import 'classlist-polyfill'
import ApexCharts from 'apexcharts'

window.ApexCharts = ApexCharts;

2. webpackでビルドの実行

npx webpack

3. 元々のapexcharts.js から入れ替える

<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>

　↓

<script src="./dist/main.js"></script>

です。
簡単ですね。以上です　！

チャートやグラフを実装できるスクリプト -ApexChartsをWindows IE11で表示させる

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です