kintoneとExcelの良いとこどり!!~Excelライクな一覧表~

あいさつ.png
2016年、cybozu developer networkはリニューアルし、おかげ様でより多くの方に見ていただけるようになりました。2017年は、トップページの見た目を変えたり、増えてきたTipsを整理して見やすく、探しやすくするなどの改善をしてく予定です。今年もkintone、そしてcybozu developer networkをどうぞよろしくお願いいたします!!

さて新年初の記事では、kintoneの一覧を劇的に使いやすくする情報をお届けます。
3月が年度末になる会社では、年度末が近づいてkintoneに蓄積してきたデータを使って今年度を振り返る機会も増えてくるのではないでしょうか。そういう場合には、是非この記事をご参考にしていただきです!

kintoneがExcelライクな見た目に!?

kintoneをご利用いただいている皆様は、Excelと比較した場合のkintoneのメリットをよくご存知かと思いますが、ホームページでも紹介しているように、Excelで情報を管理する場合の課題をいくつもkintoneで解決することができます。

25nt6en.png

とても便利なkintoneですが、たくさんのデータを一覧に表示しようとすると、Excelに比べて見づらいな、と思ったことのある方もいらっしゃると思います。また、Excelなら一覧上で簡単にデータの更新ができるのにな、と思ったこともあるのではないでしょうか。
そういう時、kintoneをもっとExcelのような使い勝手にできたらいいのに、と思いませんか?

実は、ブラウザ上でExcelのようなグリッドを実現するHandsontableというJavaScriptライブラリを使うことによって、kintoneの一覧をExcelのようにすることができるのです。

Handsontableを使うとどうなる?

例えば、案件管理アプリの案件一覧というと、kintoneではこんな感じなります。
kintone一覧.png

このkintoneの一覧と同じ内容の一覧を、Handsontableライブラリを使ってカスタマイズビューで作ってみると
https://gyazo.com/60c95e3e77ac7c9a54e0df729cedf9be

このようになり、まるでExcelシートのようにセルごとの変更や、レコードの追加/削除などもできます。
一覧性も操作性もぐっと上がりますね!!

実現方法は、Handsontableを使ってkintoneをExcelライクに入力しよう その1(閲覧、編集ができる)、Handsontableを使ってkintoneをExcelライクに入力しよう その2(レコードの追加、削除ができる)で詳しく説明しています。
こちらのサンプルは、kintoneデモサイトでお試しいただくことができます。
※デモサイトをご利用いただくためには、cybozu developer networkにメンバー登録していただく必要があります。メンバー登録はこちらから。

カスタマイズしないとだめなの?

カスタマイズとなるとプログラムのスキルも必要になりますが、自分でカスタマイズしなくても手軽にkintoneでExcelライクな一覧を実現できるプラグインがあります。

githubで公開されていて、cybozu developer networkのkintone スプレッドシートプラグインでExcelライクなUIを試してみよう!で使い方を解説しておりますので、こちらを是非ご活用ください。

プラグイン.png

応用編

予算と実績をkintoneで管理する場合、1年分の予算、実績、差異を見やすく表示させることが難しいです。私も実際にお客様と予実管理のアプリを検討したときに、腱鞘炎になりそうなぐらいたくさんのフィールドを配置するなど、苦労しました。
そんな苦労もHandsontableを使えば、簡単に解決できてしまうのです。
予算と実績をリアルタイムに把握する経費精算システムパッケージでご紹介している予実マスタのビューにはHandsontableを使っています。
予実マスタ.png

おわりに

Excelの便利なところはkintoneにも取り入れて、よりkintoneを快適にお使いいただけるヒントになったら幸いです。
なお、HandsontableはCybozu CDNでも公開しております。
繰り返しになりますが、2017年もどうぞよろしくお願いいたします!


技術者向けサイト

「cybozu.com developer network
★メンバー登録特典★
・コミュニティに投稿やコメントしたり、Tips に質問できます。
・API のアップデート情報の通知を受け取ることができます。
・5ユーザー、1年間無償の開発者ライセンスを申し込むことができます。
・[★New] Tipsやサンプルの動きを確認できるデモサイトを利用することができます。
・[★New] HTTP Client Tool for kintoneを利用することができます。