ExcelライクなUIを作る時に知っておきたい、グリッドビューとスプレッドシートの違い

「コンポーネント」とは何か

村上功光氏：みなさんこんにちは。ただ今ご紹介にあずかりました、村上と申します。今日は「Excel業務をWebアプリに！コンポーネントベンダーが眺めたフロントエンド開発」ということで、みなさんにお時間をいただいて、セッションさせていただきたいと思います。どうぞよろしくお願いいたします。始めにイントロダクションとして、ちょっとだけ私自身と弊社のご紹介をさせていただければと思います。

私、村上功光は、グレープシティ株式会社のツール事業部で働いておりまして、プロダクトマーケティングマネージャーの職務についております。

基本的にはみなさんに製品をご紹介するような仕事をしています。今日は弊社製品の話を中心にするわけではなく、今回のタイトルにもあるように、Excelライクなアプリケーションを作るときに、こういったことに気を付けるといいものができあがりやすいというお話をさせていただければと思います。どうぞよろしくお願いいたします。

弊社グレープシティ株式会社は、いろいろな事業をやっておりまして、私の所属部署以外にも部署があります。

私が所属しているのはこの1番端っこのものです。

ツール事業部というところにいるんですけれども、開発支援コンポーネントの開発と販売を行っています。ここでちょっとおうかがいしたいのですが、みなさん「コンポーネント」が何か自体はご存知ですか？

おそらくソフトウェア業界ですと、聞いたり聞かなかったりという感じかなと思いますが、みなさん一応ご存知ですかね。簡単に言うと、ソフトウェアの世界ではライブラリのことを指すことが多いかな、と思います。ソフトウェアの中で、ある機能だけをまとめて、その単一単位のことをコンポーネントと呼ぶことが多いと思います。弊社ではある機能に特化したコンポーネントを開発して、これをみなさまにお使いいただくことで、ライブラリの会社として成り立っているわけですね。

弊社のツール事業部なんですが、多彩なテクノロジーに対応できるようにいろんなラインナップを取り揃えています。みなさんのほうが詳しいかなとも思いますが、ソフトウェアの世界って非常に技術の進む速度が速いので、どんどん環境とか新しいテクノロジーが出てくる中でも、みなさんに安心してライブラリをお使いいただけるように、常に最先端のものをフォローしながら製品開発を続けている状況です。

お客様から必ずリクエストされること

そういった状況の中から昨今の状況を見ると、弊社の視点からも「最近のWebアプリケーション開発はこうなってきてるんじゃないかな」というのがあるわけです。Webアプリケーションって概念図にするとこういう感じだよね、っていうのを図にしてきたのが今このスライドに出てる内容です。

クライアントサイドがあって、サーバーサイドがあって、これをインターネットの通信で結んで1つのアプリケーションとして動くようにしたのが、Webアプリケーションの一般的な概念かな、と思います。

昨今ですと、2、3年くらい前に……もう4年前かな。HTML5が発表されてから、どんどん「フロントエンドでいろんなことができるよ」ってなってきて、もっと言うと、フレームワークも出てきました。

ここでいろいろやるっていうスタイルが、今Web開発という状況の中ですごく進んできているのではないでしょうか。今申し上げたように、HTML5で言うと最近ではCanvasとかSVGという技術が使えるようになりました。

そういった側面もあり、今はJavaScriptも一緒に、いろんいろなことができるように進化してきています。加えてフレームワークを使うとより大規模な開発ができるということで、今、業界にはJavaScriptフレームワークやスタイルシートのフレームワークが浸透してきています。これらを使ってフロントエンドでいろいろやる開発のが、今Web開発の中でどんどん広がってきている状況です。

弊社は20年くらいやってます、と申し上げました。時を遡ると上に描いてあるテクノロジーの図みたいに、20年くらい前とかはVB6という技術がありました。それがWindows FormsになったりASP.NETになったりして、今はHTML5っていう技術が最先端ですよ、というお話をさせていただきました。

そういった中でも、とりわけ業務アプリケーションを作る場合に、必ずお客さまから要望されるリクエストがあるわけです。弊社はこれをずっと20年間言われ続けているんですけれども。我々は製品のユーザーさんから、「エンドユーザーさんから『ExcelライクなUI・操作感を持ったアプリケーションでシステムを作ってください』と言われてるんです……」と言われる状況がずっと続いています。今日はこのへんの2つのお話をしたいなと思っております。ここまでがイントロダクションです。

日本企業に深く根付くExcel文化

今日どんなお話をするかについて、大きく3つに分けて概要を説明したいと思います。まず始めは、「なんで昔も今もExcelライクなUIが求められてるんですか？」っていう話をちょっとだけさせてください。それから、弊社はもちろんコンポーネントベンダーですので、コンポーネントを使っていただくと比較的簡単にExcelライクなUIとかアプリケーションのフロント部分を作ることができます、というお話をさせていただきたいと思います。

3番目は「どこまで迫るか問題」って書いてありますね。これはExcelにどこまで迫れればお客さまが満足してくれるのか、というお話になるかと思います。

1番、「なぜExcelライクなUIなのか？」。これは端的に言うと、日本の企業文化が深く関係しています。みなさんもご存知かと思いますが、とりわけ日本の企業の中だとなんでもExcel使って仕事を進める、っていうことがあると思います。例えば出張に行って、経費精算をする場合にExcelのシートの中に数字を書き込んで、それを印刷して最終的に経理部に提出する、とか。そうじゃなくても、例えばソフトウェア開発の現場で仕様書を書くときとか。Wordの場合もあるかもしれませんけれども、Excelを使って仕様書を書いて、それをチームメンバーに回すとかですね。

ここまでずっと、そういったExcelを使う文化が日本の企業の中にすごく深く根付いて浸透しているわけです。ただ、さっき言ったみたいに、印刷して経理部に渡すとかやっていると非効率なので、「これをシステム化したいです」っていう要望があって。これらが掛け合わされた結果、「システム化はしてほしいけど、Excelライクな操作感は失ってほしくない」。ということで、そういったWebアプリを作ってください、という要望になるのかと思います。

「Excelライク」とはどういうことか

私がここで勝手に話をしているわけではなくて、実際にそういう例がいっぱいありますよってことで、今回は弊社Webサイトに掲載されている事例をお持ちしました。東芝インフォメーションシステムズさまで弊社製品をお使いいただいてシステム化したんですが、東芝インフォメーションシステムズさまはこのようにおっしゃっています。

「このシステムができるまで、製品情報はすべてExcelで管理されていました。エンドユーザーからの要望は、なによりExcelをWebで実現してほしい、ということでした。これまでのExcelの良い部分は残したまま、システムに移行することを期待されました」。

こういったお話をされて、最終的にシステムを構築されたわけです。こちらの企業さまに限らず、現在多くの企業さまがエンドユーザーの方、システムの使用者の方からこういったニーズ・要望をされているんじゃないかと思います。ただ、ここでちょっと考えてみたいのが、エンドユーザーさんが「Excelライクな操作感」とか「Excelっぽいシステムにしてください」って言うとき、お客さまの言う「Excelライク」というのは一体どういうことか、ということです。

例えば1番左上に表示されていますが、データをグリッド表示したらExcelライクですかね？　それともフィルターとかソートができる、もっと言うとGUIでフィルターとかソートできるとして、それがExcelライクということでしょうか。それとも数式が使えるとExcelライクなのか……。こういうふうに考えていくとキリがない。これを考え始めるとExcelというのは非常に優秀なソフトウェアなんだなというのがわかるところもあるんですが、非常に莫大な内容を含んでいます。

お客さまが「Excelライク」って言ったとして、なんのことを指しているのかよくわからないですし、そこに内包される機能の数は非常に莫大になってきます。これを1からやろうとすると、基本的には無理じゃないのかな、と私は考えています。

みなさんはもちろんお使いいただいたことがあると思うんですが、Googleが「Googleスプレッドシート」を出しました。ああいった巨大な資本で、それなりのユーザー数を見込んで「1から作る！」って気合を入れるならそれはそれで構わないんですが、企業の中でアプリケーションを作るときにそういった取り組みをするのはなかなか難しいかと思います。

失敗しないコンポーネントの選び方

ここでコンポーネント、ソフトウェアライブラリを使っていただくと、比較的簡単にExcelライクなUIが実現できます、というのが今回のセッションの2つ目の内容になってきます。コンポーネントやソフトウェアライブラリを使っていただくと、簡単に今お使いのソフトウェアとか、作ろうとしているシステムのUIをExcelライクにできるわけです。ただ、今は市場にJS、JavaScriptライブラリが非常にたくさん溢れてるんですね。

冒頭でもお話しましたが、2014年にHTML5が発表されてから、一緒にJavaScript市場がすごく盛り上がりました。ちょっと検索すると、JavaScriptライブラリはものすごい数が引っかかると思います。弊社のように有料で販売しているものもありますし、オープンソースソフトウェアもたくさんあるんですが、とにかくいっぱい溢れかえっている。そんな中で一体なにを選べばいいのかというのが、実際にシステムを作る方の懸念事項、あるいは問題点になっています。

というわけで2番目は、「ExcelライクなUIのための失敗しないコンポーネント選定」というお話をさせていただきたいと思います。弊社でもスプレッドシートコンポーネントを販売してるんですが、弊社製品をお選びいただかなくても、今からお話することに気を付けてライブラリを選んでいただけば、ExcelライクなUIを作るのにぜんぜん困らないと思います。ぜひ気を付けていただければと思います。

弊社の特性上、よくお客さまから相談を受ける機会があります。だいたいのケースで、かなり困っている場合だと、「ExcelライクなUIを持ったアプリケーションを作ってはみたものの、どうもエンドユーザーさん……つまりシステムを使うユーザーが納得していないようだ。そこでもっと良いものはないですか？」という相談を受けるんですね。

どういうふうに失敗してるかっていうのも、ちょっとだけここに列挙してみました。

