# 機能フラグ

{% hint style="warning" %}
機能フラグとともにアダプティブコンテンツを使用するには、アプリケーションにコードを追加する必要があります。

現在、GitBook ヘルパーは React ベースのセットアップのみをサポートしています。
{% endhint %}

GitBook は、次のような一般的な機能フラグサービスプロバイダー向けのヘルパー関数と統合機能を提供します。 [**LaunchDarkly**](#launchdarkly) 、 [**Reflag**](#reflag).

これにより、ユーザーがドキュメントを読む際に、製品内でアクセスできる機能フラグを読み取れます。これは、特定の人々のグループにのみ利用可能な機能のドキュメントを表示する必要がある場合に便利です。

### LaunchDarkly

LaunchDarkly では、次を通じてクレームとして機能フラグへのアクセスを送信できます。 [`launchdarkly-react-client-sdk`](https://launchdarkly.com/docs/sdk/client-side/react/react-web) および GitBook の [`@gitbook/adaptive`](https://gitbook-v2-lrp5kto0w-gitbook.vercel.app/url/gitbook.com/docs/documentation/ja-gitbook-documentation/saitohenoakusesu/adaptive-content/enabling-adaptive-content/broken-reference) パッケージ。

すでに製品で LaunchDarkly の機能フラグを使用している場合、このパッケージはすでに設定済みである可能性が高いです。

これらの機能フラグをクレームとして GitBook に渡すには、次の手順に従ってください。

{% stepper %}
{% step %}
**LaunchDarkly 統合をインストールする**

始めるには、まず [LaunchDarkly 統合をインストールし、](https://app.gitbook.com/integrations/launchdarkly) GitBook サイトに追加する必要があります。
{% endstep %}

{% step %}
**プロジェクトとアクセスキーを設定する**

プロジェクトキーと、 [LaunchDarkly の設定](https://app.launchdarkly.com/settings) からサービスアクセス トークンを統合の設定に追加します。
{% endstep %}

{% step %}
**GitBook ヘルパーをアプリケーションにインストールして追加する**

LaunchDarkly 統合を設定した後、GitBook のアダプティブコンテンツヘルパーをアプリケーションにインストールする必要があります。

```bash
npm install @gitbook/adaptive
```

{% endstep %}

{% step %}
**アプリケーションを設定する**

次を使用する必要があります。 `withLaunchDarkly` LaunchDarkly React SDK と一緒に使うヘルパーで、GitBook にコンテキストを渡します。

<pre class="language-javascript"><code class="lang-javascript">import { render } from 'react-dom';
<strong>import { withLaunchDarkly } from '@gitbook/adaptive';
</strong><strong>import { asyncWithLDProvider, useLDClient } from 'launchdarkly-react-client-sdk';
</strong>import MyApplication from './MyApplication';

function PassFeatureFlagsToGitBookSite() {
<strong>    const ldClient = useLDClient();
</strong>    React.useEffect(() => {
        if (!ldClient) {
            return;
        }
<strong>        return withLaunchDarkly(ldClient);
</strong>    }, [ldClient]);
    return null;
}
(async () => {
    const LDProvider = await asyncWithLDProvider({
        clientSideID: 'client-side-id-123abc',
        context: {
            kind: 'user',
            key: 'user-key-123abc',
            name: 'Sandy Smith',
            email: 'sandy@example.com'
        },
        options: { /* ... */ }
    });
    render(
        &#x3C;LDProvider>
            &#x3C;PassFeatureFlagsToGitBookSite />
            &#x3C;MyApplication />
        &#x3C;/LDProvider>,
        document.getElementById('reactDiv'),
    );
})();
</code></pre>

{% endstep %}

{% step %}
**訪問者スキーマを確認する**

1つ目は [訪問者スキーマ](https://gitbook-v2-lrp5kto0w-gitbook.vercel.app/url/gitbook.com/docs/documentation/ja-gitbook-documentation/saitohenoakusesu/adaptive-content/enabling-adaptive-content/..#set-your-visitor-schema) は、公開サイトでクレームを読み取れるようにするために必要です。LaunchDarkly 統合をインストールして設定すると、訪問者スキーマは自動的に設定されます。
{% endstep %}

{% step %}
**コンテンツをパーソナライズする**

訪問者スキーマを設定したら、ユーザーがアクセスできる機能フラグを使って、サイトを訪れるユーザー向けにドキュメント体験を調整する準備が整います。

LaunchDarkly で利用可能なあらゆる機能フラグの値は、訪問者スキーマの次の下に公開されます。 `visitor.claims.unsigned.launchdarkly` オブジェクト。署名なしクレームの詳細を読む [を使って複数のクレームを条件エディタで組み合わせ、特定のユーザーに一致させることができます。演算子について詳しくは](https://gitbook-v2-lrp5kto0w-gitbook.vercel.app/url/gitbook.com/docs/documentation/ja-gitbook-documentation/saitohenoakusesu/adaptive-content/enabling-adaptive-content/..#set-an-unsigned-claim).

次へ移動します [コンテンツを適応させる](https://gitbook-v2-lrp5kto0w-gitbook.vercel.app/url/gitbook.com/docs/documentation/ja-gitbook-documentation/saitohenoakusesu/adaptive-content/adapting-your-content) を読んで、ユーザー向けにドキュメントをさらにパーソナライズする方法をご確認ください。
{% endstep %}
{% endstepper %}

### Reflag

Reflag では、次を通じてクレームとして機能フラグへのアクセスを送信できます。 [`@reflag/react-sdk`](https://www.npmjs.com/package/@reflag/react-sdk) および GitBook の [`@gitbook/adaptive`](https://github.com/GitbookIO/integrations/tree/main/packages/adaptive) パッケージ。

すでに製品で Reflag の機能フラグを使用している場合、このパッケージはすでに設定済みである可能性が高いです。

これらの機能フラグをクレームとして GitBook に渡すには、次の手順に従ってください。

{% stepper %}
{% step %}
**Reflag 統合をインストールする**

始めるには、まず [Reflag 統合をインストールする](https://app.gitbook.com/integrations/bucket) GitBook サイトに追加する必要があります。
{% endstep %}

{% step %}
**秘密鍵を設定する**

次から秘密鍵を追加します。 [Reflag の設定](https://app.reflag.com/envs/current/settings/app-environments) からサービスアクセス トークンを統合の設定に追加します。
{% endstep %}

{% step %}
**GitBook ヘルパーをアプリケーションにインストールする**

Reflag 統合を設定した後、GitBook のアダプティブコンテンツヘルパーをアプリケーションにインストールする必要があります。

```bash
npm install @gitbook/adaptive
```

{% endstep %}

{% step %}
**アプリケーションを設定する**

次を使用する必要があります。 `withReflag` Reflag React SDK と一緒に使うヘルパーで、GitBook にコンテキストを渡します。

<pre class="language-javascript"><code class="lang-javascript"><strong>import { withReflag } from '@gitbook/adaptive';
</strong><strong>import { ReflagProvider, useClient } from '@reflag/react-sdk';
</strong>import MyApplication from './MyApplication';

function PassFeatureFlagsToGitBookSite() {
<strong>    const client = useClient();
</strong>    React.useEffect(() => {
        if (!client) {
            return;
        }
<strong>        return withReflag(client);
</strong>    }, [client]);
    return null;
}
export function Application() {
    const currentUser = useLoggedInUser();
    const appConfig = useAppConfig();
    return (
        &#x3C;ReflagProvider
            publishableKey={appConfig.reflagCom.publishableKey}
            user={{
                id: currentUser.uid,
                email: currentUser.email ?? undefined,
                name: currentUser.displayName ?? '',
            }}
            company={{
                id: currentUser.company.id,
            }}
        >
            &#x3C;PassFeatureFlagsToGitBookSite />
            &#x3C;MyApplication />
        &#x3C;/ReflagProvider>
    );
}
</code></pre>

{% endstep %}

{% step %}
**訪問者スキーマを確認する**

1つ目は [訪問者スキーマ](https://gitbook-v2-lrp5kto0w-gitbook.vercel.app/url/gitbook.com/docs/documentation/ja-gitbook-documentation/saitohenoakusesu/adaptive-content/enabling-adaptive-content/..#set-your-visitor-schema) は、公開サイトでクレームを読み取れるようにするために必要です。Reflag 統合をインストールして設定すると、訪問者スキーマは自動的に設定されます。
{% endstep %}

{% step %}
**コンテンツをパーソナライズする**

訪問者スキーマを設定したら、ユーザーがアクセスできる機能フラグを使って、サイトを訪れるユーザー向けにドキュメント体験を調整する準備が整います。

Reflag で利用可能なあらゆる機能フラグの値は、訪問者スキーマの次の下に公開されます。 `visitor.claims.unsigned.reflag` オブジェクト。署名なしクレームの詳細を読む [を使って複数のクレームを条件エディタで組み合わせ、特定のユーザーに一致させることができます。演算子について詳しくは](https://gitbook-v2-lrp5kto0w-gitbook.vercel.app/url/gitbook.com/docs/documentation/ja-gitbook-documentation/saitohenoakusesu/adaptive-content/enabling-adaptive-content/..#set-an-unsigned-claim).

次へ移動します [コンテンツを適応させる](https://gitbook-v2-lrp5kto0w-gitbook.vercel.app/url/gitbook.com/docs/documentation/ja-gitbook-documentation/saitohenoakusesu/adaptive-content/adapting-your-content) を読んで、ユーザー向けにドキュメントをさらにパーソナライズする方法をご確認ください。
{% endstep %}
{% endstepper %}

{% hint style="info" %}
機能フラグの値はクライアント側で評価されるため、この方法を使用して機密データやセキュリティ上重要なデータを渡すことは避けてください。
{% endhint %}