カテゴリー内の他の記事

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 スプレッドシートの使い方

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

注意点

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

※本プラグインは、Internet Explorerではご利用いただけません。

最後に

いかがでしたでしょうか。よく、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 様

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

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

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