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.

新世代Java scriptコントロール wijmo5 devsumi_150219

3,071 views

Published on

Developers Summit 2015講演資料
新世代「JavaScriptコントロール」が登場 ― 新「Wijmo(ウィジモ)」の実力 ―
http://event.shoeisha.jp/devsumi/20150219/session/659/

Published in: Engineering
  • Be the first to comment

新世代Java scriptコントロール wijmo5 devsumi_150219

  1. 1. 新世代「JavaScriptコントロール」が登場 ― 新「Wijmo(ウィジモ)」の実力 ― ハッシュタグ:#devsumiD セッションID :19-D-L グレープシティ株式会社 山﨑 顕由
  2. 2. Welcome to
  3. 3. Wijmo 5[ウィジモ・ファイブ] とは? • 業務アプリケーション向け • JavaScript UIライブラリ • TypeScriptベース • ECMAScript 5準拠 5
  4. 4. 収録コントロール 6 基本ライブラリ ・Base Control ・Globalization ・CollectionView ・Themes グリッド ・FlexGrid 入力 ・ListBox ・ComboBox ・AutoComplete ・Menu ・Calendar ・InputDate ・InputTime ・InputNumber ・InputColor ・ColorPicker ビジュアライズ ・FlexChart (棒,縦棒,折れ線,面,バブル, ローソク足,株価,散布図,スプラ イン) ・FlexPie ・LinearGauge ・RadialGauge ・BulletGraph ver5.20143.32 時点 新コントロール随時追加中!
  5. 5. http://wijmo.c1.grapecity.com/5/demo/Angular/Explorer/Explorer/#/ http://demos.componentone.com/wijmo/5/Angular/Finance/Finance/ DEMO -基本機能 と 活用例-
  6. 6. 業務アプリケーション特化 8 JavaScriptコントロール 軽量/高速パフォーマンス AngularJS マルチデバイス サポート Wijmo 5の特長
  7. 7. 業務アプリケーション特化 9 JavaScriptコントロール 軽量/高速パフォーマンス AngularJS マルチデバイス サポート Wijmo 5の特長
  8. 8. 新世代JavaScript コントロール • 「JavaScriptコントロール」とは? ⁃ ≒.NETコントロール(≠ jQuery UI ウィジェット) ⁃ プロパティ操作による値取得/設定(getter/setter) ⁃ コントロール間で共通のAPIを持つ(プロパティ/メソッド/イベント) • なぜ「新世代」? ⁃ ECMAScript 5の活用(Object.defineProperty()) ⁃ TypeScriptベース(モジュール/クラス/オブジェクト指向) 10 ※ECMAScript JavaScriptの標準仕様。Ecma Internationalによって標準化されたJavaScrptの言語コア部分に相当する言語。
  9. 9. JavaScript コントロールのメリット • 開発効率の向上 1. 容易なプロパティ設定 ⁃ 値を代入するのと同じように設定可能 ⁃ “文字列”によるプロパティ設定やメソッド実行からの脱却 ⁃ インテリセンスの利用(IDE側のサポート必須) 2. エラーの検出 ⁃ プロパティの存在と有効値を実行時に検出 3. 列挙体の利用 11
  10. 10. DEMO -Wijmo 5 と jQuery UIウィジェット-
  11. 11. ①容易なプロパティ設定 • 値代入のようなプロパティ設定 • 文字列を使用しないコーディング • インテリセンスの利用 13 //FlexGridで編集を許可 var grid = new wijmo.grid.FlexGrid('#FlexGrid1'); grid.isReadOnly = false; JavaScript コントロール jQuery UI ウィジェット • “文字列”としてプロパティ名を記述 • 大文字小文字の区別も必要 • ミスを誘発しやすい //グリッドウィジェットで編集を許可 $('#grid').wijgrid(‘option', ‘allowEditing', true);
  12. 12. ②エラー検出 • 実行時にエラーを検出 • エラー原因を出力 14 //FlexGridで編集を許可 var grid = new wijmo.grid.FlexGrid('#FlexGrid1'); grid.isReadOnly = 99; JavaScript コントロール jQuery UI ウィジェット • エラーは発生しない(検出不可) • プロパティ設定も有効にならない //グリッドウィジェットで編集を許可 $('#grid').wijgrid(‘option', ‘allowEditing', 99); Booleanの要求に対して数値を設定 Booleanの要求に対して数値を設定
  13. 13. ③列挙体の利用 • 値代入のようなプロパティ設定 • 文字列を使用しないコーディング • インテリセンスの利用 15 //FlexGridで編集を許可 var grid = new wijmo.grid.FlexGrid('#FlexGrid1'); grid.selectionMode = wijmo.grid.SelectionMode.Row; JavaScript コントロール jQuery UI ウィジェット • “文字列”としてプロパティ名を記述 • “文字列”として設定値を記述 • 大文字小文字の区別も必要 • ミスを誘発しやすい //グリッドウィジェットで編集を許可 $('#grid').wijgrid(‘option', ‘selectionMode', ‘singleRow');
  14. 14. • 小さな変化に見えるが、大きな違いを生み出す 1. 容易なプロパティ設定 ⁃ 値を代入するのと同じように設定可能 ⁃ “文字列”を使用しないプロパティ設定やメソッド実行 ⁃ インテリセンスの利用(IDE側のサポート必須) 2. エラーの検出 ⁃ プロパティの存在と有効値を実行時に検出 3. 列挙体の利用 Wijmo 5の利用で開発効率を向上 16
  15. 15. 業務アプリケーション特化 17 JavaScriptコントロール 軽量/高速パフォーマンス AngularJS マルチデバイス サポート Wijmo 5の特長
  16. 16. 軽量/高速パフォーマンス • 組込みやすい「Web UIのユーティリティプレーヤー」 ⁃ 他ライブラリとの依存関係なし ⁃ 各モジュールが軽量 ⁃ プラガブルアーキテクチャ(利用するファイルだけ参照) • 高速パフォーマンス ⁃ ネイティブJavaScript ⁃ jQueryはよいツールだが利用しないことで「速さ」を得られることもある ⁃ 参考記事 ⁃ オンラインデモでベンチマーク公開 18
  17. 17. Angular基本 wijmo.angular.js プラガブルアーキテクチャ 19 基本ライブラリ wijmo.js/css FlexGrid wijmo.grid.js FlexChart wijmo.chart.js ゲージ wijmo.gauge.js 入力 wijmo.input.js More to come... Event CollectionView Control Globalize Styles Directives <wj-flex-grid> <wj-flex-grid-column> … Bindings <div data-bind="wjFlexGrid: <div data-bind="wjFlexGridColumn: … 必須 任意 任意 任意 任意 任意 任意 57KB/11KB 61KB 44KB 86KB 123KB 21KB 62KB ※Ver 5.20143.32時点 Knockout基本 wijmo.knockout.js
  18. 18. http://wijmo.c1.grapecity.com/5/demo/Angular/Benchmark/Benchmark/ DEMO -ベンチマーク-
  19. 19. 業務アプリケーション特化 21 JavaScriptコントロール 軽量/高速パフォーマンス AngularJS マルチデバイス サポート Wijmo 5の特長
  20. 20. AngularJSサポート • フルスタックのMV*系フレームワーク 参考情報:MVC系フレームワークのトレンド 22出展:Build Insider 人気上昇中のJavaScriptライブラリを調べてみた【2015年版】 http://www.buildinsider.net/web/popularjslib/2015
  21. 21. AngularJSサポート • AngularJSディレクティブ(*1)の提供 ‐ 全コントロールが対象 ‐ 詳細ドキュメント • 豊富なサンプル ‐ 25種類以上のサンプルを収録(随時追加中) ‐ 一部はオンラインデモとして公開 23 (*1)AngularJSのカスタムHTML要素と属性
  22. 22. その他の関連言語/ライブラリ • TypeScript ‐ Wijmo 5はTypeScriptで開発されている ‐ ソースファイル(.ts)の収録 ‐ 型定義ファイル(.d.ts)の収録 • KnockoutJS ‐ カスタムバインディング/カスタム要素 ‐ ドキュメントの充実 ‐ サンプル • その他 ‐ Bootstrap/LESS/OData/BreezeJS 24
  23. 23. 業務アプリケーション特化 25 JavaScriptコントロール 軽量/高速パフォーマンス AngularJS マルチデバイス サポート Wijmo 5の特長
  24. 24. マルチデバイスに最適化 • タッチファースト/モバイルファーストで開発 • 単一ライブラリでサポート ‐ モバイルブラウザ/タッチサポート/レスポンシブレイアウト • 参考リソース • オンラインデモ ‐ HTML5ハイブリッドアプリ ‐ ionic + AngularJS + Cordova + Wijmo 5 ‐ Ionic ウェブキャスト ‐ An Introduction to Ionic (英語) 26 ※ionic Apache Cordovaを拡張したモバイルUIフレームワークでAngularJSを採用している
  25. 25. 業務アプリケーション特化 27 JavaScriptコントロール 軽量/高速パフォーマンス AngularJS マルチデバイス サポート Wijmo 5の特長
  26. 26. 業務アプリケーション開発に特化 • FlexGrid の JavaScriptバージョンを収録 ‐ 1991年から提供(ActiveX,WinForms,Silverlight,WPF,WinRT) ‐ 業務アプリケーションにおけるグリッド要件のAPIを既に網羅 • CollectionView ‐ Wijmo 5のUIにバインドする共通データレイヤー ‐ UIからデータの種類を意識しなくてよい ‐ UIとデータ(操作)を分離できるようになる ‐ .NET FrameworkのAPIをベース 28
  27. 27. CollectionViewクラス *2FlexGrid JavaScript 配列 (データ) データバインド (双方向) ICollectionView*1で提供する処理 カレントレコード管理 ソート/フィルタ ページング グループ化 編集 変更データの追跡 *1 ICollectionViewインターフェース UI要素にデータをバインドするための手段を提供 .NET FrameworkのICollectionViewインターフェースのJavaScript版 *2 CollectionViewクラス ICollectionViewを実装するJavaScript配列用データレイヤー (OData用,BreezeJS用,FireBase用もサンプルとして製品に収録) CollectionViewによるUIとデータの分離 29
  28. 28. http://wijmo.c1.grapecity.com/5/demo/Angular/Explorer/Explorer/#/infra/trackChanges http://wijmo.c1.grapecity.com/5/demo/Angular/Explorer/Explorer/#/infra/data DEMO -FlexGrid と CollectionView 変更データの追跡-
  29. 29. 業務アプリケーション特化 31 JavaScriptコントロール 軽量/高速パフォーマンス AngularJS マルチデバイス サポート Wijmo 5の特長
  30. 30. サポート • 業務アプリケーション開発の現実的な課題 ‐ 細部の要件に対応するライブラリの選定および組み合わせ ‐ 要因確保/開発メンバーのスキル ‐ 技術的な課題(新技術に対し消極的にならざるを得ない現実) ‐ 長期間の運用/保守 32 目まぐるしい技術革新が進んでいく中で 「業務アプリケーション」に安心して採用 できるライブラリとは?
  31. 31. サポート • Wijmo 5は実業務で運用できる安心感を提供 ⁃ 日本語ドキュメント & 日本語サポート ⁃ 豊富なサンプル数(30種類以上 & 技術記事も随時公開) ⁃ 不具合対応や無償サポートサービスの安心感 ⁃ 年3回の定期的なメジャーリリース+αでSP公開 ⁃ コンポーネントベンダーとして20年以上の実績と責任 33
  32. 32. 業務アプリケーション特化 34 JavaScriptコントロール 軽量/高速パフォーマンス AngularJS マルチデバイス サポート Wijmo 5の特長
  33. 33. Wijmo 5[ウィジモ・ファイブ]の特長まとめ 1. JavaScriptコントロール(ECMAScript 5に準拠) • プロパティ/デバッグエラー情報/インテリセンス等の生産性の高いシンタックス 2. ハイパフォーマンス/軽量 • 他ライブラリ非依存/プラガブルアーキテクチャで小から大規模開発までカバー 3. AngularJS • AngularJSサポート • その他のライブラリもサポート(KnockoutJS /TypeScript/Bootstrap/Odata) 4. マルチデバイス • モバイルブラウザ/タッチサポート/レスポンシブレイアウト 5. 業務アプリケーション特化 • 業務要件を網羅したAPI 6. サポート • 実業務で運用できる安心感 • 定期的なバージョンアップ(機能追加と不具合修正) • Emailサポート/サンプルと技術記事 35
  34. 34. Wijmoシリーズ アプリケーションにあわせて選べる製品ラインナップ
  35. 35. Wijmo 3[ウィジモ・スリー] • Wijmo 5 とは異なるコンセプトの製品 • レガシーブラウザ対応(IE7+, etc) • jQuery UIウィジェット(40種類以上) 37 http://wijmo.c1.grapecity.com/products/wijmo-3/ グリッドやチャートなど高度なウィジェットを40種類以上収録 jQuery と の相性抜群
  36. 36. SpreadJS [スプレッドジェイエス] • Excelライクな操作性を実現するグリッド • Excelの機能を踏襲 • 細部の操作性,数式(320種類以上),柔軟なセル連結等 • Excelファイルのインポート/エクスポート 38 http://wijmo.c1.grapecity.com/products/spreadjs/ Excelと同等の UIを提供
  37. 37. 製品情報
  38. 38. ウィジモ 検索 各種情報の入手方法 40http://wijmo.c1.grapecity.com
  39. 39. 製品 ラインナップ Wijmo Enterprise Wijmo 5 Wijmo 3 収録製品 および機能 ・Wijmo 5 ・Wijmo 3 ・Wijmo 3エクスポートサービス ・SpreadJS ・Wijmo 5 ・Wijmo 3 商用価格 (1年契約) 97,200円 59,400円 59,400円 消費税8%込価格 Enterpriseの オプション製品 製品ラインナップ 41 Optional Pack for Wijmo Enterprise ・SpreadJS デザイナ ・SpreadJS Excel I/O ・SpreadJS PDF出力 27,000円
  40. 40. • 商用ライセンス(1年契約のサブスクリプション) ‐ 1開発者につき1ライセンス必要(配布はランタイムフリー) ‐ 年3回(5月/9月/1月)メジャーバージョンアップ ‐ サブスクリプション更新価格:2年目以降は本体価格の40% ‐ Eメールサポート(回数無制限) ライセンス ■特記事項 以下製品のみオープンソースライセンス(GPLv3)と商用ライセンスのデュアルライセンスモデル ・Wijmo 3 ・SpreadJS 42
  41. 41. お問い合わせ窓口 グレープシティ株式会社 ツール事業部 営業部 メール : sales@grapecity.com 電話番号: 048-222-3001 FAX番号: 048-222-1211 営業時間: AM9:00~12:00 PM1:00~6:00 (月~金) 住所: 〒 332-0012 埼玉県川口市本町4-1-8 川口センタービル3F 43
  42. 42. Wijmo ブース出展してます! お気軽にお立ち寄りください 44 GrapeCityはこちら ★★この会場の目の前★★ 今ここです
  43. 43. ご清聴ありがとうございました。 Wijmoが皆様の開発のお役に立てますように

×