2024.10.01
自社の社内情報を未来の“ゴミ”にしないための備え 「情報量が多すぎる」時代がもたらす課題とは?
リンクをコピー
記事をブックマーク
村上功光氏: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」という弊社の製品に収録されている「Spread.Sheets」をお使いいただくと、かなりExcelライクなものができあがります。
今日のセッションの参考情報としてお耳に入れていただければと思います。
こちらは何度も説明していますが、「SpreadJS」という製品に収録されたライブラリです。Excelと非常に高い互換性があります。Excel互換、というところで競合他社のみなさんのスプレッドシートと比較すると、弊社が1番Excelライクなんじゃないかなと自負したいくらい、Excelライクなスプレッドシートになっております。これはTipsとしてみなさん覚えていただければと思うんですが、だいたいスプレッドシートコンポーネントって、Excelのインポート機能が付いてるんですね。
Excelの機能の数は莫大なので、これを端から見ていくのはすごく面倒くさいです。そんなときはこのExcelのインポート機能を使うと、すごく簡単に判別できます。例えば条件付き書式とか、そういったものをExcelシートの中に設定して、そのファイルをスプレッドシートコンポーネントに読み込ませてみてください。それで、どのくらい再現できるかを見ると、どのくらいExcelライクかわかります。
これがExcelライクじゃないものだと……例えばこれは僕が作ったExcelのスクリーンショットですが、バーみたいなものが出ています。
これは条件付き書式と言って、セルの内容に応じてデータバーを後ろに出すっていうExcelの機能なんですが、こういったものに対応していないと、後ろのバーは表示されないでデータだけがコンポーネント上に出るという動きになります。
このExcelファイルを弊社の「SpreadJS」、「Spread.Sheet」に読み込ませるとこうなります。ほとんど全部読み込んでくれるようになっていますね。もちろんシートの中にマクロがあるとか、そういうのは引っ張ってこれないんですけれども。概要としてはマクロがダメですね。あと大きいところではチャートがないんですけれども、これは次期のバージョンで恐らく入るんじゃないかなと思います。あとシェイプもないかな。この3つくらいですかね。
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っぽいところはすべてAPIで設定できるようになっています。
それでもよくお客さまから「テキスト上に設定させたいんだけど」とか言われるので、そういったことにも対応できるようになっています。動きもほとんどExcelですね。実際に編集するときはこういうふうになっていますが、設定しておけばこういう感じです。これができないスプレッドシートも多いんですけど、オーバーフローとかもできるようになっています。セルをはみ出して字が書ける、ってやつですね。
みなさんもよくこれで資料とかを書いたりすると思いますが、外国の人から見ると「かなりクレイジーな機能」だそうです。要は、セルっていう区画があるのに、中身のデータにそこをはみ出してほしい、っていうわけですよね。弊社は海外展開もしていますので外国人もいるんですけど、「日本のみんなはこれを使ってるんだよ」と言うと「頭おかしいよ」って(笑)。海外の開発者にはすごく揶揄されるんですが、我々にとっては大事な機能で、もちろん対応しています。
さっき数式が使えますよ、ってお話ししましたけれども、こんな感じでただ数式設定ができるだけじゃなくて、例えば「=SUM」って入れると自動でExcelと同じサジェスト機能が出るようになっています。ここに数字が入っていないのでお見せしづらいですね……本当にExcelと同じだと思っていただいてかまいません。関数も、みなさんがなにもしなくても、Excelにある機能は我々のJavaScriptライブラリにふんだんに組み込まれています。
例えば、範囲選択して、自動で関数の式をサジェストするとか、みなさんはExcelでこういった操作をよくされると思うんですけど、そういった部分も組み込みで入っていますので、こちらをご利用いただけると、エンドユーザーさんにもかなり満足していただけるんじゃないかなと思います。一応数式入力完了すれば、答えが出ますので、まったくExcelと同じなんですね。というところで、ExcelライクなUIを作るときに弊社のJavaScriptライブラリをお選びいただければと思います。
「SpreadJS」という製品がありますとご説明しましたが、こちらがもう1個、ライブラリに収録されています。さっき言ったExcelライクじゃないときに使っていただく、グリッドコンポーネントもセットで入っています。こちらも非常にユニークなので、ちょっと参考情報として一緒に見ていただきたいと思います。
こちらは普通にこういうかたちの、ただのグリッドです。これだけでも非常に高性能なんですが、レイアウト・グルーピング機能というものが入っています。あるデータがあったときに、データ配置を工夫してあげると、みなさんが知ってるいろんなレイアウトにできるという機能です。例えば、上に日付なんかが入ったレコードデータがあって、例えばこれを「カレンダー表示したいな」って思ったときにどうすればいいかって言うと、実装だとこうなると思います。
色分けしてるごとにデータを配置して線を引くとカレンダーになりますね。こういうのが自動でプリセットされているのが、この「Spread.Views」というもう1つのライブラリの大きな特徴です。簡単にご説明します。はい、カレンダー表示。データのカレンダー表示も簡単にできます。データのタイムライン表示という、データが下に向かって流れていくような表示。これも簡単にできます。
ガントチャートも表示できます。これはガントチャートのデータの中に入ってる、開始日と終了日を与えてあるところを自動でガントチャートに書いてくれる機能が入っています。ちょっと変わってますけど、データレコードが進む方向を下に設定することも可能です。こうすると車屋さんのカタログみたいに、スペック比較するデータを簡単に表現できるわけですね。
あとはECサイトでよく使われる、データをカード型で表示することも簡単に可能です。カードレイアウトに入れるだけで、こういったデータもカード表示されます。Pinterestみたいな表示もできますし、AtlassianさんのTrelloが有名ですけども、カード上にデータ配置して、バックログ・作業中・レビュー、とかカテゴリー分けして、これを動かすと進捗管理できるよ、とか、そういったビューをこの「Spread.Views」を使ってお作りいただくこともできます。
Excelライクじゃない案件も含めて、弊社製品「SpreadJS」を1つ持っていていただくと、グリッド形式のUIを実現するときにどちらでも採用できる、というかたちでご用意しております。他社さんのライブラリも非常に良いですけれども、弊社製品をぜひよろしくお願いいたします。では時間になってまいりましたので、今日はここまでとしたいと思います。今日はどうもありがとうございました。
(会場拍手)
関連タグ:
2024.10.29
5〜10万円の低単価案件の受注をやめたら労働生産性が劇的に向上 相見積もり案件には提案書を出さないことで見えた“意外な効果”
2024.10.24
パワポ資料の「手戻り」が多すぎる問題の解消法 資料作成のプロが語る、修正の無限ループから抜け出す4つのコツ
2024.10.28
スキル重視の採用を続けた結果、早期離職が増え社員が1人に… 下半期の退職者ゼロを達成した「関係の質」向上の取り組み
2024.10.22
気づかぬうちに評価を下げる「ダメな口癖」3選 デキる人はやっている、上司の指摘に対する上手な返し方
2024.10.24
リスクを取らない人が多い日本は、むしろ稼ぐチャンス? 日本のGDP4位転落の今、個人に必要なマインドとは
2024.10.23
「初任給40万円時代」が、比較的早いうちにやってくる? これから淘汰される会社・生き残る会社の分かれ目
2024.10.23
「どうしてもあなたから買いたい」と言われる営業になるには 『無敗営業』著者が教える、納得感を高める商談の進め方
2024.10.28
“力を抜くこと”がリーダーにとって重要な理由 「人間の達人」タモリさんから学んだ自然体の大切さ
2024.10.29
「テスラの何がすごいのか」がわからない学生たち 起業率2年連続日本一の大学で「Appleのフレームワーク」を教えるわけ
2024.10.30
職場にいる「困った部下」への対処法 上司・部下間で生まれる“常識のズレ”を解消するには
2024.10.29
5〜10万円の低単価案件の受注をやめたら労働生産性が劇的に向上 相見積もり案件には提案書を出さないことで見えた“意外な効果”
2024.10.24
パワポ資料の「手戻り」が多すぎる問題の解消法 資料作成のプロが語る、修正の無限ループから抜け出す4つのコツ
2024.10.28
スキル重視の採用を続けた結果、早期離職が増え社員が1人に… 下半期の退職者ゼロを達成した「関係の質」向上の取り組み
2024.10.22
気づかぬうちに評価を下げる「ダメな口癖」3選 デキる人はやっている、上司の指摘に対する上手な返し方
2024.10.24
リスクを取らない人が多い日本は、むしろ稼ぐチャンス? 日本のGDP4位転落の今、個人に必要なマインドとは
2024.10.23
「初任給40万円時代」が、比較的早いうちにやってくる? これから淘汰される会社・生き残る会社の分かれ目
2024.10.23
「どうしてもあなたから買いたい」と言われる営業になるには 『無敗営業』著者が教える、納得感を高める商談の進め方
2024.10.28
“力を抜くこと”がリーダーにとって重要な理由 「人間の達人」タモリさんから学んだ自然体の大切さ
2024.10.29
「テスラの何がすごいのか」がわからない学生たち 起業率2年連続日本一の大学で「Appleのフレームワーク」を教えるわけ
2024.10.30
職場にいる「困った部下」への対処法 上司・部下間で生まれる“常識のズレ”を解消するには