グレープシティJavaScript製品のご紹介 活用のコツと開発のポイント

「GrapeCity Web TECH FORUM 2018」セッションスライド

Transcript

1. 活用のコツと開発のポイント ツール事業部 プロダクトマーケティングマネージャー 村上功光 グレープシティ JavaScript 製品のご紹介
2. はじめに
3. 昨今の Web 開発と業務システムについて 3 Developer Tools レガシーの衰退 Webアプリケーションの構築に広く利用された技術が 現在、サポートの終了を迎えようとしています。 耐用年数 業務システムの耐用年数は一般に5〜10年。 近頃、旧システムの刷新ニーズが増えているようです。 HTML5 レガシーからの移行、新システムの構築にあたり HTML5 / JavaScript の利用に注目が集まっています。
4. 本日のセッション 4 Developer Tools グレープシティ JavaScript 製品のご紹介 活用のコツと開発のポイント
5. 目次 1. 使い分け 2. 使いかた 3. JS フレームワークについて 4. おわりに Developer Tools 5
6. GC JavaScript 製品の使い分け
7. GrapeCity の JavaScript ライブラリ Developer Tools 7 Wijmo InputManJS SpreadJS
8. GrapeCity の JavaScript ライブラリ Developer Tools 8 Wijmo InputManJS SpreadJS
9. Wijmo 9 Developer Tools あらゆる開発に対応する「標準ツール」として
10. Wijmo Developer Tools 10
11. 業務システムに求められる UI Developer Tools 11
12. 業務システムに求められる UI Developer Tools 12 Tree View Input Chart GridView
13. 特徴 13 Developer Tools 40+のコントロール 業務システムに必要とされることの多い UI や機能を豊富に収録 軽量・高速 大量データも高速に処理 ライブラリ利用で懸念されがちなサイズにも注力し、軽量化を実現。 高品質 すべての収録コントロールが品質管理済み
14. InputManJS 14 Developer Tools 「日本仕様」の入力フォームに
15. InputManJS Developer Tools 15
17. 18 漢字・ひらがな・カタカナ 全角・半角入力への対応 入力書式 和暦対応
18. InputManJS ふりがな、文字種変換、マスク 機能 19 Developer Tools 文字種変換 ふりがな取得 マスク
20. 21 入力検証 カレンダー表示 時刻ピッカー 高機能コンボ
21. SpreadJS 22 Developer Tools お客様の「エクセルライク！」に応える
22. SpreadJS Developer Tools 23
23. 業務システムに求められる 「エクセルライク！」 24 Developer Tools
24. 業務システムに求められる 「エクセルライク！」 25 Developer Tools Excel ライクに お願いします！
25. 「Excel ライク」から想定される機能 26 フィルタ キーマップ ピクチャ 数式入力 テーブル スライサー 入力検証 グループ化 Excelテーマ 数式 条件付き書式 マルチシート 罫線 書式 数式 テキストボックス インデント ウィンドウ枠の 固定 セル結合 スパークライン グリッド表示 エクセル関数 チャート エクセル入出力 ソート PDF出力
26. 一般的なグリッドコンポーネントの機能範囲 27 フィルタ キーマップ ピクチャ 数式入力 テーブル スライサー 入力検証 グループ化 Excelテーマ 数式 条件付き書式 マルチシート 罫線 書式 数式 テキストボックス インデント ウィンドウ枠の 固定 セル結合 スパークライン グリッド表示 エクセル関数 チャート エクセル入出力 ソート PDF出力
27. 一般的なスプレッドシートコンポーネントの機能範囲 28 フィルタ キーマップ ピクチャ 数式入力 テーブル スライサー 入力検証 グループ化 Excelテーマ 数式 条件付き書式 マルチシート 罫線 書式 数式 テキストボックス インデント ウィンドウ枠の 固定 セル結合 スパークライン グリッド表示 エクセル関数 チャート エクセル入出力 ソート PDF出力
28. Spread.Sheets の機能範囲 （全部できます） 29 フィルタ キーマップ ピクチャ 数式入力 テーブル スライサー 入力検証 グループ化 Excelテーマ 数式 条件付き書式 マルチシート 罫線 書式 数式 テキストボックス インデント ウィンドウ枠の 固定 セル結合 スパークライン グリッド表示 エクセル関数 チャート エクセル入出力 ソート PDF出力
29. Spread.Sheets による Excel ファイル読込 30 Microsoft Excel
30. Spread.Sheets による Excel ファイル読込 31 GpapeCity Spread.Sheets
31. GrapeCity の JavaScript ライブラリ Developer Tools 32 Wijmo InputManJS SpreadJS
32. 各製品の特徴 Developer Tools 33
33. 各製品の特徴 Developer Tools 34 収録コントロール数 InputManJS 収録コントロール数 : 9 SpreadJS 収録コントロール数 : 2 Wijmo 収録コントロール数 : 40+
34. 各製品の特徴 Developer Tools 35 収録コントロール数 用途特化型 汎用型 InputManJS 収録コントロール数 : 9 SpreadJS 収録コントロール数 : 2 Wijmo 収録コントロール数 : 40+
35. GrapeCity の JavaScript ライブラリ の使い分け 36 Developer Tools Wijmo ？ InputManJS ？ SpreadJS ？ 多様な業務システムの要件に幅広く対応する標準ツールとして 日本固有の入力要件に対応する入力UIライブラリ集として 顧客の思う「Excelライク！」に完全対応するUIとして
36. GC JavaScript 製品の使いかた
37. GrapeCity が おすすめする 製品活用法 1. デザイナの活用 2. ラッピング 3. 組み合わせる Developer Tools 38
38. デザイナの活用 39 Developer Tools GUIベースのアプリ設計で、開発を効率化
39. デザイナ （Wijmo） 40
40. デザイナ （InputManJS） 41
41. デザイナ （SpreadJS） 42
42. ポイント 43 Developer Tools 直感的にデザイン GUIをつかって、UIを直感的に設定 コード量削減 増大しがちな初期化処理のコードも、デザインデータの読み込みのみに 再利用 デザインデータを社内で共有。同一画面の作成工数はゼロに
43. デザイナの用法 44 Developer Tools デザイナによる 外観・プロパティ設定 保存 （JSON出力） プログラムでの JSON読込 初期画面 表示完了
44. ◼ デモ
45. ライブラリをラッピング 46 Developer Tools 最初のひと手間で、開発に柔軟性
46. オーソドックスな API の利用方法 47 Developer Tools API をコール 処理結果を戻す アプリケーション 処理 ライブラリ
47. ビジネスロジックと API 間に生じる仕様の不一致 48 Developer Tools 画面 表示 データ取得 UIへの値設定
48. ビジネスロジックと API 間に生じる仕様の不一致 49 Developer Tools 画面 表示 データ取得 UIへの値設定 • データを表示前に検証したい • 表示したくないデータがある • DB値に応じて変換の上、表示したい • API の動作を補正したい • API の動作を制限したい
49. オーソドックスな API の利用方法 50 Developer Tools window.onload = function( ) { var value; ・・・ // A1セルに値を設定 sheet.getCell(0, 0).setValue( value ); };
50. 例） ラッピング 51 Developer Tools MySetValue( row, col, value ) { // 開発アプリに応じたロジック処理 ・・・ // セルに値を設定 sheet.getCell(row, col).setValue( value ); };
51. API のラッピングで解消 52 Developer Tools API をコール 処理結果を戻す アプリケーション 処理 ライブラリ 関数やクラス処理で ラッピング 柔軟性向上
52. 組み合わせる 53 Developer Tools 複数の製品を活用して、アプリケーションをもっと便利に
53. GrapeCity の JavaScript ライブラリ連携 Developer Tools 54 Wijmo x InputManJS SpreadJS x InputManJS
54. Wijmo x InputManJS 55 Developer Tools InputManJS ドロップダウンプラグイン お好きなコントロールを 組み合わせ ！ InputManJS コントロール
55. Wijmo x InputManJS 56 Developer Tools 従来のコンボボックス With Wijmo (FlexGrid) With Wijmo (TreeView)
56. SpreadJS x InputManJS 57 Developer Tools • Spread.Sheets V12J （2019年1月予）の新機能 • セル型としてInputManJSの機能を利用 • 数値、マスク、カレンダーコントロールの利用が可能に InputManJS セル
57. JavaScript フレームワークについて
58. JavaScript フレームワーク対応状況 Developer Tools 59 Angular React Vue.js Wijmo ◦ ◦ ◦ ◦ InputManJS ◦ ◦ ◦ ◦ SpreadJS ◦ （Spread.Sheetsのみ） ◦ （Spread.Sheetsのみ） ◦ （Spread.Sheetsのみ） ◦ （Spread.Sheetsのみ）
59. JS フレームワークのご利用状況 60 Developer Tools GrapeCity のお客さまは、どんなフレームワークをご利用か？
60. 調査内容 61 Developer Tools • 弊社テクニカルサポートにお知らせいただく 「ご利用フレームワーク」情報を集計。 • 対象製品 ： Wijmo • 集計期間 ： 2017年7月 – 2018年11月 総数として、1056 件のお問い合わせから集計
61. JavaScript フレームワークの利用状況 Developer Tools 62 49.6 % 0.8 % 0.6 % 7.3 % 41.8 % 8 524 6 77 441 期間 2017年7月 – 2018年11月 総数 1,056 件
62. Angular 63 Developer Tools 利用率 49.0%
63. Angular （Ver. 2.x 〜） 64 Developer Tools フルスタック SPA のフロントエンド開発に必要な機能をフル実装 エンタープライズ向け TypeScriptを採用。 エンタープライズ、大規模開発に求められる堅牢性に優れる Google製 新バージョンのテストは、Googleのシステム・アプリへの適用。 世界有数の Tech 企業が品質を担保
64. フルスタック Developer Tools 65 機能 Angular React コンポーネントタイプのUI ◦ ◦ AJAX リクエスト ◦ (Fetch API / axios) ルーター ◦ （React-router） DI（依存性の注入） ◦ (MobX) 入力フォーム作成 ◦ - コンポーネント単位のCSS ◦ (styled-components) XSSプロテクション ◦ ◦ ユニットテストツール ◦ ◦
65. フルスタックでない場合 66 Developer Tools • カバーされていない部分は自分で選定 • 選定工数の懸念 • テスト工数増加の懸念 自分の好きな部品、使いやすい部品などを組み合わせて 最適な下地を構築できるという利点もあります。
66. ◼ AngularJS (V1.x 〜) は2021年6月30日でサポート終了 ◼ 現在 V1.7.x が LTS （Long Time Support） 期間中 ◼ これからの新規開発には不向き AngularJS について 参考 LINK ： https://docs.angularjs.org/misc/version-support-status
67. React と Vue.js 68 Developer Tools 利用率 0.6 % , 7.3%
68. React vs Vue.js Developer Tools 69 機能 React Vue.js コンポーネントタイプのUI ◦ ◦ AJAX リクエスト (Fetch API / axios) (Fetch API / axios) ルーター （React-router） （Vue-router） DI（依存性の注入） (MobX) (di-lite.js / injector.js) 入力フォーム作成 - - コンポーネント単位のCSS (styled-components) ◦ XSSプロテクション ◦ ◦ ユニットテストツール ◦ ◦
69. なぜ Vue.js の利用率が高いのか Developer Tools 70 使いやすいです GrapeCity お客様の声 • 先発のフレームワークから良い部分を吸収 • 理解しやすいコード • 日本語ドキュメント 参考サイト Comparing the React and Vue Ecosystems with a Real-World SPA https://vuejsdevelopers.com/2018/09/04/comparing-vue-and-react/
70. 「Comparing the React and Vue Ecosystems with a Real-World SPA」 より React / Vue.js ルーティングコード比較 <Route path="/dashboard" render={() => ( this.props.user) ? <Dashboard /> : <Redirect to="/" /> )}/> <Route path="/createNote" render={() => ( (this.props.user) ? <CreateNote /> : <Redirect to="/" /> )}/> <Route path="/editNote" render={() => ( (this.props.user) ? <EditNote /> : <Redirect to="/" /> )}/>
71. 「Comparing the React and Vue Ecosystems with a Real-World SPA」 より React / Vue.js ルーティングコード比較 { path: '/account', component: Account, name: 'account', meta: {title: 'Account', requiresAuth: true} }, { path: '/createNote', component: CreateNote, name: 'createNote', meta: {title: 'Create Note', requiresAuth: true} }, { path: '/editNote', component: EditNote, name: 'editNote', meta: {title: 'Edit Note', requiresAuth: true} }
72. https://jp.vuejs.org/index.html 日本語化されている Vue.js の公式サイト
73. フレームワーク ご利用傾向 総括 74 Developer Tools Angular 一番人気のフレームワーク。 企業向け開発に必要とされるフロントエンド機能をフル装備 Vue.js ローカライズを含めた使いやすさで浸透中。 React 弊社のお客様間では一番低い利用率。 *世界的には広く利用されています
74. React vs Vue.js Vue.js の利用でハッピーな人の割合 – state of JS 2018 : https://2018.stateofjs.com/front-end-frameworks/vuejs/
75. React vs Vue.js React の利用でハッピーな人の割合 – state of JS 2018 : https://2018.stateofjs.com/front-end-frameworks/react/
76. おわりに
77. 今回のまとめ 78 Developer Tools 使い分け 特徴をおさえた最適な用途での製品利用で、間違わない開発 使いかた デザイナやラッパー、製品の併用を駆使して、 効率的に高性能なアプリの開発 フレームワーク 安心のAngular。Vue.jsも浸透中。 余裕のあるかたはReactでの検証もあり。
78. END