kintoneプラグイン開発入門（１）

先週、いろいろネタを考えていたのですが、今日はkintoneプラグイン開発に入門したいと思います。

kintoneプラグイン開発をためしてみる

cybozu developer networkのkintoneのカスタマイズTipsに「kintone と ChatGPT を使って FAQ チャットシステムを作ろう」という記事がありまして、「今週は、これを試してみたいな」と思ったんです。ところが、手順を読んでいくと、ChatoGPTのAPIキーを使うための準備で「cybozu develper network では、認証情報の秘匿にプラグインを利用する方法を推奨しています。」という記載がありました。私は、kintoneのプラグインを利用することはあっても開発したことがないので、「ここからだな」と思いました。というわけで、今週は、kintoneプラグイン開発のチュートリアルを試してみます。

kintone プラグイン開発入門【Part1：メリット編】

まずは、ここから。kintone プラグイン開発入門【Part1：メリット編】を、読んで、プラグイン開発のメリットに何が挙げられるかを知りました。

・メリット 1：JavaScript / CSS ファイルを一括適用できる
・メリット 2：設定画面での設計変更
・メリット 3：複数アプリに一括適用&バージョンアップも一括。
・メリット 4：重要な情報の隠匿

kintone プラグイン開発入門【Part1：メリット編】から抜粋

４番目のメリット「重要な情報を隠匿できる」というのは、外部 API の実行に必要な API キーなどの重要な情報をkintone サーバー上に保存できるというものです。この４番目のメリットを活かせるようになるために、プラグイン開発ができるようになることを目指します。２番めのメリットも、設定画面を用意しておけば、GUI で非エンジニアのユーザーでも仕様の変更などができる点が、「kintoneのノーコードツールとしての強みを活かすためにぜひ身につけたい」と感じたので、こちらもできるようになりたいと思います。やっていき💪

kintone プラグイン開発入門【Part2：情報の隠匿方法編】まずは、サーバ側の準備

さて、APIキーなどの重要な情報を安全に利用したいというのが、一番の目的なので、kintone プラグイン開発入門【Part2：情報の隠匿方法編】を学習します。記事では、AWS EC2が使用されています。いつもは、WSL2を使っているのですが、GitHub Codespacesにも慣れておきたいのでCodespacesでサーバーサイドのアプリを構築してみます。

空のリポジトリをCodespacesで開きました

手順に従って、Express のアプリ雛形を生成する「express-generator」をインストールします。

いきなりnpmが使えるの便利

次に、「kintone-app」という名前で Express アプリを生成します。

warningが表示されたけれど生成できました

warningが表示されているので、念のため確認します。このwarningは、アプリ生成時にテンプレートエンジンを指定しなかったため、自動的にjadeを使用されるということのようです。このまま継続できそうなので、次のステップに進みます。
Expressアプリのディレクトリに移動して、必要なパッケージをインストールします。

kintone-appに必要なパッケージをインストール

Expressを起動します。

Express起動

./routes/index.js を編集して、サーバ側の準備が完了しました。

const express = require('express');
const router = express.Router();

// kintoneからのリクエストの受け取り
router.post('/api/data', (req, res, next) => {
  // ログの表示
  console.log(req.headers);
  res.send('send');
});

module.exports = router;

昼ごはん終わって、Codespace開いてみたら、止まってた。エコだなぁ。 pic.twitter.com/kDLMLjVWTf

— きー坊 💉💉💉💉 (@jnkykn) January 21, 2024

kintone プラグイン開発入門【Part2：情報の隠匿方法編】kintoneプラグインの開発

プラグイン設定画面で情報を保存し、kintone レコード一覧画面でサーバー側に API リクエストを送る簡単なプラグインを作成します。

kintoneプラグイン開発用に新しいリポジトリを作成して、Codespacesで開きます。

Codespaceできました

まず、contents/setting.html上にテキストフィールドを作成します。テキストフィールド内に入力された情報は、 kintone.plugin.app.setProxyConfig() で保存します。

<!--
 * Secure plugin configuration
 * Copyright (c) 2018 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
-->

<div>
    <div class=""block>
        <label class="kintoneplugin-label">
            <span id="container_label">プラグイン設定画面</span>
        </label><br>
        <div class="kintoneplugin-desc">プラグイン上に保存するテキストを入力してください</div>
        <div class="kintoneplugin-input-outer">
            <input id="inputText" class="kintoneplugin-input-text" type="text">
        </div>
        <div class="block">
            <button type="button" id="check-plugin-submit" class="kintoneplugin-button-dialog-ok">保存</button>
            <button type="button" id="check-plugin-cancel" class="kintoneplugin-button-dialog-cancel">キャンセル</button>
        </div>
    </div>
</div>

次に、プラグイン設定画面用のJavaScript config_js/config.jsを編集しました。

config.jsの編集

続いて、kintoneカスタマイズ用のJavaScriptのdesktops/desktop.jsに、レコード一覧画面を開いたときに kintone.plugin.app.proxy() を実行する処理を記述します。

kintoneカスタマイズ用のコードを記述

manifestなどの不足ファイルは、miyass/kintoneProxySamplePlugin からダウンロードして追加して、Chrome拡張として適用しようとしたところ、manifestのバージョンが合っていないようでした。

Chrome拡張が読み込めませんでした。

developer.chrome.com/extensions/manifestVersion に詳細が記載されていると書かれているので、確認しました。メッセージに従って、manifest_verionを3に変更して拡張機能の追加をしてみたのですが、今度は、「Required value 'name' is missing or invalid.」"name"が無いか不正なため読み込めなかったようです。Version3のマニフェストの仕様をきちんと読まないと解決できないと思ったので、改めて"name"の仕様を確認すると、45文字以内で書かなければならないようでした。サンプルのmanifest.jsonは、日本語、英語、中国語の各文字列が指定されていました。これは、descriptionも同様です。

    "name": {
        "ja": "kintoneProxyサンプルプラグイン",
        "en": "kintoneProxy sample plugin",
        "zh": "kintoneProxy sample plugin"
    },
    "description": {
        "ja": "kintone Proxy APIを用いた検証用プラグインです。",
        "en": "This is a sample plugin for testing kintone Proxy API.",
        "zh": "This is a sample plugin for testing kintone Proxy API."
    },

多言語対応については別途確認することにして、nameとdescriptionを一旦日本語名のみにしてみました。

    "name": "kintoneProxyサンプルプラグイン",
    "description": "kintone Proxy APIを用いた検証用プラグインです。",

これで、拡張機能を読み込ませてみると、今度は「
Required value 'version' is missing or invalid. It must be between 1-4 dot-separated integers each between 0 and 65536.」versionは、'.'で区切られている必要があるようです。修正します。

"version": "1.0.0",

今度は読み込めましたが、エラーがあります。

まだ、マニフェストに問題がある

"icon"は合っているのでは？と思ったら、V3 では、"icons"なんですね。"type"は拡張のタイプを設定しているようですが、V3には対応するキーがありません。"config"は、オプションページとして定義すれば良さそうです。"desktop"は、"content_scripts"に置き換えればよいかも？と思いつつ、もう少し調べたいです。

今日は時間切れ

と、ここまで来たところで、今日は時間切れです。あと一息というところですが、Manifest.jsonをV1からV3に移行するドキュメントはどこにも見つからず（V2からV3への移行については、公式ドキュメントがありました）何をするための設定項目か？を理解してからでないと、目的の機能を実現できそうにありません。次回、落ち着いてプラグインを完成させてから、「重要な情報を隠匿できる」ことを検証したいと思います。