カテゴリー内の他の記事

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

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

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

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

カスタマイズで利用している Handsontable は、v7.0.0 以降 MIT ライセンスではなくなりました。
このカスタマイズでは、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 スプレッドシートの使い方

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

注意点

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

最後に

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

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

Avatar
cybozu Development team

Naeko様

こちらは記事のフィードバック欄になるため、広く見られているコミュニティの方もご活用いただければ幸いです。

Avatar
ogawa

お世話になります。

Excelデータから1行分複数セルをコピーしてkintone上のスプレッド氏とにペーストする使い方をしたいと思っています。

コピペはされるですが2,3秒程経つと画面がリフレッシュされるのか、

ペーストしたデータが消えてしまいました。

 

どんなパターンだと成功するか、失敗するか、色々検証したところ、

数値項目にカンマ区切り(例「10,000」)で入力すると消えてしまうことがわかりました。

 

試しに複数の数値項目をExcel上でカンマ区切りなしに設定し、複数セルをコピーし、

(例「10,000」「20,000」「30,000」 ⇒ 「10000」「20000」「30000」としました)

kintone上のスプレッドシートに張り付けたところ、消えることなく反映されました。

 

 

これはやはりkintoneの仕様上、仕方ないことでしょうか?

Excelデータでは金額を扱うことが多いため、大抵カンマ区切りで入力されています。

そのままコピペができたら非常に便利なのですが。。

 

ご教授の程、どうぞよろしくお願い致します。

Avatar
cybozu Development team
ogawa様
 
お世話になっております。cybozu developer network 運営事務局です。
現状では、動作確認していただいたご認識のとおり、数値フィールドに対しては数値しか入力できず、
カンマなどの数値以外の文字列を入力すると保存されないということになっています。
 
Excelからコピーする際、カンマは削除していただくか、
公開されているコードを独自で改変することは可能ではあります。
issues に要望を書くと作者が対応するかもしれません。
 
また、こちらのコメント欄は、記事通りに試したが動かない等の記事へのフィードバック用となります。
上記については試してみてわからないなどあれば、ぜひコミュニティをご活用ください。
https://developer.cybozu.io/hc/ja/community/topics
Avatar
村濱一樹

プラグインの作者ですが、下記には対応してみました。必要ならお試しください。

https://github.com/mura-/kintone-spreadsheet/releases/tag/v1.0.0

> これはやはりkintoneの仕様上、仕方ないことでしょうか?

> Excelデータでは金額を扱うことが多いため、大抵カンマ区切りで入力されています。

> そのままコピペができたら非常に便利なのですが。。

Avatar
こと

こちらに記載するのが適切かわからないのですが、スプレッドシートを作成できる一覧は1つだけになりますでしょうか。

1つのアプリで「貸与」「返却」等複数のチェックシート用にスプレッドシートのような一覧を複数作成したいと思っています。

Avatar
cybozu Development team
こと様
 
お世話になっております。cybozu developer network 運営事務局です。
現状では、スプレッドシートを作成できる一覧は1つとなっております。
 
※公開されているコードを独自で改変することは可能ではあります。
issues に要望を書くと作者が対応するかもしれません。
 
また、こちらのコメント欄は、記事通りに試したが動かない等の記事へのフィードバック用となります。
技術的な質問等は、ぜひコミュニティをご活用ください。
https://developer.cybozu.io/hc/ja/community/topics
Avatar
CoDMON 堀

良いプラグインですね。活用させていただきます。

Avatar
カナヤマ

お世話になります。

スプレッドシートプラグインで更新時に、変更(表示すら)していない小数点を含む数値項目がなぜか変更されてしまいます。

例) 4,256.5804  が 42,565,804 と 小数点がなくなります

対応方法があればご教示願います。

Avatar
cybozu Development team

カナヤマ 様

お世話になっております。cybozu developer network 運営でございます。

一部バグがあると思われますので、作者にフィードバックいたします。

※こちらはプラグイン開発のためのサンプルであり、サポート対象外であるため修正日時などはお約束しかねることご了承ください。

よろしくお願い致します。

Avatar
カナヤマ

cybozu developer network 運営 様

回答ありがとうございます。宜しくお願いいたします。

Avatar
村濱一樹

カナヤマさま

作者ですが、小数点が消えてしまうバグを修正しましたので必要であればご利用ください。

https://github.com/mura-/kintone-spreadsheet/releases/tag/v1.0.3

Avatar
カナヤマ

村濱様、cybozu developer network 運営 様

対応ありがとうございます。取り込みました。

 

Avatar
ちゃいな嬢

kintone初心者です。このサイトから便利そうなので試そうとしましたが

更新ができずエラーが表示されます。何が原因でしょうか?

ご指導よろしくお願いします。

 

Avatar
cybozu Development team

ちゃいな嬢 

お世話になっております。cybozu developer network 運営でございます。

