Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

E2D3 ver. 0.2 開発の手順書

3,363 views

Published on

http://e2d3.org

近年の「ビッグデータ」「データサイエンティスト」ブームの影響もあり,Excelを用いてデータ解析を行う人が急速に増えてきた.Excelには多数の統計関数が予め用意されているのみならず,既存関数を組み合わせて独自の統計関数を作成できるという強みがある.しかし,統計関数の自由度に比べて,グラフ作成の自由度はそれほど高くはない.

一方,ビジネスにおいてはグラフのビジュアルインパクトが重要な場面も多く,グラフ作成の自由度を高める機能が現在のExcelには求められている.そこで我々は、グラフ作成の自由度を高める機能を持つ D3(Data-Driven Documents)ライブラリをExcelから呼び出せるOffice用アプリ E2D3(Excel to D3)を開発した.

ユーザーはE2D3を利用することで,D3の詳細な中身を理解する必要なく,簡単なExcel操作のみでビジュアルインパクトが強烈なグラフを作成できる.またコントリビューター(D3プログラマ)にはD3とExcelを簡単に繋ぐためのミドルウェア,及び独自D3グラフを投稿できるプラットホームを開発している.

今後E2D3の基幹部分はOSSとして公開する予定である.

Published in: Data & Analytics
  • Be the first to comment

