> ## Documentation Index
> Fetch the complete documentation index at: https://developer.box.com/llms.txt
> Use this file to discover all available pages before exploring further.

# ボットのテスト

export const ProgressBar = ({pages = [], ...props}) => {
  const [currentStep, setCurrentStep] = useState(0);
  const [isDarkMode, setIsDarkMode] = useState(false);
  useEffect(() => {
    const checkDarkMode = () => {
      const isDark = document.documentElement.classList.contains('dark');
      console.log('ProgressBar - isDarkMode:', isDark);
      setIsDarkMode(isDark);
    };
    checkDarkMode();
    const observer = new MutationObserver(() => {
      checkDarkMode();
    });
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ['class']
    });
    return () => {
      observer.disconnect();
    };
  }, []);
  useEffect(() => {
    if (pages.length > 0) {
      const currentPath = window.location.pathname;
      const stepIndex = pages.findIndex(page => {
        const pagePath = page.startsWith('/') ? page : `/${page}`;
        return currentPath.endsWith(pagePath) || currentPath.includes(pagePath);
      });
      if (stepIndex !== -1) {
        setCurrentStep(stepIndex + 1);
      }
    }
  }, [pages]);
  if (!pages || pages.length === 0) {
    return null;
  }
  const step = currentStep;
  const total = pages.length;
  console.log('ProgressBar - Rendering with isDarkMode:', isDarkMode);
  const progressBarContainerStyle = {
    width: '100%',
    marginBottom: '32px',
    display: 'flex',
    alignItems: 'center',
    gap: '16px'
  };
  const stepsContainerStyle = {
    display: 'flex',
    alignItems: 'center',
    gap: '8px',
    flexShrink: 0
  };
  const progressBarTrackStyle = {
    flex: 1,
    height: '22px',
    backgroundColor: 'rgba(169, 210, 244, 0.06)',
    border: isDarkMode ? '1px solid rgba(230, 241, 247, 0.67)' : '1px solid #e3ecf3',
    borderRadius: '4px',
    overflow: 'hidden',
    position: 'relative'
  };
  const progressBarFillStyle = {
    height: '100%',
    backgroundColor: 'rgba(113, 192, 248, 0.23)',
    width: `${step / total * 100}%`,
    transition: 'width 0.3s ease'
  };
  const getStepStyle = (stepNumber, isActive) => {
    if (isDarkMode) {
      return {
        width: '22px',
        height: '22px',
        borderRadius: '4px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: '12px',
        fontWeight: '600',
        position: 'relative',
        zIndex: 1,
        transition: 'all 0.3s ease',
        backgroundColor: isActive ? 'rgba(113, 192, 248, 0.23)' : 'transparent',
        color: isActive ? '#60a5fa' : '#a0aec0',
        border: isActive ? '1px solid #e3ecf3' : '1px solid #e0e6eb',
        cursor: 'pointer',
        textDecoration: 'none'
      };
    }
    if (isActive) {
      return {
        width: '22px',
        height: '22px',
        borderRadius: '4px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: '12px',
        fontWeight: '600',
        position: 'relative',
        zIndex: 1,
        transition: 'all 0.3s ease',
        backgroundColor: 'rgba(169, 210, 244, 0.32)',
        color: '#374151',
        border: '1px solid #e1eef8',
        cursor: 'pointer',
        textDecoration: 'none'
      };
    }
    return {
      width: '22px',
      height: '22px',
      borderRadius: '4px',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      fontSize: '12px',
      fontWeight: '600',
      position: 'relative',
      zIndex: 1,
      transition: 'all 0.3s ease',
      backgroundColor: '#fbfbfb',
      color: '#9ca3af',
      border: '1px solid #e3ecf3',
      cursor: 'pointer',
      textDecoration: 'none'
    };
  };
  return <div style={progressBarContainerStyle} {...props}>
      <div style={stepsContainerStyle}>
        {Array.from({
    length: total
  }, (_, index) => {
    const stepNumber = index + 1;
    const pageIndex = index;
    const pagePath = pages[pageIndex];
    const fullPath = pagePath.startsWith('/') ? pagePath : `/${pagePath}`;
    const isActive = stepNumber === step;
    return <a key={stepNumber} href={fullPath} style={getStepStyle(stepNumber, isActive)}>
              {stepNumber}
            </a>;
  })}
      </div>
      <div style={progressBarTrackStyle}>
        <div style={progressBarFillStyle}></div>
      </div>
    </div>;
};