1番悪い例は、データをグリッド表示しただけ、ってやつです。Excelはパッと見たときにグリッド表示されているので、グリッドコンポーネントを使ってデータを表示させてみたけれど、ぜんぜんExcelっぽくはなくて、「操作感も違う」とか、そういったことを言われてしまったというケースです。

もう1個が機能不足ですね。Excelの1番有名な機能に数式があると思います。SUMを入れると合計が計算できるとか、そういった機能ですね。もちろんこれをスクラッチで作るとすごく大変なので、そのへんをあまり考慮に入れずにExcelライクなUIを作ろうとして、お客さまに「そういったことはできませんよ」なんてお伝えすると、「話が違うじゃないか」となる。そんな話があります。

ExcelライクなUIを作るときに選ばれるものは2つ

最初にちょっと言ってしまいましたが、エンドユーザーの方々は、Excelと操作感が違うっていうのをすごく気にされます。開発者としては「仕様がある程度満たせていればいいんじゃないかな？」って考えてしまう側面があると思うんですけれども、実際にシステムを使う方々は、「どのくらい使いやすいか」とか「どのくらい期待したものになっているか」をすごく気にされる。我々にそういった期待を向けている部分はあります。

どうしてこういったことが起こるかって言うと、コンポーネントを使った場合にコンポーネント選びを間違うと、こういうことが頻繁に起きます。今日はどういうふうにすると間違うのか、どうすれば当たっているのか、という話をしたいと思います。企業の中でみなさんがExcelライクなUIを作ろうとするとき、選ばれるコンポーネントはだいたい2種類あります。この2つを例にとって、ちょっとお話したいと思います。

1つは、さっきも話の中でちょっと出てきました、グリッドビューコンポーネントです。

データが行列表示されているものですね。もう1個はスプレッドシートコンポーネントって銘打たれているカテゴリーの中でのライブラリがあります。

もちろん弊社も2つともリリースしていますが、お客さまからも「同じではないのですか？」とよく聞かれます。見た目が似ていますので、「なにが違うんですか？」といった質問をよく受けるわけです。

「同じですか？」という質問に対する回答は、もちろん「違います」。同じだったら2種類もいらないですね。これを説明するのに良い例がないかなと思って、インターネット上でいくつか検索してみたんですけれども、英語版のウィキペディアの「グリッドビュー」と「スプレッドシート」というページに非常に良い解説がありましたので、今回はその引用をしてきました。ちょっとだけ読み上げたいと思います。

「グリッドビュー」と「スプレッドシート」では目的が異なる

まずグリッドビューですね。「グリッドビュー（またはデータグリッド）は、データの行列表示を行う視覚的コントロール要素である」。まったくそのとおりです。スプレッドシートのほうは、「スプレッドシートは、行列形式でデータの整理・分析・保持を行うための対話式電算アプリケーションである」。こういう説明があるわけです。これは2つとも、非常に端的にスプレッドシートとグリッドビューの内容を説明していると思います。

ここからちょっと整理してお話しすると、UIとしてのグリッドビュー、UIとしてのスプレッドシートを考えるときに、グリッドビューコンポーネントはなにがコンセプトかと言うと、データ「表示」用のUI、というのがコンセプトなんですね。もう一方でUIとしてのスプレッドシートはなんなのかなというと、こちらはデータ「分析」用のUI、ということになります。

目的がぜんぜん違うんですが、みなさんがExcelライクなUIを作ろうとしてコンポーネントを選ぼうとすると、なぜかだいたいこの2つがUI候補として挙がってくるわけです。ここで選び方を間違うと、もちろんExcelライクなUIはできなくなってしまいます。みなさんにはExcelってそもそもなんなのかな、というところをちょっと考えていただきたいなと思います。さっき引用した「スプレッドシート」のウィキペディアのページで、下側のアンダーラインを引いた部分にさらに良い説明が続いています。

ここもちょっと日本語訳を読み上げさせていただきます。スプレッドシートの中の説明として、「WindowsおよびMacintoshプラットフォームにおいて、現在Excelが最大の市場シェアを獲得している」という説明があります。これはどういうことかと言うと、体系的に考えるとこうなります。まず大元として「行列形式のUI」といったものがあり、大別すると「グリッドビュー」と「スプレッドシート」に分けられます。

それで、スプレッドシート型のUIを持ったアプリケーションとして、ふだんみなさんが使っている表計算ソフトウェアというのがあるわけです。Microsoftで言えばExcel、Googleで言えばGoogleスプレッドシートです。AppleがリリースしているiWorkの中だと、Numbersがそれらにあたるかと思います。ですので、お客さまから「ExcelライクなUIをお願いします」という話をされたときは、Excelの系譜上にあるスプレッドシートライブラリを選ばないと、お客さまの要望を実現するのは基本的に無理なわけですね。

そうでなくてグリッドビューを選んだ場合は、「ライブラリを使うけれども、Excelライクな機構はスクラッチでやります」という覚悟を決めないとできないわけです。ただ、ソフトウェアライブラリというのは、だいたい内部隠蔽されている部分ですので、無理にカスタマイズしようとしても難しいケースがけっこう多いんじゃないかな、と思います。