(著者:kintone エバンジェリスト 村濱 一樹)
kintoneエバンジェリストの村濱です。このDeveloper Networkではいくつか記事を書かせていただいておりますが、
「Handsontableを使ってkintoneをExcelライクに入力しよう その1」という記事は思ったよりも反応をいただき、やはりkintoneをExcelのように入力したいというニーズはあるのだとわかりました。
そこで、今回は上記のカスタマイズをプラグイン化した「kintone スプレッドシート」をリリースしました。これで直接JavaScriptを開発せずとも、プラグインをインストールして設定するだけでkintone上でExcelライクな入力が可能になります
kintone スプレッドシートのダウンロード
このカスタマイズでは、MIT ライセンスである v6.2.2 を利用しています(ライセンス表記)。
v7.0.0 以降を利用する際は Handsontable の HP で有償ライセンスを購入し、ライセンス条件に従ってご利用ください。
詳細は、Cybozu CDN ライセンス対応ガイド をご参照ください。
github上に公開しています。下記から「plugin.zip」をダウンロードしてください。
プラグイン開発のためのサンプルであり、サポート対象外であることをご理解の上、ダウンロードしてください。
https://github.com/mura-/kintone-spreadsheet/releases
kintone スプレッドシートのインストール
kintoneのシステム画面から、プラグイン設定画面を開き、「読み込む」をクリックしてプラグインを読み込みます。
(kintoneのプラグイン機能の詳細についてはこちらをご覧ください。)
kintone スプレッドシートの設定
プラグインをインストールしたら、任意のアプリで利用することができます。
今回は「Handsontableを使ってkintoneをExcelライクに入力しよう その1」と同様のサンプルアプリで試してみます。
1. カスタマイズビューの設定
スプレッドシート表示のための要素をHTMLで記述します。
カスタマイズビューの作成または編集には、kintoneシステム管理権限が必要です。
<div id="sheet"></div>
カスタマイズビューについての詳細は下記を参照ください。
Tips 第7回 カスタマイズビューを利用してみよう
2. アプリからプラグインの設定をする
アプリの設定画面から、プラグインの設定を行います。
アプリ設定画面を開いて、「詳細設定」>「プラグイン」からプラグイン設定画面を開きます。
プラグイン設定画面にて「プラグインの追加」を押して、「kintone スプレッドシート」を追加してください。
追加したあとは、下記の歯車マークからプラグインの設定が行えます。
プラグイン設定画面で、カスタマイズビューで設定した要素IDと、スプレッドシートに表示したいフィールドを選択して、保存してください。
注: 「2.1で設定した要素IDを入力してください。」に入力例が表示されていますが、そのままでは動作しないため、必ず入力してください。
これで設定は完了です。
kintone スプレッドシートの使い方
設定したスプレッドシート用のビューを開くと、スプレッドシートが表示されるので、追加、編集、削除ができます。
注意点
まだ、プルダウンやラジオボタンには対応していないので(フリーテキスト入力)、使いやすくなるよう開発は続けていきます。
今回はベータ版の提供となります。他にも足りない機能などはあるかもしれませんが、了承のうえご利用ください。
※本プラグインは、Internet Explorerではご利用いただけません。
最後に
いかがでしたでしょうか。よく、kintoneを利用している現場でも、Excelのように一括入力や削除をしたいという声を聞きます。
このプラグインがあればそれが簡単に実現できますので、ぜひお試しください。
また、不具合や改善要望などはGithubのIssueかコメントからご連絡ください。
ソースはGithubに公開しているので、forkして拡張するのも自由ですし、Pull Requestをいただけると嬉しいです。
Naeko様
こちらは記事のフィードバック欄になるため、広く見られているコミュニティの方もご活用いただければ幸いです。
お世話になります。
Excelデータから1行分複数セルをコピーしてkintone上のスプレッド氏とにペーストする使い方をしたいと思っています。
コピペはされるですが2,3秒程経つと画面がリフレッシュされるのか、
ペーストしたデータが消えてしまいました。
どんなパターンだと成功するか、失敗するか、色々検証したところ、
数値項目にカンマ区切り(例「10,000」)で入力すると消えてしまうことがわかりました。
試しに複数の数値項目をExcel上でカンマ区切りなしに設定し、複数セルをコピーし、
(例「10,000」「20,000」「30,000」 ⇒ 「10000」「20000」「30000」としました)
kintone上のスプレッドシートに張り付けたところ、消えることなく反映されました。
これはやはりkintoneの仕様上、仕方ないことでしょうか?
Excelデータでは金額を扱うことが多いため、大抵カンマ区切りで入力されています。
そのままコピペができたら非常に便利なのですが。。
ご教授の程、どうぞよろしくお願い致します。
https://developer.cybozu.io/hc/ja/community/topics
プラグインの作者ですが、下記には対応してみました。必要ならお試しください。
https://github.com/mura-/kintone-spreadsheet/releases/tag/v1.0.0
> これはやはりkintoneの仕様上、仕方ないことでしょうか?
> Excelデータでは金額を扱うことが多いため、大抵カンマ区切りで入力されています。
> そのままコピペができたら非常に便利なのですが。。
こちらに記載するのが適切かわからないのですが、スプレッドシートを作成できる一覧は1つだけになりますでしょうか。
1つのアプリで「貸与」「返却」等複数のチェックシート用にスプレッドシートのような一覧を複数作成したいと思っています。
https://developer.cybozu.io/hc/ja/community/topics
良いプラグインですね。活用させていただきます。
お世話になります。
スプレッドシートプラグインで更新時に、変更(表示すら)していない小数点を含む数値項目がなぜか変更されてしまいます。
例) 4,256.5804 が 42,565,804 と 小数点がなくなります
対応方法があればご教示願います。
カナヤマ 様
お世話になっております。cybozu developer network 運営でございます。
一部バグがあると思われますので、作者にフィードバックいたします。
※こちらはプラグイン開発のためのサンプルであり、サポート対象外であるため修正日時などはお約束しかねることご了承ください。
よろしくお願い致します。
cybozu developer network 運営 様
回答ありがとうございます。宜しくお願いいたします。
カナヤマさま
作者ですが、小数点が消えてしまうバグを修正しましたので必要であればご利用ください。
https://github.com/mura-/kintone-spreadsheet/releases/tag/v1.0.3
村濱様、cybozu developer network 運営 様
対応ありがとうございます。取り込みました。
kintone初心者です。このサイトから便利そうなので試そうとしましたが
更新ができずエラーが表示されます。何が原因でしょうか?
ご指導よろしくお願いします。
ちゃいな嬢 様
お世話になっております。cybozu developer network 運営でございます。
ご利用頂いているブラウザとバージョンをご確認ください。
Edge, Chrome, Firefoxの最新バージョンであれば動作すると思われます。
(IEは非対応)
ブラウザが上記で最新であるにも関わらず動作しない場合は、またお知らせください。
よろしくお願い致します。
ご回答ありがとうございます。ブラウザは以下の通りです。
職場端末の為、自分でアップデートはできません。
このバージョンは動作しないのですかね?
Microsoft Edge 44.18362.449.0
ちゃいな嬢 様
お世話になっております。cybozu developer network 運営でございます。
バージョンの情報ありがとうございます。
Edgeのバージョンが古いように見受けられます。
このエラーを回避するには、すくなくとも79以降である必要があります。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries
以上、よろしくおねがいします。
ayoko 様
お世話になっております。cybozu developer network 運営でございます。
このプラグインでは、現状、数値フィールドでは、カンマ区切りで表示することは対応しておりません。
※提示頂いたURLのものは「カンマを含んだ数値をペーストしても、カンマを無視して数値として認識するようにアップデートした」というものになり、「カンマ区切りで表示させる」という対応はされておりません。
cybozu Development team 様
ご返答ありがとうございます。
認識違い大変失礼いたしました。質問削除させていただきます。
「スプレッドシートに表示したいフィールド」が表示されずテンプレのようなフィールドだけセットされています。
またViewに「スプレッドシート」が表示されません。
ご教示いただけると幸いです。
Takeshi Niiyama 様
お世話になっております。cybozu developer network 運営でございます。
当方でも確認してみましたところ、表示され特に問題なく見受けられました。
また,
> Viewに「スプレッドシート」が表示されません。
とのことですが、ビューはカスタマイズビューをご自身で設定だけはして頂く必要があります。
もう一度、記事通りに設定ができているかご確認をおねがいいたします。
それでも想定した動作にならない場合は、コメント投稿欄右の「記事フィードバックのためのガイド」をご確認いただき、より詳細の情報をお伝えください。
1点ご質問です。
プラグインを設定し、「テーブル」をリスト上に表示するように設定しましたが、
[object Object]と表示されて、入力データが表示できません。
こちらの機能はテーブルには対応していないのでしょうか?もし表示させる方法があれば教えていただきたいです。
佐藤奈々 様
お世話になっております。cybozu developer network 運営でございます。
こちらのプラグインはテーブルは非対応となっております。
よろしくお願い致します。
スプレッドシートプラグインは便利で活用させていただいています
1点質問ですが、一覧表示の絞り込み検索条件ごとに表示フィールドの内容を変えて表示させることは可能でしょうか?
Miyawaki 様
お世話になっております。cybozu developer network 運営でございます。
技術的には可能ですが、現在のプラグインは対応しておりません。
※もしGithubに上がっているコードをご自身で修正される場合は、
どの一覧のときどの項目を表示するのか、という設定を追加する必要があるかと思われます。
また、恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
試してみてわからないなど、記事から派生した技術的なご質問はcybozu developer コミュニティをご活用ください。
よろしくお願い致します。