ExcelっぽいWebアプリを作るときに失敗しない、コンポーネントの選び方

似たコンポーネントにもそれぞれ特色がある

村上功光氏：3番目は、スプレッドシートコンポーネントを選んだからといって、全部解決するかというとそういうわけではないんですね。そういうわけで、「Excelにどこまで迫るのか」について考えたいと思います。こちらは例としてお持ちしたんですが、弊社の「FlexSheet」というコンポーネント、JavaScriptライブラリの実行時のスクリーンショットです。スプレッドシートですね。Excelライクな見た目に見えるかと思います。

こちらのもう1個は、弊社の販売するソフトウェアライブラリのコンポーネント「SpreadJS」という製品に収録されている「Spread.Sheets」というライブラリの実行時の画面です。

スプレッドシートです。Excelっぽいですね。どちらもスプレッドシートコンポーネントなんですが、こんなことができます。

もちろん行列表示でデータが出せますし、数式をお使いいただくことも可能です。

あと書式設定と、簡単なところだとセルの色を設定したりとか、そういうこともできます。シートが複数あって、切り替えてデータを見せていただいたりとか、ウインドウ枠の固定も可能ですし、ソート・フィルターも可能です。セル結合も組み込みで機能が入っていて、2つのセルを結合して1つに見せたり。どちらのソフトウェアライブラリでもそういったことができるようになっています。

日本のユーザーには日本のコンポーネントが合う

「グレープシティさんは同じようなソフトを2つも売って、ユーザー・開発者の方を混乱させてるんですか？」なんてときどき言われたりするんですけど、そういうわけではなくて、それぞれの製品に特徴があるということをちょっとお話ししたいと思います。これは弊社製品だから特徴があるっていうわけじゃなくて、世の中のスプレッドシートにこういった特性がある、という話として聞いていただければと思います。

最初にお見せした「FlexSheetでできること」を、最初にお見せした「Excelライクな要求ってこういうのがありますよね」っていう部分に照らし合わせると、こういう感じになります。

「FlexSheet」をお使いいただいた場合、搭載されている機能はこのくらいしかないんですね。そこで「SpreadJS」を使っていただくと、基本的に「Excelライク」として期待されることはだいたいできるような作りになっています。

別に下位エディションと上位エディションがありますよ、という話ではなく、これはどういうことなのか。先ほどの体系図でご説明します。「SpreadJS」の「Spread.Sheets」は、「Excelであること」にフォーカスしたソフトウェアライブラリです。

だから最初に挙げた「Excelの要求ってこういうことがありますよね」ということにすべて合致するような機能設定を持っているわけです。

一方、「FlexSheet」は、「スプレッドシート」にフォーカスしたライブラリになっています。

「なんですか？」って話になるんですけども、海外でも基本的にはスプレッドシートコンポーネント、スプレッドシートライブラリって言ったら、こっちのことを指すんですね。Excelっぽくしようとしてもならないケースが非常にたくさんあります。

これは「どういうことのなの？」って話です。海外ではオープンソースがいっぱい出ているので、そちらを使ってExcelライクなUI作っていただいてもぜんぜん構わないんですが、海外は日本ほどExcelが企業文化に深く入り込んでることはないわけで、海外ではExcelもGoogleスプレッドシートもiWorkのNumbersも、それぞれ「あぁ、表計算ソフトだよね」っていう受け止められ方で、「同じようなことができるソフトウェア」という枠組みの中にあると思ってください。

それで、「似たようなことがしたいね」ということでアプリケーションを作る話になったら、単純に似たようなものを作ればいいので、スプレッドシートライブラリを選んで、足りないところをちょっと実装すれば、自分たちの欲しいものができあがる。海外のスプレッドシートはそういった前提でリリースされていることが多いんですね。

なので、ふつうのスプレッドシートみたいなものを選んだ上でExcelライクなことをしようとしても、日本のお客さまはちょっと満足できないケースが多々あります。そういった方がこれらをどう考えているのかをちょっと図にしてみました。海外でももちろん、「Excelライクなことができますよ」って機能の宣伝をしているオープンソースソフトウェアとかコンポーネントってたくさんあるんです。

