E2D3基盤制作部定例会 (2015/07/15)

## 参加者

竹内、山本、澤、村上、東郷、五十嵐

## KPI?

### 7月末目標

- Facebook & Twitter シェア機能
- ブログ投稿機能

### 8月末目標

[TBD]


## 開発体制

8月末までは、竹内ソロ。＋外国人？
9月以降に入れるように、触りたいところを触る。


## E2D3 Server開発用サービス選定

### 確認

- E2D3基盤制作部定例会の情報共有ツール
  - とりあえずQiitaで!!
  - グループの作り方を調べる(竹内)
  - QiitaのIDパスワードを共有をする？(竹内)

### 現状

- GitHub
- Azure Website (自動デプロイ)
  - e2d3api(production)の下にstagingとtestingが環境として用意
  - testing: developブランチが常に反映 at.e2d3.org & st.e2d3.org
  - staging: masterブランチが常に反映 as.e2d3.org & ss.e2d3.org
  - production: Azureの管理画面でstagingからSwitch機能を使って反映 a.e2d3.org & s.e2d3.org
- Azure Storage (Table, Queue, BLOB)
- Redis Cache
- Slack

### 使いたいもの候補

必要に応じて入れる

- linterを入れたい


## 開発したいものリスト

- Qiitaで管理してみる。
- 誰担当なのかを明記する。


### e2d3-contribのガイドライン作成

- ウィンドウサイズに応じて
- ガイドラインを守ると何かインセンティブを与えたい
  - これを守らないと使われなくなる
  - スター機能やランキング機能

→ 竹内が気をつけていることをとりあえずQiitaに上げる


### Google Analytics を入れる

- Google Analyticsを入れる
- クリックヒートマップがとれるようなものも入れる？


### Facebook & Twitter シェア機能

- [x] 単体実行用のHTML&Javascript作成
- [x] シェア用のページ&API作成
  - [x] a.e2d3.orgとs.e2d3.orgのVirtualHostingに対応
  - [x] s.e2d3.org/d/[TSVのSHA256] でデータを取得できるように
  - [x] s.e2d3.org/[チャート情報のSHA256]/[TSVのSHA256] でグラフ単体の表示が出来るように
- [x] og:image用のイメージ作成バッチ
  - [x] Azure Storage Queue に作成リクエスト投入
  - [x] キューから取り出してPhantomJSでスクリーンショットをとる
     - [x] node-webshotの調査
     - [x] Azure Website の Worker を調査
     - [x] e2d3loaderを変更して描画終了時に`window.callPhantom('takeShot');`を実行
     - [x] スクリーンショットを取りAzure Storage BLOBに登録
  - [x] シェア用ページにAzure Storage BLOBへのリンクを追加
- [x] クライアント側からシェアAPIを叩く


### ブログ投稿機能

- [x] iframeで埋め込めるようにする
  - 恐らくFB&TWシェアのシェア用ページがそのまま使える


### Gistからのチャート登録機能

e2d3-contribレポジトリへのPull Requestは若干敷居が高いため、気軽にGistからチャートを登録出来るようにしたい。

ユーザが自分専用のチャート一覧画面を作るかどうかは疑問。

- GistのAdapterを作成する
- ユーザ毎にチャートを登録する？
- チャート検索機能？


### 画面全面改定

**UI/UX改善部を作る(澤さん)**
→ 杉田さんを招待

チャートの数が多くなってきたため、整理された形の画面に作り替えたい。

- 低い解像度に対応したデザインも作る
  - レスポンシブデザイン
- ユーザのお気に入り画面
- E2D3運営側からのおすすめ画面
- ランキング画面


### Web版データ可視化カタログサイト

**UI/UX改善部へ(澤さん)**

現在、ExcelでE2D3をインストールしないとどんなデータ可視化があるか見られないため、専用のカタログサイトを作る。


### E2D3データ可視化一覧画面の読み込みの高速化

E2D3のサーバをアメリカ西海岸に置いたら少し改善された気がするが、GitHubに足を引っ張られて相変わらず遅いので改善したい。

キャッシュは現在2段階有り、双方ともRedisに保存されている。

- Express.jsのフロントでJSONをキャッシュ (10分)
- GitHub APIのレスポンスをキャッシュ (1分)
  - GitHub APIのアクセス回数制限があるため、ETagを見つつキャッシュを行う必要がある
- PullRequestベースでごそっとレポジトリをとってくる
- bl.ocks.org

### Excelファイルの保存機能の実装

現在Excelファイルを保存して、再度開いても元の状態に復帰しないため、それが復帰するようにしたい。

[MSDN: アプリの状態および設定を保持する](https://msdn.microsoft.com/JA-JP/library/office/fp123509.aspx)を参照。

`Office.context.document.settings`に、

```js
{
  path: '<チャートのpath>',
  revision: '<チャートのrevision>',
  binding: '<選択範囲?>'
}
```

みたいなものを保存すれば良い気がする。


### AMD形式に対応していないライブラリへの対応

AMD形式になるようにラップする、require.jsのローダプラグインを作ってみようとしたが、`config.shim`を使った方が良さそうなので、e2d3loader.coffeeで`#! requrie=`の行を読み取ってごにょごにょする。


### 将来的に作りたい機能

##### Google Spread Sheet 連携

名前の通り。

##### ブラウザ上でデータをいじれる機能

ブラウザにセルをつくる。

##### ブラウザ上でのチャート編集&投稿機能

[JSFiddle](jsfiddle.net)のようにブラウザ上で直接チャートを編集出来るようにしたい。


## E2D3 Server 開発環境構築

- Node.js
- mongodb
- redis

```bash
curl -L git.io/nodebrew | perl - setup
nodebrew install-binary v0.12.7
nodebrew use v0.12.7
brew install mongodb
brew install redis
```


### E2D3 Server 開発時ディレクトリ構造
```
+-- e2d3-server
  +-- e2d3
    +-- contrib
```


### E2D3 Server のブランチ管理

[GitHub Flow](https://gist.github.com/Gab-km/3705015) を採用しています。
開発は`develop`ブランチを使用します。


### E2D3 Server 初期設定

```bash
# e2d3-server & e2d3 インストール
git clone git@github.com:e2d3/e2d3-server.git --recursive
cd e2d3-server
npm install
# e2d3-contrib配置 (/e2d3-server/e2d3/contrib)
cd e2d3
git clone git@github.com:e2d3/e2d3-contrib.git contrib
```

### E2D3 Server 起動方法

サーバサイドの開発を行う際は、e2d3-serverを起動する。

それぞれ下の三つを別々のウィンドウを立ち上げて実行。

```bash
redis-server
```

```bash
mongod
```

```bash
cd e2d3-server
npm run watch
```

### E2D3 起動方法

クライアントサイドの開発を行う際は、e2d3-serverを使用せずに開発した方がやりやすい。
ローカルのcontribディレクトリの中身が高速にロードされる。

```bash
cd e2d3-server/e2d3
npm run watch
```


## プログラム解説

[追記]