Wijmo(ウィジモ)でkintoneのUIもExcel化

1

グレープシティ株式会社

http://bit.ly/kdc2016– extra フォルダ・・・バックアップテンプレート／時間があまった時の教材

– js フォルダ・・・WijmoのJSファイル（トライアル版） と ベースサンプル

– styles フォルダ・・・WijmoのCSSファイル（トライアル版）

– data.csv ・・・本セッションで使用するアプリのテストデータ

– kintone devCamp 2016 Spring.pdf ・・・この資料

事前準備資料

2

本日利用するものをダウンロード願います

※注意

トライアル版は次回以降、製品Webサイトからダウンロードしてください。

（今回は時間節約のためハンズオンに必要なものだけになっています）

http://wijmo.c1.grapecity.com/download/

エル

進め方

1. 会社紹介

2. 製品紹介

3. ハンズオン

4. 解説

5. その他の情報

3

5

Ｘ

Wijmo(ウィジモ)でkintoneのUIもExcel化？？

6

Excelによるファイル管理をkintoneで改善！

7

ファイルをマージして、集計して…いくら時間があっても足りない…

♪

報告 報告 報告 報告

kintone上でかんたんに集計までできるから、すごく楽になった！

報告 報告 報告 報告

Excel管理からkintone導入によって困ったこともありませんか？

8

Excelと比較するとUIが限定的

9

１明細ごとの編集

限られた表現力のチャートのみ利用可能

一覧データのコピー＆ペーストができない

～kintoneでよくある課題～

残したいExcelの機能

10

一覧上での直接編集（複数行のデータを迅速に編集）

コピー＆ペースト（同一一覧上および外部ファイル）

柔軟なチャート表示（複合グラフ等）

行／列固定

Wijmo でできること

11

Excelライクな操作性と表現力を実現

12

１ 一覧の操作性と表現力を向上

Excelライクな操作性と表現力を実現

13

2 チャートの表現力（IoT案件でも使える！）

ダッシュボードの作成 一覧と複数チャートの表示

セレクターによる選択範囲の指定

Excelライクな操作性と表現力を実現

14

3 ピボットテーブルの作成

その他の機能

15

インタラクティブなグループ化

kintone標準の一覧にゲージを表示

16

Wijmo（ウィジモ）を活用することでkintone と Excel のイイとこ取り

今日のテーマ

17

FlexGridとkintone連携

18

FlexGridの基本とkintone

– kintoneと連携する場合の基本

～一覧データをExcelライクにファスト編集～

連携の全体像

19

Wijmoとkintoneの連携

20

Wijmoはクライアント側のJavaScriptライブラリ サーバー側との連携はkintone APIを利用 kintoneのJSON形式を連結可能なJSの配列に変換

REST API

クライアント（フロントエンド）

サーバー（バックエンド）

①リクエスト（GET）

⑤リクエスト（PUT）

②データ変換(kin→JS配列)

④データ変換(JS配列→kin)

CollectionView

FlexGrid

③データ連結&各種設定

Wijmoとkintoneの連携

21

Wijmoはクライアント側のJavaScriptライブラリ サーバー側との連携はkintone APIを利用 kintoneのJSON形式を連結可能なJSの配列に変換

REST API

クライアント（フロントエンド）

サーバー（バックエンド）

①リクエスト（GET）

⑤リクエスト（PUT）

②データ変換(kin→JS配列)

④データ変換(JS配列→kin)

CollectionView

FlexGrid

③データ連結&各種設定

なにこれ？

CollectionViewによるUIとデータの分離

22

CollectionViewクラスFlexGridJavaScript配列

（データ）

データバインド（双方向）

提供する処理

カレントレコード管理 ソート／フィルタ

ページング

グループ化

編集

変更データの追跡

実行例（変更データの追跡）元データ

編集行

チェックボックス値を変更編集データのみをメモリ上にプールできます。

クライアント側のデータ管理を容易にしてサーバー側に編集データのみを送信できるためPostデータの削減にも貢献。

オンラインデモで実際の動作を確認可能<http://demo.grapecity.com/wijmo/5/Angular/Explorer/Explorer/#/infra/trackChanges>

概念図

CollectionView

23

CollectionViewによるデータ管理

‐ Wijmo 5のUIにバインドする共通データレイヤー‐ UIからデータの種類を意識しなくてよい

‐ UIとデータ（操作）を分離できるようになる

‐ クライアント側で変更データの追跡が可能！

