ローコード開発プラットフォーム「OutSystems」を使ったアプリケーションの開発方法をご紹介する本シリーズ。前回・前々回は「Data Grid データ表示編／編集・更新編」と称し、「Wijmo（ウィジモ）」搭載のグリッドコンポーネント「Data Grid」を使いながら同プラットフォーム上で高度なデータ表示と編集・更新機能をもつWebアプリケーションを開発しました。
今回は弊社より販売中のOutSystems用コンポーネント「SpreadJS for OutSystems（スプレッドJS フォー アウトシステムズ）」を使い、ExcelライクなUIと操作性を備えるWebアプリケーションを作ってみたいと思います。
ローコードでExcelライクを実現する「SpreadJS for OutSystems」
「SpreadJS for OutSystems」は、グレープシティが開発・販売するOutSystems用のコンポーネントです。このコンポーネントには、Web開発でExcelライクなUIと操作性を実現できる弊社のJavaScriptライブラリ「SpreadJS（スプレッドJS）」が組み込まれています。OutSystems上で同コンポーネントを利用することにより、コーディングなしの開発を実現しながら、自身のアプリケーションにExcelライクなUIや機能を実装していくことが可能です。
なお、こちらの製品は弊社の戦略パートナーである伊藤忠テクノソリューションズ株式会社様からご購入可能となっています。
それでは早速OutSystems上で「SpreadJS for OutSystems」を使った開発に入っていきたいと思います。
プロジェクト作成とモジュールのセットアップ
この項では、同プラットフォーム上に新規プロジェクトを作成し、その中で「SpreadJS for OutSystems」を使えるように設定を行っていきます。
1. 新規プロジェクトの作成
初めに新規プロジェクトを作成します。OutSystemsを初めてご利用になる方は、本シリーズ初回記事にある「Service Studioのインストール」から「モジュールの作成」までの項をご参照ください。今回はプロジェクトおよびモジュールの名称を「SpreadJSApp」として作成しました。
2. モジュールのセットアップと参照設定
前回、前々回の開発では、アプリケーションで使用する「Data Grid」コンポーネントをOutSystemsのリポジトリ「Forge」から取得し自身のプロジェクトに設定しましたが、「SpreadJS for OutSystems」の利用では異なる方法で設定を行います（無償のオープンソースUIやコンポーネントの場合にのみ、Forgeからのダウンロードと設定が可能です）。次の3つの手順を実施して、モジュールのセットアップとプロジェクトからの参照を行います。
モジュールのセットアップ
初めに「SpreadJS for OutSystems」をOutSystems上の開発環境にPublishして、先ほど新規作成したプロジェクトから参照できるようにします。「SpreadJS for OutSystems」のダウンロードパッケージに含まれている「SpreadJS.oml」をService Studioで開き、［1-Click Publish］ボタンを押下して開発環境上にPublishします。
これで「SpreadJS for OutSystems」をOutSystems上にある自身のプロジェクトから参照できるようになりました。
モジュールの参照設定
次に、先ほど新規作成したプロジェクトから「SpreadJS for OutSystems」を参照します。ここまでくれば参照の方法は前回、前々回記事の場合と同様です。Service Studioのツールバーにあるコンセントのボタンを押下します。
表示された「Manage Dependencies」ダイアログにある［Search producers…］欄に”SpreadJS”と入力し、ダイアログ中央右側のエリアに表示された［SpreadJS］の要素をすべて選んで［APPLY］ボタンを押下します。
これで「SpreadJS for OutSystems」のセットアップと参照設定は完了です。この手順が完了すると、Service Studio上のツールボックスで以下2つのコンポーネントが表示されるようになります。
ライセンス設定の準備
「SpreadJS for OutSystems」の動作にはライセンスの設定が必要です。具体的には、WorkBookコンポーネントやDesignerコンポーネントの［License］プロパティにライセンスキー情報を設定する必要があります。OutSystemsのSite Property機能を使い、この［License］プロパティで参照するライセンス情報を設定していきます。
Site Propertyは、作成したアプリケーション内のどこからでも参照できるグローバルなプロパティです。このプロパティにライセンスキー情報を設定しておくことで、アプリケーション内にあるいずれのページに配置したWorkBookコンポーネントやDesignerコンポーネントからでもライセンス情報が参照できるようになります。
Site Propertyを使ったライセンスの設定方法は以下の通りです。
Service Studioの［Data］タブを開き［Site Properties］フォルダのコンテキストメニューで［AddSite Property］を選択して「License」という名称のSite Propertyを追加します。
作成した［License］の［Data Type］プロパティが「Text」であることを確認のうえ、［Default Value］プロパティにライセンスキー情報を設定します（ライセンスキー情報は製品購入時に発行されます）。
この設定により、Site Propertyの「License」を使用することでアプリケーション内のどこからでもライセンス情報が参照できるようになりました。なお、このプロパティを使った各ページ上のWorkBookコンポーネントやDesignerコンポーネントに対するライセンス設定は、以降の開発の中で行っていきます。
WorkBook と Designer
ここで「SpreadJS for OutSystems」の製品構成をご説明したいと思います。前述したとおり、ここまでのセットアップにより「SpreadJS for OutSystems」に含まれる以下のコンポーネントがOutSystems上で利用できるようになりました。
- WorkBook
- Designer
各コンポーネントの概要は以下の通りです。
WorkBook
OutSystemsアプリケーション上で動作するSpreadJSの本体です。Excelライクな外観に加え、数式や書式設定、フィルタ・ソートといった機能を提供します。
Designer
WorkBookで表示するスプレッドシートのレイアウトを設計するためのコンポーネントです。OutSystemsのWebScreenに配置し、Webアプリケーション実行すると「SpreadJSデザイナ」として機能します。
SpreadJSデザイナで作成したシートのデザイン情報は「テンプレート」として保存可能です。このテンプレートをWorkBookで参照することにより、デザイナで作成したレイアウトやシート設定を活用したデータ表示が実現できます。なお、デザイン時は、WorkBookが実行時に参照するものと同一のデータソースをDesignerコンポーネントで参照するようにします。
ここで説明した2つのコンポーネントを使いながら、今回は以下のようにして開発を進めていきます。
- アプリケーションの表示データとなるデータソースを作成する
- WorkBookを使ったWebページ（アプリケーション画面）を作成し、1.のデータソースを連結する
- Designerを使ったWebページ（デザイン作業用の画面）を作成し、1.のデータソースを連結する
- 3.の画面を実行してデザインを行い、その内容をテンプレート保存する
- WorkBookで4.のテンプレートを参照設定し、2.の画面を実行する
それでは開発に取り掛かっていきましょう。
データソースの作成
プロジェクトとモジュールの準備が整ったら、データソースを作成していきます。今回は初回記事と同様にExcelファイルを使った方法でデータベースを構築します。なお、この際使用するExcelファイルには製品の発注管理をイメージした以下のようなデータを入力しました。
Service Studioの［Data］タブを開き［Database］ノードのコンテキストメニューで［Import New Entities from Excel…］を選択して上記のExcelファイルをインポートします。
インポートが完了すると、以下のようにExcelファイルにあるシート名と同名のデータエンティティ（今回の場合は”ProductData”）が作成されます。
また、このエンティティのコンテキストメニューで［View Data］を選択するとインポート結果を確認できます。
アプリケーション画面の作成とデータソース連結
次に、アプリケーション画面を作成して先ほど構築したデータベースと連結します。
画面作成とSpreadJSの配置
Service Studioの［Interface］タブを開き［UI Flows］の［MainFlow］配下に、WebScreenを追加します。［MainFlow］のコンテキストメニューで［Add Web Screen］を選択し、表示されるダイアログで「Empty」を選択して画面を新規作成します。
今回は「MainScreen」という名前で作成しました。
このMainScreenにSpreadJSを配置します。Service Studioのツールボックスにある［Workbook］をMainScreenにドラッグアンドドロップします。
WorkBookコンポーネントの配置が完了したら［WorkbookName］プロパティにコンポーネントの名称を、［License］プロパティにライセンス情報を設定します。
今回、コンポーネントの名称を「SpreadJS1」としました。また［License］プロパティには、先ほど事前に用意しておいたSite Propertyの「License」を利用します。プロパティウィンドウにあるSpreadJS1の［License］プロパティでコンボボックスを開き、［Expression Editor…］を選択します。
表示されたエディタの左下にあるツリー内、［Site］の配下にある［License］をダブルクリックすると、プロパティへの設定値がエディタに入力されます。
エディタにある［DONE］ボタンを押下して、プロパティ値を決定します。
この設定により、WorkBookコンポーネントにライセンス情報が設定され正しく動作するようになりました。
SpreadJSテーマの設定
次にSpreadJSのテーマを設定します。Service Studioの［Interface］タブを開き［UI Flows］>［SpreadJS］>［Theme］配下で任意のテーマを選択し、MainScreen上の任意の場所にドラッグアンドドロップします。
この設定により、画面上のSpreadJSにテーマが反映された状態でアプリケーションが実行されるようになります。
ロジックの作成
前回・前々回の記事で実践したように、Web画面の「Preparationアクション」を作成して画面表示時の処理を実装します。ここで実装するロジックの概要は以下の通りです。
- データベース「ProductData」からデータを取得する
- 取得したデータをJSONシリアライズして変数に割り当てページ上のSpreadJSから参照できるようにする
- SpreadJSに対してロケールの設定をする
早速、設定していきましょう。初めに先ほど作成したWeb画面にPreparationアクションを追加します。Service Studioの［Interface］タブ内、［UI Flows］>［MainFlow］配下にある［MainScreen］のコンテキストメニューで［Add Preparation］を選択します。
ここからService Studioの中央に表示されるメインエディタを使い、Preparationアクションのロジックフローを構築していきます。
データ取得
Service Studioの［Data］タブを開き、［Entities］>［Database］配下にある［ProductData］を選択してメインエディタにドラッグアンドドロップします。
次に［Interface］タブにある［MainScreen］のコンテキストメニューで［Add Local Variable］を選択し、ローカル変数を追加します。
この［Name］プロパティと［Data Type］プロパティにはそれぞれ、文字列”DataSource”、取得するデータソースのデータ型［GetProductData List Type］を設定します。
メインエディタに戻り、ロジックの構築を続けます。［Interface］タブで先ほど作成した［DataSource］を選択し、メインエディタにドラッグアンドドロップします。
この［DataSource］の［Value］プロパティには［GetProductData List Type］を設定します。
取得データのJSONシリアライズ
ここから、取得したデータをJSONシリアライズするロジックを作成していきます。ツールボックスからメインエディタに［JSONSerialize］をドラッグアンドドロップします。
ドロップして作成された［JSONSerialize1］の［Data］プロパティに［DataSource］(前項で作成したローカル変数)を設定します。Preparationアクションの実行時、このローカル変数DataSourceにはデータソース［ProductData］から取得したデータが格納されています。この手順で作成しているのは、このデータを［JSONSerialize1］によってJSONデータ化するロジックです。
続いて、JSON化したデータを変数に格納してページ上のSpreadJSから参照できるようにロジックを作成します。［Interface］タブにある［MainScreen］のコンテキストメニューで［Add Local Variable］を選択し、ローカル変数を追加します。
［Name］プロパティに”DataSourceString”と設定し［Data Type］プロパティは既定（Text）のままとします。
メインエディタに戻り、ロジックの構築を続けます。［Interface］タブで先ほど作成した［DataSourceString］を選択し、メインエディタにドラッグアンドドロップします。
ドロップした［DataSourceString］の［Variable］プロパティに［JSONSerialize1.Json］を設定します。
この設定により、ローカル変数DataSourceStringを使用することでSpreadJSがJSON化されたデータソースを参照できるようになります。
ロケールの設定
最後に、SpreadJSのUIなどを日本語で表示するためのロケール設定を実装します。ツールボックスからメインディタに［Run Server Action］をドラッグアンドドロップし、続いて表示されるSelectActionダイアログで［SetCurrentLocale］を選択し［OK］ボタンを押下します（ダイアログ上のSearchBoxに”SetCurrentLocale”と入力することで選択可能になります）。
上記の手順で表示された［SetCurrentLocale］の［Locale］プロパティに”ja-JP”と設定します。
これでアプリケーション画面のロジック実装は完了です。MainScreenに配置したWorkBookの［DataSourceString］プロパティに先程のローカル変数DataSourceStringを設定し、アプリケーション実行すると以下のような画面を確認することができます。
現在の状態は、画面に配置したSpreadJSでデータソースの内容をそのまま表示している状態になります。次以降の手順では、デザイン画面を作成のうえ、Designerコンポーネントを使いながらSpreadJSのレイアウト設計を行っていきます。
デザイン作業用の画面の作成とデータソース連結
ここからは、先ほど表示を確認したSpreadJSの画面設計を行うデザイナを使う準備を進めていきます。前述したようにOutSystems上でSpreadJS用のデザイナを利用するためには、デザイナ用のウェブ画面を作成しアプリケーション実行する必要があります。次の手順に従って、デザイナ画面を作成していきましょう。
画面の作成とDesignerコンポーネントの配置
アプリケーション画面として作成した「MainScreen」のほかに、もう一つ画面を作成の上、Designerコンポーネントを配置します。前項にある「画面作成とSpreadJSの配置」と同じ方法で［Interface］タブの［UI Flows］>［MainFlow］配下に「DesignerScreen」という名前の画面を作成し、ツールボックスにある［Designer］を同画面に配置します。
また、こちらも前項にある「画面作成とSpreadJSの配置」と同じ方法で、配置した［Designer］コンポーネントの［License］プロパティにライセンス情報を設定します。
ロジックの作成
「SpreadJS for OutSystems」のDesignerでは、WorkBookに表示するデータを実際にデザイナ上で確認しながらその設計作業を行うことが可能です。この動作にあたりデザイン用の画面には、アプリケーション画面と同様のPreparationアクションを実装する必要があります。この設定は非常に簡単です。［Interface］タブでMainScreenに設定したPreparationアクションと関連の変数を複数選択（Ctrl＋クリックで選択）のうえコピーして、DesignerScreenにペーストします。
これでアプリケーションと同様のロジック処理が、デザイン用の画面にも実装されました。最後にDesignerScreenに配置したDesignerの［DataSourceString］プロパティにローカル変数DataSourceStringを設定して、デザイン用画面の準備は完了です。
デザイナ実行とシートデザイン
デザイナ用の画面をアプリケーション実行して、SpreadJSのレイアウト設計を行っていきます。メインエディタに［MainFlow］のロジックフローを表示して、Entry1 とDesignerScreenを連結します。
［1-Click Publish］ボタンを押下してアプリケーションをコンパイルし発行すると、デザイナの使用が可能になります。［Open in Browser］ボタンを押下してデザイン用の画面を起動し、表示されたSpreadJSデザイナにあるリボンの［フル］ボタンを押下してデザイナ全体を表示します。加えて、デザイナ画面左側に表示されている［すべて選択］ボタンを押下することで、連結されているデータソース全てをスプレッドシート上に展開することが可能です。
ここからレイアウト設計を行っていきます。今回の設定項目は以下です。
- 列幅、非表示列、見出し内容の設定
- 数式列の追加
- 条件付き書式の設定
列幅、非表示列、見出し内容の設定
初めに列幅を調整して、必要のない列を削除し、見出しの内容をデータソース上の列名から日本語の列名に変更してみたいと思います。以下の動画にあるように、Excelライクな操作でと列幅の調整や非表示列の設定を行うことが可能です。また、「ヘッダエディタ」を使用することで見出しの内容を編集することができます。このエディタは、デザイナ上のスプレッドシートヘッダでコンテキストメニューの「ヘッダ」を選択すると表示されます。
数式列の追加
次に、数式を使った列をスプレッドシートに追加してみます。データソースには存在しない列もデザイナを使用すれば簡単に追加することができます。手順は非常にシンプルです。デザイナの左側にあるリストで［数式］を選択し、シート上の任意の場所にドラッグアンドドロップします。ドロップ後、「数式エディタ」が表示されるので設定したい数式をここで入力します。
今回は「価格 × 数量」を計算する数式を設定しました。この際、エディタの一番下にある［数式］欄に直接数式を入力することも可能ですが、以下の動画にあるように［列フィールドコード（列名）］のリストから対象の列をダブルクリックすると、数式に必要な列の情報を［数式］欄に自動入力できます。
条件付き書式の設定
さらに条件付き書式も設定してみましょう。設定の仕方はExcelの場合と同様です。条件付き書式を設定する列を選択して、リボンにある［条件付き書式］ボタンを押下し設定を行います。今回は「金額」列を対象にして、その条件を「9700円以上は緑色でハイライト表示」に設定しました。
テンプレートの保存
最後に、ここまでの設定をテンプレートとして保存します。リボンで［テンプレート］タブを選択して［名前］の欄にテンプレート名を入力します。同じく［テンプレート］タブにある［保存］ボタンを押下することでこのテンプレートを保存できます。今回は「Template_Sales」という名前で保存しました。
これでデザインは完了です。ブラウザは閉じても構いませんが、そのままにしておくのもお勧めです。以降の手順によるアプリケーション画面の起動後は、ページのリロードでテンプレート情報がWorkBookに即時反映されるようになります。この特徴を活用し、デザイン用画面とアプリケーション画面、二つのページを起動しておくことで、ブラウザのみによるシートのレイアウト設計とその表示確認ができるようになります。
またブラウザを閉じた後、デザイナを再度表示したい場合はService Studioの［Interface］タブに表示されている［DesignerScreen］のコンテキストメニューで［Open in Browser］を選択することでウェブページを起動できます。
アプリケーションの実行
デザイン作業が終わったら、いよいよアプリケーションの実行です。初めに先ほど作成したテンプレートをアプリケーション画面にあるWorkBookに設定します。Service Studioのメインエディタで「MainScreen」（WorkBookを配置したアプリケーション画面）を開き、WorkBookを選択の上、プロパティ画面にある［TempalteName］を設定します。入力する内容は、先ほど作ったテンプレート名称の「Template_Sales」です。
最後に実行する画面設定を切り替えて、アプリケーション画面を起動します。メインエディタに［MainFlow］のロジックフローを表示して［Entry1］と［MainScreen］を連結します。
以下が実行画面です。
「アプリケーション画面の作成とデータソース連結」の項で確認した画面では連結したデータソースの内容がそのまま表示されていましたが、こちらの画面ではデザイナで作成したテンプレートの内容が反映されていることを確認できます。列幅をはじめとする外観が調整され、数式や条件付き書式もデータソースのデータと連動して動作しています。
OutSystems & SpreadJS の威力！
今回もコーディング量ゼロでアプリケーションを完成させることができました。これまで、OutSystemsを活用することで様々なアプリケーションが作成できることをご紹介してきましたが、今回のように「SpreadJS for OutSystems」を使えばExcelライクなスプレッドシート画面までもをノーコードで実現することが可能です。
次回の記事では更に「SpreadJS for OutSystems」を活用し、WorkBookと一緒に利用できる数式バーやステータスバー、Excel入出力ボタンをアプリケーションに設定しながら同コンポーネントをより便利に使用する方法についてご紹介する予定です。ご期待ください！