こんばんは。sakaismです。

MacでE2D3をカスタマイズするための環境を作るメモです。

うむむ。色々覚えていなかった・・・記憶力・・・
名古屋ギークバーとCode for Nagoyaのハンズオンのスライドが頼り。
こちらの、ハンズオンでもヘルプしていただいたタケウチさんのスライドも頼りになります。
E2D3の可視化テンプレートを作ってみる // Speaker Deck
https://speakerdeck.com/chimerast/e2d3falseke-shi-hua-tenpuretowozuo-tutemiru

ちなみに私が使っているMacはMacBook Pro Retinaディスプレイモデル。OSはYosemite(山歩きが趣味なので一度は歩いてみたい)。
El Capitanは様子見中です。不具合やアプリの対応状況はどうなのかな。そろそろいいか?

環境づくりに必要なもの

  • Node.js
  • Git(Github利用します。登録しておいてね。)
  • Excel(バージョン2013以上、またはOnline
    Office Onlineは無料。最近のMicrosoftの動きはステキです。
  • Chrome
  • テキストエディタ(私はCotEditor使いました)

環境づくりの手順

全体の流れはこんな感じ。

  1. Node.jsをインストール
  2. Github Desktopのインストール
    (使い慣れたクライアントがあれば、他のクライアントでもOK)
  3. E2D3本体のインストール
  4. 可視化テンプレートのインストール(githubでFork→Clone)
  5. CloneしたディレクトリでE2D3を起動
  6. 新しいテンプレートを作ってみよう!(←私は今ココ)
    うまく作れたらPullRequestしてみよう!

では、さっそく。

1.Node.jsをインストールする

Node.jsはサーバーサイドJavaScriptの実行環境で、Google Chrome用JavaScript実行エンジン(V8)で動作する。

Spotlight(Ctrl+スペース)で「ターミナル」を検索。ターミナルを立ち上げます。
いわゆる黒い画面恐怖症の方もがんばってみましょう(Winのコマンドプロンプトと違って、デフォルトでは白だけど)。

以下、コマンド。

Windowsでのインストール方法はこちらのインストーラーをダウンロード。
実行して、画面の指示にしたがって次へ次へ。
https://nodejs.org/dist/v0.12.7/node-v0.12.7-x86.msi
コマンドでインストールするなら、こちらが参考になるかも。(ただし、バージョンはv0.12.6で)
node.js インストール備忘録(windows7) – Qiita
http://qiita.com/yokoh9/items/20d6bdc6030a3a861189

2.Github Desktopをインストール

使いなれてるクライアントがあれば、この工程は不要です。

こちらからアプリをダウンロードして、インストール。
https://desktop.github.com/

こちらの記事の紹介を見ると便利そうです。
vol.32 GitHub Desktopを使ってみよう | TIPS | BOEL Inc.
http://boel.jp/tips/vol32_github_desktop.html

3.E2D3本体をインストール

ターミナル(winならコマンドプロンプト)からnpmでインストール。
npmはNode.jsのモジュールの管理ツール。npmを使うことで、Node.jsのモジュールを簡単にインストールできる。

「npm install」はnpmリポジトリからライブラリをダウンロードしてくるコマンド。
ライブラリはhttps://www.npmjs.com/から取得している。

4.E2D3可視化テンプレートをForkする。

ChromeでGithubの「e2d3-contrib」へ。
https://github.com/e2d3/e2d3-contrib
「Fork」ボタンをポチッ!

※GitHub上には、e2d3とe2d3-contribという二つのレポジトリが公開されていて、新しくテンプレートを追加したい場合はe2d3-contribをForkする。

5.ForkしたE2D3可視化テンプレートをClone。

Githubデスクトップの左上の「+」をポチッ。
Cloneタブで「e2d3-contrib」を選択して「Clone e2d3-contrib」ボタンをポチッ。

6.E2D3を起動。

ターミナルで

ブラウザでhttps://localhost:8443/にアクセス。

Excel OnlineでE2D3アドオン選択して、CTRLキーを5回連打し、右上に「Go into delegate mode」と表示されたら、クリック。

これでローカルの「E2D3」の変更が反映されるようになります。

おまけ

npmの再インストールのコマンド(Mac)

E2D3のお勉強はじめました。

こんばんは。sakaismです。
データビジュアリゼーションに関するメモブログを始めました。

前々からデータビジュアリゼーションには興味があって、d3.jsとか遊んでみたかったのだけれど、なかなか手を付けられずにいました。
それが11月に、Facebookで「E2D3」というデータをビジュアライズできるエクセルのアドオンのハンズオンワークショップというのを見かけまして、けっこう出不精な私ですが、思い切って出かけてみました。
このハンズオン、第0夜の会場は名古屋ギークバーでして、内心、「ギークな人々」について行けるのか心配でした(汗)が、周りの方々の親切なサポートもあって、何とかついていけました。感謝感謝。
そして、第1夜は名工大が会場で、「身近な社会問題を解決して暮らしやすい社会をつくるために、データを活用しよう」という意識を持ちつつ、それを参加者の方々が「自分のやれるところからやってみる」という雰囲気がとても良かったです。そして、E2D3、実際に触ってみたらすごく楽しい。こういうことできないかなとか、妄想も膨らみます。

あと、私は会社のお仕事で、大学など研究機関の先生方のWeb調査のお手伝いをしていますが、調査結果サイトの制作や、報告書の作成、パワーポイントの作成などの依頼もあります。
E2D3で作ったビジュアルは、SVGで書き出せたりするので、そのままイラレで取り込んで加工も可能。作業効率の向上が見込めます。また、非デザイナースタッフでも美しい報告書を作るための素材として利用できるだろうというところで、お仕事にも使えるなーと。

何故か日本では、ボランティアや寄付という行為とビジネス(身も蓋もない言葉で言えば金儲け)をカッチリ分けたがるし、金儲けに勤しむ人間が寄付やらボランティア活動をすると、偽善だの何だのと批判する人々が少なからずいるわけですが、私はボランティアをやることとお仕事であることの間の垣根をあまりかっちりしないほうがいいし、偽善でも節税対策でもいいから、何も行動しないより行動したほうが良いと考えているので、ボランティアでもビジネスでも使えるライセンスだとすっごくありがたいって思う人です。

というわけで、しばらくはE2D3やd3.jsに関するメモが主体になると思いますが、他にもデータの視覚化に関することを色々メモしていきたいと思います。

あ、ちなみにプログラミングはまったくの素人なので、めっちゃ初歩の初歩からメモったりしてて、そんなことも知らんかったのかと思うかもですが、幼児が歩き出すのを眺めるように、微笑ましく見守ってやってください。あと、間違ったことも書いちゃうだろうけど、そんな時は、お手柔らかにご教示いただければ幸いです。

E2D3関連リンク

E2D3 
http://e2d3.org/ja/

DataVisualization – なぜE2D3を作ろうと思ったか? – Qiita
http://qiita.com/yigarashi/items/4a5734f0cc9223a31043

※ハンズオンの時の最後の五十嵐さんの言葉が熱くて良かった。

その他関連リンク

名古屋ギークバー
https://geekbar.doorkeeper.jp/