ご利用頂いているブラウザとバージョンをご確認ください。
Edge, Chrome, Firefoxの最新バージョンであれば動作すると思われます。
(IEは非対応)
ブラウザが上記で最新であるにも関わらず動作しない場合は、またお知らせください。

よろしくお願い致します。

Avatar
ちゃいな嬢

ご回答ありがとうございます。ブラウザは以下の通りです。

職場端末の為、自分でアップデートはできません。

このバージョンは動作しないのですかね?

Microsoft Edge 44.18362.449.0

Avatar
cybozu Development team

ちゃいな嬢 様

お世話になっております。cybozu developer network 運営でございます。

バージョンの情報ありがとうございます。
Edgeのバージョンが古いように見受けられます。

このエラーを回避するには、すくなくとも79以降である必要があります。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries

以上、よろしくおねがいします。

Avatar
cybozu Development team

ayoko 様

お世話になっております。cybozu developer network 運営でございます。

このプラグインでは、現状、数値フィールドでは、カンマ区切りで表示することは対応しておりません。

※提示頂いたURLのものは「カンマを含んだ数値をペーストしても、カンマを無視して数値として認識するようにアップデートした」というものになり、「カンマ区切りで表示させる」という対応はされておりません。

Avatar
ayoko

cybozu Development team 様

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

認識違い大変失礼いたしました。質問削除させていただきます。

Avatar
Takeshi Niiyama

「スプレッドシートに表示したいフィールド」が表示されずテンプレのようなフィールドだけセットされています。

またViewに「スプレッドシート」が表示されません。

ご教示いただけると幸いです。

Avatar
cybozu Development team

Takeshi Niiyama 様

お世話になっております。cybozu developer network 運営でございます。

当方でも確認してみましたところ、表示され特に問題なく見受けられました。


また, 
> Viewに「スプレッドシート」が表示されません。
とのことですが、ビューはカスタマイズビューをご自身で設定だけはして頂く必要があります。
もう一度、記事通りに設定ができているかご確認をおねがいいたします。

それでも想定した動作にならない場合は、コメント投稿欄右の「記事フィードバックのためのガイド」をご確認いただき、より詳細の情報をお伝えください。

Avatar
佐藤奈々

1点ご質問です。

プラグインを設定し、「テーブル」をリスト上に表示するように設定しましたが、

[object Object]と表示されて、入力データが表示できません。

こちらの機能はテーブルには対応していないのでしょうか?もし表示させる方法があれば教えていただきたいです。

Avatar
cybozu Development team

佐藤奈々 

お世話になっております。cybozu developer network 運営でございます。

こちらのプラグインはテーブルは非対応となっております。

よろしくお願い致します。

Avatar
Miyawaki

スプレッドシートプラグインは便利で活用させていただいています

1点質問ですが、一覧表示の絞り込み検索条件ごとに表示フィールドの内容を変えて表示させることは可能でしょうか?

Avatar
cybozu Development team

Miyawaki

お世話になっております。cybozu developer network 運営でございます。

技術的には可能ですが、現在のプラグインは対応しておりません。

※もしGithubに上がっているコードをご自身で修正される場合は、
どの一覧のときどの項目を表示するのか、という設定を追加する必要があるかと思われます。

また、恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
試してみてわからないなど、記事から派生した技術的なご質問はcybozu developer コミュニティをご活用ください。

よろしくお願い致します。

Avatar
中津尚子

いつもありがとうございます。

諸問題解決のために、御社へ相談していたところ、スプレッドシートプラグインをご紹介いただきまして、

早速設定してみました。

設定が終わって、入力してみようとすると添付のようなエラーが出ます。

ルックアップした結果を表示を表示しているのではないのでしょうか?

大元のルックアップフィールドは重複禁止になっているのですが、ルックアップフィールドをルックアップ元と指定しているのが問題なのでしょうか?

使用出来れば便利だと思ったので、解決策があればご教示ください。

よろしくお願い申し上げます。

Avatar
cybozu Development team

中津尚子

お世話になっております。cybozu developer network 運営でございます。

大元のルックアップフィールドは重複禁止になっているのですが、ルックアップフィールドをルックアップ元と指定しているのが問題なのでしょうか?

通常、ルックアップフィールドを列に表示するようにしても「コピー元のフィールド」が「値の重複を禁止する」となっていれば、想定通りプラグインから編集はできるようにはなっています。
ルックアップフィールドが一つだけでなく、複数設定されていていずれかが重複禁止になってないケースなどが考えられるのでもう一度フィールドの設定をご確認いただければと思います。

また、それでも解決しない場合は、プラグイン上に表示される列を最小限にしていただき、どのフィールドのどの設定でそのようになるか、などをより具体的に問題の再現を示していただけると何かこちらでもわかることがあるかもしれません。

よろしくお願い致します。

サインインしてコメントを残してください。