lightning コンポーネント 開発の勘所 - amazon s3 · 2017-02-13 ·...
Post on 04-Jun-2020
0 Views
Preview:
TRANSCRIPT
Lightning コンポーネント開発の勘所
JavaScript製品でのカスタマイズ
sales@grapecity.com
森谷 勝
お伝えしたいこと
業務要件によっては、 Lightningの設定ベースの開発ではカバーできない画面があります。
その場合はJavaScriptを使いLightning Componentを作ることで
業務に特化した画面を作れます。
会社固有の業務要件
GrapecityのJavaScript製品は、長年日本の業務アプリケーションの構築を支えてきたコンポーネントベンダーのノウハウをJavaScript 製品に受け継がれています。
豊富な機能をもったJavaScript製品を使うことで、高機能な画面を生産性と品質を担保しつつ開発できます。
GrapeCity Developer Tools実績
累計60万ライセンス以上の販売実績
月間1,800ライセンスの出荷数
80,000件を超えるユーザー登録
歴史
1980年：創業（文化オリエント株式会社）
1983年：私立学校法人向け「LeySerシリーズ」発売
1988年：開発支援ツール発売
1993年：開発支援ツール「Power Toolsシリーズ」発売
2001年：マイクロソフト Certified Partner契約
2002年：グレープシティ株式会社に社名変更
・・・・・・・・・・・
2016年：「GrapeCity for Salesforce」発売 1998年～ActiveReports
1994年～SPREAD
GrapeCity Barcode for Salesforce
〈グレープシティバーコード〉
Salesforceデータ用バーコードコンポーネント
GrapeCity BarcodeはSalesforceプラットフォーム上でバーコードを生成できるコンポーネントです。20種類以上の規格をサポートし、クラウド帳票などに活用できます。
GrapeCity Spreadsheet for Salesforce
〈グレープシティ スプレッドシート〉
Excelシートのような一括編集ビュー作成アプリ
標準ビューよりもはるかに見やすく、登録・編集・削除もできる一覧形式のビューを簡単に作成できます。ビューの操作感覚はExcelと類似しているので、誰でもすぐに使いこなせます。自分の作業に合わせたビューを作っておけば、Salesforceのデータ管理作業がずっと楽になります。
社内のデータ
クラウドのデータ
いつもの業務で使うExcelの機能をBIツールへ
JavaScriptを使ったUI開発
Lightning Componentのアーキテクチャ
ここをJavaScriptを使ってUI開発
ポイント
Salesforceのデータは「Apex コントローラ」でやりとりを行う
JavaScriptライブラリやCSSは「静的リソース」として登録する
オンラインデモ
http://jp.spread.grapecity.com/spreadjs/demo/
オンライン製品ヘルプ
http://docs.grapecity.com/help/spread-js-9/#welcome.html
コード
var activeSheet = spread.getActiveSheet();
// セルの背景色と前景色を設定します。
var cell = activeSheet.getCell(1, 1, GC.Spread.Sheets.SheetArea.viewport);
cell.backColor("Blue");
cell.foreColor("Red");
cell.value("Color");
var activeSheet = spread.getActiveSheet();
//データテーブルを手動で作成します。
var sampleTable = [
{"ID":10, "Text":"Text-10", "Check":true},
{"ID":20, "Text":"Text-20", "Check":false},
{"ID":30, "Text":"Text-30", "Check":false},
{"ID":40, "Text":"Text-40", "Check":true},
{"ID":50, "Text":"Text-50", "Check":true}
];
//このデータテーブルを連結します。
activeSheet.setDataSource(sampleTable);
グレープシティのJavaScript
SpreadJS
Wijmo
SpreadJS
Microsoft ExcelライクSpreadJSはブラウザ上でMicrosoft ExcelライクなUIを実現するために開発されたJavaScriptライブラリです。HTML5のCanvas上にクライアント側"UIウィジェット"としてスプレッドシートを描画し、なじみのある操作性と豊富なExcel互換機能を提供します。
Excelの機能を再現
フィルタリングExcel形式のフィルタリング機能を搭載しています。エンドユーザーはなじみのあるUIを使用しながら関心のあるデータを絞り込むことができます。もちろん、プログラミングによる絞り込みも可能です。
数式と関数SpreadJSは日付、財務、統計、検索、文字列などさまざまな業種や職種で活用できる380種以上の実用的な表計算関数を提供しています。ほぼ全ての表計算関数がExcel互換となっており、Excelファイルをインポートした場合も実ファイルでの集計結果を高い精度で再現します。
外観・レイアウトSpreadJSは、行／列／セルレベルで細やかなレイアウトを設定できます。罫線やフォントの設定はもちろんのこと、セルを結合したり、ある範囲のデータをテーブルとして設定したりすることも可能です。自由度が高く、視認性に優れたデザインのスプレッドシートを実現できます。
Wijmo
複数コントロール収録のスイート製品
グリッド（FlexGrid） チャート／ゲージ
入力 Excel／PDF出力
FlexGrid高速／軽量／柔軟なカスタマイズ性
1996年以来、あらゆるプラットフォームで提供
20年以上改善を繰り返して業務アプリにおけるグリッド要件を網羅
クライアントサイドでExcel／PDFに出力可能
FlexChart／FlexPie高速／軽量／柔軟なカスタマイズ性
タッチ操作に最適化したインタラクティブなチャート
スタンダードから専門性の高いチャートまで簡単に開発可能
クライアントサイドで画像（PNG/JPEG/SVG）に出力可能（画像をPDFに出力することも可能）
独自性の高い機能
スプレッドシート（FlexSheet） ファイナンシャルチャート
複数行グリッド（MultiRow） ピボットテーブル
JavaScriptライブラリの変遷とWijmo標準技術をベースにすることで様々な環境に対応
第１世代（jQuery）– DOMセレクタ
– クロスブラウザ対応
第２世代（AngularJSなど）– SPA（シングルページアプリケーション）
– プログラム構造化／バインディング
第３世代（React, Angular 2など）– 仮想DOM
– コンポーネント志向
Wijmo 3（jQuery UI拡張）jQueryの縛りを受けながら各ライブラリをサポート
Wijmo 5（ライブラリ非依存）
標準技術をベースに独立性を維持
相互運用モジュール
AngularJS用連携
相互運用モジュール
Angular 2用連携
任意利用
相互運用モジュール
React用連携
次世代– ？？
相互運用モジュール？？？
連携
任意利用
任意利用
任意利用次世代のライブラリが登場しても安心して利用しつづけられる
まとめ
コンポーネントとしてのビジネス価値
Salesforceにおいて、 JavaScriptを使いLightning
Componentクライアントアプリケーション同等の機能と
使い勝手を実現、ユーザーの生産性を向上させることが出来ます。
コンポーネントベンダー製品を使うことにより「品質」「生産性」「高機能」を実現することが出来ます。
top related