‐ Microsoft .NET FrameworkのAPIをベース‐ UI要素にデータをバインドするための手段を提供

‐ .NET FrameworkのICollectionViewインターフェースのJavaScript版

Wijmo 5コントロールとJS（連結）データのデータ管理を便利にしてくれるもの

FlexGridとデータ連結する際は基本コレをかませてください

今後の作業でうまくいかなくなったら・・・

24

調べてもうまく動作しない／ついていけなくなったら・・・

バックアップ用アプリテンプレートを読み込んで、アプリを再作成してください。

‐ アプリテンプレートの場所‐ extra¥backup¥ankenkanri.zip

‐ アプリテンプレートの読み込み方法‐ https://help.cybozu.com/ja/k/admin/import_template.html

‐ テンプレートからアプリを作成する‐ https://help.cybozu.com/ja/k/user/app_template.html

事前準備（kintone）

25

1. アプリの追加と設定2. フォームの編集3. テストデータの読み込み

kintoneの設定

26

１.アプリの追加と設定

「アプリストア」から「案件管理」アプリを追加します

kintoneの設定

27

2.フォームの編集

「案件管理」アプリのフォームを編集します

kintoneの設定

28

2.フォームの編集 各項目の「フィールド名」を「フィールドコード」にコピー

– 全項目分同じようにお願いします

コピー

kintoneの設定

29

3.テストデータの読み込み

最初にダウンロードしてきたファイルを選択 特に変更しないでOK

kintoneの設定

30

読み込み完了後の一覧

準備完了！

事前準備（Wijmo）

31

1. JavaScript／CSSの追加2. 一覧の追加

1.JavaScriptとCSSの追加

32

次ページに記載のJavaScriptとCSSをアップロード

jsフォルダ内の全部フォルダ内の全ファイルです。まとめてアップしてから、順番を変えると早いですよ。

1.wijmo.min.js

2.wijmo.grid.min.js

3.jszip.min.js• 外部ファイル（本来は以下からダウンロードしてください）

• https://cdnjs.cloudflare.com/ajax/libs/jszip/2.2.1/jszip.min.js

4.wijmo.input.min.js

5.wijmo.xlsx.min.js

6.wijmo.grid.xlsx.min.js

7.wijmo.grid.filter.min.js

8.wijmo.culture.ja.min.js

9.AnkenKanri.js

WijmoのJavaScriptとCSSを設定

33

「PC用のJavaScriptファイル」- 「アップロードして追加」

¥styles

1. wijmo.min.css

「PC用のCSSファイル」- 「アップロードして追加」

Wijmoの基本

グリッド基本

Excel出力時に活用する外部ファイル

入力コントロール（フィルタリングで利用）

Excel出力基本

グリッドExcel出力

グリッドファイルフィルタリング

日本語カルチャー

（ビジネスロジック）

先頭に「wijmo」と付いているのが

Wijmoが提供するファイル

2.kintoneの設定

34

カスタマイズする一覧を追加

今回はこの通りの名前にしてください

完成後の画面

35

一覧上でデータ編集可能（データのコピー＆ペーストも可） kintoneのソートやフィルタ、ページングでFlexGridも同期 ExcelボタンでExcelファイルを出力

コード解説

36

Wijmoとkintoneの連携

37

Wijmoはクライアント側のJavaScriptライブラリ サーバー側との連携はkintone APIを利用 kintoneのJSON形式を連結可能なJSの配列に変換

REST API

クライアント（フロントエンド）

サーバー（バックエンド）

①リクエスト（GET）

⑤リクエスト（PUT）

②データ変換(kin→JS配列)

④データ変換(JS配列→kin)

CollectionView

FlexGrid

③データ連結&各種設定

①リクエスト（GET）

38

kintoneのレコード情報を取得するのが目的

– app.record.index.showイベント引数を使用• event.records

（kintoneのレコード表示イベントで代替え）

1. (function () {

2. 'use strict';

3. kintone.events.on('app.record.index.show', function (event) {

4. if (event.viewName !== 'FlexGrid基本') {

5. return;

6. }

7. // (1)kintoneのレコード情報取得

8. var kintoneJSON = event.records;

9. // (2)データ変換処理（kintoneのJSON形式→JavaScript配列）

10. var JSdata = convertKintoneRecords(kintoneJSON);

11. // (3)グリッドに表示処理

12. showContent(JSdata);

13. });

14. })();

②データ変換(kintone JSON→JS配列)

39

