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.

【Web TECH FORUM 2017 in大阪】グレープシティのJavaScriptライブラリ

291 views

Published on

Web TECH FORUM 2017 in大阪
グレープシティ株式会社
テクニカルセールス 森谷勝

Published in: Technology
  • Be the first to comment

  • Be the first to like this

【Web TECH FORUM 2017 in大阪】グレープシティのJavaScriptライブラリ

  1. 1. グレープシティの JavaScriptライブラリ グレープシティ 森谷 勝
  2. 2. GrapeCityのJavaScript製品ラインナップ SPREADJS
  3. 3. HTML5/JavaScriptのUI メリット クライアントアプリケーションと同等の操作性 インストール不要 デメリット 古いブラウザでは動かない 初めての開発では学習コストがかかる
  4. 4. SPREADJS WijmoとSpreadJSサポート ブラウザで動くプログラム「JavaScript」 動作環境(ブラウザ) Internet Explorer Microsoft Edge Chrome Firefox Safari IE9以上 ○ ○ ○ ○
  5. 5. Wijmo(ウィジモ) Wijmoは、あらゆる業務アプリケーションの 要件に応えるJavaScript製品、多彩な製品ラ インナップが収録されたセット製品です。 多彩な表現力と柔軟性を兼ね備えるグリッド コントロールFlexGrid 棒グラフ、折れ線グラフ、散布図などの業務 に必要なチャート種別をサポートする FlexChart Excelのようなピボットテーブルの機能を 持ったOLAP 1レコードを複数行で表示し、視認性を高め るグリッドコントロールMultiRowなど またブラウザでExcelファイルとPDFファイ ルの出力が出来ることも業務アプリケーショ ンでは重要です。 Wijmo.FlexGrid Wijmo.FlexChart Wijmo.OLAP Wijmo.MultiRow ・ ・ ・
  6. 6. 多彩な製品がオールインワン グリッド チャート/ゲージ 入力 ピボットテーブル Excel/PDF出力複数行グリッド
  7. 7. コントロール一覧 基本ライブラリ Globalization CollectionView Theme Clipboard Event Validation PrintDocument グリッド FlexGrid MultiRow FlexSheet 入力 Calendar InputDate InputTime InputDateTime InputMask InputNumber ComboBox MultiSelect AutoComplete MultiAutoComplete ListBox InputColor ColorPicker チャート FlexChart FlexPie FinancialChart FlexRadar TreeMap Sunburst BoxWhisker Waterfall MovingAverage TrendLine ErrorBar YFunction ParametricFunction ファイル Excel PDF ナビゲーション TreeView Popup Menu データ可視化 OLAP RadialGauge LinearGauge BulletGraph
  8. 8. コントロール一覧(日本語名) 基本ライブラリ グローバリゼーション データ管理 テーマ クリップボード イベント 検証 印刷 グリッド データグリッド 複数行グリッド スプレッドシート 入力 カレンダー 日付入力 時刻入力 日時入力 マスク入力 数値入力 コンボボックス 複数選択 入力補完 タグ入力 リストボックス 色入力 色選択 チャート 基本チャート 円、ドーナツ 株価 レーダー、ポーラー ツリーマップ サンバースト 箱ひげ図 ウォーターフォール 移動平均線 近似曲線 エラーバー Y関数 パラメーター関数 ファイル Excel PDF ナビゲーション ツリービュー ポップアップ メニュー データ可視化 ピボット分析 円形ゲージ 線形ゲージ ブレットグラフ
  9. 9. プラガブル アーキテクチャ Event CollectionView Control Globalize Styles Directives <wj-flex-grid> <wj-flex-grid-column> … 必須 任意 任意 任意 任意 任意 85KB/47KB 157KB 136KB 196KB 28KB 107KB ※Ver 5.20172.334時点 FlexGrid Filter wijmo.grid.filter.js FlexGrid GroupPanel wijmo.grid.grouppanel.js FlexGrid Detail wijmo.grid.detail.js ゲージ wijmo.gauge.js 入力 wijmo.input.js その他 FlexGrid wijmo.grid.js 拡張ライブラリ 基本ライブラリ wijmo.js/css AngularJS wijmo.angular.js FlexChart wijmo.chart.js FlexChart Analytics wijmo.chart.analytics.js FlexChart Annotation wijmo.chart.annotation.js FlexChart Interaction wijmo.chart.interaction.js
  10. 10. ファイルサイズの比較
  11. 11. Wijmoの採用事例 弥生株式会社様 http://wijmo.c1.grapecity.com/casestudy_yayoi/ 株式会社インテリジェンス様 http://wijmo.c1.grapecity.com/casestudy_intelligence/ Microsoft Dynamics CRM http://wijmo.c1.grapecity.com/casestudy_ms/
  12. 12. Wijmo.FlexGrid
  13. 13. 拡張性の高いグリッドコントロール Wijmo.FlexGrid  高速/軽量/柔軟なカスタマイズ性  1996年以来、様々なプラットフォームで提供  日本の業務アプリにおけるグリッド要件を、 20年以上にわたり改善  クライアントサイドでExcel/PDFに出力可能
  14. 14. の歴史 Visual Basic VB5、VB6 WinRT / UWP .NET Windows Forms JavaScript W P F / Silverlight 1996リリース 2001リリース 2013リリース 2014リリース 2010リリース Wijmo.FlexGrid Wijmo.FlexGrid
  15. 15. Wijmo.FlexGrid 業務で使うグリッドに求められること データの直接編集 キー入力により自動的に編集を開始して値設定が可能 セル非編集状態から キーボードで[9]を 入力
  16. 16. Wijmo.FlexGrid コピー&ペースト(複数行/複数列) 同一グリッド上でコピー&ペースト Excelとのコピー&ペースト FlexGrid Excel
  17. 17. Wijmo.FlexGrid キーボード操作 Excelをベースにしたキーボード操作でエンドユーザーが直感的に操作可能 キー 動作 [Enter] 下方向セル移動 [Shift]+[Enter] 上方向セル移動 [Tab] 右方向セル移動 [Shift]+[Tab] 左方向セル移動 [F2] セル編集開始 [Ctl]+[A] セル全選択 [Ctl]+[C] コピー [Ctl]+[V] ペースト
  18. 18. Wijmo.FlexGrid フィルターとソート Excelのようなフィルターとソート
  19. 19. Wijmo.FlexGrid スクロールの固定
  20. 20. Wijmo.CollectionView
  21. 21. とUIのデータバインドWijmo.CollectionView Wijmo.CollectionView Wijmo.FlexGrid JSON(データ) { “顧客名“ : “洋風居酒屋けい・えっくす”, “住所“ : “伊丹市池尻 5-XX”, “郵便番号“ : “664-0027”, “都道府県“ : “兵庫県” }, { “顧客名“ : “イルカランド”, “住所“ : “成田市台方 XXX”, “郵便番号“ : “286-0003”, “都道府県“ : “千葉県” } データバインド (双方向) 提供する処理 カレントレコード管理 ソート/フィルタ ページング グループ化 編集 変更データの追跡 概念図
  22. 22. 変更データの追跡 実行例(変更データの追跡) オンラインデモで実際の動作を確認可能 <http://demo.grapecity.com/wijmo/5/Angular/Explorer/Explorer/#/infra/trackChanges> 編集データのみをメモリ上にプールで きます。 クライアント側のデータ管理を容易に してサーバー側に編集データのみを送 信できるためPostデータの削減にも貢 献します。 編集 Wijmo.CollectionView
  23. 23. Wijmo.FlexGrid グループ化 +Wijmo.CollectionView
  24. 24. Wijmo.MultiRow
  25. 25. 1レコードを複数行で表示 MultiRowは、1レコードを複数行で表示できるグリッドコントロー ルです。通常のグリッドと比較して、横方向にスクロールしなくて も多くのフィールドを1画面で表示できるという特長があります。 MultiRowは、FlexGridの拡張コントロールであり、FlexGridと同 じ操作性と機能を提供し、列レイアウト定義情報を設定するだけで 複数行のレイアウトでグリッドを表示することができます。 Wijmo.MultiRow
  26. 26. Wijmo.MultiRow ギャラリー
  27. 27. SpreadJS
  28. 28. New SpreadJS(2つのコントロール) 新しくリリースされるSpreadJSは、2つ のコントロールが収録されます。 Spread.Sheetsは、 HTML5のCanvas上 にExcelライクなスプレッドシートを描画、 Excelの操作性と豊富なExcel互換機能を 提供します。 新たに追加されるSpread.Viewsは、グ リッドのデータを様々なレイアウトで表 現できるコントロールです。 ツリー、ガントビュー、タイムライン、 カレンダーなどのさまざまなビューをデ ザインすることが出来ます。 Spread.Sheets Spread.Views 2017年9月27日リリース
  29. 29. 2つのコントロール Spread.Sheets Spread.Views
  30. 30. SpreadJSの採用事例 リックソフト株式会社様 http://jp.spread.grapecity.com/spreadjs/case/ricksoft/ リックソフト株式会社様は、プ ロジェクト管理ツール「JIRA」 とプロジェクト管理情報ツール 「Confluence」を中心とした多 くの製品ラインナップをもつア トラシアン社の正規販売代理店。 近年ではユーザーからのフィー ドバックをもとにしたアドオン 製品の開発にも注力し同社が3 番目にリリースしたアドオン製 品「IssueEditor for JIRA(イ シューエディター)」の開発に SpreadJSを採用。 “Canvasベースで高速に動くこと“ パフォーマンス重視の開発には SpreadJSが最適でした
  31. 31. SPREADJS Spread.Sheets
  32. 32. Excelの操作性と機能を持ったコントロール Spread.Sheets
  33. 33. の歴史 Visual Basic VB5、VB6 .NET Windows Forms ASP.NET Web Forms W P F JavaScript 1994リリース Spread.Sheets 2003リリース 2004リリース 2012リリース 2016リリース Spread.Sheets
  34. 34. Excelの再現性Spread.Sheets
  35. 35. Excelの再現性Spread.Sheets 数式と関数 Spread.Sheetsは、日付、財務、統計、検 索、文字列など380種以上のExcel関数をサ ポートしています。 ほぼ全ての表計算関数がExcel互換となって おり、Excelファイルをインポートした場合 も集計結果を高い精度で再現します。 書式設定 Spread.Sheetsは、Excelと同様の書式文字 列を使用して、セルデータの表示形式を柔 軟に設定できます。日本市場に欠かせない 和暦日付や通貨記号表示にもしっかり対応 しています。
  36. 36. SPREADJS Spread.Views
  37. 37. Spread.Views データを様々なレイアウトで表現できる新しいグリッド
  38. 38. Spread.Views 1レコードを複数行で表示
  39. 39. Spread.Views 日付に関連する表現
  40. 40. Spread.Views タスクや工程の管理
  41. 41. Spread.Views 画像と関連付けされるデータ
  42. 42. モバイルでの視認性Spread.Views
  43. 43. モバイルでの視認性Spread.Views
  44. 44. お問い合わせ窓口 JavaScriptライブラリに関する お問い合せ窓口 Eメール : sales@grapecity.com 電話番号: 048-222-3001 営業時間: AM9:00~12:00 PM1:00~5:30 (月~金) JavaScriptライブラリ導入に関するご相談、評価版の使 い方や製品仕様など、お気軽にお問い合わせください。

×