# フィーチャーフラグ

{% 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-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/documentation/ja-gitbook-documentation/publishing-documentation/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 の adaptive コンテンツヘルパーをインストールする必要があります。

```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つの [visitor schema（ビジタースキーマ）](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/documentation/ja-gitbook-documentation/publishing-documentation/adaptive-content/enabling-adaptive-content/..#set-your-visitor-schema) は、公開サイトであなたのクレームを読み取れるようにするために必須です。LaunchDarkly 統合をインストールおよび設定すると、自動的にビジタースキーマが設定されるはずです。
{% endstep %}

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

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

LaunchDarkly で利用可能な任意の機能フラグ値は、ビジタースキーマの一部として次の下に公開されます： `visitor.claims.unsigned.launchdarkly` オブジェクト。unsigned クレームについての詳細は [こちら](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/documentation/ja-gitbook-documentation/publishing-documentation/adaptive-content/enabling-adaptive-content/..#set-an-unsigned-claim).

へ移動してください [adapting your content（コンテンツの適応）](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/documentation/ja-gitbook-documentation/publishing-documentation/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 ヘルパーをインストールする

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

{% endstep %}

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

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

<pre class="language-javascript"><code class="lang-javascript"><strong>ヘルパーを Reflag React SDK と共に使用して、コンテキストを GitBook に渡します。
</strong><strong>import { withReflag } from '@gitbook/adaptive';
</strong>import MyApplication from './MyApplication';

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

{% endstep %}

{% step %}
**ビジター スキーマを確認する**

1つの [visitor schema（ビジタースキーマ）](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/documentation/ja-gitbook-documentation/publishing-documentation/adaptive-content/enabling-adaptive-content/..#set-your-visitor-schema) \</ReflagProvider>
{% endstep %}

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

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

は、公開サイトであなたのクレームを読み取れるようにするために必須です。Reflag 統合をインストールおよび設定すると、自動的にビジタースキーマが設定されるはずです。 `Reflag で利用可能な任意の機能フラグ値は、ビジタースキーマの一部として次の下に公開されます：` オブジェクト。unsigned クレームについての詳細は [こちら](https://gitbook-v2-q67etdj25-gitbook.vercel.app/url/gitbook.com/docs/documentation/ja-gitbook-documentation/publishing-documentation/adaptive-content/enabling-adaptive-content/..#set-an-unsigned-claim).

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

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