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

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

目次

はじめに

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

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

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

実装イメージ

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

下準備

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

フィールド名 フィールドタイプ フィールドコード
転記元 文字列(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) 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 指定方法を以下にまとめました。

操作元 操作先 URL の取得方法
スペース スペース kintone.api.url('/k/v1/record', true)
スペース ゲストスペース この関数は使用できないため、URLを直接指定する必要があります。
ゲストスペース スペース kintone.api.url('/k/v1/record', false)
ゲストスペース ゲストスペース kintone.api.url('/k/v1/record', true)

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

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

使用した API