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クライアントアプリケーション同等の機能と

使い勝手を実現、ユーザーの生産性を向上させることが出来ます。

コンポーネントベンダー製品を使うことにより「品質」「生産性」「高機能」を実現することが出来ます。