E2D3 ver. 0.2 開発の手順書

  1. 1. E2D3 ver. 0.2 開発の手順書 http://e2d3.azurewebsites.net/index.html
  2. 2. Index 1. Github 2. 開発環境の構築 3. Office.jsの仕様と注意事項 4. シンプルなチャート作成 5. 複雑なチャートの作成について
  3. 3. Githubからファイルを取得できます https://github.com/E2D3/E2D3-ver.-0.2
  4. 4. 開発環境の構築
  5. 5. Githubからダウンロード distディレクトリの内容にマニフェストファイル以外のすべてのサンプルデータが同梱されてい ます。 お使いの開発環境に展開してください。 https://github.com/E2D3/E2D3-ver.-0.2
  6. 6. 開発環境の設定(Visual Studioを利用しない場合) ○WEBサーバの構築(XAMPPやMAMP、またはネットワーク上のWEBサーバ) ○共有フォルダの作成 (PCに共有フォルダの作成、ネットワークHDD(NAS)、ファイルサーバなどで も可) ○マニフェストファイル(e2d3_sample.xml)を共有フォルダに設置 ○マニフェストファイル(e2d3_sample.xml)の書き換え <DefaultSettings> <SourceLocation DefaultValue="http://localhost/example" /> ←上記のWEBサーバー上のアプリページへ書き換え <RequestedWidth>900</RequestedWidth> <RequestedHeight>600</RequestedHeight> </DefaultSettings> ○Excelの環境設定で、共有フォルダのマニフェストファイルを読み込む設定を追加 Excelを開き、「ファイル」→「オプション」→「セキュリティセンター」→「セキュリティセンターの設定」 ○「信頼できるアプリカタログ」の項目に、共有フォルダのマニフェストファイル設置フォルダへのパスを追加 (※画像は例です)
  7. 7. 開発環境の設定(Visual Studio2013を利用する場合) 上記を参考に、App for Office環境を作成してください。 ○E2D3はコンテンツウィンドウを想定しています。 ○ウィンドウサイズは、横900*縦600を想定しています。 ※Visual Studioを使用する場合は、マニフェストファイルe2d3_sample.xmlは必要ありません。 ※Visual Studio2013を使用する場合は、別途、App for Officeツールセットが必要です。 http://msdn.microsoft.com/ja-jp/library/office/fp142161(v=office.15)
  8. 8. App for Office、Office.jsの仕様に関する 注意事項
  9. 9. Office.js 1.1 【Office.js 1.1の仕様上、実現出来ない事と注意点】 ○アプリから任意のセルを選択、または任意のセル範囲を選択することはできません。 ○セルの選択を解除することはできません。 ○別のシートのデータを取得することはできません。 ○セルの書式、フォーマットを変更することはできません。 ○行・列の追加・削除、セルの結合などはできません。 ○バインドされたデータは、明示的にバインドを解除しない限り、画面遷移後も内部的に維持されま す。
  10. 10. App for Office 【App for Officeの仕様上、実現出来ない事と注意点】 ○実態はWEBアプリケーションになります。 ○InternetExploreを内部的に実行していますので、InternetExploreで出来ないことは出来ません。 ○アプリ側から、PCのローカルファイルにアクセスすることはできません(ファイルアップロードな どの実装は可能です)。 ○外部ファイル(cssファイル、jsファイル、jsonファイル、csvファイルなど)は、公開されている WEBサーバ上のもの以外は取得できません。
  11. 11. シンプルなチャートの作成
  12. 12. ヘッダー <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <script src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js" type="text/javascript"></script> <script src="js/core/e2d3.js" type="text/javascript"></script> <script src="js/jquery/jquery.v2.min.js" type="text/javascript"></script> <script src="js/jquery/jquery.e2d3.js" type="text/javascript"></script> <script src="js/lib/d3.min.js"></script> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> e2d3.initialize(); </script> ← 古いIE対策。必ず実装してください。 ←E2D3 jQueryなどのライブラリはホストサーバより取 得できます。 ←Officeの初期化 構成ファイルは、E2D3稼働サーバで標準で構成されているディレクトリ構成、ファイル名になりま す。このサンプルソースはGithubに公開されています。 ← Office.js
  13. 13. 実装すべき主な機能 明示的にサンプルデータをセットする機能。 ※サンプルデータソースは、htmlファイル内に記載してく ださい ユーザーが任意のデータ範囲を選択できる機 能 $('#set_sample_data').on('click', function () { e2d3.json2Excel(sample_data,function (result) { if (result) { e2d3.setBindData( { id: setBindId, is_prompt: 0 }, function (binding) { e2d3.addChangeEvent(binding, dataUpdate); $("#data_binding_area").fadeOut(function () { $("#submit_area").fadeIn(800); }); }); } }); }); データをセットした際、自動的にセル範囲が選択され るので、setBindDataのis_promptは0を指定していま す。 ※ユーザーが任意のセル範囲を選択する場合は、 サンプルソースの例では、「Set sample data」ボタンをクリックした際に、json2Excelを実行し、htmlソース内に書かれたjsonデータをセル にセットしています。また、セットと同時にデータをバインドし、さらにビジュアライズボタンを表示しています。 e2d3.setBindData( { id: setBindId, is_prompt: 1 }, function (binding) { e2d3.addChangeEvent(binding, dataUpdate); }); }); としています。
  14. 14. バインドIDに関する注意 1. バインドIDは、あなただけが作ったチャートの一意のものにする必要があります。 ユーザーが他のチャートから遷移してきた場合を考えてください。異なるデータフォーマット のチャートを使用しており、さらにセルのデータがバインドされたままの場合、チャート描画 時などで不要なエラーが発生する場合があります。 バインドIDは、バインドするセル範囲毎に、一意のものに指定しておくと、あなたが作成した チャート用のバインドデータが存在するかどうか等を調べることもできます。 2. 基本的に、トップページへ戻るボタンをクリックした際、バインドは解除しておくと良いでし ょう。
  15. 15. データラベルに関する注意 1. ラベルデータを固有のキーとしたスクリプトを書かないでください。 name sales cost japan 23654 2563 United states 58785 8547 var profit[0].name = data[0].sales - data[0].cost; ユーザーの持つ様々なデータに対応できるよう、絶対的な固有名をキーとした参照はしないでください。 topojsonなどのジオメトリチャートを利用する場合は、国名をキーとして利用する場合があります。その場 合は、サンプルデータとしてあらかじめ値をセットできるようにしてください。 また、ヘルプドキュメントに、決まった値でないと描画できないことなど注意を記載してください。
  16. 16. 実装すべきその他の機能 1. ヘルプ機能 チャートで使うデータのフォーマット、使い方、ボタンの説明などのヘルプを記載してください。説明をモー ダルなどで、画面の遷移なく表示することが望ましいでしょう。 2. メニューの表示/非表示機能 ユーザーは画像だけを保存したいと考えるはずです。メニューなどを非表示にし、またそれを再び表示する機 能が必要です。 3. バインドを解除する機能 ユーザーが、あなたが作成したチャートとは異なるチャートから遷移してきた場合、データバインドが残って いる可能性があります。全てのバインドをチェックし、あなたが作成したチャートとは異なるバインドIDが存 在した場合、ユーザーにそれ知らせ、必要であればバインドを解除できなければなりません。 4. トップページへのリンク チャート一覧ページへ戻るリンクを必ず設置してください。その際、バインドを解除する処理をいれると良い
  17. 17. 複雑なチャートの作成について
  18. 18. 多次元構造のチャートを作成する場合
  19. 19. 多次元データをバインドする際の注意 ユーザーのデータは決まった列、決まったフォーマット ではないため、様々な想定が必要です。 例) バインドを複数にわける。 ユーザーに複数回、セル範囲を選択させ、目的別のデー タをわけてバインドする。自然なUIになるように工夫し てください。 バインド 1 バインド 2 バインド 3 注意 ラベル名や値は、ユーザーが用意するファイルによって 様々です。マルチバイトやラベルが数字ではない場合も 想定してください。 また、必要な値が入っていないケースもあります。
  20. 20. E2D3 Project Member

×