メインコンテンツまでスキップ
バージョン: 4.6.1-saas

React Native Agent

概要​

NetFUNNEL React Native エージェントは、NetFUNNEL サーバーと通信する専用クライアントです。

最小要件​

  • react-native 0.70.0 以上
  • react-native-webview 13.0.0 以上
  • react-native-async-storage/async-storage 1.23.1 以上

エージェント動作フロー​

待機列の制御ポイントは、NetFUNNEL コンソールのセグメントトリガールールで設定できます。ユーザーがアクセスしたページの URL とトリガールールを比較し、一致した場合に待機列が適用されます。

待機前: ページ読み込み → エージェント初期化 → トリガールールマッチ 待機中: NetFUNNEL サーバーへリクエスト → NetFUNNEL キー発行 → 待機室ページへ遷移 待機後: サービスページ進入 → NetFUNNEL キー返却

エージェントのインストール​

ライブラリの追加​

依存関係の追加​

以下のコードをコピーし、package.json に依存関係を追加してください。

package.json

{
  "dependencies": {
    "netfunnel-rn-agent": "https://agent-lib.stclab.com/agents/static/rn/netfunnel-rn-agent-latest.tgz"
  }
}

パッケージのインストール​

プロジェクトルートで以下のコマンドを実行してパッケージをインストールします。

npm install

エージェントの適用​

初期化​

Netfunnel.initialize は Netfunnel サービスを初期化し、クライアントとサーバー間の通信設定を行います。

この関数はアプリ起動時に必ず呼び出し、clientId などの必須パラメータを含む設定オブジェクトを渡して Netfunnel の動作を定義します。

初期化が完了すると、Netfunnel は指定した設定で動作し、以降 Netfunnel の機能を利用できます。

備考

{{CLIENT_ID}} は、コンソール右上のプロフィールアイコンをクリックし、「統合資格情報」メニューで確認できます。

import Netfunnel from 'netfunnel-rn-agent';
Netfunnel.initialize({
    clientId: '{{CLIENT_ID}}'
});
パラメータ説明必須条件/既定値
clientIdユーザー固有識別子O空文字不可
serverUrlNetFUNNEL サーバーアドレスXなし（既定アドレス使用）
errorUrlNetFUNNEL エラーページの HTML アドレスXなし（既定アドレス使用）
networkTimeoutネットワーク応答を待つ最大時間X既定: 3,000ms / 最大: 10,000ms / 最小: 100ms
retryCountネットワークリクエスト失敗時のリトライ回数X既定: 0 / 最大: 10 / 最小: 0
printLogデバッグ用ログ出力の有無X既定: false
errorBypassエラー時のバイパス有無X既定: false
useNetfunnelTemplateコンソールでカスタムした NetFUNNEL 待機室を使用するかX既定: true
userIdブラックリスト・ホワイトリスト用のエンドユーザー固有識別子X既定: null
useNetworkRecoveryMode待機室表示中にネットワーク切断された場合、待機室を維持し networkTimeout で再接続を試行X既定: false

Netfunnel WebView コンポーネント​

<Netfunnel.WebViewComponent /> は、React Native アプリで Netfunnel の待機室を WebView で表示するコンポーネントです。

このコンポーネントは Netfunnel.initialize で設定したパラメータに基づいて動作し、待機室 UI を表示したり NetFUNNEL サーバーとのやり取りを行います。

App の NavigationContainer と並べて配置し、アプリのナビゲーションとは独立して待機室 WebView を表示します。

export default function App() {
	return (
		<View>
			<NavigationContainer>
            ...
			</NavigationContainer>
			<Netfunnel.WebViewComponent />
		</View>
	);
}

基本制御​

基本制御: 開始関数

  • 名前: nfStart
  • 説明: 待機を適用したい箇所で呼び出し、キーを発行して待機室を表示します。
  • 適用箇所: ページ進入時やイベント開始時に適用します。
パラメータ型説明必須
projectKeyStringNetFUNNEL コンソールの基本制御プロジェクトキーO
segmentKeyStringNetFUNNEL コンソールの基本制御セグメントキーO
callbackFunction待機室イベント用のユーザー定義コールバックO
Netfunnel.nfStart("{{PROJECT_KEY}}", "{{SEGMENT_KEY}}", function(response) {
  // TODO: response に応じてコールバックを実装します。
  nfCallback(response);
});

基本制御: 終了関数

  • 名前: nfStop
  • 説明: 進入完了後にキーを返却するために呼び出します。
  • 適用箇所: 開始関数の後、または進入したユーザーの活動が終わる箇所で適用します。
警告

終了関数を呼ばない場合、セグメントのタイムアウト設定に従いキーは自動で返却されます。

