kintone dev camp 2016 spring

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

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

Excelによるファイル管理を
kintoneで改善！
7
ファイルをマージして、
集計して…いくら時間が
あっても足りない…
♪
報告報告報告報告
kintone 上でかんたんに
集計までできるから、
すごく楽になった！
報告報告報告報告

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

Excelと比較するとUIが限定的
9
１明細ごとの編集
限られた表現力のチャートのみ利用可能
一覧データのコピー＆ペーストができない
～kintoneでよくある課題～

残したいExcelの機能
10
一覧上での直接編集（複数行のデータを迅速に編集）
コピー＆ペースト
（同一一覧上および外部ファイル）
柔軟なチャート表示
（複合グラフ等）
行／列固定

Excelライクな操作性と表現力を実現
12
１一覧の操作性と表現力を向上

13
2 チャートの表現力（IoT案件でも使える！）
ダッシュボードの作成一覧と複数チャートの表示
セレクターによる選択範囲の指定

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

その他の機能
15
インタラクティブなグループ化
kintone標準の一覧にゲージを表示

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

FlexGridとkintone連携
18
 FlexGridの基本とkintone
– kintoneと連携する場合の基本
～一覧データをExcelライクにファスト編集～

Wijmoとkintoneの連携
20
 Wijmoはクライアント側のJavaScriptライブラリ
 サーバー側との連携はkintone APIを利用
 kintoneのJSON形式を連結可能なJSの配列に変換
REST API
クライアント
（フロントエンド）
サーバー
（バックエンド）
①リクエスト
（GET）
⑤リクエスト
（PUT）
②データ変換
(kin→JS配列)
④データ変換
(JS配列→kin)
CollectionView
FlexGrid
③データ連結
&各種設定

21
REST API
クライアント
サーバー
①リクエスト
（GET）
⑤リクエスト
（PUT）
②データ変換
(kin→JS配列)
④データ変換
(JS配列→kin)
CollectionView
FlexGrid
③データ連結
&各種設定
なにこれ？

CollectionViewによるUIとデータの分離
22
CollectionViewクラスFlexGrid
JavaScript
配列
（データ）
データバインド
（双方向）
提供する処理
カレントレコード管理ソート／フィルタ
ページング
グループ化
編集
変更データの追跡
実行例（変更データの追跡）
元データ
編集行
チェックボックス値を変更
編集データのみをメモリ上にプール
できます。
クライアント側のデータ管理を容易
にしてサーバー側に編集データのみ
を送信できるため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ファイルを出力

37
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 = new
wijmo.grid.DataMap(['kintone','Office','Garoon']);
4. //フィルタ設定
5. var filter = new wijmo.grid.filter.FlexGridFilter(grid);
6.
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. }
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

kintone dev camp 2016 spring

Recommandé

Recommandé

Contenu connexe

Similaire à kintone dev camp 2016 spring

Similaire à kintone dev camp 2016 spring (20)

Dernier

Dernier (10)

kintone dev camp 2016 spring