kintoneにRe:lationを連携するには

Posted by Tsuyuki on 2020年5月19日 in Re:lation, マニュアル

ご注意

  • この機能を利用するにはお使いのRe:lationに「外部システム連携」機能が必要です。
    外部システム連携機能はスタンダードプラン以上での標準機能のため、一部のプランではご利用いただけません。
    詳しくはこちらまでお問い合わせください。
  • kintoneの操作・設定およびkintoneプラグインのインストール方法やkintoneのプランなどkintoneにかかることは当社サポート外となります。そのためこれらについて当社にご質問いただいてもお答えできませんのでご注意ください。

はじめに

kintoneにRe:lation連携を設定すると、kintoneからRe:lationの新規メール作成画面やタイムライン画面をワンクリックで呼び出せます。
そのため、Re:lationとkintoneの両方を利用している場合は設定しておくことをおすすめします。

できること

  • kintone内のアプリからRe:lationメール新規作成画面の呼び出し
  • kintone内のアプリからRe:lationタイムライン画面の呼び出し

必要なもの

  • Re:lation (フリープランは除きます)
  • kintone Re:lation連携プラグイン (こちらよりダウンロードできます)
  • kintone (別途サイボウズ社との契約が必要です)

設定方法

まず、kintoneに「kintone Re:lation連携プラグイン」をインストールし、アプリに追加します。

次に、下記に沿ってプラグインの詳細設定をします。

  1. プラグインを追加したアプリを選択し、右上にあるギアアイコンをクリックします。
  2. [設定]タブ内にあるカスタマイズ/サービス連携の[プラグイン]を選びます。
  3. 画面中央にあるギアアイコンを選択しプラグインの設定をします。
  4. ①〜⑥まで全ての設定を終えて[保存]します。

    ※設定内容は「プラグインの詳細設定」を確認してください。
  5. 保存するとプラグイン画面に戻ります。[アプリの設定]を開き、右上の[アプリを更新]-[OK]をします。
    ※アプリの更新をしなければプラグイン詳細設定が反映されませんので注意してください。


プラグインの詳細設定

①②Re:lation情報の設定

  • サブドメインとは、下記キャプチャ内で指している「.relationapp.jp」前の部分となります。
  • 受信箱のIDとは、受信箱ごとに振られたIDとなります。
    受信箱IDの確認方法はこちら

    ※呼び出せる受信箱はひとつのみです。

③ボタン表示位置

下記のスクリーンショットを参考にお好きな方をご選択ください。

レコード詳細画面 メニューの上側

図に示された位置に連携ボタンが表示されます。

所定の要素IDを持ったスペース (kintone上級者向け)

フォーム内に連携ボタンを配置できます。(kintoneアプリ内フォーム設定が必要です)

図のように連携ボタンを表示するにはkintoneアプリ内のフォームにてフィールドの追加設定が必要となります。設定方法はkintoneヘルプなどを参照ください。

スペースに設定すべき要素IDは下記の通りです。

メール作成ボタン relationMailSpace
タイムラインボタン relationTimelineSpace

④メール作成ボタン設定

連携に使用するメールアドレスフィールドを選択します。

⑤タイムラインボタン設定

  1. 下記より何を指定してタイムラインを開くのかを選択します。
    • 「メールアドレス」を指定してタイムラインを開く
    • 「電話番号」を指定してタイムラインを開く
    • 「顧客コード」を指定してタイムラインを開く
  2. 上記に対応するフィールドを選択します。

⑥Re:lationを開く際の挙動

Re:lationを新しいタブで開きたい場合はチェックしてください。

指定したいフィールドがアプリにない場合

アプリによって利用できるフィールドは様々です。指定したいフィールドがない場合は必要に応じてフィールドを追加設定してください。

補足: 技術仕様

タグ / CSS仕様

レコード詳細画面で表示されるボタンのタグ構造・ID/CSSクラス名は以下のとおりです。

[レコード詳細画面 メニューの上側] の場合

<div id="relation-kintone-plugin-placeholder" class="relation-kintone-plugin-placeholder">
  <button id="relation-showMailButton" class="kintoneplugin-button-normal relation-kintone-plugin-button">メール作成</button>
  <button id="relation-showTlButton" class="kintoneplugin-button-normal relation-kintone-plugin-button">タイムライン表示</button>
</div>

[所定の要素IDを持ったスペース] の場合

<div id="relation-kintone-plugin-mailspace-placeholder" class="relation-kintone-plugin-placeholder">
  <button id="relation-showMailButton" class="kintoneplugin-button-normal relation-kintone-plugin-button">メール作成</button>
</div>
<div id="relation-kintone-plugin-timelinespace-placeholder" class="relation-kintone-plugin-placeholder">
  <button id="relation-showTlButton" class="kintoneplugin-button-normal relation-kintone-plugin-button">タイムライン表示</button>
</div>

ボタンの見かけを制御できるCSSクラス名は以下のとおりです。
またこの他にボタンには、kintoneデフォルトの kintoneplugin-button-normal / kintoneplugin-button-disabled が追加されています。

relation-kintone-plugin-placeholder ボタンを設置する領域のクラス
relation-kintone-plugin-button ボタンが有効のときのクラス
relation-kintone-plugin-button-disabled ボタンが無効のときのクラス

現状の設定は以下のとおりです。

.relation-kintone-plugin-placeholder {
}

.relation-kintone-plugin-button {
  margin: 10px;
}

.relation-kintone-plugin-button-disabled {
  margin: 10px;
  opacity: 0.5;
}

この記事は役に立ちましたか?

Tags: