Garoon開発Tips

プロフィールのポップアップをカスタマイズしてTeamsの個人チャットリンクを表示する

目次

はじめに

固定リンクがコピーされました

「スケジュール管理やワークフロー申請はGaroonで」「チャットは専用のチャットツールで」のように、機能によってサービスを使い分けているケースは多いでしょう。
利用する機能によってサービスを行き来する必要があるため、不便さを感じることもあるかもしれません。
たとえば、スケジュールをGaroonで管理していた場合、「Garoonで話し相手のスケジュールが空いているかを確認した後、チャットサービス側でユーザーを探してチャットを開始する」といった手間が発生します。

この記事では、Garoonのユーザーのプロフィールのポップアップダイアログに、Teamsの個人チャットのリンクを表示するカスタマイズを紹介します。
プロフィールのポップアップダイアログから直接その人との個人チャットを開始できるため、Garoonを起点にしてスムーズにコミュニケーションできます。

注意点

固定リンクがコピーされました

  • このカスタマイズには、クラウド版Garoonが必要です。
  • Microsoft Entra IDを使ってSAML認証を設定している環境でのみカスタマイズを利用できます。
    Microsoft Entra IDとcybozu.comをSAML認証で連携する方法は次の記事を参照してください。
    Microsoft Entra ID を使って cybozu.com にシングルサインオン

完成イメージ

固定リンクがコピーされました

ユーザーの名前をクリックしたときのプロフィールのポップアップダイアログに、Teamsのチャットリンクが表示されます。

リンクをクリックすると、Teamsの個人チャットが開きます。

カスタマイズの適用手順

固定リンクがコピーされました

  1. 次の2つのファイルを作成します。

  2. Garoonのシステム管理画面を表示します。

  3. 「基本システムの管理」タブを選択し、[カスタマイズ]をクリックします。

  4. [JavaScript / CSSによるカスタマイズ]を選択します。

  5. [カスタマイズグループを追加する]をクリックします。

  6. 次の内容を入力します。

    • カスタマイズ：「適用する」を選択
    • カスタマイズ名：任意の値を入力（例では「Teamsリンク」としています）
    • 適用対象：カスタマイズを適用するユーザーを選択
    • JavaScriptカスタマイズ：「popup-teams-link.js」を追加
    • CSSカスタマイズ：「popup-teams-link.js」を追加

  7. [追加する]をクリックします。

サンプルコード

固定リンクがコピーされました

JavaScriptファイル

固定リンクがコピーされました

次のサンプルコードをエディタにコピーし、ファイル名を「popup-teams-link.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

/*
 * Teams chat link in profile popup
 * Copyright (c) 2024 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */

(() => {
  'use strict';

  garoon.events.on('profile.dialog.show', async (event) => {

    const footer = garoon.profile.dialog.getFooterSpaceElement();
    const loginUserLoginName = garoon.base.user.getLoginUser().code;
    const profileUserLoginName = event.code;

    // 自分のプロフィールにはリンクを表示しない
    if (loginUserLoginName === profileUserLoginName) {
      return event;
    }

    // ユーザープリンシパル名の値に応じてusersパラメーターの値を変更してください。
    // 以下はcybozu.comのログイン名がユーザープリンシパル名（<user>@<primary-domain>.onmicrosoft.com）と同じ場合の例です。
    const teamsUrl = `https://teams.microsoft.com/l/chat/0/0?users=${profileUserLoginName}`;

    const container = document.createElement('div');
    container.innerHTML = `
      <div class="profile_dialog_category_grn_custom">
        <div class="profile_dialog_headline_grn_custom">
          <h3 class="profile_dialog_headline_label_grn_custom">Teams</h3>
          <a href="${teamsUrl}" target="_blank" class="profile_dialog_headline_action_grn_custom">
          新しいチャットを始める
          </a>
        </div>
      </div>`;

    footer.appendChild(container);
    return event;
  });
})();

CSSファイル

固定リンクがコピーされました

次のサンプルコードをエディタにコピーし、ファイル名を「popup-teams-link.css」、文字コードを「UTF-8」にして保存します。
ファイル名は任意ですが、変更する場合はファイルの拡張子を「css」にしてください。

 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

/*
 * Teams chat link in profile popup
 * Copyright (c) 2024 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */

.profile_dialog_category_grn_custom {
    margin-top: 16px;
}

.profile_dialog_headline_grn_custom {
    display: flex;
    align-items: center;
}

.profile_dialog_headline_label_grn_custom {
  margin: 0;
  font-size: 100%;
  font-weight: 700;
  color: #666;
}

.profile_dialog_headline_action_grn_custom {
  margin-left: 16px;
}

.profile_dialog_content_grn_custom {
  margin: 4px 0 0 24px;
}

.profile_dialog_content_ul_grn_custom {
  margin: 0;
  padding: 0;
}

.profile_dialog_content_listitem_grn_custom {
  margin: 4px 0 0 24px;
  list-style-position: outside;
}

動作確認

固定リンクがコピーされました

  1. Garoonのポータルを開きます。

  2. 自分以外のユーザーの名前をクリックします。

  3. ポップアップダイアログのTeamsのリンクをクリックします。

  4. 目的のユーザーとのTeamsの個人チャットが開くことを確認します。

おわりに

固定リンクがコピーされました

この記事では、ユーザーのプロフィールのポップアップダイアログに、Teamsの個人チャットのリンクを表示するカスタマイズを紹介しました。

今回紹介したカスタマイズのように、プロフィールのポップアップダイアログを利用したカスタマイズを活用すると、Garoonを起点にしたチームメンバーとのコミュニケーションがしやすくなります。

利用している Garoon API

固定リンクがコピーされました

information

この記事の内容は、2024年5月版Garoonで動作を確認しています。