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

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

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

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

「アプリの設定 > 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) 2017 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を正しく指定することが大切です。
通常のスペース内またはゲストスペース内というように、同じ種類のスペース内で完結する操作では、URLの取得方法を次のように記述することで、スペースを問わずにコードを共通で利用できます。

1

kintone.api.url('/k/v1/record', true);

ただ、今回のように異なる種類のスペースをまたがるカスタマイズの場合には注意が必要です。

ゲストスペースのアプリからスペースのアプリを操作する場合は、スペース用URLを指定します。
このように「操作元のスペース」ではなく、「操作先のスペース」に沿ったAPIを指定する必要があります。

APIのパスからURLを取得する kintone.api.url関数 の挙動を以下の図に示します。

ゲストスペース内アプリで関数の2つ目の引数にtrueを指定するとゲストスペース用のURLが取得できますが、これはゲストスペース内アプリの場合のみです。
挙動が分かりにくいと思うので、ケースごとに適切なAPIのURL指定方法を以下にまとめました。

スペースにおいてkintone.api.url関数は引数を変更してもスペース用APIのURLしか取得できません。
そのため、スペースからゲストスペースのときは関数を使うことができず、URLを直接指定する必要があります。

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

• 1件のレコードを登録する
• レコード詳細画面を表示した後のイベント
• レコードの値を取得する
• kintone REST APIリクエストを送信する
• APIのURLを取得する