この記事は、GASによる以下のエクセル風外観実装アプリの解説記事になります。今回はJavascriptでエクセル風のユーザーインターフェースを実装できるオープンソースのライブラリ、「EXcel」の解説です。
このGASプログラムは、いつもの様に、スプリプト（gsファイル）と、テンプレート(htmlファイル）で動きますが、今回の記事は、テンプレート側の説明になります。
目次
Javascriptのライブラリ「JExcel」とは何か
「JExcel」とは、Javascriptだけで、まるでエクセルの様なユーザーインターフェースをを実装できるライブラリです。
以下がサンプル画面で、まるでエクセルそのものです。これがWEBサイトとしてJavascriptで実装できる様になります。
海外のオープンソースです。以下にリンク先と、WEBのイントロ部分を引用します。
Jexcel has been renamed to Jspreadsheet.
Jspreadsheet is a lightweight vanilla javascript plugin to create amazing web-based interactive tables and spreadsheets compatible with other spreadsheet software. You can create an online spreadsheet table from a JS array, JSON, CSV or XSLX files. You can copy from other spreadsheet software and paste straight to your online spreadsheet and vice versa. It is very easy to integrate any third party javascript plugins to create your own custom columns, custom editors, and customize any feature into your application. Jspreadsheet has plenty of different input options through its native column types to cover the most common web-based application requirements. It is a complete solution for web data management. Create amazing applications with theh online javascript spreadsheet.
Google翻訳にかけてみましょう。
JexcelはJspreadsheetに名前が変更されました。
Jspreadsheetは、他のスプレッドシートソフトウェアと互換性のある驚くべきWebベースのインタラクティブなテーブルとスプレッドシートを作成するための軽量のバニラJavaScriptプラグインです。 JS配列、JSON、CSV、またはXSLXファイルからオンラインスプレッドシートテーブルを作成できます。 他のスプレッドシートソフトウェアからコピーして、オンラインスプレッドシートに直接貼り付けることができます。その逆も可能です。 サードパーティのJavaScriptプラグインを統合して、独自のカスタム列やカスタムエディターを作成したり、アプリケーションの機能をカスタマイズしたりするのは非常に簡単です。 Jspreadsheetには、最も一般的なWebベースのアプリケーション要件をカバーするために、ネイティブの列タイプを通じてさまざまな入力オプションがあります。 これは、Webデータ管理のための完全なソリューションです。 オンラインのJavaScriptスプレッドシートですばらしいアプリケーションを作成してください。
ちょっと翻訳が変な部分もありますが、だいたいわかりますでしょうか。（ちなみに青字で示した「バニラ」は全くの誤訳ではなく「vanilla」＝「デファクト・スタンダードな／特にカスタマイズしていない」、という意味でコンピュータ業界では使う事がありますので、意味を知っていれば通りますかね。もう少し一般に通じる訳を当てるなら「一般的な機能をもりこんだ」という訳になりますでしょうか！）
- オンラインで動くインタラクティブな表計算アプリが実装できる。
- 他の表計算ソフトとデータをやり取りできる。
- Javascriptで簡単に作れる。
この様な機能を提供するとの事です。
ライブラリをGoogleAppsScriptで使うには
「JExcel」は幸いにしてCDNの形で提供されています。
CDNとは、Content Delivery Network（ネットワーク配信）の略称で、Javascriptのプログラム中で、配信元ＵＲＬを記載するだけで、インストールする事なく利用できる便利な配布方式です。
CDNで提供されているライブラリは、GoogleAppsScriptでは、テンプレート中で簡単に実装できます。以下がその実装部分です。
＜script src=“https://bossanova.uk/jexcel/v4/jexcel.js”＞＜/script＞
＜link rel=”stylesheet” href=”https://bossanova.uk/jexcel/v4/jexcel.css“ type=“text/css” /＞
＜script src=“https://jsuites.net/v3/jsuites.js”＞＜/script＞
＜link rel=“stylesheet” href=”https://jsuites.net/v3/jsuites.css” type=“text/css” /＞
＜/head＞
・
以上４行をテンプレートのヘッダーセクションなどに記載しておくだけでライブラリの実装は完了です。実に簡単です！
なお、こうしたライブラリはクライアント側（ブラウザ側）で実装するためのものなので、スプリプトではなく、テンプレートに記載する様にします。
JExcelの記載方法～メインとなる部分はとってもシンプル！～
実装方法はとても簡単で、以下の手順をとります。
- ＜DIV＞＜／DIV＞タグで表計算シートの要素を宣言しておく。
- ＜Script＞＜／Script＞タグの中に、「JExcel関数」を記述して上記の要素に表計算シートを実装する。
- JExcel関数は次の様に記述する：JExcel（適用するオブジェクト、｛data:データ配列、column:カラム仕様・・・｝）；
具体的には以下の様になります。
＜div id=JExcelオブジェクト名＞＜/div＞
・・・・
＜script＞
JExcelオブジェクト = jexcel ( document.getElementById(‘JExcelオブジェクト名‘),
{
data:データの配列,
columns:列仕様の配列,
}
) ;
＜/script＞
・・
以上の記述だけで表計算が実装されます。jexcel関数 一本で済んでしまうので、とても簡単です。
columnsの配列｛・・｝は、具体的には以下の様に｛typeプロパティ：指定値、｝の形式で必要なだけ示し、これを列の数だけ繰り返します。
columns:[
{ title:列のタイトル名, type: タイプ名, width:列巾サイズ }
{ ・・・列の数だけくりかえし・・・}
]
・・
・・・
カッコが複雑に階層化していてややこしいですね。
列のtypeプロパティは以下の様なものがあります（一部です）。
さて、基本は以上なのですが、サーバーとデータをやりとりするためには、スプレッドシートからデータを読み出す、または書き込む必要があります。これはどうするのでしょうか。
実は、なかなか（なぜか）スマートに行かなくて苦肉の方法をとったのですが、次回以降の記事でこれはご説明します。
