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.

[GrapeCity Web TECH FORUM 2018]グレープシティJavaScript製品のご紹介 活用のコツと開発のポイント

337 views

Published on

2018年12月7日(金)に開催された「GrapeCity Web TECH FORUM 2018」より、グレープシティ株式会社 ツール事業部 プロダクトマーケティングマネージャー 村上功光のセッション資料です。

Published in: Technology
  • Be the first to comment

  • Be the first to like this

[GrapeCity Web TECH FORUM 2018]グレープシティJavaScript製品のご紹介 活用のコツと開発のポイント

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

×