ゲストスペース内アプリのレコードを、スペース内アプリに転記

著者名:江﨑 全英(サイボウズ株式会社)

目次

はじめに

こんにちは!新人の江﨑です。

皆さん、ゲストスペース使っていますか?外部の方とやりとりするのに便利ですよね。
ただ運用していると、ときにはゲストスペースのアプリの内容をスペース内アプリに転記したいことがあると思います。

そこで、今回は新人研修で開発した「ゲストスペース内アプリのレコードを、スペース内アプリに転記する」カスタマイズをサンプルコードとして紹介します。
また、このサンプルコードを作成する際に詰まった kintone.api.url関数 についても分かりやすく解説します。

実装イメージ

  1. ゲストスペース内アプリのレコード詳細画面に「追加ボタン」を設置
  2. 「追加ボタン」を押すと、ゲストスペース内アプリのレコードが、スペース内アプリのレコードに転記
    アプリアクションでは、ゲストスペース内アプリからスペース内アプリへのレコード転記ができません。
    アプリアクションでできること (External link)

下準備

アプリの準備(ゲストスペース)

フィールド名 フィールドタイプ フィールドコード
転記元 文字列(1行) from_field

アプリの準備(スペース)

フィールド名 フィールドタイプ フィールドコード
転記先 文字列(1行) to_field

カスタマイズの設定

ゲストスペース内アプリの「アプリの設定 > JavaScript / CSSでカスタマイズ > PC用のJavaScriptファイル」にサンプルコードを設定します。

次のサンプルコードを参考に、ファイル名を「sample.js」、文字コードを「UTF-8」で作成し、アップロードします。
ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
/*
 * ゲストスペースからスペースに転記
 * Copyright (c) 2025 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */

(() => {
  'use strict';

  const TO_APP_ID = 1; // スペース内のアプリIDに変更

  const postFields = record => {
    const fieldValue = record.from_field.value;

    const body = {
      app: TO_APP_ID,
      record: {
        to_field: {
          value: fieldValue
        }
      }
    };

    kintone.api(kintone.api.url('/k/v1/record'), 'POST', body, (resp) => {
      alert('レコード追加に成功しました');
    }, (error) => {
      alert('レコード追加に失敗しました');
    });
  };

  // レコード詳細画面の表示後イベント
  kintone.events.on('app.record.detail.show', (event) => {
    // ボタンを設置する
    if (document.getElementById('posting_button') !== null) {
      return;
    }
    const postingButton = document.createElement('button');
    postingButton.id = 'posting_button';
    postingButton.className = 'kintoneplugin-button-dialog-ok';
    postingButton.innerHTML = '追加する';
    postingButton.onclick = () => {
      postFields(event.record);
    };
    kintone.app.record.getHeaderMenuSpaceElement().appendChild(postingButton);
  });
})();

ボタンの見た目を新デザインにそろえる場合は 51-modern-default を参考に、「51-modern-default.css」を「PC用のCSSファイル」にアップロードします。

設定した画面

ゲストスペース内アプリの「JavaScript / CSSによるカスタマイズ」画面で設定したファイルは次のとおりです。

動作確認

ゲストスペース内アプリにサンプルデータを登録し、「追加する」ボタンをクリックして結果を確認してください。
レコードが転記されたでしょうか?
転記されない場合は、アプリIDやフィールドコードを確認してください。

ワンポイント

APIのパスからURLを取得する kintone.api.url関数 の第二引数を正しく指定することが大切です。

第二引数は省略可能で、省略するとfalseが設定されます。
trueを指定し、ゲストスペース内で関数を実行した場合のみ、ゲストスペース用のURLを取得します。

これらを開発者ツールのコンソール画面で確認すると次のとおりになります。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
// ゲストスペース以外で実行した場合
const url = kintone.api.url('/k/v1/record');
console.log(url); // https://sample.cybozu.com/k/v1/record.json

const url = kintone.api.url('/k/v1/record', true);
console.log(url); // https://sample.cybozu.com/k/v1/record.json

// ゲストスペース内で実行した場合
const url = kintone.api.url('/k/v1/record');
console.log(url); // https://sample.cybozu.com/k/v1/record.json

const url = kintone.api.url('/k/v1/record', true);
console.log(url); // https://sample.cybozu.com/k/guest/{GUEST_SPACE_ID}/v1/record.json

ケースごとに適切なAPIのURL指定方法を次の表にまとめました。

操作元 操作先 URLの取得方法
スペース スペース kintone.api.url('/k/v1/record', true)
または
kintone.api.url('/k/v1/record')
スペース ゲストスペース ゲストスペース用のURLを直接指定する。
ゲストスペース スペース kintone.api.url('/k/v1/record')
ゲストスペース ゲストスペース kintone.api.url('/k/guest/{GUEST_SPACE_ID}/v1/record')

kintone.api.url関数は、現在アクセスしているスペース/ゲストスペースに応じたURLしか取得できません。

そのため、別のスペースやゲストスペースのアプリにアクセスしたい場合は、URLを直接指定する必要があります。
たとえば、スペースからゲストスペースのアプリにアクセスする場合は、次のようにゲストスペース用のURLを直接指定します。

1
kintone.api('https://sample.cybozu.com/k/guest/{GUEST_SPACE_ID}/v1/record.json', 'POST', body, (resp) => {});

ゲストスペースから別のゲストスペースアクセスしたい場合、kintone.api.url関数の第一引数に、ゲストスペースのアプリ用APIのURL/k/guest/{GUEST_SPACE_ID}/v1/recordを指定できます。

異なる種類のスペースをまたぐときのAPIの指定方法は理解していただけたでしょうか?
難しいところもありますが、理解できると開発の幅が広がりますよ!

使用したAPI