今回はサンプルコードではなく、kintoneのJavaScriptカスタマイズにおいて、とっても便利な組み込み関数の一つを紹介したいと思います。

それは、window.cybozuオブジェクトです。

フィールドID について

初めに、フィールドID（※正式名称は不明なので仮称となります）についてご説明します。kintoneのJavaScriptカスタマイズやプラグイン開発においてフィールド操作を行う場合、通常は「フィールドコード」を使用しますよね。

ただ、「フィールドコード」は"app.record.xxxx.xxxxx"系のイベント発火時には取得可能ですが、このイベントを伴わないページでは原則取得することができません。そのようなページではDOM要素(HTML要素等)でフィールドデータ自体を取得することはもちろん可能ですが、DOM要素からフィールドコードを特定・取得することができないのです。また、逆にフィールドコードでDOM要素内を検索して対象フィールドを探し当てることもできません。

この両者を紐づけることができないというのは、かなり高度なカスタマイズをしようとする際に壁になることが少なくありません。乱暴に表現すると、外側のカスタマイズができても、内側に入ってカスタマイズすることが思うようにいかないといったイメージです。

そこで、「フィールドID」が登場します。

実はkintoneには「フィールドID」というパラメータも用意されています。この値は意識せずにkintoneを利用していると一切目に触れることがありません。DOM要素の中で確認することができる値でして、ブラウザのデバッグコンソール(Google Chromeの開発ツール等)でHTMLを確認すると、class名にこのIDが含まれていることを確認できます。

class="control-label-gaia label-2438"

上記のclassでいうと、"2438"の部分がフィールドIDにあたります。

また、このIDには以下の特徴があります。

●フィールドコードを変えても フィールドIDは変わらない
●自動採番されるIDであり、任意に設定・変更できない。

どのように活用できるのか？

さて、ようやく本題です。

「フィールドID」からそのフィールドの「フィールドコード」を取得したり、「フィールドコード」で対象フィールドのDOM要素を操作することができたりしたら、これはかなり画期的で、カスタマイズの幅が相当広がります。

これを実現するために必要な組み込み関数がwindow.cybozuオブジェクトというわけです。

window.cybozu.data.page.FORM_DATA.schema

なんと、window.cybozuオブジェクトには、「フィールドID」と「フィールドコード」の情報が格納されているのです。

以下、window.cybozu.data.page.FORM_DATA.schemaの構造例です。

＜アプリの構成＞
・レコード番号（文字列フィールド）
・お客様情報（テーブル）
　-氏名（文字列）
　-メールアドレス（文字列）
　-生年月日（日付）

{
  "table": {
    "fieldList": {
      "レコード番号": {
        "id": "1",　　// フィールドID
        "var": "record_number",       // フィールドコード
        "label": "レコード番号",        // 表示名
        "type": "SINGLE_LINE_TEXT"    // フィールドタイプ
      }
    }
  },
  "subTable": {
    "お客様情報": {
      "id": "10",
      "var": "customer_info",
      "label": "お客様情報",
      "type": "SUBTABLE",
      "fieldList": {
        "氏名": {
          "id": "11",
          "var": "customer_name",
          "label": "氏名",
          "type": "SINGLE_LINE_TEXT"
        },
        "メールアドレス": {
          "id": "12",
          "var": "customer_email",
          "label": "メールアドレス",
          "type": "LINK"
        },
        "生年月日": {
          "id": "13",
          "var": "customer_birthday",
          "label": "生年月日",
          "type": "DATE"
        }
      }
    }
  }
}

具体的には、window.cybozu.data.page.FORM_DATA.schema下層で、以下のようにデータを取得することができます。

cybozu.data.page.FORM_DATA.schema.table.fieldList

cybozu.data.page.FORM_DATA.schema.subTable

cybozu.data.page.FORM_DATA.schema.subTable[テーブル内フィールドID].fieldList

上記の関数で各種フィールド情報を取得することができ、これを活用すると、「フィールド ID ↔ フィールドコード」のマッチング等が可能になるというわけです。

以下、window.cybozuオブジェクトを使用したコード例です。

＜コード例＞

// アプリ内の全フィールド情報を取得
const schema = cybozu.data.page.FORM_DATA.schema;

// 通常フィールドのみを配列にする
const mainFields = Object.values(schema.table.fieldList);

// テーブルのみを配列にする
const subTables = Object.values(schema.subTable);

// サブテーブル内フィールドのみを配列にする
const subFields = subTables.flatMap(tb => Object.values(tb.fieldList));

// 全フィールド（通常フィールド + テーブル + テーブル内フィールド）を一つの配列にまとめる
const allFields = [...mainFields, ...subTables, ...subFields];

// フィールドIDから特定のフィールドコードを取得する例
const targetId = 2438; // ブラウザのデバッグコンソールで確認したフィールドIDを指定
const field = allFields.find(f => f.id === targetId);
if (field) {
 console.log("フィールドID ${targetId} のフィールドコードは:", field.var);
}

// フィールドコードから特定のフィールドIDを取得する例
const target = allFields.find(f => f.var === "フィールドコード");
if (target) {
  console.log("フィールドコードのフィールドIDは:", target.id);
}

注意点

この「フィールド ID（仮称）」や「window.cybozuオブジェクト」は、Cybozu社が公式に公開しているAPI情報ではないため、将来的にkintoneのアップデートで仕様が変わり動作しなくなる可能性はあります。このため、くれぐれも自己責任で活用をご検討ください。

最後に

前述のような注意点はありますが、少なくとも2025年9月時点のkintone環境では動作することを確認していますので、「DOM要素から何とかフィールドコード取得できないかなー」「フィールドコードからDOM要素操作できないかなー」と四苦八苦されている方は、一度動作検証に組み込んでみる価値はあるかと思います。

それでは、このような裏技的な関数も駆使しながら効率的なJavaScriptカスタマイズを行ってください！