kintone スプレッドシートプラグインでExcelライクなUIを試してみよう!

フォローする

(著者:kintone エバンジェリスト 村濱 一樹

kintoneエバンジェリストの村濱です。このDeveloper Networkではいくつか記事を書かせていただいておりますが、
Handsontableを使ってkintoneをExcelライクに入力しよう その1」という記事は思ったよりも反応をいただき、やはりkintoneをExcelのように入力したいというニーズはあるのだとわかりました。
そこで、今回は上記のカスタマイズをプラグイン化した「kintone スプレッドシート」をリリースしました。これで直接JavaScriptを開発せずとも、プラグインをインストールして設定するだけでkintone上でExcelライクな入力が可能になります

kintone スプレッドシートのダウンロード

github上に公開しています。下記から「plugin.zip」をダウンロードしてください。

https://github.com/mura-/kintone-spreadsheet/releases

※2016/4/1時点で最新はv0.9.0です。

kintone スプレッドシートのインストール

kintoneのシステム画面から、プラグイン設定画面を開き、「読み込む」をクリックしてプラグインを読み込みます。
(kintoneのプラグイン機能の詳細についてはこちらをご覧ください。)

kintone スプレッドシートの設定

プラグインをインストールしたら、任意のアプリで利用することができます。
今回は「Handsontableを使ってkintoneをExcelライクに入力しよう その1」と同様のサンプルアプリで試してみます。

1. カスタマイズビューの設定

スプレッドシート表示のための要素をHTMLで記述します。

<div id="sheet"></div>

カスタマイズビューについての詳細は下記を参照ください。
Tips 第7回 カスタマイズビューを利用してみよう

2. アプリからプラグインの設定をする

アプリの設定画面から、プラグインの設定を行います。
アプリ設定画面を開いて、「詳細設定」>「プラグイン」からプラグイン設定画面を開きます。

プラグイン設定画面にて「プラグインの追加」を押して、「kintone スプレッドシート」を追加してください。

 追加したあとは、下記の歯車マークからプラグインの設定が行えます。

プラグイン設定画面で、カスタマイズビューで設定した要素IDと、スプレッドシートに表示したいフィールドを選択して、保存してください。

注: 「2.1で設定した要素IDを入力してください。」に入力例が表示されていますが、そのままでは動作しないため、必ず入力してください。

これで設定は完了です。

kintone スプレッドシートの使い方

設定したスプレッドシート用のビューを開くと、スプレッドシートが表示されるので、追加、編集、削除ができます。

注意点

まだ、プルダウンやラジオボタンには対応していないので(フリーテキスト入力)、使いやすくなるよう開発は続けていきます。
今回はベータ版の提供となります。他にも足りない機能などはあるかもしれませんが、了承のうえご利用ください。

最後に

いかがでしたでしょうか。よく、kintoneを利用している現場でも、Excelのように一括入力や削除をしたいという声を聞きます。
このプラグインがあればそれが簡単に実現できますので、ぜひお試しください。
また、不具合や改善要望などはGithubのIssueかコメントからご連絡ください。
ソースはGithubに公開しているので、forkして拡張するのも自由ですし、Pull Requestをいただけると嬉しいです。

コメント

Avatar
いしい

プラグインありがとうございます。「ユーザ選択」のフォームへの対応を是非、よろしくお願い致します!

Avatar
村濱一樹

アプリコードの変更と、作成時間などのメタフィールドコードの変更に対応したものをリリースしました。

https://github.com/mura-/kintone-spreadsheet/releases

Avatar
Ryo Saido

プラグインありがとうございます。
追加することが出来ずに困っています。。。

Ryo Saidoにより編集されました
Avatar
村濱一樹

レコードの表示はできていて、追加・更新ができていないということでしょうか?
最新版のリリースをご利用されているかご確認いただいた上で、エラーログがなにか出ていないか教えていただければ対応できるかもしれません。

こちらを確認してエラーログを教えてください。
https://cybozudev.zendesk.com/hc/ja/articles/207613916-%E5%8B%95%E3%81%8B%E3%81%AA%E3%81%84-%E3%81%9D%E3%82%93%E3%81%AA%E6%99%82%E3%81%AF%E3%83%87%E3%83%90%E3%83%83%E3%82%B0%E3%82%92%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86-%E5%85%A5%E9%96%80%E7%B7%A8

Avatar
Ryo Saido

そうです。試した結果

index.js:1184 POST https://a0sz0.cybozu.com/k/v1/bulkRequest.json 400 (Bad Request)

と表示されました。

Avatar
村濱一樹

ありがとうございます。追加・更新が、何らかの原因により失敗していますね。。
書き込み権限がないフィールドとか、入力必須なのに空白や、あるいはユニークな値しか入力することができない、など、アプリの設定側で何らかの制限にひっかかっている気がしますが、いかがでしょうか。

Avatar
Ryo Saido

確認したところ、おっしゃる通りでした。
ドロップダウンが必須項目でした。
その場合は、追加は難しいのでしょうか?

Avatar
村濱一樹

必須を外していただくか、ドロップダウンのリストの内の一つの値を入力すれば大丈夫だと思います。
ただ、現在はドロップダウンやラジオボタンのフィールドもテキスト入力になってしまっているのが問題点です。

これもドロップダウン、ラジオボタンにも対応していく予定ではあります。時期は確約できませんが、早めに対応したいとは思っています。

Avatar
Ryo Saido

ありがとうございます。
何度も申し訳ございませんが、ドロップダウンの必須を外しても追加が出来ず、同じエラーが出ます。

動画のようにレコード番号も自動附番されません。
エラーの種類もよくよく調査してみると2種類あります。

https://a0sz0.cybozu.com/k/v1/bulkRequest.json 400 (Bad Request)
→必須・ユニークなものに値を入力した時です。

index.js:1184 POST https://a0sz0.cybozu.com/k/v1/bulkRequest.json 520 (520)
→フリーなものに値を入力したときです。

Avatar
村濱一樹

なるほど。エラーの詳細を確認したいので、お手数ですが、ネットワークタブからどういうリクエストエラーになっているか調べてもらうことはできますでしょうか?

https://www.joyzo.co.jp/blog/544

こちらを参考にすれば、見ることができると思いますのでよろしくお願いします。
何か不明なことがあればご連絡ください。

Avatar
Ryo Saido

{results: [{}, {message: "入力内容が正しくありません。", id: "1505999166-372464586",…}]}
results
:
[{}, {message: "入力内容が正しくありません。", id: "1505999166-372464586",…}]
0
:
{}
1
:
{message: "入力内容が正しくありません。", id: "1505999166-372464586",…}
code
:
"CB_VA01"
errors
:
{records[0][ユーザー選択].value[0].code: {messages: ["必須です。"]},…}
records[0][ユーザー選択].value[0].code
:
{messages: ["必須です。"]}
messages
:
["必須です。"]
0
:
"必須です。"
records[0][ユーザー選択_1].value[0].code
:
{messages: ["必須です。"]}
messages
:
["必須です。"]
0
:
"必須です。"
id
:
"1505999166-372464586"
message
:
"入力内容が正しくありません。"

という風なエラーが出ているので、入力内容が異なる事が原因だと思うのですが、レコード番号が自動的に入力されないのはなぜでしょうか?

Avatar
Ryo Saido

スイマセン。
ユーザー選択のフィールドがあったことによるエラーでした。

今後のアップデートに期待しています。

Avatar
村濱一樹

> ユーザー選択のフィールドがあったことによるエラーでした。

はい、ユーザー選択への対応も課題ですので、対応したいと思います。

Avatar
香原慎一郎

教えて下さいませ。
スプレッドシート表記まで出来たのですが、データの絞り込みが出来ません。
どこの設定を調整すれば良いでしょうか?

Avatar
村濱一樹

すいません、データの絞り込みにはまだ対応していません。

Avatar
香原慎一郎

お返事ありがとうございます。
データの絞り込みの件、承知しました。
私以外にもニーズは非常にあると思いますので、良かったら実装頂けれると非常に嬉しいです!
何卒宜しくお願い致します。
その際はまた掲示板にご記載頂けますと幸いです。m(_ _)m

Avatar
村濱一樹

ありがとうございます!引き続き開発を進めますので、よろしくお願いします。

Avatar
ナカゴウユイエ

教えてください。

こちらのプラグインでは、列のフィールドの幅をユーザーが動かすことはできないのでしょうか?

複数行テキストを含めた時に、横長になってしまうのを防ぎたいのです。

よろしくお願いします。

Avatar
村濱一樹

すいません、幅を動かすことはサポートされていませんね。。

対策としてはCSSでmax-widthを指定してあげるなどでしょうか。

 

Avatar
今坂真理子

データの並び替えも非対応かと思うのですが、ソースを追加して表示を変えることは可能でしょうか。

例)納品日順に並べる

非常に便利なプラグインなのですが、そこだけが業務に活かすためにネックとなっています。

Avatar
村濱一樹

はい、今は非対応ですね。ソースを編集して対応させる事自体は可能です。

(すいません、ちょっと手を入れる時間があまりなく。。)

 

Avatar
今坂真理子

ご返信ありがとうございます。

Avatar
Shawn

I installed the plug in and setup the app. For some reason the Filter is not working. If I select the view filter to show only today's record, the view still shows me all the records for the whole year. Any clue whats going on?

Avatar
村濱一樹

This plug-in is not implemented with a filter feature,
but you can try to customize that by yourself. 

https://github.com/mura-/kintone-spreadsheet/releases

(If you don't mind, please tell me the resolution for that through pull requests or issues)

I'm sorry that I have not enough time for fixing these issue...

 

村濱一樹により編集されました
ログインしてコメントを残してください。
Powered by Zendesk