kintoneはクリックの回数が多すぎる

kintoneでアプリを作っていると、こんな移動を一日に何十回も繰り返します。

アプリ一覧 → 目的のアプリを探す → 開く → 歯車 → フォーム設定 → 目的のフィールド → 設定を開く → フィールドコードをコピー → 元の画面に戻る

一回あたりは10秒程度ですが、開発中は「フィールドコードを確認して、コードに書いて、また確認して」の繰り返しです。時間の合計より、毎回思考が途切れることのほうが辛い。VSCodeやSlackのコマンドパレットに慣れていると、この操作をマウスでやっていること自体が気になってきます。

そこで、kintone用のコマンドパレットをChrome拡張として作りました。

動作

Ctrl+/ でパレットを開き、アプリ移動、フォーム設定への直行、フィールドコードのコピーまでをマウスなしで行っています。

パレットに入れたコマンド

移動系は、アプリ検索・アプリトップ・ポータル・ビュー切替・グラフ表示、それとアプリ設定の各画面（フォーム / 一覧 / プロセス管理 / 通知 / アクセス権 / APIトークン / カスタマイズ / プラグイン / デプロイ）への直行。

コピー系は、フィールドコード・フォーム定義・アプリID・クエリ・レコードリンク。

レコード画面では複製・印刷プレビューなども呼べます。? キーでチートシートが出るので、ショートカットを覚える必要はありません。

実装で決めたこと

1. 権限は kintone 系ドメインに絞る

manifest v3 で host_permissions を空にし、kintone系ドメインは optional_host_permissions に置いています。

"host_permissions": [],
"optional_host_permissions": [
  "https://*.kintone.com/*",
  "https://*.cybozu.com/*",
  "https://*.kintone-dev.com/*"
]

企業で使うツールは、インストール時の権限警告が強いほど導入のハードルが上がります。この拡張は全サイトへのアクセスは要求せず、kintone系のドメインに絞っています。だから「すべてのサイトのデータ」を読み取るという、いちばん警戒される警告は出ません。

2. kintoneのDOMを書き換えない

kintoneカスタマイズでDOMを直接操作すると、サイボウズ側のUI更新のたびに壊れるリスクを抱えます。この拡張はkintoneのDOMに手を入れず、UIは独立したオーバーレイとして重ね、必要な情報はREST APIから取得しています。標準機能の挙動には影響しません。

そのぶん「画面上の要素を掴んで操作する」実装は最初から選択肢から外れるので、設定画面への移動はURL規則、フィールド情報はフォームのフィールド設定を取得するAPI（GET /k/v1/app/form/fields）から、という作りになっています。

3. API消費を設計する

kintoneのREST APIには利用回数の上限があるので、拡張機能が裏で叩きまくる設計にはできません。レコードのピン留めと閲覧履歴は、保存も呼び出しもAPIを使わずローカル保存で完結させ、フィールド情報などはキャッシュして明示的に更新する方式にしています。あわせて、拡張自身がAPIをどれだけ使ったかを確認できるモニターも入れました。

4. プラグインではなく拡張機能にした

同じことはkintoneプラグインでも作れますが、プラグインは管理者がアプリごとに設定する必要があり、自分が管理者でないアプリでは使えません。「自分の手元の操作を速くする」という目的にはブラウザ側に置くほうが素直で、拡張機能なら入れるだけで全アプリ・全環境で動きます。

公開しています

Chromeウェブストアで公開しています。この記事に書いた機能はすべて無料です。

「この移動もパレットに入れてほしい」というものがあれば、コメントで教えてください。