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

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

目次

はじめに

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

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

information

カスタマイズで利用しているHandsontableは、v7.0.0以降MITライセンスではなくなりました。
このカスタマイズでは、 MIT (External link) ライセンスのv6.2.2を利用しています( ライセンス表記 (External link) )。
v7.0.0以降を利用する際は HandsontableのHP (External link) で有償ライセンスを購入し、ライセンス条件にしたがって利用してください。
詳細は、 Cybozu CDNライセンス対応ガイド を参照してください。

github上に公開しています。
下記から「plugin.zip」をダウンロードしてください。

このプラグインはプラグイン開発のためのサンプルで、サポート対象外です。
ご理解の上、ダウンロードしてください。
https://github.com/kintone-samples/kintone-spreadsheet/releases (External link)

kintoneスプレッドシートのインストール

kintoneのシステム画面から、プラグイン設定画面を開き、「読み込む」をクリックしてプラグインを読み込みます。
kintoneプラグインの追加方法は kintoneヘルプ (External link) を確認してください。

kintoneスプレッドシートの設定

プラグインをインストールしたら、任意のアプリで利用できます。
今回は「 Handsontableを使ってkintoneをExcelライクに入力しよう その1 」と同様のサンプルアプリで試してみます。

カスタマイズビューの設定

スプレッドシート表示のための要素をHTMLで記述します。
カスタマイズビューの作成または編集には、kintoneシステム管理権限が必要です。

1
<div id="sheet"></div>

カスタマイズビューについての詳細は次の記事を参照ください。
カスタマイズビューを作成してみよう

アプリからプラグインの設定をする

アプリの設定画面から、プラグインを設定します。
アプリ設定画面を開いて、「設定」>「プラグイン」からプラグイン設定画面を開きます。

プラグイン設定画面にて「プラグインの追加」を押して、「kintoneスプレッドシート」を追加してください。

追加したあとは、次の歯車マークからプラグインの設定が行えます。

プラグイン設定画面を開き、カスタマイズビューで設定した要素IDと、スプレッドシートに表示したいフィールドを選択して、保存してください。
「2.1で設定した要素IDを入力してください」には入力例が表示されています。
設定した要素IDを必ず入力してください。

これで設定は完了です。

kintoneスプレッドシートの使い方

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

注意点

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

制限事項

こちらのプラグインは、ゲストスペースでは使用できません。

最後に

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