![JavaScript製品ラインナップ
Wijmo [ウィジモ]
http://www.grapecity.co.jp/developer/wijmo
SpreadJS [スプレッドJS]
http://www.grapecity.co.jp/developer/spreadjs
InputManJS [インプットマン]
http://www.grapecity.co.jp/developer/inputmanjs](https://image.slidesharecdn.com/grapecityjavascriptlibrary-180226060844/85/JavaScript-2-320.jpg)
![Wijmo [ウィジモ]
Wijmoは、あらゆる業務アプリケーションの
要件に応えるJavaScript製品、多彩な製品ラ
インナップが収録されたセット製品です。
FlexGrid
多彩な表現力と柔軟性を兼ね備えるグリッド
コントロール
FlexChart
棒グラフ、折れ線グラフ、散布図などの業務
に必要なチャート種別をサポート
OLAP
Excelのようなピボットテーブルの機能
MultiRow
1レコードを複数行で表示し、視認性を高め
るグリッドコントロール
Excel/PDF出力
ブラウザでExcelやPDFファイルへの出力が
できることは業務アプリケーションで重要
Wijmo.FlexGrid
Wijmo.FlexChart
Wijmo.OLAP
Wijmo.MultiRow
・
・
・](https://image.slidesharecdn.com/grapecityjavascriptlibrary-180226060844/85/JavaScript-6-320.jpg)
![Wijmo.FlexGrid
業務で使うグリッドに求められること
データの直接編集
キー入力により自動的に編集を開始して値設定が可能
セル非編集状態から
キーボードで[9]を入力](https://image.slidesharecdn.com/grapecityjavascriptlibrary-180226060844/85/JavaScript-15-320.jpg)
![Wijmo.FlexGrid
キーボード操作
Excelをベースにしたキーボード操作でエンドユーザーが直感的に操作可能
キー 動作
[Enter] 下方向セル移動
[Shift]+[Enter] 上方向セル移動
[Tab] 右方向セル移動
[Shift]+[Tab] 左方向セル移動
[F2] セル編集開始
[Ctl]+[A] セル全選択
[Ctl]+[C] コピー
[Ctl]+[V] ペースト](https://image.slidesharecdn.com/grapecityjavascriptlibrary-180226060844/85/JavaScript-17-320.jpg)
![レイアウトの定義
[{ cells: [ { binding: '顧客名', header: '顧客名', width: 230 } ] }
,{ colspan: 2, cells: [
{ binding: '製品名', header: '商品名', colspan: 2 },
{ binding: '郵便番号', header: '郵便番号' }, { binding: '都道府県', header: '都道府県' },
{ binding: '住所', header: '住所', colspan: 2 }
]
}
,{ cells: [
{ binding: '数量', header: '数量' },
{ binding: '担当者名', header: '担当者名' }
]
}
,{cells: [
{ binding: '単価', header: '単価' },
{ binding: '配送業者', header: '配送業者' }
] }];
header グループヘッダー
colspan グループがまたがるグリッド列の数
cells セルオブジェクトの配列。これらは、colspanプロパティで
Column を拡張します。
Wijmo.MultiRow](https://image.slidesharecdn.com/grapecityjavascriptlibrary-180226060844/85/JavaScript-27-320.jpg)
![InputManJS [インプットマンJS]
InputManJSは、用途別に最適化された日本仕様の
入力用JavaScriptコントロールセットです。
日本の様々な入力シーンを想定して設計され、和
暦、漢数字、ふりがな取得など多くの日本固有の
入力機能を備えます。
InputMan.GcTextBox
InputMan.GcNumber
InputMan.GcMask
InputMan.GcCalendar・
・
・](https://image.slidesharecdn.com/grapecityjavascriptlibrary-180226060844/85/JavaScript-29-320.jpg)
![SpreadJS [スプレッドJS]
SpreadJSは、２つのコントロールを収録
したJavaScriptライブラリです。
Spread.Sheets
HTML5のCanvas上にExcelライクなスプ
レッドシートを描画、 Excelの操作性と豊
富なExcel互換機能を提供します。
Spread.Views
グリッドのデータを様々なレイアウトで
表現できるコントロールです。
ツリー、ガントビュー、タイムライン、
カレンダーなどのさまざまなビューをデ
ザインすることができます。
Spread.Sheets
Spread.Views](https://image.slidesharecdn.com/grapecityjavascriptlibrary-180226060844/85/JavaScript-35-320.jpg)
グレープシティのJavaScriptライブラリ
- 2. JavaScript製品ラインナップ Wijmo [ウィジモ] http://www.grapecity.co.jp/developer/wijmo SpreadJS [スプレッドJS] http://www.grapecity.co.jp/developer/spreadjs InputManJS [インプットマン] http://www.grapecity.co.jp/developer/inputmanjs
- 4. Internet Explorer Microsoft Edge Chrome Firefox Safari IE9以上 ○ ○ ○ ○ IE 11 JavaScript製品のサポート環境 ブラウザで動くプログラム「JavaScript」 動作環境（ブラウザ）
- 10. プラガブル アーキテクチャ 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
- 11. ファイルサイズの比較
- 12. Wijmoの採用事例 弥生株式会社 様 同社の提供するクラウドサービスに採用 Microsoft Dynamics CRM Wijmoの入力／ゲージコントロールをモバイル用 の入力コントロールとしてUIに組み込み、 ワールドワイドで利用 日本ビジネスシステムズ株式会社様 社内システムで取り入れた技術や機能を お客様向けに展開
- 13. Wijmo.FlexGrid
- 14. 拡張性の高いグリッドコントロール Wijmo.FlexGrid 高速／軽量／柔軟なカスタマイズ性 1996年以来、様々なプラットフォームで提供 日本の業務アプリにおけるグリッド要件を、 20年以上にわたり改善 クライアントサイドでExcel／PDFに出力可能 Visual Basic VB5、VB6 .NET Framework WinRT / UWP .NET Framework Windows Forms JavaScript .NET Framework WPF / Silverlight 1996リリース 2001リリース 2013リリース 2014リリース 2010リリース Xamarin Android / iOS 2015リリース
- 17. Wijmo.FlexGrid キーボード操作 Excelをベースにしたキーボード操作でエンドユーザーが直感的に操作可能 キー 動作 [Enter] 下方向セル移動 [Shift]+[Enter] 上方向セル移動 [Tab] 右方向セル移動 [Shift]+[Tab] 左方向セル移動 [F2] セル編集開始 [Ctl]+[A] セル全選択 [Ctl]+[C] コピー [Ctl]+[V] ペースト
- 21. とUIのデータバインドWijmo.CollectionView Wijmo.CollectionView Wijmo.FlexGrid JSON（データ） { “顧客名“ : “洋風居酒屋けい・えっくす”, “住所“ : “伊丹市池尻 5-XX”, “郵便番号“ : “664-0027”, “都道府県“ : “兵庫県” }, { “顧客名“ : “イルカランド”, “住所“ : “成田市台方 XXX”, “郵便番号“ : “286-0003”, “都道府県“ : “千葉県” } データバインド （双方向） 提供する処理 カレントレコード管理 ソート／フィルタ ページング グループ化 編集 変更データの追跡 概念図
- 24. Wijmo.MultiRow
- 27. レイアウトの定義 [{ cells: [ { binding: '顧客名', header: '顧客名', width: 230 } ] } ,{ colspan: 2, cells: [ { binding: '製品名', header: '商品名', colspan: 2 }, { binding: '郵便番号', header: '郵便番号' }, { binding: '都道府県', header: '都道府県' }, { binding: '住所', header: '住所', colspan: 2 } ] } ,{ cells: [ { binding: '数量', header: '数量' }, { binding: '担当者名', header: '担当者名' } ] } ,{cells: [ { binding: '単価', header: '単価' }, { binding: '配送業者', header: '配送業者' } ] }]; header グループヘッダー colspan グループがまたがるグリッド列の数 cells セルオブジェクトの配列。これらは、colspanプロパティで Column を拡張します。 Wijmo.MultiRow
- 30. 使用頻度が高い入力を快適に 1993年以来、様々なプラットフォームで提供 日本市場のあらゆる入力シーンを想定、和暦、漢数字、ふりがな取得など多 くの日本固有の入力機能を備える InputManの歴史 Visual Basic VB2, VB4, VB5, VB6 .NET Framework Windows Forms .NET Framework ASP.NET Web Forms .NET Framework WPF JavaScript 1993リリース 2005リリース 2002リリース 2011リリース 2018リリース
- 33. 収録コントロール
- 37. Spread.Sheets
- 39. の歴史 Visual Basic VB5、VB6 .NET Framework Windows Forms .NET Framework ASP.NET Web Forms .NET Framework WPF JavaScript 1994リリース Spread.Sheets 2003リリース 2004リリース 2012リリース 2016リリース Spread.Sheets SPREAD for Windows Forms SPREAD for ASP.NET Web Forms
- 43. Spread.Views
- 51. お問い合わせ窓口 JavaScriptライブラリに関する お問い合せ窓口 Eメール : [email protected] 電話番号: 048－222－3001 営業時間: AM9:00～12:00 PM1:00～5:30 （月～金） JavaScriptライブラリ導入に関するご相談、評価版の使 い方や製品仕様など、お気軽にお問い合わせください。