月別アーカイブ:2016年1月

E2D3 ― 1.環境を作る

コメントを残す

こんばんは。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してみよう！

では、さっそく。

１．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

２．Github Desktopをインストール

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

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

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

３．E2D3本体をインストール

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

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

４．E2D3可視化テンプレートをForkする。

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

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

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

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

６．E2D3を起動。

ターミナルで

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

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

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

おまけ

npmの再インストールのコマンド（Mac）