kintoneのJSON形式をJSの配列に変換1. function convertKintoneRecords(records) {

2. 'use strict';

3. var newRecords = [];

4. for (var i = 0; i < records.length; i++) {

5. var newRecord = {};

6. // フィールド形式ごとに値を取得

7. for (var key in records[i]) {

8. if (records[i][key].type === 'NUMBER') {

9. newRecord[key] = Number(records[i][key].value);

10. } else if (records[i][key].type === 'CALC') {

11. newRecord[key] = Number(records[i][key].value);

12. } else if (records[i][key].type === 'DATE') {

13. newRecord[key] = new Date(records[i][key].value);

14. } else {

15. newRecord[key] = records[i][key].value;

16. }

17. }

18. newRecords.push(newRecord);

19. }

20. return newRecords;

21. }

②データ変換(kintone JSON→JS配列)

40

単なる文字列操作

[

{

ID: { type: 'NUMBER', value: '0' },

Name: { type: 'SINGLE_LINE_TEXT', value: 'Name 0' }

},

{

ID: { type: 'NUMBER', value: '1' },

Name: { type: 'SINGLE_LINE_TEXT', value: 'Name 1' }

}

]

[

{ ID: 0, Name: 'Name 0' },

{ ID: 1, Name: 'Name 1' }

];

kintoneが返すレコード情報(JSON形式)をWijmoで扱うJavaScript配列の形式に変換フィールド形式ごとにフォーマットが異なるので注意！

③データ連結＆各種設定（1/2）

41次ページに続く

1. function showContent(data) {

2. 'use strict';

3. var grid = wijmo.grid.FlexGrid.getControl('#grid');

4. if (grid == null){

5. // FlexGridを生成

6. grid = new wijmo.grid.FlexGrid('#grid');

7. grid.initialize({

8. autoGenerateColumns: false,

9. columns: [

10. { header: '会社名', binding: '会社名', width: 200 },

11. { header: '先方担当者', binding: '先方担当者', width: 150 },

12. { header: '見込み時期', binding: '見込み時期', format: 'yyyy/MM/dd',mask:'9999/99/99', width: 120 },

13. { header: '確度', binding: '確度', width: 90 },

14. { header: '製品名', binding: '製品名', width: 150 },

15. { header: '単価', binding: '単価', width: 90},

16. { header: 'ユーザー数', binding: 'ユーザー数', width: 110},

17. { header: '小計', binding: '小計' ,isReadOnly:true, width: 120}

18. ]

19. });

グリッドへのデータ連結と基本設定

– initialize メソッドで列情報を定義します

例の定義はFlexGridを利用する際

キーポイントになる設定

③データ連結＆各種設定（2/2）

42

1. createExcelButton(grid); // Excel出力ボタン

2. }

3. // CollectionViewを定義（クライアント側で変更内容を双方向に反映できるデータレイヤー）

4. var cv = new wijmo.collections.CollectionView(data);

5. cv.trackChanges = true; //変更データの追跡を有効

6. grid.itemsSource = cv; //グリッドにデータ設定

7. // CollectionViewのデータ変更イベント

8. cv.collectionChanged.addHandler(function (sender, args) {

9. // (4)(5)kintoneのデータ更新（ボタン押下時等で一括更新したい場合はこの処理を当該イベントに移動するだけ）

10. updateKintoneRecords(cv, grid);

11. });

12. }

モデル（データ）の管理設定

– WijmoのCollectionViewでグリッドのデータを管理

– グリッド上で編集があったデータのみ抽出する場合はtrackChangesプロパティを有効

– イベント設定はaddHandlerメソッドでC#ライクに設定

④データ変換(JS配列→kintone JSON)

43

