カテゴリー内の他の記事

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
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
サインインしてコメントを残してください。