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.

kintone dev camp 2016 spring

2,443 views

Published on

kintone devCamp 2016 Springのハンズオンセミナーの資料
http://kintonedevcamp.connpass.com/event/29608/

Published in: Technology
  • Be the first to comment

kintone dev camp 2016 spring

  1. 1. Wijmo(ウィジモ)でkintoneのUIもExcel化 1 グレープシティ株式会社
  2. 2.  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/ エル
  3. 3. 進め方 1. 会社紹介 2. 製品紹介 3. ハンズオン 4. 解説 5. その他の情報 3
  4. 4. 5 X
  5. 5. Wijmo(ウィジモ)で kintoneのUIもExcel化?? 6
  6. 6. Excelによるファイル管理を kintoneで改善! 7 ファイルをマージして、 集計して…いくら時間が あっても足りない… ♪ 報告 報告 報告 報告 kintone 上でかんたんに 集計までできるから、 すごく楽になった! 報告 報告 報告 報告
  7. 7. Excel管理からkintone導入によっ て困ったこともありませんか? 8
  8. 8. Excelと比較するとUIが限定的 9 1明細ごとの編集 限られた表現力のチャートのみ利用可能 一覧データのコピー&ペーストができない ~kintoneでよくある課題~
  9. 9. 残したいExcelの機能 10 一覧上での直接編集(複数行のデータを迅速に編集) コピー&ペースト (同一一覧上および外部ファイル) 柔軟なチャート表示 (複合グラフ等) 行/列固定
  10. 10. Wijmo でできること 11
  11. 11. Excelライクな操作性と表現力を実現 12 1 一覧の操作性と表現力を向上
  12. 12. Excelライクな操作性と表現力を実現 13 2 チャートの表現力(IoT案件でも使える!) ダッシュボードの作成 一覧と複数チャートの表示 セレクターによる選択範囲の指定
  13. 13. Excelライクな操作性と表現力を実現 14 3 ピボットテーブルの作成
  14. 14. その他の機能 15 インタラクティブなグループ化 kintone標準の一覧にゲージを表示
  15. 15. 16 Wijmo(ウィジモ)を活用することで kintone と Excel のイイとこ取り
  16. 16. 今日のテーマ 17
  17. 17. FlexGridとkintone連携 18  FlexGridの基本とkintone – kintoneと連携する場合の基本 ~ 一覧データをExcelライクにファスト編集 ~
  18. 18. 連携の全体像 19
  19. 19. Wijmoとkintoneの連携 20  Wijmoはクライアント側のJavaScriptライブラリ  サーバー側との連携はkintone APIを利用  kintoneのJSON形式を連結可能なJSの配列に変換 REST API クライアント (フロントエンド) サーバー (バックエンド) ①リクエスト (GET) ⑤リクエスト (PUT) ②データ変換 (kin→JS配列) ④データ変換 (JS配列→kin) CollectionView FlexGrid ③データ連結 &各種設定
  20. 20. Wijmoとkintoneの連携 21  Wijmoはクライアント側のJavaScriptライブラリ  サーバー側との連携はkintone APIを利用  kintoneのJSON形式を連結可能なJSの配列に変換 REST API クライアント (フロントエンド) サーバー (バックエンド) ①リクエスト (GET) ⑤リクエスト (PUT) ②データ変換 (kin→JS配列) ④データ変換 (JS配列→kin) CollectionView FlexGrid ③データ連結 &各種設定 なにこれ?
  21. 21. CollectionViewによるUIとデータの分離 22 CollectionViewクラスFlexGrid JavaScript 配列 (データ) データバインド (双方向) 提供する処理 カレントレコード管理 ソート/フィルタ ページング グループ化 編集 変更データの追跡 実行例(変更データの追跡) 元データ 編集行 チェックボックス値を変更 編集データのみをメモリ上にプール できます。 クライアント側のデータ管理を容易 にしてサーバー側に編集データのみ を送信できるためPostデータの削減 にも貢献。 オンラインデモで実際の動作を確認可能 <http://demo.grapecity.com/wijmo/5/Angular/Explorer/Explorer/#/infra/trackChanges> 概念図
  22. 22. CollectionView 23  CollectionViewによるデータ管理 ‐ Wijmo 5のUIにバインドする共通データレイヤー ‐ UIからデータの種類を意識しなくてよい ‐ UIとデータ(操作)を分離できるようになる ‐ クライアント側で変更データの追跡が可能! ‐ Microsoft .NET FrameworkのAPIをベース ‐ UI要素にデータをバインドするための手段を提供 ‐ .NET FrameworkのICollectionViewインターフェースのJavaScript版 Wijmo 5コントロールとJS(連結)データの データ管理を便利にしてくれるもの FlexGridとデータ連結する際は基本コレをかませてください
  23. 23. 今後の作業で うまくいかなくなったら・・・ 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
  24. 24. 事前準備(kintone) 25 1. アプリの追加と設定 2. フォームの編集 3. テストデータの読み込み
  25. 25. kintoneの設定 26 1.アプリの追加と設定  「アプリストア」から「案件管理」アプリを追加します
  26. 26. kintoneの設定 27 2.フォームの編集  「案件管理」アプリのフォームを編集します
  27. 27. kintoneの設定 28 2.フォームの編集  各項目の「フィールド名」を「フィールドコード」にコピー – 全項目分同じようにお願いします コピー
  28. 28. kintoneの設定 29 3.テストデータの読み込み 最初にダウンロードしてきた ファイルを選択 特に変更しないでOK
  29. 29. kintoneの設定 30 読み込み完了後の一覧 準備完了!
  30. 30. 事前準備(Wijmo) 31 1. JavaScript/CSSの追加 2. 一覧の追加
  31. 31. 1.JavaScriptとCSSの追加 32 次ページに記載の JavaScriptとCSSをアップロード
  32. 32.  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が提供する ファイル
  33. 33. 2.kintoneの設定 34 カスタマイズする一覧を追加 今回はこの通りの名前にしてください
  34. 34. 完成後の画面 35  一覧上でデータ編集可能(データのコピー&ペーストも可)  kintoneのソートやフィルタ、ページングでFlexGridも同期  ExcelボタンでExcelファイルを出力
  35. 35. コード解説 36
  36. 36. Wijmoとkintoneの連携 37  Wijmoはクライアント側のJavaScriptライブラリ  サーバー側との連携はkintone APIを利用  kintoneのJSON形式を連結可能なJSの配列に変換 REST API クライアント (フロントエンド) サーバー (バックエンド) ①リクエスト (GET) ⑤リクエスト (PUT) ②データ変換 (kin→JS配列) ④データ変換 (JS配列→kin) CollectionView FlexGrid ③データ連結 &各種設定
  37. 37. ①リクエスト(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. })();
  38. 38. ②データ変換(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. }
  39. 39. ②データ変換(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配列の形式に変換 フィールド形式ごとにフォーマットが異なるので注意!
  40. 40. ③データ連結&各種設定(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を利用する際 キーポイントになる設定
  41. 41. ③データ連結&各種設定(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#ライクに設定
  42. 42. ④データ変換(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でモデルに変更があった行の み抽出可能
  43. 43. ④データ変換(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形式)に変換
  44. 44. ⑤リクエスト(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によりデータ更新
  45. 45. おまけ 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メソ ッドを呼び出すだけ
  46. 46.  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/
  47. 47. FlexGridの基本とkintone 48 ~サンプルを改造しよう~
  48. 48. サンプル改造(1) 完成後のイメージ 49 1. 確度列と製品名列をドロップダウンで選択 2. フィルタリングを設定する ①②
  49. 49. 編集対象ファイル 50  読み込み済の「AnkenKanri.js」
  50. 50. サンプルの改造(1) 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. 7. createExcelButton(grid); // Excel出力ボタン 1. 確度列と製品名列をドロップダウンで選択 – DataMap クラスを利用 2. フィルタリングを設定する – FlexGridFilter クラスを使用
  51. 51. サンプル改造(2) 完成後のイメージ 52 1. 単価列がマイナスの場合にセル色を変更する ①
  52. 52. サンプルの改造(2) 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>
  53. 53. 完成したグリッドでコピペしてみよう 54 1. 同一一覧上のデータをコピペ! 2. 外部のExcelファイルへコピペ! 3. 外部のExcelファイルからコピペ! 4. Excelと同様にタブ区切りのデータもペースト可能
  54. 54. 時間に余裕のある方 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
  55. 55. さらに時間に余裕のある方 56  Wijmoのkintone連携用ライブラリを使ってみよう – 資料が以下にあります – ¥extra¥connectAPI
  56. 56. Wijmoを使いこなすポイント 57 1. CollectionViewの理解 2. 列定義(Column)の設定 3. itemFormatterを使いこなそう 4. スタイルはCSSをカスタマイズ – コントロールのサイズとスタイルの設定 ココを掴めばほぼほぼ使いこなせる
  57. 57. もっとExcelにこだわりたい場合・・・ 58
  58. 58. FlexSheet or SpreadJS 59 FlexSheet  FlexSheet – Wijmoの1コントロールでFlexGridの拡張コントロール – FlexGridとほぼ同じ使い方 – 100種類以上の数式やアンドゥ/リドゥを利用可能  SpreadJS – Wijmoとは別製品。スプレッドシートの単体製品だがExcelの再現性がより高い – 320種類以上の数式や条件付き書式、罫線をサポート – 2016/5時点ではファイルサイズの制限でkintoneにアップロードできません • 今夏以降のリリースバージョンでこの問題を解決し、晴れてkintone上で利用可能になる予定です。 SpreadJS
  59. 59. Wijmo 技術情報の調べ方 60
  60. 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
  61. 61. Wijmo 技術リソース一覧 62 目的別 目的 参考リソース 搭載機能や製品概要を知りたい 2-1. サンプル- Wijmo5エクスプローラ 2-3. サンプル-各機能別サンプル これらか開発を始める方 製品利用の基礎情報 1. 製品ヘルプ(はじめに) 2-1. サンプル-101シリーズ 6. CodeZine掲載記事 開発中に目的の動作の実装方法がわからない 具体的な実装方法が知りたい 1. 製品ヘルプ(API部分) 2-3. サンプル-各機能別サンプル 4. ナレッジベース →それでも分からない 5. US版フォーラム(英語) 7. テクニカルセールスに問合せ
  62. 62. 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
  63. 63. ジョイゾーさんとパートナリング 64  本日(5/27)Grapecity x ジョイゾー 協業を発表! – Wijmo/SpreadJSを利用したソリューションをkintone上で展開 – プラグイン/活用方法の啓蒙 – Wijmoが組み込まれたプラグインも同日(5/27)リリース 株式会社ジョイゾー https://www.joyzo.co.jp/
  64. 64. Wijmoが皆様のkintoneアプリの お役に立てますように 65

×