「SpreadJS for OutSystems」圧倒的生産性向上のための更なるツール / GrapeCity ECHO week 2020

2020年12月21日～25日 開催
オンラインイベント「GrapeCity ECHO week 2020」、3日目のセッション資料です。

「「SpreadJS for OutSystems」圧倒的生産性向上のための更なるツール」

伊藤忠テクノソリューションズ株式会社
アジャイル営業推進部
エグゼクティブエンジニア
伊藤 晃規 様

Transcript

1. SpreadJS for OutSystems製品紹介
2. COPYRIGHT(C) 2020 ITOCHU Techno-Solutions Corporation 2 アジェンダ 1. SpreadJSとは 2. SpreadJS for OutSystems製品概要 3. 製品の特長 4. システム要件 5. 開発デモ
3. COPYRIGHT(C) 2020 ITOCHU Techno-Solutions Corporation 3 １．SpreadJSとは GrapeCity社開発による 「Excelライク」なスプレッドシートをWeb上で実現するJavaScriptライブラリ • フィルタ、ソート • 表計算 • チャート • 条件付き書式 etc… 豊富なExcel互換機能 を搭載 エンドユーザーに 馴染みのある UIと操作性を提供
4. COPYRIGHT(C) 2020 ITOCHU Techno-Solutions Corporation 4 2. SpreadJS for OutSystems製品概要 製品名 ：SpreadJS for OutSystems 概要 ：OutSystems上で動作するSpreadJSのモジュール SpreadJS本体（Workbook）と SpreadJSデザイナ（Designer）の２つのメインコンポーネントを提供 デザイナ画面 ランタイム(本体が実行される)画面
5. COPYRIGHT(C) 2020 ITOCHU Techno-Solutions Corporation 5 2. SpreadJS for OutSystems製品概要 SpreadJS for OutSystems 概念図と開発の流れ 1. データソースを作成 2. ランタイム用 Webページを 作成し、Workbookコンポーネ ントを配置。 1.のデータソースと連結 3. デザイナ用 Webページを作 成し、Designerコンポーネント を配置。 1.のデータソースと連結 4. デザイナ用 Webページを実 行。ブラウザ上からデザインや レイアウト、機能を設計する 5. テンプレートとして保存する 6. ランタイム用 Webページを 実行。4.で設計したスプレッド シートが表示される データソース SpreadJS モジュール テンプレート Get Change Get 作成/編集/削除 参照
6. COPYRIGHT(C) 2020 ITOCHU Techno-Solutions Corporation 6 3. 製品の特長 GUIによる直観的な操作でシート設計。開発効率を高めるデザイナ 「SpreadJSデザイナ」で、ExcelライクなGUIを使ったレイアウト設計が可能です。 慣れ親しんだ操作感で簡単、スピーディーにノンコーディングの画面開発を実現できます。 リボンメニューから セルや行、列単位で の詳細な設定が可能 接続しているデータ ソースのデータフィー ルド(列)が表示される。 全選択のほか、必要な 列をドラッグ＆ドロッ プで追加できる プレビュー機能により、 設定結果を即時に視認 できる
7. COPYRIGHT(C) 2020 ITOCHU Techno-Solutions Corporation 8 3. 製品の特長 外見の再現にとどまらない充実のExcel互換機能 Excelと同等のUIを備える ソート・フィルタ機能を提 供しています。 データの単純な並び替えや フィルタリングにとどまら ず、色フィルタや日付フィ ルタの利用も可能です。 グループ化 複数、広範囲に表示される行や列の 折りたたみと展開を可能にする「グ ループ化」機能をサポート。 グループは複数・多段で設定するこ ともできます。 書式設定 セルに標準の数値書式および日時書 式を設定することができます。 少数、パーセント、通貨、あるいは 和暦、西暦の日付など、データに応 じた書式を適用できます。 ユーザー定義も可能です。 ※円表示はユーザー定義 数式・関数 日付、財務、統計、検索、 文字列などさまざまな業種 や職種で活用できる400種以 上の表計算関数を備えてい ます。 ほぼ全ての表計算関数が Excel互換となっており、 Excelファイルをインポート した場合も実ファイルでの 集計結果を高い精度で再現 します。 ソート・フィルタ 条件付き書式 ルールを作成してセルの外観表示を 設定します。 ルールはカラースケールルール、 データバールール、アイコンセット ルールなどExcelで提供されている馴 染みのあるものをサポートします。
8. COPYRIGHT(C) 2020 ITOCHU Techno-Solutions Corporation 9 3. 製品の特長 Excel以上の機能性でアプリケーションの使い勝手を大幅アップ 豊富なExcel互換機能にとどまらず、Excelにない便利な機能も搭載。 Excel以上の機能性・操作性を提供します。 ドロップダウンオブジェクト 「電卓」「日付時刻ピッカー」「リスト」などの「ドロップ ダウンオブジェクト」機能をセル/セルボタンに適用し、 Excelにはない高機能なドロップダウンセル動作を実現する ことができます。 セル型 セル型はチェックボックス、コンボボックスやハイパーリン クをセル上に実現する機能です。 単純なExcel互換スプレッドシートにとどまらない拡張性で、 多岐に渡るアプリケーション要件へ柔軟に対応します。
9. COPYRIGHT(C) 2020 ITOCHU Techno-Solutions Corporation 10 4. システム要件 動作保証および必要システム SpreadJS for OutSystems は、OutSystems 11 で動作を保証します。 必要システムは OutSystems 11 に準じます。 ただし、Traditional Web のみのサポートとなります。 ▪OutSystemsのシステム要件： https://success.outsystems.com/Documentation/ja-jp/11/Setting_Up_OutSystems/OutSystems_system_requirements 対応ブラウザ • Internet Explorer 11（最新の安定版） • Edge（最新の安定版） • Chrome（最新の安定版） • Firefox（最新の安定版） • Safari（最新の安定版） • Safari for iOS（最新の安定版） ※Android用ブラウザはサポートしていません。
10. COPYRIGHT(C) 2020 ITOCHU Techno-Solutions Corporation 11 5. 開発デモ 今回、添付のような以下のような画面を作ってみたいと思います。 1. 画面の追加 2. Preparation 3. Excelに見た目を近づける 4. デザイナ画面の設定 5. ヘッダーの日本語表示 6. 各列へのフィルタ設定 7. 日付の入力をカレンダー形式と日付の年月日表示 8. 価格の¥マークとカンマ区切り 9. 式の設定 10.データバー 11.現在取り扱っていない製品は、行をグレーで塗る 12.データのSave
11. COPYRIGHT(C) 2020 ITOCHU Techno-Solutions Corporation 12
12. COPYRIGHT(C) 2020 ITOCHU Techno-Solutions Corporation 13 Appendix 機能一覧① テンプレート 新規作成、保存、削除、 インポート、エクスポート フォントや配置 フォント、フォントサイズ、太字、斜体、 下線、二重下線、セルの罫線、セルの塗 りつぶし、フォントカラー、テキストの 表示位置、テキストの向き、インデント、 テキストの折り返し 書式設定 セル型 チェックボックス、コンボボックス、 ハイパーリンク、チェックボックスリス ト、ラジオボタンリスト、ボタンリスト ドロップダウン型 リスト、時刻ピッカー、月ピッカー、 日付時刻ピッカー、スライダー、電卓、 カラーピッカー、ワークフローリスト 条件付き書式 セルの状態 ※編集時、ホバー時、読み取り専用時等、ユー ザーのアクションに応じてセルに異なるスタイ ルを適用する機能 例) マウスオンするとセルの背景色が変わる ソート、フィルタ データの入力規則 グループ化/グループ解除 表示設定 行ヘッダ・列ヘッダの表示・非表示 グリッド線、スクロールバー、ズーム 固定列 ダーティなアイテム ※変更があったセル(ダーティセル)に対してス タイルを設定する機能 ヘッダエディタ(列ヘッダ) 複数行のヘッダ、ヘッダセルの結合/結 合解除、罫線、スタイル、表示文字の設 定 数式 スパークライン
13. COPYRIGHT(C) 2020 ITOCHU Techno-Solutions Corporation 14 Appendix 機能一覧② ビルトイン関数 ▪関数一覧： https://docs.grapecity.com/help/spread- js/sheets/#FormulaFunctions.html コメント 挿入、編集、削除、表示/非表示 検索 ステータスバー 編集ステータス、合計値/平均値/選択個 数/最小値/最大値の表示、ズームスライ ダー Excelファイルの入出力 マルチシート 更新されたデータをデータソース に保存 ローカル設定の保存/クリア ※ユーザーが変更した以下の設定情報をローカ ルストレージに保存できる機能 • 列幅／列の表示・非表示 • 行の高さ／行の表示・非表示 • フィルタリング結果 • ステータスバーから変更したズーム率 • セルの選択状態(アクティブセルを含む)
14. COPYRIGHT(C) 2020 ITOCHU Techno-Solutions Corporation 15 ご参考：SpreadJS for OutSystemsとDataGridの比較 SparedJS for OutSystems DataGrid ベースとなる製品 SpreadJS WijmoのFlexGrid 画面レイアウト 開発 方法 ExcelライクなDesigner機能 ServiceStudio 必要スキル Excelに関する知識 JavaScriptやCSSに関する知識 数式＆表計算関数の利用 ◦ × 言語対応 日本語、英語 日本語、英語 マニュアル等の言語 日本語 英語（一部日本語） サポート GrapeCity社 + CTCにて対応 Forgeに対する書き込み or Supportへの問合せ 帳票の形式は、どちらのパターンも向いていないと考えております。標準機能で要件を満たせない場合、 標準のSpreadJSをご検討いただくのが良いかと思います。
15. COPYRIGHT(C) 2020 ITOCHU Techno-Solutions Corporation 16 会社概要 GrapeCity株式会社 商号 グレープシティ株式会社 GrapeCity inc. 略称：GrapeCity 創立 1980年5月 資本金 9,000万円 売上高 68億8千万（19年3月） 評点57 代表者 代表取締役社長 馬場 直行 社員数 286名 海外・グループ会社 約800名 事業内容 パッケージソフトウェア業、映画、ビデオサービス業 事業所 国内：仙台本社／関東支社／関西支社／札幌営業所／東北営業所／ 北関東営業所／首都圏営業所／九州営業所 海外：中国（上海・西安）／インド／ベトナム／ミャンマー／ブラジル／ アメリカ／マレーシア／韓国