export const Link = ({href, children, className, ...props}) => {
  const localizedHref = localizeLink(href);
  return <a href={localizedHref} className={className} {...props}>
      {children}
    </a>;
};

<ProgressBar
  pages={[
                    "guides/collaborations/connect-slack-to-group-collabs/configure-slack",
                    "guides/collaborations/connect-slack-to-group-collabs/configure-box",
                    "guides/collaborations/connect-slack-to-group-collabs/scaffold-application-code",
                    "guides/collaborations/connect-slack-to-group-collabs/handle-slack-events",
                    "guides/collaborations/connect-slack-to-group-collabs/connect-box-functions",
                    "guides/collaborations/connect-slack-to-group-collabs/test-bot"
                  ]}
/>

この最後のセクションでは、Slackボットのさまざまな機能をテストします。

* **グループの作成**: ボットがチャンネルに追加されると、現在のチャンネル参加者全員を含む新しいBoxグループが作成されます。このチャンネル内で (メールアドレスの照合を基に) 一致するBoxアカウントを持つユーザーのみが追加される必要があります。
* **User Event関数**: ユーザーは、チャンネルに参加した場合またはチャンネルから退出した場合に、チャンネルグループから追加または削除される必要があります。
* **コンテンツ追加関数**: ユーザーが有効な`/boxadd`スラッシュコマンドを入力すると、新しいコラボレーションによってそのコンテンツがグループと共有される必要があります。

<Note>
  上記の内容がまだできていない場合は、これまでに作成したすべてのコードが、一般公開されているアプリケーションとして展開されていることを確認します。
</Note>

## グループの作成のテスト

ボットが初めてチャンネルに追加されるときに、予想されることがいくつかあります。

* SlackチャンネルIDと一致する名前で新しいグループが作成されます。
* 現在チャンネルに存在するすべてのユーザーがグループに追加されます (Slackメールアドレスが同じメールアドレスでEnterpriseアカウントと一致する限り)

Slackボットを<Link href="/guides/collaborations/connect-slack-to-group-collabs/configure-slack">手順1</Link>で構成した際に、SlackボットをSlackワークスペースにインストールしました。グループの作成をテストするには、Slackボットをチャンネルに追加する必要があります。

Slack UIまたは`/invite @bot_app_name`コマンドを使用して、任意のSlackチャンネルからSlackボットを招待します。

追加後、Boxにグループが作成され、メンバーが追加されていることを確認します。Box Enterprise管理者アカウントで、管理コンソールの \[**[ユーザーとグループ][box-users-groups]**] セクションに移動します。成功した場合、表示されるグループには、グループ名としてランダムな英数字の文字列が使用されます。これはSlackのチャンネルIDで、グループ名に反映されています。

<Frame noborder center shadow>
  <img src="https://mintcdn.com/box/jPy1E1s_P1x3lZ7z/ja/guides/collaborations/connect-slack-to-group-collabs/img/slack_6_groups.png?fit=max&auto=format&n=jPy1E1s_P1x3lZ7z&q=85&s=48b5d10bfe14c1f87574edbf207660b0" alt="Boxグループの表示" width="1004" height="228" data-path="ja/guides/collaborations/connect-slack-to-group-collabs/img/slack_6_groups.png" />
</Frame>

