カテゴリー内の他の記事

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

※2020年7月時点の最新版は、v0.9.0(2020/7/8リリース)です。

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
村濱一樹

下記の画像の、2のところに設定したIDと、カスタマイズビューで設定した要素のIDが一致している必要があります。

https://developer.cybozu.io/hc/ja/article_attachments/203422576/capture6.png

 

カスタマイズビュー側を

<div id="my-customized-view"></div>

としたのであれば、上記の設定も my-customized-view としてあげてください。

Avatar
demachi

村濱さま

 

修正したところ、無事反映させることができました。

Excelのように…という要望があったため、本当に助かります。

早速のご回答、誠にありがとうございました。

Avatar
tsuda

プラグインありがとうございます。

実際に使ってみて、2点確認があります。

①表示させるフィールドの数を多くすると並びがバラバラになってしまいます。

 (10個以上くらいになると発生します)

②スプレッドシート形式で書き込みまではできるのですが

 書き込んだ後、しばらくすると、データがロードされ

 元のデータに戻ってしまいます。

 ※エラー内容を見てみますと、入力後、

  index.js:1038 POST 520 (520) となり、その後数秒すると、

  download.do:79 loadData となり元通りに戻ります。

お手数ですが、上記2点の改善方法を教えていただきますようお願いいたします。

Avatar
村濱一樹

ばらばらになるとはどうバラバラになりますか?列の並びが設定したものとはちがってしまうってことでしょうか。

 

必須項目なのに空で保存しようとした場合などにおきます。フィールドの設定を見直してみてください。

Avatar
tsuda

村濱様

ご連絡ありがとうございます。

 

バラバラになるとは、『スプレッドシートに表示するフィールド』を設定した際、

10列目までは問題ありませんが、11列目にフィールドを設定すると、

11列目のフィールドが3列目に表示されてしまいます。

続いて、12列目を設定すると、4列目や5列目に表示されてしまいます。

 

必須項目はどのフィールドにも設定しておりません。

※必須ではない箇所で、項目が空欄になっているフィールドは存在しています。

参考に、フィールドの項目は、レコード番号・数字・ルックアップ・ドロップダウン・文字列(複数行)

となっています。

Avatar
iwamoto

恐れ入ります。

現在、スプレッドシートのプラグインをゲストスペースにあるアプリに適用しましたが、下記の画像のように表示がされません。

同じドメイン内のスペースに入れていないアプリですと正常に表示されますので、ゲストスペースにアプリがあるのが問題かと思います。

アクセス権の都合上、どうしてもゲストスペースでの運用が必要です。

何か対策方法はないでしょうか?

Avatar
cybozu Development team

iwamoto 様

ご質問ありがとうございます。

こちらのTipsに提供しているプラグインはゲストスペースを対応していないからです。
ご期待に沿えず申し訳ございません。

ゲストスペースでお使いする場合、
utils.jsというファイルで、すべてのREST APIのURL(太字部分)を次のように変更する必要があります。

現状:
kintone.api('/k/v1/records', 'GET', body, function(resp) {
  // success
  console.log(resp);
}, function(error) {
     // error
     console.log(error);
});

 

修正後:
kintone.api(kintone.api.url('/k/v1/records', true), 'GET', body, function(resp) {
  // success
  console.log(resp);
}, function(error) {
     // error
     console.log(error);
});

詳細はレコードの取得APIをご参考ください。
https://developer.cybozu.io/hc/ja/articles/202331474

 

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

Avatar
iwamoto

cybozu Development team

即日ご回答いただき、誠にありがとうございます。

一度、自身で試してみたいと思います。

Avatar
渡中啓介

スプレッドシートのプラグインを利用させていただきました。

早速ですが、各セルでエクセルのように右クリックの使用をできるようにしたいのですが何か方法はありますか?

カット、コピー、貼り付け等の機能を使用したいです。

初歩的な質問で申し訳ありませんが、何卒ご教示お願いします。

Avatar
cybozu Development team

渡中啓介 様

ご質問ありがとうございます。

コンテキストメニューを増やすことができるようです。
プラグインのdesktop.jsというファイルの26行目に増やしたいメニューを追記すればいいです。
追加できるメニューは次の記事をご参考下さい。
https://qiita.com/opengl-8080/items/9d25e106ff48b66cb908#contextmenu%E3%82%B3%E3%83%B3%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC

ちなみに、contextMenu をtrueにしてデフォルトではいくつかのメニューが表示されます。
詳細はHandsontableライブライのサンプルをご確認いただければと思います。
https://handsontable.com/examples/?headers&context-menu

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

Avatar
田中大輔

お世話になってます。

ルックアップフィールド・ルックアップによって入力されるフィールドがアプリに定義されていると、

PUTの際、Excelカラムの有無関係なく、それらもリクエストに含まれてPUTするため、520エラーが出てしまうようですが、既知問題でしょうか。http://www.evernote.com/l/AAdPnHdPy3BEfaHkmpdJXu3I2akPiwww6KE/ 

田中大輔により編集されました
Avatar
村濱一樹

田中さん

これはバグですね、修正します。ご連絡ありがとうございます。

Avatar
田中大輔

村濱さん

よろしくお願いします。

助かってるプラグインです。ありがとうございます。

Avatar
Kimmy

Hello,

I hope you could help me.

I install and setup the necessary settings to set for having spreadsheet as view.

Unfortunately, the records were not showing when the view is in spreadsheet.

I already checked the field code setting, and everything is fine.

