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>

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

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

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

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

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

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

これで設定は完了です。

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

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

注意点

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

制限事項

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

最後に

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