LoginSignup
3
3

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-07-16

参加者

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

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

プログラム解説

[追記]

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3