最初にお客様の要望をきちんと聞き出すことが重要

世の中にあるスプレッドシートを大きく2つの軸上に並べていくと、こんな感じで見ていくことができます。簡単に言うと、世の中には本当のスプレッドシート、「純スプレッドシート」のようなものと、「Excel互換のスプレッドシート」のようなものがあると思っていただきたいです。この中から、「システムを作ってください」って言ってこられるエンドユーザーさんの要望に合ったものを選ぶのが、失敗しない1番のコンポーネント選びになるわけですね。

例えば「画面に表計算機能が欲しいです」という場合は、「ちょっとExcelっぽくしたいです」くらいの要件だと思ってください。関数などを使ってUI上でなにか計算させたりしたいです、というようときは、そんなにExcel互換機能がなくてもいけると思います。この「純スプレッドシート」に該当するようなコンポーネントを選んでいただければ、お客さまにはご満足いただけるんじゃないかと思います。

ただ、一方ですごくヘビーな要求をする方もいらっしゃいます。最初にご説明したような、「既存の業務をExcelでやってるけれども、やり方を変えないでただシステム化して効率だけ上げたい」とか、「アプリ化してもそのままの使い勝手と機能を期待しています」とか、そんなことを言われてしまった場合には、「Excel互換のスプレッドシート」というところにフォーカスして、ExcelライクなWebアプリケーションを作っていかないと、最終的には失敗してしまうかもしれません。

このように、お客さまから「どんなことをしたいのか」をまず初めにできるだけ聞いて、その要件に合わせてスプレッドシートの内容を見て適したコンポーネントを選んでいくのが、ExcelライクなUIを持ったアプリケーションを完成させる1番重要なポイントだと思います。このへんに気を付けていただければ、別に弊社のコンポーネントをお選びいただかなくても、かなり良いExcelライクなシステムができると思いますので、1つ参考にしていただければなと思います。

「SpreadJS」の機能について

ここでだいたいメインの内容は終わりなんですが、ちょっとだけさっきの「SpreadJS」のお話をさせていただければと思います。「SpreadJS」という弊社の製品に収録されている「Spread.Sheets」をお使いいただくと、かなりExcelライクなものができあがります。

今日のセッションの参考情報としてお耳に入れていただければと思います。

こちらは何度も説明していますが、「SpreadJS」という製品に収録されたライブラリです。Excelと非常に高い互換性があります。Excel互換、というところで競合他社のみなさんのスプレッドシートと比較すると、弊社が1番Excelライクなんじゃないかなと自負したいくらい、Excelライクなスプレッドシートになっております。これはTipsとしてみなさん覚えていただければと思うんですが、だいたいスプレッドシートコンポーネントって、Excelのインポート機能が付いてるんですね。

Excelの機能の数は莫大なので、これを端から見ていくのはすごく面倒くさいです。そんなときはこのExcelのインポート機能を使うと、すごく簡単に判別できます。例えば条件付き書式とか、そういったものをExcelシートの中に設定して、そのファイルをスプレッドシートコンポーネントに読み込ませてみてください。それで、どのくらい再現できるかを見ると、どのくらいExcelライクかわかります。

これがExcelライクじゃないものだと……例えばこれは僕が作ったExcelのスクリーンショットですが、バーみたいなものが出ています。

これは条件付き書式と言って、セルの内容に応じてデータバーを後ろに出すっていうExcelの機能なんですが、こういったものに対応していないと、後ろのバーは表示されないでデータだけがコンポーネント上に出るという動きになります。

このExcelファイルを弊社の「SpreadJS」、「Spread.Sheet」に読み込ませるとこうなります。ほとんど全部読み込んでくれるようになっていますね。もちろんシートの中にマクロがあるとか、そういうのは引っ張ってこれないんですけれども。概要としてはマクロがダメですね。あと大きいところではチャートがないんですけれども、これは次期のバージョンで恐らく入るんじゃないかなと思います。あとシェイプもないかな。この3つくらいですかね。