I tried to check in Developer's tool, 'kintone.app.record.get();' and the return is null.

I could not imagine, why there is no record got. Could you help me realize if I missed some settings?

Thank you very much.

 

Avatar
cybozu Development team

Hello Kim


Sorry, I could not reproduce it.
Please try it again according to the Article

'kintone.app.record.get();' can be used in record detail, edit, print  => :https://developer.cybozu.io/hc/ja/articles/201942014#step1

Since this article assumes a Japanese environment, it can correspond only in Japanese.

Avatar
Kimmy

Hello cybozu Development Team, 

Thanks for your quick response.

I'm sorry, I made a wrong understanding about this kintone.app.record.get();

It might be difficult to imagine what's the problem, I attached screenshot below.

The settings were set like below.

Could be the reason is that I am still currently using a trial account?

Avatar
村濱一樹

Hello Kim. 

Could you show me error details?

Please try below.
1. Open the Developer tools. If you use Chrome, push F12 button on the Spreadsheet view.
2. Select Console tab
3. Reload
4. Error details will be displayed.

And please paste or attach image of details.

Avatar
Kimmy

Hello Murahama san, 

Thank you for your support. I did as what you have mentioned.

And I believe there we no error that occurs. Attached below is the details.

Thank you for your help.

Avatar
村濱一樹

It seems to be not error...

Have you put a DIV tag in the customize view like below already? 
This plug-in requires a element as a container to display Spreadsheet view.


Please make sure. Thanks.

 

 

Avatar
Kimmy

I have set this settings as well like below.

I'll just re-create it again from the start. Thank you very much for your support.

Avatar
村濱一樹

Hmmm.

Could you try to re-input sheet to No.2 setting?

Avatar
Kimmy

Hello again,

Hmm. I tried it, but the same thing happens.

Then I tried to recreate it, and it WORKS now! 

I guess the problem was, previously I uploaded the plug-in first before I create customize view settings.

Now I change the view settings first, before uploading the plug-in in administrator side.

I'm sorry for the trouble it have caused you.

Thank you very much! ^___^ 

Avatar
村濱一樹

Finally!! Sounds good. :)

It's my pleasure. :D

Avatar
Jun Chigusa

お世話になります。初心者ですので的外れな質問でしたら失礼します。

プラグインを導入させて頂きましたが、先の質問にもある、

「スプレッドシート形式で書き込みまではできるのですが

 書き込んだ後、しばらくすると、データがロードされ

 元のデータに戻ってしまいます。」という状態がひとつのアプリで発生しています。

2つのアプリで使用していますが、問題の発生しているアプリは「ルックアップ、(またはルックアップコピー)フィールド」を要素に含んでいます。問題が無いもうひとつのアプリはルックアップフィールドを使用していません。

過去のやりとりにあった内容が当てはまるのか分かりませんが、こちらのバグが修正されれば使用できるのでは、と思うのですが

いかがでしょうか。他に同様の事象がおこる可能性はありますでしょうか。

また、バグ修正で対応可能な場合、修正予定はございますでしょうか。

よろしくお願いします。

 

 

 

Avatar
cybozu Development team

Jun Chigusa 様

お世話になっております。
cybozu developer network 事務局です。

サンプルプラグインは、その動作を保証するものではありません。
また、スプレッドシートプラグインは、サイボウズで管理していない第三者からの提供になっています。
そのため、現在サイボウズで修正はできかねますが、GitHubでIssueとして登録することで、作成者に直接バグ修正を依頼することが可能です。
こちらを参考にご自身でIssueを登録していただくようお願いします。

Avatar
kyoden

こちらのプラグインですが、

新条件書式プラグインや他のいくつかのプラグインと競合しているせいなのか、

新条件書式プラグインでの色の設定が反映されないことや

こちらのページ通りの設定を行っても、

エクセルのような表示がされないことがよく起こります。

 

これらを回避するためにはどのようにすればよろしいでしょうか?

Avatar
cybozu Development team

kyoden 様

お世話になっております。
cybozu developer network事務局です。

こちらのサンプルプラグインですが、複数カスタマイズ、プラグインによる動作は保証しておりません。
そのため、本プラグインは単体で動作することは確認しておりますが、その他のカスタマイズと併用した際の動作は確認しておりません。
よろしくお願いいたします。

回避にはプラグインのソースコードの編集が必要になるかと思います。
技術的な疑問はコミュニティをご活用ください。

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

Avatar
安田好孝

便利に使わせていただいております。

日時フィールドをこのプラグインで表示させると「2018-12-17T09:15:00Z」のように表示されます。UTCという表記でしょうか。

これを日本時間の「2018-12-17 18:15」のように表示させる方法はあるでしょうか?

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

Avatar
cybozu Development team

安田好孝 様

お世話になっております。
cybozu developer network事務局です。

スプレッドシートプラグインは、サイボウズで管理していない第三者からの提供になっています。
そのため、現在サイボウズで修正はできかねますが、GitHubでIssueとして登録することで、作成者に直接修正を依頼することが可能です。
ご自身でIssueを登録していただくようお願いいたします。

または、質問の内容を実現するためには、プラグインのソースコードの編集が必要になるかと思いますので、
機能拡張のカスタマイズ方法等については、コミュニティをご活用ください。

Avatar
安田好孝

cybozu developer network事務局 様

ありがとうございます。ソースコードの編集は大変そうですので

このアプリは 日付+時刻 に分けて運用しようと思います。

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