1. function updateKintoneRecords(cv, grid, fields) {

2. 'use strict';

3. //FlexGrid上の編集データのみを更新

4. for (var ci = 0; ci < cv.itemsEdited.length; ci++) {

5. var record = {};

6. for (var i = 0; i < fields.length; i++) {

7. // (4)kintone APIで更新可能な型に変換（これ以外にも必要に応じて更新）

8. if (grid.columns.getColumn(fields[i]).dataType === wijmo.DataType.Date) {

9. record[fields[i]] = {value: wijmo.Globalize.formatDate(cv.itemsEdited[ci][fields[i]], 'yyyy-MM-dd') }; //DATE

10. } else {

11. record[fields[i]] = {value: cv.itemsEdited[ci][fields[i]] };//その他

12. }

13. }

グリッドのデータを更新可能なkintone JSONに変換

– CollecitioViewnのitemsEditedでモデルに変更があった行のみ抽出可能

④データ変換(JS配列→kintone JSON)

44

単なる文字列操作

{

'ID': {'value': '0' },

'Name': {'value': 'Name 0' }

}

{

'ID':{'value': '1' },

'Name': { 'value': 'Name 1' }

}

[

{ ID: 0, Name: 'Name 0' },

{ ID: 1, Name: 'Name 1' }

];

Wijmoで扱っていたJavaScript配列の形式をkintoneのレコード更新形式 (JSON形式)に変換

⑤リクエスト（PUT）（編集データを更新）

45

1. // (5)kintone上のデータを更新（PUT リクエスト）

2. kintone.api('/k/v1/record', 'PUT', {

3. app: kintone.app.getId(),

4. id: Number(cv.itemsEdited[ci].$id),

5. record: record

6. });

7. cv.itemsEdited[ci]["小計"] = cv.itemsEdited[ci]["ユーザー数"] * cv.itemsEdited[ci]["単価"]; // 見た目上の値を更新（計算フィールド用）

8. }

9. cv.clearChanges(); //変更データの追跡をクリア

10. };

kintone APIによりデータ更新

おまけ

46

1. //Excel出力ボタン

2. function createExcelButton(grid) {

3. var html = kintone.app.getHeaderMenuSpaceElement().innerHTML + '<input id="wijmoExcel" type="button" value="Excel出力">';

4. kintone.app.getHeaderMenuSpaceElement().innerHTML = html;

5. document.getElementById("wijmoExcel").onclick = function () {

6. wijmo.grid.xlsx.FlexGridXlsxConverter.save(grid,

7. { includeColumnHeaders: true }, 'flexgrid.xlsx');

8. }

9. }

グリッドのデータをExcelに出力

– wijmo.grid.xlsx.FlexGridXlsxConverterクラスのsaveメソッドを呼び出すだけ

kintone API

– レコード一覧イベント

– レコード更新（PUT）

Wijmo

– FlexGrid クラス• Columnクラス

– CollectionView クラス

– FlexGridXlsxConverter クラス

– FlexGridFilter クラス

利用するkintone APIとWijmoのクラス一覧～ 1.FlexGridの基本とkintone ～

47

kintone APIの利用方法詳細はジョイゾー 四宮さんの資料を参照http://www.slideshare.net/joyzojp/kintone-aws-2015kintone-javascript-apikintone?ref=http://kintone-aws-handson.connpass.com/event/20433/presentation/

FlexGridの基本とkintone

48

～サンプルを改造しよう～

サンプル改造（１）完成後のイメージ

49

1. 確度列と製品名列をドロップダウンで選択

2. フィルタリングを設定する

①②

編集対象ファイル

50

読み込み済の「AnkenKanri.js」

サンプルの改造（１）

51

1. //ドロップダウン設定

2. grid.columns.getColumn('確度').dataMap = new wijmo.grid.DataMap(['A', 'B', 'C']);

3. grid.columns.getColumn('製品名').dataMap = newwijmo.grid.DataMap(['kintone','Office','Garoon']);

4. //フィルタ設定

5. var filter = new wijmo.grid.filter.FlexGridFilter(grid);

6.

7. createExcelButton(grid); // Excel出力ボタン

1. 確度列と製品名列をドロップダウンで選択– DataMap クラスを利用

2. フィルタリングを設定する– FlexGridFilter クラスを使用

サンプル改造（２）完成後のイメージ

52

1. 単価列がマイナスの場合にセル色を変更する

①

サンプルの改造（２）

53

1. var filter = new wijmo.grid.filter.FlexGridFilter(grid);

2. // 単価列がマイナスの場合に文字色を変更

3. grid.itemFormatter = function (panel, r, c, cell) {

4. if (panel.cellType == wijmo.grid.CellType.Cell && c == 5) {

5. var cellData = panel.getCellData(r, c); //セル値取得

6. var s = cell.style;

7. if (cellData < 0) {

8. s.color = "#ff0000"; //スタイル設定

9. } else {

10. s.color = "";

11. }

12. }

13. }

14. createExcelButton(grid); // Excel出力ボタン

1. 単価列がマイナスの場合にスタイル変更– FlexGridクラスのitemFormatterを利用

– FlexGrid利用時の頻出プロパティ• セルをカスタマイズ表示する時に利用

