Recommended
More Related Content
Similar to グレープシティ製品からみるSPA開発のトレンドと動向
Similar to グレープシティ製品からみるSPA開発のトレンドと動向 (20)
More from Developer Solutions事業部 メシウス株式会社 （旧グレープシティ株式会社）
More from Developer Solutions事業部 メシウス株式会社 （旧グレープシティ株式会社） (20)
Recently uploaded
Recently uploaded (9)
グレープシティ製品からみるSPA開発のトレンドと動向
- 3. Wijmo 収録コントロール例 3DeveloperTools グリッドビュー チャート インプット ゲージ ピボット
- 4. Wijmo 収録コントロール一覧 4DeveloperTools • FlexGrid • MultiRow • FlexSheet • TabPanel • TreeView • Popup • Menu • OLAP • RadialGauge • LinearGauge • BulletGraph • Calendar • InputDate • InputTime • InputDateTime • InputMask • InputNumber • ComboBox • AutoComplete • MultiAutoComplete • ListBox • ColorPicker • InputColor • FlexChart • FinancialChart • BarChart • LineChart • AreaChart • BubbleChart • StockChart • ScatterChart • PieChart • SunburstChart • PolarChart • RadarChart • Treemap • CollectionView • Clipboard • Globalization • Event • Validation • Theme • Excel • PDF • PDF Viewer • Print Document • Report Viewer グリッド ナビゲーション データ可視化 入力 チャート 基本機能 データ
- 6. Wijmo リリースサイクルと機能実装、販売エリア 6DeveloperTools リリースサイクル V1 V2 V3 Japan U.S China Korea, Sounth 販売拠点国 と 担当者開発会議 新機能 機能強化 環境対応 不具合修正 要 望 意 見 近 況 報 告
- 7. JS 市場のトレンドに追従する Wijmo 7DeveloperTools 2016 2018 ES6版モジュール 提供開始 WebComponent サポート SASSサポート Angular(V2+) サポート開始 React サポート開始 Vue.js サポート開始 TypeScript 3 対応 Wijmo Blazor （仮） 2019
- 9. フレームワーク対応からみるトレンド 9DeveloperTools Angular / React / Vue.js などの利用傾向について
- 10. ◼ テクニカルサポートに寄せられる「利用フレームワーク」項目の調査結果 ◼ 対象ライブラリ ： Wijmo ◼ 対象期間 ： 2017年7月〜2019年11月 ◼ 総件数 ： 2019件のお問い合わせから調査
- 11. JSフレームワーク利用傾向 11DeveloperTools 1 2 3 4 5 未使用・未選択 未使用・未選択 AngularJS knockout Bootstrap Bootstrap AngularJS Vue.js Angular Angular Bootstrap 未使用・未選択 Vue.js AngularJS Angular 2019 2018 2017
- 12. JSフレームワーク利用傾向 12DeveloperTools 4 5 AngularJS knockout AngularJS Vue.js Vue.js AngularJS 未使用・未選択 未使用・未選択 Bootstrap Bootstrap Angular Angular Bootstrap 未使用・未選択 Angular1 2 3 2019 2018 2017
- 13. JSフレームワーク利用傾向 13DeveloperTools 1 2 3 未使用・未選択 未使用・未選択 AngularJS knockout Bootstrap Bootstrap AngularJS Angular Angular Bootstrap 未使用・未選択 AngularJS Angular 2019 2018 2017 Vue.js Vue.js4 5
- 14. JSフレームワーク利用傾向 14DeveloperTools 1 2 3 未使用・未選択 未使用・未選択 knockout Bootstrap Bootstrap Vue.js Angular Angular Bootstrap 未使用・未選択 Vue.js Angular 2019 2018 2017 AngularJSAngularJS AngularJS 4 5
- 15. JSフレームワーク利用傾向 15DeveloperTools 6 位以降のライブラリ 2019 2018 2017 Knockout Vue.js React React React Knockout 緩やかに新技術が 浸透してきています
- 20. WebComponents 20DeveloperTools Input 1 Input 2 Input 3 Input 4 Submit アプリケーション画面 { JS }{ CSS } ファイル構成 （標準技術のみで実現） Component1 Component2 <!DOCTYPE html> <html> ・・・ <body> <component1></component1> <component2></component2> </body> </html> { HTML } JSで処理
- 21. WebComponents 21DeveloperTools WijmoFlexGrid 状況 2018年7月 • Wijmo 2018J v2 でWebComponentsに対応 • いち早く対応し、β版として機能提供 現在 • 引き続きβ版 • お客様さまからの反響・お問い合わせ少 停滞気味 <wjc-flex-grid id="grid"> <wjc-flex-grid-column binding="No"></wjc-flex-grid-column> <wjc-flex-grid-column binding="商品名"></wjc-flex-grid-column> <wjc-flex-grid-column binding="受注日"></wjc-flex-grid-column> <wjc-flex-grid-column binding="金額"></wjc-flex-grid-column> <wjc-flex-grid-column binding="値引"></wjc-flex-grid-column> </wjc-flex-grid> Index.html
- 23. SASS 23DeveloperTools ul { background: #000; } ul li { margin-bottom: 2rem; } ul li img { display: block; } ul{ background: #000; li{ margin-bottom: 2rem; img{ display: block; } } } CSS SASS • セレクタのネスト
- 24. SASS 24DeveloperTools .title { color: #002e73; } .subtitle { color: #1f5fa9; } .mainbox { background: #002e73; } $mainColor:#002e73; $subColor:#1f5fa9; .title{ color: $mainColor; } .subtitle{ color: $subColor; } .mainbox{ background: $mainColor; } CSS SASS • 変数の使用
- 25. SASS 25DeveloperTools // 例： // 任意のpx値をページ幅に対する割合で返す関数 $pagewidth: 1000px; @function gen-percent($target) { @return ($target / $ pagewidth) * 100%; } .item-box { width: gen-percent(410px); // 結果 width: 41% } SASS • 関数の利用
- 26. SASS 26DeveloperTools // Wijmoテーマカラーを設定します $wj-bkg: #fcfcfc; $wj-txt: #082d43; $wj-bdr: none; ： @import "../wijmo.scss"; Wijmo ＋ SASS によるテーマ設定 状況 2018年7月 • Wijmo 2018J v2 でSASSに対応 現在 • すでに業務でご利用中のお客様有り • 使用を検討しているお客様も有り 浸透の兆しあり
- 29. 29DeveloperTools Blazor .NET言語でコードを記述 コンパイル .NET アセンブリ の完成 1 2 3 Web ブラウザ上の WebAssembly で動作 単一言語によるSPA開発を実現
- 33. 33DeveloperTools
- 34. 新製品 ActiveReportsJS 34DeveloperTools JSライブラリ 長年の販売実績を誇る帳票ライブラリ製品 ActiveReports の JavaScript ライブラリ 版 サーバー依存なし 帳票出力をクライアントサイドで実現 モダンな帳票アプリ開発のニーズにマッチする新製品 安定の使い勝手 日本の厳しい帳票仕様に応える ActiveReports の性能を継承 クライアントサイドの帳票開発も強力にサポート
- 35. 製品構成 35DeveloperTools 帳票デザイナ 帳票エンジン 帳票ビューワ JavaScript デスクトップ上での帳票デザインを実現する アプリケーション（Windows/MacOSに対応） 帳票作成エンジン （ JavaScript ライブラリ ） ブラウザ上での帳票閲覧を実現する帳票ビューワ （ JavaScript ライブラリ ）
- 36. ActiveReportsJS による 帳票開発 36DeveloperTools 1. 帳票定義ファイルの作成 2. 表示データの読込 3. 定義ファイルを基にした帳票の生成 （ビューワによる帳票閲覧と各種形式への保存・印刷）
- 38. ActiveReportsJS による 帳票開発 38DeveloperTools 1. 帳票定義ファイルの作成 2. 表示データの読込 3. 定義ファイルを基にした帳票の生成 （ビューワによる帳票閲覧と各種形式への保存・印刷）
- 40. ActiveReportsJS で 作成できる帳票 40DeveloperTools • 定型、非定型、グラフィカルなものまで 様々な帳票を作成可能 • 行間・文字ピッチの指定、 均等割付、縦書き、PDFへの外字埋め込み、 禁則処理、など日本固有の要件に対応 • 27種のチャート、28種のバーコードが出力可能
- 43. Overview 43DeveloperTools • Excelライクを実現するスプレッドシートライブラリ新版 • 30以上の機能追加を実施 • 今日は特におすすめしたい4つの機能をご紹介
- 45. A 1 氏名 役職 所属 セル（雛形適用後） 新しいセル型 ： テンプレート型 45DeveloperTools 氏名 役職 所属 雛形（テンプレート）セル A 1 A 1 氏名 役職 所属 むらかみ エンジニア 開発部 セル（表示結果） 1つのセルに複数の情報を表示できるようになります。 name :“むらかみ”, role :“エンジニア”, team :“開発部 データ
- 46. 新しいセル型 ： テンプレート型 46DeveloperTools 1 氏名 役職 所属 むらかみ エンジニア 開発部 氏名 役職 所属 むらかみ エンジニア 開発部 メンバー情報 1 2 3 担当 案件A 連絡先 m@grapecity.com メンバー情報 担当 連絡先 案件A m@grapecity.com セル結合で対応セル結合で対応 }1レコードに対して3行必要 }1行で実現！ いままで これから セル結合で対応
- 48. セルボタン 48DeveloperTools Button文字列・テキスト セル内に テキストとボタン を 表示できるようになりました Aボタン Bボタンテキスト Aボタン Bボタンテキスト ファイルをさがす すすむ・もどる ボタンの複数配置・両サイド ボタンの複数配置・右サイド 画像ボタンの表示 画像ボタンの複数表示
- 49. ドロップダウン機能 49DeveloperTools カレンダー 月ピッカー 時刻ピッカー 電卓 リスト ワークフローリスト カラーピッカー スライダー セルボタンから ドロップダウンを 呼び出します
- 51. 自動マージ 51DeveloperTools 品名 産地 生産者 品名 産地 生産者 値が同じで、隣接しているセル同士を 自動でマージできるようになります。 NOTE Excel エクスポート時は • 結合を維持して出力する • 結合を解除して出力する のどちらかを選択できます。
- 54. 追加予定機能一覧 54DeveloperTools • テンプレート型セル • チェックボックスリスト型セル • ラジオボタンリスト型セル • セルの自動マージ • セルボタン • ドロップダウン機能 • 月ピッカー • 時刻ピッカー • 電卓 • 色ピッカー • 自動拡張 • コンテキストメニュー • マーカーのカスタマイズ • 判例のカスタマイズ • アニメーション機能の追加 • スタイルのカスタマイズ • 近似曲線の描画 • エラーバーの表示 • 軸スケール間隔のカスタマイズ • マイナス値赤字表示 • 対数グラフの描画 • セル状態に応じたスタイル設定 • FormatString• Excel2019スタイルスキン • ピクセルスクロール • 集計関数 • テキストローテーション • 動的配列 新しいセル型 テーブル機能強化 • セグメントリスト型セル セル表示関連 • カレンダー • スライダー • リスト • ワークフロー チャート機能強化 表計算 シート • ヘッダ固定 • 関連API強化
- 56. END
- 57. v v レガシー Web からの脱却 開発者が次に目指すべき Web アプリの姿とは？ マイクロソフト コーポレーショングローバルブラックベルト Azure Cloud Native テクニカルスペシャリスト 井上 章 様 Angularを利用したシステム開発事例 日本ビジネスシステムズ株式会社 情報システム本部 IT戦略室 エキスパート宮下 雄太 様 情報システム本部 ビジネスサービス部 インプリメント課 中谷 大造 様 SPAを選択した理由とその結果 ～Reactを添えて～ 株式会社日本プロテック 情報セキュリティグループシステムエンジニア 疋田 直樹 様 GrapeCity製品からみるSPA開発のトレンドと動向 グレープシティ株式会社 ツール事業部 プロダクトマーケティング 村上 功光