GoogleAppsScriptのすばらしいところは、テンプレートがJavascript＋HTML形式であるため、これに準拠した多様なオープンソースが使えることです。以前にご紹介したJQueryもそのひとつでしたが、今回の記事では、エクセル風外観をJacascriptで簡単に実装できる「JExcel」をテーブル形式フォームに適用する方法をご紹介します。
GoogleAppsScriptでのJQuery使用例は以下記事を参照ください。
テーブル形式フォームについては以下記事を参照ください。
目次
Javascriptで開発されている様々なオープンソースライブラリ
GoogleAppsScriptは、エクセルのVBAマクロ＋フォームの様なものですが、エクセルのVBAマクロと異なる固有の利点として、主にJavascript向けに開発されている様々なオープンソースライブラリが使えることが挙げられます。
グラフなど汎用的なインターフェースを実装するものから、物理計算シミュレートなど専門性の高い用途まで色々開発されているものを利用できるのは大変メリットが高いと思います。
ここでは数あるオープンソースライブラリから、エクセル風の外観を実装するライブラリ、「JExcel｣を利用した例をご紹介します。
このライブラリはJavascriptで、エクセル風の外観およびユーザーインターフェースを実装できるものです。無料で公開されており、プログラムに組み込んで簡単に使用できます。
WEBで詳細されている外観の画像を以下に抜粋します。（右下部分：エクセルと同じ外観が判ると思います）
HTMLのテーブルは、１つ１つのセルが独立しているため、複数セルを選択してコピー＆ペーストする等はできないのですが、このライブラリで作成したテーブルは複数セルへの同時アクセスなどエクセル同様の操作が可能です。
もちろん、数式を入れたりすることも可能です。
今回は、このライブラリを使用して、スプレッドシートのデータをエクセル風のテーブルに表示させる例をご紹介します。
ネット上にこのライブラリの活用事例は色々掲載されているのですが、JExcelをGASに適用して、スプレッドシートのデータを読み書きした例はあまり無い様ですので、ご参考になれば幸いです。
実装した動画をご紹介
大体の予想はつくと思いますが、どんな外観化を先にお見せします。
動画の中で２行分を選択してコピー＆ペーストしているシーンを確認できるでしょうか？
HTMLのテーブルと違って複数セルの選択ができるので、入力済みのデータを引用して効率よく入力したい場合に有用かと思います。
例えば複数セルを範囲選択してコピーし・・・
直下にペーストして範囲をまるごと複製し・・・
ちょっと編集して入力。
こんな用途に適しています。
定型入力の場合に、セルにドロップダウンを設定することも可能です。
ちなみに今までご紹介してきたテーブルは以下です。セルは１つづつしかアクセスできません。これはHTMLの＜TABLE＞タグで作成した表の仕様です。
。
表計算のスプレッドシートをわざわざ表計算のフォームに表現する意義
ここでちょっと補足を。
表計算のスプレッドシートをわざわざ表計算のフォームに表現するのは意味があるの？という意見がありそうです。勿論あります！
スプレッドシートはサーバー上で動くアプリのため、通信時のタイムラグから、どうしてもエクセルなどの様にキビキビと動きません。
しかし、（同時編集性という特徴がやや犠牲になりますが）クライアント側のWEBページに一旦落として作動させることでキビキビと動いて作業がしやすくなります。
また、スプレッドシートに表示させる範囲以外はユーザーには見えないので、シートの指定の範囲だけを外部に見せられるメリットもあります。
GoogleAppsScriptのプログラムの詳細については以降の記事でご説明します。
