E2D3 ver. 0.2 開発の手順書
•Download as PPTX, PDF•
2 likes•4,078 views
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として公開する予定である．
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to E2D3 ver. 0.2 開発の手順書
Similar to E2D3 ver. 0.2 開発の手順書 (20)
More from E2D3.org
More from E2D3.org (20)
E2D3 ver. 0.2 開発の手順書
- 1. E2D3 ver. 0.2 開発の手順書 http://e2d3.azurewebsites.net/index.html
- 2. Index 1. Github 2. 開発環境の構築 3. Office.jsの仕様と注意事項 4. シンプルなチャート作成 5. 複雑なチャートの作成について
- 4. 開発環境の構築
- 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. 開発環境の設定（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)
- 10. App for Office 【App for Officeの仕様上、実現出来ない事と注意点】 ○実態はWEBアプリケーションになります。 ○InternetExploreを内部的に実行していますので、InternetExploreで出来ないことは出来ません。 ○アプリ側から、PCのローカルファイルにアクセスすることはできません（ファイルアップロードな どの実装は可能です）。 ○外部ファイル（cssファイル、jsファイル、jsonファイル、csvファイルなど）は、公開されている WEBサーバ上のもの以外は取得できません。
- 11. シンプルなチャートの作成
- 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. 実装すべき主な機能 明示的にサンプルデータをセットする機能。 ※サンプルデータソースは、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); }); }); としています。
- 15. データラベルに関する注意 1. ラベルデータを固有のキーとしたスクリプトを書かないでください。 name sales cost japan 23654 2563 United states 58785 8547 var profit[0].name = data[0].sales - data[0].cost; ユーザーの持つ様々なデータに対応できるよう、絶対的な固有名をキーとした参照はしないでください。 topojsonなどのジオメトリチャートを利用する場合は、国名をキーとして利用する場合があります。その場 合は、サンプルデータとしてあらかじめ値をセットできるようにしてください。 また、ヘルプドキュメントに、決まった値でないと描画できないことなど注意を記載してください。
- 16. 実装すべきその他の機能 1. ヘルプ機能 チャートで使うデータのフォーマット、使い方、ボタンの説明などのヘルプを記載してください。説明をモー ダルなどで、画面の遷移なく表示することが望ましいでしょう。 2. メニューの表示/非表示機能 ユーザーは画像だけを保存したいと考えるはずです。メニューなどを非表示にし、またそれを再び表示する機 能が必要です。 3. バインドを解除する機能 ユーザーが、あなたが作成したチャートとは異なるチャートから遷移してきた場合、データバインドが残って いる可能性があります。全てのバインドをチェックし、あなたが作成したチャートとは異なるバインドIDが存 在した場合、ユーザーにそれ知らせ、必要であればバインドを解除できなければなりません。 4. トップページへのリンク チャート一覧ページへ戻るリンクを必ず設置してください。その際、バインドを解除する処理をいれると良い
- 17. 複雑なチャートの作成について