参考情報：ナレッジベース [FlexGrid] 条件付き書式による入力エラーの通知方法<http://www.grapecity.com/tools/specific/componentone/kb/detail.asp?id=81363>

完成したグリッドでコピペしてみよう

54

1. 同一一覧上のデータをコピペ！2. 外部のExcelファイルへコピペ！3. 外部のExcelファイルからコピペ！4. Excelと同様にタブ区切りのデータもペースト可能

時間に余裕のある方

55

以下の課題に挑戦してみよう

Wijmoではお客様からのよくある質問に対する解決方法をWebに「ナレッジベース」として公開しています。

以下のナレッジベースを見ながらFlexGridをカスタマイズしてください。

1. 列ヘッダの文字列のみ中央寄せにする方法http://www.grapecity.com/tools/specific/componentone/kb/detail.asp?id=81649

2. 条件にあわせて行のスタイルを変更する方法http://www.grapecity.com/tools/specific/componentone/kb/detail.asp?id=81160

ナレッジベースhttp://www.grapecity.com/tools/specific/componentone/kb/?product_id=811

さらに時間に余裕のある方

56

Wijmoのkintone連携用ライブラリを使ってみよう

– 資料が以下にあります

– ¥extra¥connectAPI

Wijmoを使いこなすポイント

57

1. CollectionViewの理解

2. 列定義（Column）の設定

3. itemFormatterを使いこなそう

4. スタイルはCSSをカスタマイズ

– コントロールのサイズとスタイルの設定

ココを掴めばほぼほぼ使いこなせる

もっとExcelにこだわりたい場合・・・

58

FlexSheet or SpreadJS

59

FlexSheet

FlexSheet– Wijmoの１コントロールでFlexGridの拡張コントロール

– FlexGridとほぼ同じ使い方

– 100種類以上の数式やアンドゥ／リドゥを利用可能

SpreadJS– Wijmoとは別製品。スプレッドシートの単体製品だがExcelの再現性がより高い

– 320種類以上の数式や条件付き書式、罫線をサポート

– 2016/5時点ではファイルサイズの制限でkintoneにアップロードできません• 今夏以降のリリースバージョンでこの問題を解決し、晴れてkintone上で利用可能になる予定です。

SpreadJS

Wijmo 技術情報の調べ方

60

Wijmo 技術リソース一覧

61

1. 製品ヘルプ（開発の基本事項APIリファレンス）

2. オンラインデモ（トライアル版に全サンプル収録）

2-1. Wijmo 5エクスプローラ

2.2. 101シリーズ

2.3. 各機能別サンプル（サンプルエクスプローラから起動）

3. ホワイトペーパー（特定のテーマに対する解説）

4. ナレッジベース（FAQ、バグ情報）

5. US版のフォーラム（英語） （FAQ、バグ情報）

6. CodeZine掲載記事（製品概要や基本サンプル）

7. テクニカルサポート（e-mailによる技術サポート *購入者のみ）

利用方法が分からない時に調べるもの

Wijmo: http://wijmo.c1.grapecity.com

Wijmo 技術リソース一覧

62

目的別

目的 参考リソース

搭載機能や製品概要を知りたい 2-1. サンプル- Wijmo5エクスプローラ2-3. サンプル-各機能別サンプル

これらか開発を始める方製品利用の基礎情報

1. 製品ヘルプ（はじめに）2-1. サンプル-101シリーズ6. CodeZine掲載記事

開発中に目的の動作の実装方法がわからない具体的な実装方法が知りたい

1. 製品ヘルプ（API部分）2-3. サンプル-各機能別サンプル4. ナレッジベース

→それでも分からない 5. US版フォーラム（英語）7. テクニカルセールスに問合せ

kintoneユーザー向けの情報

63

Web情報とデモ環境

Wijmo kintone連携情報:

http://wijmo.c1.grapecity.com/kintone/

連携Tips(cybozu.com developer network):

https://goo.gl/4JoNwh

Wijmo kintone連携デモ（ソースコードも入手可能）:

https://gcdemo.cybozu.com/ユーザーID:demo1

Password:test2

ジョイゾーさんとパートナリング

64

本日（5/27）Grapecity x ジョイゾー 協業を発表！– Wijmo/SpreadJSを利用したソリューションをkintone上で展開

– プラグイン／活用方法の啓蒙

– Wijmoが組み込まれたプラグインも同日（5/27）リリース

株式会社ジョイゾー

https://www.joyzo.co.jp/

Wijmoが皆様のkintoneアプリのお役に立てますように

65