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

M橋D輔

2024年6月5日 12:25

こんにちは！　キン担ラボの本橋です。

先日、kintone用のChrome拡張のソースコードをMITライセンスで公開しました。今回はこちらに手を加える形で、自分だけのChrome拡張を作る手順を書いてみたいと思います。

ティンカリング（いじくり回す）って？

既存のプログラムに手を加えて自分好みの機能を追加するスタイルのプログラミングを『ティンカリング』と呼びます。

例えばスーパーマリオブラザーズのプログラムに手を加えてジャンプ力を2倍にしてみたり、穴に落ちたら上から降ってくるようにしてみたり、そういったプログラムの改造遊びがティンカリングです。

これはプログラミング入門にうってつけの遊び方で、僕の世代の多くがそうであるように、その昔マイコンBASICマガジンに掲載されていたBASICのソースコードをいじくり回して遊んでいたことを思い出します。実際にビジュアルプログラミングとして最もユーザー数の多いScratchでは、公開されているプログラムをティンカリングして遊ぶことが推奨されています。

kintoneはそういったティンカリングがやりやすいプラットフォームです。すでに一揃いの機能が提供されていて、APIもよく整備されています。公式のライブラリもあります。大人向けのScratchと言いたいくらい環境が整っています。

そんなkintoneに向けたJSカスタマイズを作ってみるのも楽しいものです。この記事では、Chrome拡張という適用範囲の広いkintoneカスタマイズという手段もあるよ、という提案をしたいと思います。

ぜひティンカリングをきっかけにkintoneカスタマイズを遊んでみてください！

準備: githubからダウンロードして自分のブラウザで動かしてみる

まずはgithubからzipでソースコードをダウンロードして…

任意のフォルダに展開します。

Chromeの右上に並んでいるアイコンから拡張機能の管理画面を開いて、

拡張機能アイコン

「パッケージ化されていない拡張機能を読み込む」を選びます。

フォルダ選択ダイアログが出るので、さきほどzipを展開したフォルダを選択します。

これで拡張機能がChromeに読み込まれました！

他の拡張機能と同じように、ブラウザ右上の拡張機能トレイに黄色い象のアイコンが表示されているかと思います。アイコンをクリックするとこんな小さなダイアログが表示されます。

このダイアログの中身は popup.html に書き込まれています。popup.htmlに手を加えてみます。

    <div class="header">
        <img src="images/icon128.png" alt="Logo" class="logo">
        <h1>ぷら☆まい kintonePluginMigrator</h1>
        <h3>Download and upload plugin configuration</h3>
    </div>

「ぷらまい」⇨「ぷら☆まい」にしてみました。

書き換えてからファイルを保存したら、もう一度Chromeブラウザでダイアログを開いてみます。

書き換わりましたね。こんな具合にカスタマイズを加えていくことで、自分だけのChrome拡張を作っていくことができます。（今回は割愛しますが、ストアに公開する場合はまた別の手順が必要です。）

さあ機能追加だ！　ティンカリングを開始！

続いて、ちょっとした機能を増やしてみたいと思います。

kintoneの一覧画面でセルをクリックすると、セルの中身をすべてクリップボードにコピーする、という機能です。

[embedding_script.js] に関数を追加する

embedding_script.js に、以下の関数を追加して保存してみてください。他にもfunctionという文字から始まる関数がいくつも並んでいるかと思います。それら他の関数と同じように書き加えます。

    // すべての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);
                    });
            });
        });
    }

追加したdealClicknCopyFunction() 関数を実行するため、function insertScriptButtons() の中に、呼び出しを追加してあげます。

    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.jsonに実行条件を追加

さらに一覧画面でこのスクリプトが実行されるように設定を書き加えましょう。Chrome拡張の初期動作を定義するには、manifest.jsonに手を加えます。

manifest.jsonの"content_scripts"の設定を以下のように書き換えます。増えているのは、"https://*.cybozu.com/k/*" という行です。

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

この行の追加によって『kintoneの通常の画面でもプログラムを動作させるよ』と宣言したことになります。

これで実行の準備完了です。

ブラウザをリロードして実行！

うまくいけば、一覧画面をリロードすると新しいコードが有効になり、セルをクリックすることで背景色が1秒ほど緑色に変色します。

クリップボードの中身を確認するために、適当なエディタを開いてペースとしてみましょう。セルの中身がクリップボードに積まれていることが確認できれば大成功です！

ひとまず動くものは作れましたね。

このままでも動くことは動きます。ただ、少し触ってみると実用するにはいくつか課題が残っている事がわかります。

それらの課題も自分自身が使う目的であれば見逃してしまって構いませんが、こういった「実用的な問題」を一つずつ丁寧に解消してブラッシュアップしていく過程もプログラミングの楽しみの一つです。

問題を解決していこう

ざっとリストアップしてみると以下のような粗さが目につきます。

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

などなど、使い勝手まで考えるといろいろなオプションが欲しくなってきますね。

AIにも手伝ってもらいつつ、これらの問題を解決していってみてください。