パラメータ型説明必須
projectKeyStringNetFUNNEL コンソールの基本制御プロジェクトキーO
segmentKeyStringNetFUNNEL コンソールの基本制御セグメントキーO
Netfunnel.nfStop("{{PROJECT_KEY}}", "{{SEGMENT_KEY}}");

区間制御​

区間制御は、アプリの特定区間の同時接続数を一定に保つ機能です。開始関数でキーを発行し、終了関数を呼ぶまでユーザーは活動区間にいるとみなされ、次の待機者は進入しません。終了関数を呼ぶとキーが返却され、次の待機者が進入します。

区間制御: 開始関数

  • 名前: nfStartSection
  • 説明: 待機を適用したい箇所で呼び出し、キーを発行して待機室を表示します。
  • 適用箇所: ページ進入時やイベント開始時に適用します。
パラメータ型説明必須
projectKeyStringNetFUNNEL コンソールの区間制御プロジェクトキーO
segmentKeyStringNetFUNNEL コンソールの区間制御セグメントキーO
callbackFunction待機室イベント用のユーザー定義コールバックO
Netfunnel.nfStartSection("{{PROJECT_KEY}}", "{{SEGMENT_KEY}}", function(response) {
  // TODO: response に応じてコールバックを実装します。
  nfCallback(response);
});

区間制御: 終了関数

  • 名前: nfStopSection
  • 説明: 進入完了後にキーを返却するために呼び出します。
  • 適用箇所: 進入したユーザーの活動区間が終わる箇所で適用します。
警告

終了関数を呼ばない場合、ユーザーが活動区間に残っているとみなされ、次の待機者の進入が遅れることがあります。

パラメータ型説明必須
projectKeyStringNetFUNNEL コンソールの区間制御プロジェクトキーO
segmentKeyStringNetFUNNEL コンソールの区間制御セグメントキーO
Netfunnel.nfStopSection("{{PROJECT_KEY}}", "{{SEGMENT_KEY}}");

コールバック関数​

基本制御・区間制御の開始関数の第 3 引数であるコールバックで、NetFUNNEL サーバーからの応答を受け取れます。応答に応じて処理を分岐できます。

備考

ステータス 'Success'、'Error'、'NetworkError' は必ず処理してください。それ以外は処理しなくてもサービスに支障はありません。

Success

statusCodemessage説明
200Success待機列を通過してサービスに進入
300Bypassサブスクリプション／ライセンス期限切れ<br/>プロジェクト／セグメント無効化<br/>data-nf-error-bypass=true 設定
303Express進入成功時の動作

Error

statusCodemessage説明
500Server Error存在しないプロジェクト／セグメントキー使用<br/>待機中のセグメント削除<br/>サーバーエラーによる応答欠損

NetworkError

statusCodemessage説明
1001Network Not Connectedネットワーク接続遮断
1002Network Timeoutネットワーク遅延<br/>無効な待機室 HTML アドレス<br/>NetFUNNEL サーバーダウン

Block

statusCodemessage説明
301Blockセグメントブロック

IpBlock

statusCodemessage説明
302Macro Blockブラックリスト<br/>BotManager Basic 有効

Close

statusCodemessage説明
499Canceled Waiting Room既定待機室のキャンセルボタン押下
498Closed Blocking Roomブロック室の閉じるボタン押下
497Closed Macro Blocking Roomマクロブロック室の閉じるボタン押下
496Closed PreWaiting Room事前待機室の閉じるボタン押下
495Closed PostWaiting Room事後待機室の閉じるボタン押下
function nfCallback(response) {
  const { status, statusCode, message } = response;
  
  switch(status) {
    case 'Success':
      // 進入またはバイパス。NetFUNNEL 適用前と同様に既存のサービスロジックを実行します。
      // 例: ページ遷移、関数実行、API 呼び出し
      break;
    
    case 'Error':
      // システムエラー。スムーズな利用のため通常は Success と同様に既存のサービスロジックを実行します。
      // 例: ページ遷移、関数実行、API 呼び出し
      break;
      
    case 'NetworkError':
      // ネットワークエラー。既存のサービスロジックを実行するか、案内後に再び待機列へ進入させます。
      // 例: ページ遷移、関数実行、API 呼び出し、modal("ネットワークが不安定です。再試行しますか？ Y/N");
      break;
      
    case 'Block':
      // 進入がブロックされた場合。案内するか何もしなくてよいです。
      break;
      
    case 'IpBlock':
      // 反復リクエストでブロックされた場合。案内するか何もしなくてよいです。
      break;
      
    case 'Close':
      // 待機室の閉じる／キャンセルボタン押下。待機キャンセルを案内するか何もしなくてよいです。
      // 例: alert("待機をキャンセルしました。");
      break;
      
    default:
      console.log(`[NF] status: ${status}, code: ${statusCode}, message: ${message}`);
  }
}