インストールと初期化
このガイドは、NetFUNNEL React Nativeエージェントのインストールと初期化プロセスを説明します。
ステップ1: パッケージのインストール
依存関係の追加
package.jsonに次の依存関係を追加します：
{
"dependencies": {
"netfunnel-rn-agent": "https://agent-lib.stclab.com/agents/static/rn/netfunnel-rn-agent-latest.tgz"
}
}
パッケージのインストール
プロジェクトルートディレクトリから次のコマンドを実行します：
npm install
ステップ2: Client IDの取得
- NetFUNNELコンソールに移動
- 右上のプロフィールアイコンをクリック
統合資格情報（Integration Credentials）メニューを選択Client IDをコピー
Client IDの確認場所
コンソール画面右上のプロフィールアイコンをクリックした後、統合資格情報メニューで確認できます。
ステップ3: エージェント初期化
NetFUNNEL React Nativeエージェントは、アプリ起動と同時に初期化する必要があります。
App.jsまたはApp.tsxのmain()関数の開始時点で初期化作業を実行します：
import Netfunnel from 'netfunnel-rn-agent';
Netfunnel.initialize({
clientId: '{{CLIENT_ID}}', // ステップ2で取得したClient ID
serverUrl: '{{SERVER_URL}}', // オプション
errorUrl: '{{ERROR_URL}}', // オプション
networkTimeout: 3000,
retryCount: 0,
printLog: false,
errorBypass: false,
useNetfunnelTemplate: true,
userId: '{{USER_ID}}', // オプション
useNetworkRecoveryMode: true
});
初期化パラメータ
| パラメータ | 型 | 説明 | 条件 |
|---|---|---|---|
clientId | String | ユーザー固有識別子 | 空文字列不可 |
serverUrl | String | NetFUNNELサーバーアドレス | なし（デフォルトアドレスを使用） |
errorUrl | String | NetFUNNELエラーページのHTMLアドレス | なし（デフォルトアドレスを使用） |
networkTimeout | int | ネットワーク応答を待つ最大時間 | デフォルト（ms）: 3,000 最大（ms）: 10,000 最小（ms）: 100 |
retryCount | int | ネットワークリクエスト失敗時の再試行回数 | デフォルト（回）: 0 最大（回）: 10 最小（回）: 0 |
printLog | bool | デバッグのためのログ出力の有無 | デフォルト: false |
errorBypass | bool | エラー発生時のバイパスの有無 | デフォルト: false |
useNetfunnelTemplate | bool | コンソールからカスタマイズしたNetFUNNEL待機室を使用するか | デフォルト: true |
userId | String | ブラックリスト、ホワイトリスト確認のためのエンドユーザー固有識別子 | デフォルト: null |
useNetworkRecoveryMode | bool | 待機室が表示された状態でネットワーク接続が切断された場合、待機室を維持し、networkTimeout基準で継続して再接続を試みて待機室を維持する機能 | デフォルト: false |
初期化設定の詳細情報
すべての初期化パラメータの詳細情報については、初期化設定ドキュメントを参照してください。
ステップ4: WebViewコンポーネントの追加
<Netfunnel.WebViewComponent />は、React NativeアプリケーションでNetfunnelの待機室機能をWebViewとしてレンダリングするコンポーネントです。
このコンポーネントは、Netfunnel.initializeで設定されたパラメータに基づいて動作し、ユーザーに待機室UIを表示したり、Netfunnelサーバーとの相互作用を処理したりします。
AppコンポーネントのNavigationContainerと一緒に配置して、アプリのナビゲーションフローとは独立して待機室WebViewをレンダリングできるようにします：
import { View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import Netfunnel from 'netfunnel-rn-agent';
export default function App() {
return (
<View>
<NavigationContainer>
{/* Your app navigation */}
</NavigationContainer>
<Netfunnel.WebViewComponent />
</View>
);
}
ステップ5: インストール確認
エージェントが正しくインストールされているか確認するには、次を確認してください：
- 初期化成功: アプリ起動時にエラーが発生しないこと
- WebViewコンポーネント:
<Netfunnel.WebViewComponent />が正常にレンダリングされること - ログ確認:
printLog: trueに設定した場合、コンソールで[NF4]プレフィックスを持つログを確認できます
トラブルシューティング
パッケージインストール失敗:
- ネットワーク接続を確認
package.jsonの依存関係パスを確認
初期化失敗:
clientIdが正しく設定されているか確認- 空文字列でないか確認
WebViewコンポーネントが表示されない:
<Netfunnel.WebViewComponent />が正しい場所に追加されているか確認- NavigationContainerと一緒に配置されているか確認