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. 複雑なチャートの作成について

3. Githubからファイルを取得できます https://github.com/E2D3/E2D3-ver.-0.2

4. 開発環境の構築

5. Githubからダウンロード distディレクトリの内容にマニフェストファイル以外のすべてのサンプルデータが同梱されています。お使いの開発環境に展開してください。 https://github.com/E2D3/E2D3-ver.-0.2

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)

8. App for Office、Office.jsの仕様に関する注意事項

9. Office.js 1.1 【Office.js 1.1の仕様上、実現出来ない事と注意点】 ○アプリから任意のセルを選択、または任意のセル範囲を選択することはできません。 ○セルの選択を解除することはできません。 ○別のシートのデータを取得することはできません。 ○セルの書式、フォーマットを変更することはできません。 ○行・列の追加・削除、セルの結合などはできません。 ○バインドされたデータは、明示的にバインドを解除しない限り、画面遷移後も内部的に維持されます。

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); }); }); としています。

14. バインドIDに関する注意 1. バインドIDは、あなただけが作ったチャートの一意のものにする必要があります。ユーザーが他のチャートから遷移してきた場合を考えてください。異なるデータフォーマットのチャートを使用しており、さらにセルのデータがバインドされたままの場合、チャート描画時などで不要なエラーが発生する場合があります。バインドIDは、バインドするセル範囲毎に、一意のものに指定しておくと、あなたが作成したチャート用のバインドデータが存在するかどうか等を調べることもできます。 2. 基本的に、トップページへ戻るボタンをクリックした際、バインドは解除しておくと良いでしょう。

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. 複雑なチャートの作成について

18. 多次元構造のチャートを作成する場合

19. 多次元データをバインドする際の注意ユーザーのデータは決まった列、決まったフォーマットではないため、様々な想定が必要です。例) バインドを複数にわける。ユーザーに複数回、セル範囲を選択させ、目的別のデータをわけてバインドする。自然なUIになるように工夫してください。バインド 1 バインド 2 バインド 3 注意ラベル名や値は、ユーザーが用意するファイルによって様々です。マルチバイトやラベルが数字ではない場合も想定してください。また、必要な値が入っていないケースもあります。

20. E2D3 Project Member

E2D3 ver. 0.2 開発の手順書

E2D3 ver. 0.2 開発の手順書

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 開発の手順書