モバイルデバイス上でのエッジ AI 導入の現状

スマートフォンの演算能力向上に伴い、クラウド依存型の AI 処理から端末内蔵型への移行が進んでいます。React Native はクロスプラットフォーム開発において標準的な役割を果たしており、Native Module を活用することで iOS および Android のハードウェアアクセラレータを直接利用可能です。これにより、低遅延かつプライバシー保護された画像分類機能を実装できます。

主な利点としては、以下の点が挙げられます。

• 統一されたロジック: TypeScript を使用し、iOS と Android で共通のコードベースを維持可能
• ハイブリッドアーキテクチャ: 描画は JavaScript エンジンで制御しつつ、 heavy な推論処理は C++ ライブラリ（C++ Shared Library）経由で実行
• エコシステム: TensorFlow Lite や MediaPipe との親和性が高く、多くの事前学習モデルが用意されている

プロジェクトセットアップと環境構成

まずは既存プロジェクトに AI ライブラリを追加します。Expo Managed Workflow か Bare Workflow を選択しますが、ネイティブモジュールを使用するためには Build Tools の設定が必要です。

// 必須パッケージのインストール
npm install @react-native-camera/react-native-camera --save
npm install @tensorflow/tfjs-core @tensorflow/tfjs-react-native --save
# Android ネイティブ依存の場合
cd android && ./gradlew clean && cd ..

依存関係の管理では、`package.json` に明示的にバージョンを固定することを推奨します。特にネイティブブリッジに関連するライブラリは、React Native のメジャーアップデートと同時に破棄されることがあるため、安定版を選択してください。

実機カメラからのフレーム取得と前処理

リアルタイム処理においては、メインスレッドをブロックしないことが重要です。VisionCamera ではフレームを直接処理できるフックを提供しています。

以下は、フレームを取得して RGB 配列に変換するワークレット関数の例です。

import { useFrameProcessor } from 'react-native-vision-camera';

const processImage = (frame) => {
  'worklet'; // メインスレッド外で動作
  
  const width = frame.width;
  const height = frame.height;
  
  // 生データから YUV 変換などを簡略化した例
  // 実際にニューラルネットワークへ入力可能な形に変換
  const rawData = frame.toRGB(); 
  
  // サイズ補正（例：224x224 へのリサイズ）
  // ここでは疑似コードで表現する実際の JSI 呼び出しが必要
  const normalizedPixelValues = scaleAndNormalize(rawData);
  
  return normalizedPixelValues;
};

const cameraRef = useRef(null);

const frameProcessor = useFrameProcessor((frame) => {
  const data = processImage(frame);
  // 非同期で推論エンジンへ渡す処理を別スレッドへ委譲
  runAsyncInference(data);
}, []);

return <Camera ref={cameraRef} frameProcessor={frameProcessor} />;

このように `useFrameProcessor` を活用することで、レンダリングループを維持しつつデータを抽出できます。ただし、JS 層への転送コストが高いため、可能な限りネイティブ層で推論を行う設計が望ましいです。

ローカルモデルによる推論ロジック

MobileNetV3 Small は、軽量ながら精度を保つために設計されており、モバイル向けに適しています。TensorFlow Lite Interperter を JNI/Swift 経由で呼び出す際のパターンを示します。

// 推論エンジンの初期化クラス（TypeScript インターフェース例）
class InferenceEngine {
  private interpreter: any | null = null;

  async loadModel(modelPath: string): Promise<void> {
    // 非ブロッキングでモデルファイルをロード
    this.interpreter = await new TfLiteInterpreter(modelPath);
  }

  predict(inputTensor: Float32Array): number[] {
    if (!this.interpreter) throw new Error('Model not loaded');
    
    // テンソル入力のセット
    this.interpreter.setInput(inputTensor);
    
    // 実行
    this.interpreter.invoke();
    
    // 結果の取得
    const outputShape = this.interpreter.getOutputShape();
    return this.interpreter.getOutput(outputShape);
  }
}

ここで重要なのは、`invoke()` 呼出時にアプリの UI がフリーズしないよう、必ずワーカーやネイティブバックグラウンド処理で実行することです。

パフォーマンスチューニング手法

バッテリー消費と滑らかな動きの両立は、実用性を決定づけます。以下の戦略を取り入れることで、リソース効率を改善できます。

1. フレームスキップ戦略

全てのフレームで推論を行う必要はありません。一定間隔（例：5 フレームに 1 回）のみ処理を実行します。

let frameCount = 0;
const SKIP_INTERVAL = 5;

if (frameCount % SKIP_INTERVAL === 0) {
  // 推論実行
}
frameCount++;

2. メモリプーリングの活用

頻繁なアロケーションはガベージコレクションを誘発し、ジッターの原因となります。再利用可能なバッファ領域を事前に確保します。

また、モデルの重み付けについては float16 や int8 への量子化を検討すべきです。これにより、計算精度のわずかな低下に対し、メモリアクセス帯域幅の大幅な節約が可能になります。

UI レンダリングとの統合

認識結果を視覚化する際、React の再レンダリング頻度に注意が必要です。Bounding Box やラベルの描画は、`SharedValue` を使用してアニメーションノードとして処理し、JavaScript スレッドから直接操作しないようにします。

import { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';

// 認識確率を共有値で管理
const confidenceScore = useSharedValue(0);

// アニメーションスタイル定義
const animatedStyle = useAnimatedStyle(() => {
  return {
    opacity: Math.min(confidenceScore.value / 80, 1.0), // 閾値を超えた場合に透過度を調整
    transform: [{ scale: confidenceScore.value > 0 ? 1 : 0.9 }],
  };
});

このアプローチにより、UI クラスターの変化があってもメインスレッドの負荷を抑えながら、スムーズなフィードバック表示を実現します。