準備するもの

• Google Chrome

• テキストエディタ：Visual Studio Code（メモ帳でもOK）

手順

ステップ1：必要なファイルを作成する

まず、拡張機能に必要なファイルを作成します。

1.1. manifest.json ファイルを作成

このファイルは、拡張機能の設定を記述するためのものです。以下のコードをコピーして、ファイル名を manifest.json として保存してください。

{
  "manifest_version": 3,
  "name": "Kintone Field Logger",
  "version": "1.0",
  "description": "Logs Kintone field names and codes to the console.",
  "permissions": ["activeTab", "scripting"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  }
}

1.2. background.js ファイルを作成

次に、拡張機能の動作を定義する background.js ファイルを作成します。以下のコードをコピーして、ファイル名を background.js として保存してください。

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: logKintoneFields,
    world: "MAIN"
  });
});

function logKintoneFields() {
  if (typeof kintone === 'undefined' || !kintone.app || !kintone.app.record) {
    console.error('Kintone object is not available.');
    return;
  }

  const record = kintone.app.record.get().record;

  kintone.api(kintone.api.url('/k/v1/app/form/fields', true), 'GET', { app: kintone.app.getId() }, function(resp) {
    const fieldsInfo = resp.properties;
    const fieldArray = [];

    const getFieldLabel = (fieldCode) => {
      return fieldsInfo[fieldCode] ? fieldsInfo[fieldCode].label : 'Unknown Field';
    };

    Object.entries(record).forEach(([fieldCode, field]) => {
      const fieldName = getFieldLabel(fieldCode);
      if (field.type === 'SUBTABLE') {
        fieldArray.push(`${fieldName} (SUBTABLE) : ${fieldCode}`);
        field.value.forEach(row => {
          Object.entries(row.value).forEach(([innerFieldCode, innerField]) => {
            const innerFieldName = getFieldLabel(innerFieldCode);
            fieldArray.push(`  ${innerFieldName} : ${innerFieldCode}`);
          });
        });
      } else {
        fieldArray.push(`${fieldName} : ${fieldCode}`);
      }
    });

    console.log(fieldArray.join('\n'));
  });
}

1.3. アイコン画像を準備

拡張機能にはアイコンが必要です。16x16, 48x48, 128x128ピクセルのPNG画像を用意して、それぞれ icons/icon16.png、icons/icon48.png、icons/icon128.png という名前で保存します。

弊社ではkintoneのロゴ画像を使用しています。

↑48x48の画像です。必要に応じて右クリックで保存して利用してください

1.4. ファイルのフォルダ構造

以下のようなフォルダ構成にして、任意の場所に整理してください。

manifest.json
background.js
icons
└──icon48.png

ステップ2：拡張機能をChromeにインストールする

次に、作成した拡張機能をChromeにインストールしましょう。

1. Chromeを開いて、アドレスバーに chrome://extensions/ と入力してエンターキーを押します。

2. 右上の「デベロッパーモード」をオンにして、「パッケージ化されていない拡張機能を読み込む」ボタンをクリックし、作成したフォルダを選択してください。

3. 追加したファイルが画面に表示されていれば成功です。

ステップ3: 使い方

インストールした拡張機能を使って、kintoneでフィールド名とコードを取得してみましょう。

1. 取得したいアプリのレコード詳細ページを開き、コンソール（F12キーを押して開きます）を表示してください。

2. 画像の手順に沿って、ツールバーの拡張機能アイコンをクリックするとコンソールにフィールド名とコードが一覧で表示されています。

まとめ

これで、kintoneのフィールド名とコードを簡単に取得するChrome拡張機能が完成しました。プログラムの知識がなくても、手順に沿ってファイルを作成すれば簡単に構築できるはずです。

弊社では、複数アプリを同期する仕組みの構築の際に、このフィールドコード情報を生成AIに記憶させ、マッピングを自動で行っています。項目が数百個あるような大規模なアプリでも5分程度でマッピング作業が完了するため、ぜひお試しください。

スパプラでは、kintoneをベースとした「デジプラDX」というフルカスタマイズ可能なシステム開発をパッケージ展開しています。バックエンド機能をkintoneで代替し、画面デザインや同期処理はプログラムで柔軟に構築するため、フルオーダーメイドの自社システムや管理画面をリーズナブルな価格でご提供できるプランとなっています。お気軽にお問い合わせください。

サービスサイト