\[**メンバー**] 列には、グループ作成時に社内で検出されてグループに追加された、一致するメールアドレスを持つBoxユーザーの数も表示されます。

グループとメンバーが表示されていれば、この手順は成功です。

<Note>
  グループに追加したメンバーが表示されず、ボットアプリケーションからエラーが返されない場合、最も可能性が高い原因として、メールアドレスの不一致が考えられます。Slackのアカウントで使用されているメールアドレスが、Box Enterpriseのユーザーで使用されているメールアドレスと一致することを確認してください。
</Note>

## User Event関数のテスト

Box管理コンソールの \[**[ユーザーとグループ][box-users-groups]**] セクションを開いたまま、Slackグループの横にある \[**メンバー**] 列の数値を書き留めます。

ボットを招待したSlackチャンネルから、ボット以外のユーザーを追加または削除します。

Box管理コンソールの \[ユーザーとグループ] セクションを更新すると、ユーザーの追加または削除に応じたメンバー数の増減がわかります。

メンバーの数が変化していれば、この手順は成功です。

## コンテンツ追加関数のテスト

グループとコンテンツを共有する機能をテストするには、チャンネル内の2人のユーザーに対するアクセス権限が必要です。1人はBoxアカウントからコンテンツを共有するユーザー、もう1人は、コンテンツが共有されたことを確認するためにファイルのリストを表示する、グループ内の別のユーザーです。

ボットを招待したSlackチャンネルで、ファイルやフォルダをグループと共有するためのスラッシュコマンドを`/boxadd [file/folder] [ID of file/folder]`形式 (`/boxadd folder 324554221`など) で入力します。

<Note>
  指定されるファイルまたはフォルダIDは、ファイルまたはフォルダを共有するユーザーのBoxアカウント内のコンテンツである必要があります。
</Note>

Boxアカウント内のファイルまたはフォルダのIDを調べるには、[Boxサイト][box]内でファイルまたはフォルダを読み込み、URLを確認します。IDはURLの最後の文字列で、多くの場合、`/file/`または`/folder/`を含むセクションの直後に表示されます。

<Frame noborder center shadow>
  <img src="https://mintcdn.com/box/jPy1E1s_P1x3lZ7z/ja/guides/collaborations/connect-slack-to-group-collabs/img/slack_6_file_id.png?fit=max&auto=format&n=jPy1E1s_P1x3lZ7z&q=85&s=77b708c75242c369bbd113b06ef7628e" alt="ファイルIDまたはフォルダIDの取得" width="518" height="84" data-path="ja/guides/collaborations/connect-slack-to-group-collabs/img/slack_6_file_id.png" />
</Frame>

コマンドを入力したら、SlackチャンネルとBoxグループ内で別のユーザーの[Boxサイト][box]アカウントに移動します。共有したコンテンツがそのアカウントで使用できるようになっているはずです。

共有したコンテンツをグループ内の他のユーザーが使用できれば、この手順は成功です。

## 次の手順

最小限のボットが展開されたので、ここまでに作成した機能に加えて、操作性を向上させる方法を検討できるようになりました。この工程における次の手順として、さまざまな領域を拡張することもできます。

* グループと共有されたファイルやフォルダの<Link href="/guides/shared-links/create-or-update">共有リンクを作成</Link>するための新しいスラッシュコマンドを追加することで、そのグループに属していない他のユーザーや社外のユーザーとコンテンツを共有できるようにします。
* <Link href="/reference/post-retention-policies">リテンションポリシーを作成</Link>し、グループと共有されたコンテンツに<Link href="/reference/post-retention-policy-assignments">割り当てる</Link>ことで、共有コンテンツの寿命とガバナンスを制御できるようにします。
* チャンネル内のユーザーが、グループと共有されている<Link href="/reference/post-comments">ファイルにコメント</Link>できるように新しいスラッシュコマンドを追加します。

[box-users-groups]: https://app.box.com/master/groups

[box]: https://box.com