E2D3の開発環境を整えた(Windows編)

ExcelでJavaScriptを使ったインタラクティブなグラフを表示することができる「E2D3」というツールがあります。

E2D3公式サイト

このメモの目的は、E2D3上の新しいグラフの開発やグラフのカスタマイズをするための環境づくりの備忘録です。

本記事の内容は下記公式ドキュメントを参考にしています。非常にわかりやすいドキュメントです。

• Setup E2D3 for development_ja
• Debugging with Excel Online_ja

Excel上に挿入したE2D3およびグラフは、E2D3が用意したWebサーバにアクセスすることで表示されています。

開発する際は、E2D3が参照するWebサーバをローカルの開発用簡易Webサーバに切替え、ローカルのグラフのソースコード(E2D3ではテンプレートと呼んでいます)を書き換えることで開発していくことになります。

開発用簡易Webサーバはnode.jsで稼働します。よって、まずはnode.jsをダウンロードしインストールします。

今回は下記ファイルをインストールしました。

https://nodejs.org/dist/v5.6.0/node-v5.6.0-x86.msi

次にコマンドプロンプトを開きnpmコマンドを使って開発用簡易Webサーバをインストールします。

> npm install -g e2d3

次に、グラフのソースコードをGitHubからcloneしてきます。

git clone https://github.com/e2d3/e2d3-contrib.git

上記では本家のリポジトリから直接cloneしていますが、私の場合はPull Requestを送りたいので自分のGitHubアカウントにforkしてからcloneしました。

ソースコードがダウンロードできたら、cloneしたフォルダに移動しe2d3コマンドを実行(Webサーバを起動)します。

> cd e2d3-contrib
> e2d3

するとブラウザが起動し、e2d3のグラフ画面が起動され、開発用簡易Webサーバ上で稼働するE2D3が表示されます。

この際、開発用簡易WebサーバはデフォルトでHTTP通信を8000ポート、HTTPS通信を8443ポートで待ち受けます。

Excel上のE2D3からはHTTPSで通信する必要があるため、ブラウザでhttps://localhost:8443にアクセスし、証明書の使用を許可しておく必要があります。毎回この作業を行うのは面倒なので証明書をインポートしておくと良いと思います。

証明書の認証が済んだら、Excel上でE2D3を立ち上げ、CTRLキーを5回連打することで表示される「Go into delegate mode」のボタンを押下します。

すると、E2D3のWebサーバにアクセスするのではなく、さきほど立ち上げたローカルの開発用簡易Webサーバの内容が表示されるようになります。

以上で、ローカルのテンプレートをガシガシ書き換えて、E2D3で確認、デバッグ事が可能になります。

テンプレートを書き換えて、本家に取り込んでもらう流れは公式ドキュメントの下記に記載されています。

https://github.com/e2d3/e2d3/wiki/Adding-your-template-to-E2D3_ja