Edited at

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

More than 3 years have passed since last update.


参加者

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


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 シェア機能



  • 単体実行用のHTML&Javascript作成


  • シェア用のページ&API作成



    • a.e2d3.orgとs.e2d3.orgのVirtualHostingに対応


    • s.e2d3.org/d/[TSVのSHA256] でデータを取得できるように


    • s.e2d3.org/[チャート情報のSHA256]/[TSVのSHA256] でグラフ単体の表示が出来るように




  • og:image用のイメージ作成バッチ



    • Azure Storage Queue に作成リクエスト投入


    • キューから取り出してPhantomJSでスクリーンショットをとる



      • node-webshotの調査


      • Azure Website の Worker を調査


      • e2d3loaderを変更して描画終了時にwindow.callPhantom('takeShot');を実行


      • スクリーンショットを取りAzure Storage BLOBに登録




    • シェア用ページにAzure Storage BLOBへのリンクを追加




  • クライアント側からシェアAPIを叩く


ブログ投稿機能



  • 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: アプリの状態および設定を保持するを参照。

Office.context.document.settingsに、

{

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

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


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

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


将来的に作りたい機能


Google Spread Sheet 連携

名前の通り。


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

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


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

JSFiddleのようにブラウザ上で直接チャートを編集出来るようにしたい。


E2D3 Server 開発環境構築


  • Node.js

  • mongodb

  • redis

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 を採用しています。

開発はdevelopブランチを使用します。


E2D3 Server 初期設定

# 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を起動する。

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

redis-server

mongod

cd e2d3-server

npm run watch


E2D3 起動方法

クライアントサイドの開発を行う際は、e2d3-serverを使用せずに開発した方がやりやすい。

ローカルのcontribディレクトリの中身が高速にロードされる。

cd e2d3-server/e2d3

npm run watch


プログラム解説

[追記]