「Spread.Sheet」でできること

Excelであるのに再現できないという機能もちょっとあるんですけれども、それ以外だったら、みなさんの言う「Excelってこういうことできるよね」っていうことは「Spread.Sheet」でほとんどできるようになっています。ざっと例を挙げるとこういうかたちですね。

数式にテキストボックス、ソートすることもできますし、グループ化ももちろん可能です。ウインドウ枠の固定もできますし、セル結合もできます。スパークライン表示もできます。

プログラムで数式設定して、バインドするデータには計算式の結果というのはないんですが、実際にアプリケーションを動かすと数式の結果が出てるとか、そういった作りにしていただくことも可能です。さっき説明した条件付き書式も出ますし、複数シートもできます。それからこれはできないスプレッドシートも多いんですが、シートを1つ2つと配置して、最初のシートに計算式を入れて次のシートの内容を参照するとか。Excelでできると思うんですが、これは弊社の「Spread.Sheet」でももちろん可能です。

あと罫線のカスタマイズですね。点線が引けないとか、そういったスプレッドシートが非常に多いです。ただ、こちらは対応しています。日本のお客さまってすごく細かくて「ここを点線にしたいんですけど」とかおっしゃるので、そういった細かいニーズにも対応できるようになっています。それから書式のカスタマイズ……赤字でマイナス決算だったり、赤いフォントにしたいんだけどとか、そういったこともExcelと同じコンセプトで設定できるようになっていますので、非常に便利なのではないかと思います。

使用できる開発環境について

挙げればキリがないんですが、フィルターもできますし画像も置けます。エンドユーザーさんに数式も入力していただけますし、タッチ対応の画面からタッチすればExcelと同じタッチ画面も出るようになっています。テーブルを配置することも可能で、ある領域でフィルターしたりもできます。

あと、知らない方もいらっしゃると思うんですが、Excel2013くらいから「スライサー」という機能が入っています。

テーブルの周りにこういったパネルが置けるようになっていて、パネルを選択するとその内容にどんどん絞り込まれてくる、っていうのがExcelのスライサーなんですが、「SpreadJS」でも使うことが可能です。こういったかたちで、Excel互換という部分で大変ずば抜けた機能の盛り込まれたJavaScriptライブラリになっていますので、ExcelライクなUIを作るときは、ぜひみなさんにご検討いただければなと思います。

もちろんJavaScriptライブラリということで、開発環境で使うときにはJavaScriptフレームワークと一緒に使えるんですか、という質問をよくいただきます。現状では、Angularに対応しています。Angularは、バージョン1だったAngularJSっていうのと、バージョン2以降のAngularですね。それと一緒にお使いいただけるようになっていて、Angularの記法で書けば簡単にスプレッドシートが出るようになるとご理解いただければと思います。ちょっと古くなってきましたけど、Knockoutと一緒に使っていただくことも可能です。

あとAngularは基本的にTypeScriptで作らなければいけないようになっていますので、もちろんTypeScriptと一緒に弊社のJavaScriptライブラリをお使いいただくことも可能です。JavaScriptフレームワークとして、React.jsとVue.jsという下の2つのアイコンのやつは、今すごく勢いを増してきている状況なんですけれども、こちらは今、弊社で鋭意対応中ですので、「これからがんばります」ということにさせていただければと思います。

「Spread.Sheet」は細かいところまでExcelライクに対応している

デモをお見せできるとイメージがわくかなと思いまして、今日は「Spread.Sheet」のデモをお見せしたいと思います。

あ、いいですね。こちらはもうExcelにしか見えないと思いますが、弊社の「Spread.Sheet」を使って作ったデモアプリケーションです。こういったところは全部、ExcelっぽいところはすべてAPIで設定できるようになっています。

それでもよくお客さまから「テキスト上に設定させたいんだけど」とか言われるので、そういったことにも対応できるようになっています。動きもほとんどExcelですね。実際に編集するときはこういうふうになっていますが、設定しておけばこういう感じです。これができないスプレッドシートも多いんですけど、オーバーフローとかもできるようになっています。セルをはみ出して字が書ける、ってやつですね。

