異種拡張技入門！

kintoneカスタマイズの

種類をおさらい

＋ 5分でchrome拡張を作る

2024年6月8日
本橋大輔 / 株式会社モノサス　キン担ラボ

株式会社モノサス

キン担ラボ

『kintoneの担当者を楽にする』

そんな技術開発ラボをしてます。

異種拡張技って？

• 様々な手法でkintoneカスタマイズを開発すること
• JSカスタマイズ、プラグイン、外部連携などがあります
• Chrome拡張もそのひとつ

Chrome拡張を作ってみた

プラグイン設定の

エクスポート / インポート

chromeストアに公開中

面白い

作ってみてから考えた

プラグインやJS拡張が届かなかった領域をフォローできる

kintoneの機能拡張手段として選択肢に入れておきたい

届かなかった領域をフォロー

ってどういうこと？

ブラウザ拡張の特徴

1. kintone上の権限が不要で誰でも使える

2. 複数ドメインに共通したカスタマイズを提供できる

5分でChrome拡張を作ってみる

Githubに公開したソースコードからスタート

こんな感じにいじくり回す（ティンカリング）

1. embedding_script.js に関数を実装
2. insertScriptButtons() の中に呼び出しを追記
3. manifest.json に実行条件を追記
   • "https://*.cybozu.com/k/*"
4. ブラウザをリロードして実行！

人工知能の力も借ります

// すべてのtdセルを取得して、クリックするとテキストをコピーして背景色を緑色にする関数

うまく動けば…！

残る課題

1. セルコピーは一覧画面だけで動いて欲しい
2. プラグイン設定のインポート・エクスポートはプラグイン設定画面だけで動いて欲しい
3. セルコピー機能の割当はイベント app.record.index.show 『でも』実行して欲しい
4. 邪魔なこともあるのでオンオフのスイッチもしたい

詳細はnoteにまとめました

[kintone] Chrome拡張開発を通してプログラミング入門してみよう

https://note.com/motohasystem/n/nfe3a52868a66

ご清聴ありがとうございました

[告知] kintone Café 徳島 Vol.7

9/14(土) または 9/28(土)

付録

embedding_script.js

    // すべてのtdセルにクリックするとコピーする機能を追加する
    function dealClicknCopyFunction() {
        // すべてのtdセルを取得
        const tdList = document.querySelectorAll("td");

        // すべてのtdセルにクリックするとコピーする機能を追加する
        tdList.forEach((td) => {
            td.addEventListener("click", () => {
                // クリップボードにコピーする
                const text = td.textContent;
                navigator.clipboard
                    .writeText(text)
                    .then(() => {
                        // 背景セルを一瞬緑色にする
                        td.style.backgroundColor = "lightgreen";

                        setTimeout(() => {
                            td.style.backgroundColor = "";
                        }, 1000);
                        console.log(`Copied! [${text}]`);
                    })
                    .catch((err) => {
                        console.error("Failed to copy: ", err);
                    });
            });
        });
    }

embedding_script.js

    function insertScriptButtons() {
        // エクスポートボタンの設置
        const export_button = make_export_button("⇩ download");
        document.body.appendChild(export_button);

        // インポートボタンの設置
        const import_button = make_import_button("⇧ upload");
        document.body.appendChild(import_button);

        dealClicknCopyFunction();
    }

manifest.js

    "content_scripts": [
        {
            "matches": [
                "https://*.cybozu.com/k/admin/app/*/plugin/config?pluginId=*"
                , "https://*.cybozu.com/k/*"
            ],
            "js": [
                "content_script.js"
            ]
        }
    ],