新世代Java scriptコントロール wijmo5 devsumi_150219
7 likes•3,594 views
Developers Summit 2015講演資料 新世代「JavaScriptコントロール」が登場 ― 新「Wijmo(ウィジモ)」の実力 ― http://event.shoeisha.jp/devsumi/20150219/session/659/
![Wijmo 5[ウィジモ・ファイブ] とは？
• 業務アプリケーション向け
• JavaScript UIライブラリ
• TypeScriptベース
• ECMAScript 5準拠
5](https://image.slidesharecdn.com/javascriptwijmo5devsumi150219-150218233609-conversion-gate01/85/Java-script-wijmo5-devsumi_150219-5-320.jpg)
![Wijmo 5[ウィジモ・ファイブ]の特長まとめ
1. JavaScriptコントロール（ECMAScript 5に準拠）
• プロパティ／デバッグエラー情報／インテリセンス等の生産性の高いシンタックス
2. ハイパフォーマンス／軽量
• 他ライブラリ非依存／プラガブルアーキテクチャで小から大規模開発までカバー
3. AngularJS
• AngularJSサポート
• その他のライブラリもサポート（KnockoutJS ／TypeScript／Bootstrap／Odata）
4. マルチデバイス
• モバイルブラウザ／タッチサポート／レスポンシブレイアウト
5. 業務アプリケーション特化
• 業務要件を網羅したAPI
6. サポート
• 実業務で運用できる安心感
• 定期的なバージョンアップ（機能追加と不具合修正）
• Emailサポート／サンプルと技術記事
35](https://image.slidesharecdn.com/javascriptwijmo5devsumi150219-150218233609-conversion-gate01/85/Java-script-wijmo5-devsumi_150219-35-320.jpg)
![Wijmo 3[ウィジモ・スリー]
• Wijmo 5 とは異なるコンセプトの製品
• レガシーブラウザ対応（IE7+, etc）
• jQuery UIウィジェット（40種類以上）
37
http://wijmo.c1.grapecity.com/products/wijmo-3/
グリッドやチャートなど高度なウィジェットを40種類以上収録
jQuery と
の相性抜群](https://image.slidesharecdn.com/javascriptwijmo5devsumi150219-150218233609-conversion-gate01/85/Java-script-wijmo5-devsumi_150219-37-320.jpg)
![SpreadJS [スプレッドジェイエス]
• Excelライクな操作性を実現するグリッド
• Excelの機能を踏襲
• 細部の操作性,数式(320種類以上),柔軟なセル連結等
• Excelファイルのインポート／エクスポート
38
http://wijmo.c1.grapecity.com/products/spreadjs/
Excelと同等の
UIを提供](https://image.slidesharecdn.com/javascriptwijmo5devsumi150219-150218233609-conversion-gate01/85/Java-script-wijmo5-devsumi_150219-38-320.jpg)
新世代Java scriptコントロール wijmo5 devsumi_150219
- 1. 新世代「JavaScriptコントロール」が登場 ― 新「Wijmo(ウィジモ)」の実力 ― ハッシュタグ：#devsumiD セッションID ：19-D-L グレープシティ株式会社 山﨑 顕由
- 4. Welcome to
- 5. Wijmo 5[ウィジモ・ファイブ] とは？ • 業務アプリケーション向け • JavaScript UIライブラリ • TypeScriptベース • ECMAScript 5準拠 5
- 10. 新世代JavaScript コントロール • 「JavaScriptコントロール」とは？ ⁃ ≒.NETコントロール（≠ jQuery UI ウィジェット） ⁃ プロパティ操作による値取得／設定（getter/setter） ⁃ コントロール間で共通のAPIを持つ（プロパティ／メソッド／イベント） • なぜ「新世代」？ ⁃ ECMAScript 5の活用（Object.defineProperty()） ⁃ TypeScriptベース（モジュール／クラス／オブジェクト指向） 10 ※ECMAScript JavaScriptの標準仕様。Ecma Internationalによって標準化されたJavaScrptの言語コア部分に相当する言語。
- 11. JavaScript コントロールのメリット • 開発効率の向上 1. 容易なプロパティ設定 ⁃ 値を代入するのと同じように設定可能 ⁃ “文字列”によるプロパティ設定やメソッド実行からの脱却 ⁃ インテリセンスの利用（IDE側のサポート必須） 2. エラーの検出 ⁃ プロパティの存在と有効値を実行時に検出 3. 列挙体の利用 11
- 12. DEMO －Wijmo 5 と jQuery UIウィジェット－
- 13. ①容易なプロパティ設定 • 値代入のようなプロパティ設定 • 文字列を使用しないコーディング • インテリセンスの利用 13 //FlexGridで編集を許可 var grid = new wijmo.grid.FlexGrid('#FlexGrid1'); grid.isReadOnly = false; JavaScript コントロール jQuery UI ウィジェット • “文字列”としてプロパティ名を記述 • 大文字小文字の区別も必要 • ミスを誘発しやすい //グリッドウィジェットで編集を許可 $('#grid').wijgrid(‘option', ‘allowEditing', true);
- 14. ②エラー検出 • 実行時にエラーを検出 • エラー原因を出力 14 //FlexGridで編集を許可 var grid = new wijmo.grid.FlexGrid('#FlexGrid1'); grid.isReadOnly = 99; JavaScript コントロール jQuery UI ウィジェット • エラーは発生しない（検出不可） • プロパティ設定も有効にならない //グリッドウィジェットで編集を許可 $('#grid').wijgrid(‘option', ‘allowEditing', 99); Booleanの要求に対して数値を設定 Booleanの要求に対して数値を設定
- 15. ③列挙体の利用 • 値代入のようなプロパティ設定 • 文字列を使用しないコーディング • インテリセンスの利用 15 //FlexGridで編集を許可 var grid = new wijmo.grid.FlexGrid('#FlexGrid1'); grid.selectionMode = wijmo.grid.SelectionMode.Row; JavaScript コントロール jQuery UI ウィジェット • “文字列”としてプロパティ名を記述 • “文字列”として設定値を記述 • 大文字小文字の区別も必要 • ミスを誘発しやすい //グリッドウィジェットで編集を許可 $('#grid').wijgrid(‘option', ‘selectionMode', ‘singleRow');
- 16. • 小さな変化に見えるが、大きな違いを生み出す 1. 容易なプロパティ設定 ⁃ 値を代入するのと同じように設定可能 ⁃ “文字列”を使用しないプロパティ設定やメソッド実行 ⁃ インテリセンスの利用（IDE側のサポート必須） 2. エラーの検出 ⁃ プロパティの存在と有効値を実行時に検出 3. 列挙体の利用 Wijmo 5の利用で開発効率を向上 16
- 18. 軽量／高速パフォーマンス • 組込みやすい「Web UIのユーティリティプレーヤー」 ⁃ 他ライブラリとの依存関係なし ⁃ 各モジュールが軽量 ⁃ プラガブルアーキテクチャ（利用するファイルだけ参照） • 高速パフォーマンス ⁃ ネイティブJavaScript ⁃ jQueryはよいツールだが利用しないことで「速さ」を得られることもある ⁃ 参考記事 ⁃ オンラインデモでベンチマーク公開 18
- 19. 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
- 22. AngularJSサポート • フルスタックのMV*系フレームワーク 参考情報：MVC系フレームワークのトレンド 22出展：Build Insider 人気上昇中のJavaScriptライブラリを調べてみた【2015年版】 http://www.buildinsider.net/web/popularjslib/2015
- 23. AngularJSサポート • AngularJSディレクティブ(*1)の提供 ‐ 全コントロールが対象 ‐ 詳細ドキュメント • 豊富なサンプル ‐ 25種類以上のサンプルを収録（随時追加中） ‐ 一部はオンラインデモとして公開 23 (*1)AngularJSのカスタムHTML要素と属性
- 24. その他の関連言語／ライブラリ • TypeScript ‐ Wijmo 5はTypeScriptで開発されている ‐ ソースファイル（.ts）の収録 ‐ 型定義ファイル（.d.ts）の収録 • KnockoutJS ‐ カスタムバインディング／カスタム要素 ‐ ドキュメントの充実 ‐ サンプル • その他 ‐ Bootstrap/LESS/OData/BreezeJS 24
- 26. マルチデバイスに最適化 • タッチファースト／モバイルファーストで開発 • 単一ライブラリでサポート ‐ モバイルブラウザ／タッチサポート／レスポンシブレイアウト • 参考リソース • オンラインデモ ‐ HTML5ハイブリッドアプリ ‐ ionic + AngularJS + Cordova + Wijmo 5 ‐ Ionic ウェブキャスト ‐ An Introduction to Ionic （英語） 26 ※ionic Apache Cordovaを拡張したモバイルUIフレームワークでAngularJSを採用している
- 28. 業務アプリケーション開発に特化 • FlexGrid の JavaScriptバージョンを収録 ‐ 1991年から提供(ActiveX,WinForms,Silverlight,WPF,WinRT) ‐ 業務アプリケーションにおけるグリッド要件のAPIを既に網羅 • CollectionView ‐ Wijmo 5のUIにバインドする共通データレイヤー ‐ UIからデータの種類を意識しなくてよい ‐ UIとデータ（操作）を分離できるようになる ‐ .NET FrameworkのAPIをベース 28
- 29. CollectionViewクラス *2FlexGrid JavaScript 配列 （データ） データバインド （双方向） ICollectionView*1で提供する処理 カレントレコード管理 ソート／フィルタ ページング グループ化 編集 変更データの追跡 *1 ICollectionViewインターフェース UI要素にデータをバインドするための手段を提供 .NET FrameworkのICollectionViewインターフェースのJavaScript版 *2 CollectionViewクラス ICollectionViewを実装するJavaScript配列用データレイヤー （OData用,BreezeJS用,FireBase用もサンプルとして製品に収録） CollectionViewによるUIとデータの分離 29
- 32. サポート • 業務アプリケーション開発の現実的な課題 ‐ 細部の要件に対応するライブラリの選定および組み合わせ ‐ 要因確保／開発メンバーのスキル ‐ 技術的な課題（新技術に対し消極的にならざるを得ない現実） ‐ 長期間の運用／保守 32 目まぐるしい技術革新が進んでいく中で 「業務アプリケーション」に安心して採用 できるライブラリとは？
- 33. サポート • Wijmo 5は実業務で運用できる安心感を提供 ⁃ 日本語ドキュメント ＆ 日本語サポート ⁃ 豊富なサンプル数（30種類以上 ＆ 技術記事も随時公開） ⁃ 不具合対応や無償サポートサービスの安心感 ⁃ 年3回の定期的なメジャーリリース+αでSP公開 ⁃ コンポーネントベンダーとして20年以上の実績と責任 33
- 35. Wijmo 5[ウィジモ・ファイブ]の特長まとめ 1. JavaScriptコントロール（ECMAScript 5に準拠） • プロパティ／デバッグエラー情報／インテリセンス等の生産性の高いシンタックス 2. ハイパフォーマンス／軽量 • 他ライブラリ非依存／プラガブルアーキテクチャで小から大規模開発までカバー 3. AngularJS • AngularJSサポート • その他のライブラリもサポート（KnockoutJS ／TypeScript／Bootstrap／Odata） 4. マルチデバイス • モバイルブラウザ／タッチサポート／レスポンシブレイアウト 5. 業務アプリケーション特化 • 業務要件を網羅したAPI 6. サポート • 実業務で運用できる安心感 • 定期的なバージョンアップ（機能追加と不具合修正） • Emailサポート／サンプルと技術記事 35
- 37. Wijmo 3[ウィジモ・スリー] • Wijmo 5 とは異なるコンセプトの製品 • レガシーブラウザ対応（IE7+, etc） • jQuery UIウィジェット（40種類以上） 37 http://wijmo.c1.grapecity.com/products/wijmo-3/ グリッドやチャートなど高度なウィジェットを40種類以上収録 jQuery と の相性抜群
- 38. SpreadJS [スプレッドジェイエス] • Excelライクな操作性を実現するグリッド • Excelの機能を踏襲 • 細部の操作性,数式(320種類以上),柔軟なセル連結等 • Excelファイルのインポート／エクスポート 38 http://wijmo.c1.grapecity.com/products/spreadjs/ Excelと同等の UIを提供
- 39. 製品情報
- 40. ウィジモ 検索 各種情報の入手方法 40http://wijmo.c1.grapecity.com
- 41. 製品 ラインナップ Wijmo Enterprise Wijmo 5 Wijmo 3 収録製品 および機能 ・Wijmo 5 ・Wijmo 3 ・Wijmo 3エクスポートサービス ・SpreadJS ・Wijmo 5 ・Wijmo 3 商用価格 （１年契約） 97,200円 59,400円 59,400円 消費税8%込価格 Enterpriseの オプション製品 製品ラインナップ 41 Optional Pack for Wijmo Enterprise ・SpreadJS デザイナ ・SpreadJS Excel I/O ・SpreadJS PDF出力 27,000円
- 42. • 商用ライセンス（１年契約のサブスクリプション） ‐ １開発者につき１ライセンス必要（配布はランタイムフリー） ‐ 年３回（5月/9月/1月）メジャーバージョンアップ ‐ サブスクリプション更新価格：２年目以降は本体価格の40% ‐ Eメールサポート（回数無制限） ライセンス ■特記事項 以下製品のみオープンソースライセンス（GPLv3）と商用ライセンスのデュアルライセンスモデル ・Wijmo 3 ・SpreadJS 42
- 43. お問い合わせ窓口 グレープシティ株式会社 ツール事業部 営業部 メール : [email protected] 電話番号: 048-222-3001 FAX番号: 048-222-1211 営業時間: AM9:00～12:00 PM1:00～6:00 （月～金） 住所: 〒 332-0012 埼玉県川口市本町4-1-8 川口センタービル3F 43