みなさんもよくこれで資料とかを書いたりすると思いますが、外国の人から見ると「かなりクレイジーな機能」だそうです。要は、セルっていう区画があるのに、中身のデータにそこをはみ出してほしい、っていうわけですよね。弊社は海外展開もしていますので外国人もいるんですけど、「日本のみんなはこれを使ってるんだよ」と言うと「頭おかしいよ」って（笑）。海外の開発者にはすごく揶揄されるんですが、我々にとっては大事な機能で、もちろん対応しています。

さっき数式が使えますよ、ってお話ししましたけれども、こんな感じでただ数式設定ができるだけじゃなくて、例えば「＝SUM」って入れると自動でExcelと同じサジェスト機能が出るようになっています。ここに数字が入っていないのでお見せしづらいですね……本当にExcelと同じだと思っていただいてかまいません。関数も、みなさんがなにもしなくても、Excelにある機能は我々のJavaScriptライブラリにふんだんに組み込まれています。

例えば、範囲選択して、自動で関数の式をサジェストするとか、みなさんはExcelでこういった操作をよくされると思うんですけど、そういった部分も組み込みで入っていますので、こちらをご利用いただけると、エンドユーザーさんにもかなり満足していただけるんじゃないかなと思います。一応数式入力完了すれば、答えが出ますので、まったくExcelと同じなんですね。というところで、ExcelライクなUIを作るときに弊社のJavaScriptライブラリをお選びいただければと思います。

「SpreadJS」はExcelライクじゃない案件にも適している

「SpreadJS」という製品がありますとご説明しましたが、こちらがもう1個、ライブラリに収録されています。さっき言ったExcelライクじゃないときに使っていただく、グリッドコンポーネントもセットで入っています。こちらも非常にユニークなので、ちょっと参考情報として一緒に見ていただきたいと思います。

こちらは普通にこういうかたちの、ただのグリッドです。これだけでも非常に高性能なんですが、レイアウト・グルーピング機能というものが入っています。あるデータがあったときに、データ配置を工夫してあげると、みなさんが知ってるいろんなレイアウトにできるという機能です。例えば、上に日付なんかが入ったレコードデータがあって、例えばこれを「カレンダー表示したいな」って思ったときにどうすればいいかって言うと、実装だとこうなると思います。

色分けしてるごとにデータを配置して線を引くとカレンダーになりますね。こういうのが自動でプリセットされているのが、この「Spread.Views」というもう1つのライブラリの大きな特徴です。簡単にご説明します。はい、カレンダー表示。データのカレンダー表示も簡単にできます。データのタイムライン表示という、データが下に向かって流れていくような表示。これも簡単にできます。

ガントチャートも表示できます。これはガントチャートのデータの中に入ってる、開始日と終了日を与えてあるところを自動でガントチャートに書いてくれる機能が入っています。ちょっと変わってますけど、データレコードが進む方向を下に設定することも可能です。こうすると車屋さんのカタログみたいに、スペック比較するデータを簡単に表現できるわけですね。

あとはECサイトでよく使われる、データをカード型で表示することも簡単に可能です。カードレイアウトに入れるだけで、こういったデータもカード表示されます。Pinterestみたいな表示もできますし、AtlassianさんのTrelloが有名ですけども、カード上にデータ配置して、バックログ・作業中・レビュー、とかカテゴリー分けして、これを動かすと進捗管理できるよ、とか、そういったビューをこの「Spread.Views」を使ってお作りいただくこともできます。

Excelライクじゃない案件も含めて、弊社製品「SpreadJS」を1つ持っていていただくと、グリッド形式のUIを実現するときにどちらでも採用できる、というかたちでご用意しております。他社さんのライブラリも非常に良いですけれども、弊社製品をぜひよろしくお願いいたします。では時間になってまいりましたので、今日はここまでとしたいと思います。今日はどうもありがとうございました。

（会場拍手）