はじめに
こんにちは！前回の記事では、Next.js + FastAPI + MySQLでPOSアプリケーションを構築しました。今回はその続編として、既存のNext.jsアプリをFlutterでネイティブアプリとして再実装し、WebとネイティブどちらからでもアクセスできるハイブリッドなPOSシステムを構築した体験談をお話しします。
なぜFlutterでネイティブ化したのか？
モバイルPOSの需要
POSシステムにおいて、タブレットやスマートフォンでの利用シーンが増加しています。特に：
- 移動販売での利用
- イベント会場での受付・決済
- バーコードスキャン機能の追加
Webアプリでもカメラアクセスは可能ですが、ネイティブアプリの方が安定性とパフォーマンスで優位性があります。
アーキテクチャの選択
既存のNext.jsアプリを活かしつつ、モバイルネイティブの利点も得るため、以下の構成を採用しました：
┌─────────────────┐ ┌─────────────────┐
│ Next.js Web │ │ Flutter Native │
│ App │ │ App │
└─────────┬───────┘ └─────────┬───────┘
│ │
└──────────┬───────────┘
│
┌─────────────────┐
│ FastAPI │
│ Backend │
└─────────┬───────┘
│
┌─────────────────┐
│ MySQL │
│ Database │
└─────────────────┘
実装フェーズと技術選定
Phase 1: プロジェクトセットアップ
# Flutterプロジェクト作成
flutter create pos_app_flutter
cd pos_app_flutter
# 必要な依存関係を追加
flutter pub add provider http mobile_scanner permission_handler
主要パッケージの選定理由：
- provider: 状態管理（Redux的なアプローチよりもシンプル）
- http: API通信
- mobile_scanner: バーコードスキャン（camera + MLKit）
- permission_handler: カメラ権限管理
Phase 2: 基本UI実装
Next.jsアプリのデザインを参考に、Material Design 3でFlutter版を実装しました。
// 商品検索ウィジェット例
class ProductSearchWidget extends StatefulWidget {
@override
Widget build(BuildContext context) {
return Card(
child: Column(
children: [
TextField(
decoration: InputDecoration(
labelText: '商品コード',
suffixIcon: IconButton(
icon: Icon(Icons.search),
onPressed: _searchProduct,
),
),
),
// 検索結果表示
Consumer<PosProvider>(
builder: (context, provider, child) {
return provider.currentProduct != null
? ProductCard(product: provider.currentProduct!)
: SizedBox.shrink();
},
),
],
),
);
}
}
Phase 3: 状態管理の実装
Providerパターンで、Next.jsアプリと同等の状態管理を実現：
class PosProvider extends ChangeNotifier {
final ApiService _apiService = ApiService();
// 商品検索関連
Product? _currentProduct;
bool _isSearching = false;
// 購入リスト関連
final List<PurchaseItem> _purchaseList = [];
// 合計金額計算（10%税込み）
int get totalAmount => _purchaseList.fold(0, (sum, item) =>
sum + (item.totalPrice * 1.1).round());
Future<void> searchProduct(String code) async {
_isSearching = true;
notifyListeners();
try {
final product = await _apiService.searchProduct(code);
_currentProduct = product;
} catch (e) {
_currentProduct = null;
} finally {
_isSearching = false;
notifyListeners();
}
}
}
Phase 4: API統合
既存のFastAPIと完全互換性を保ちつつ実装：
class ApiService {
static const String _baseUrl = 'https://your-api-domain.com';
static const String _apiKey = 'your-secure-api-key';
Future<Product?> searchProduct(String code) async {
final response = await http.get(
Uri.parse('$_baseUrl/products/$code'),
headers: {
'Content-Type': 'application/json',
'X-API-Key': _apiKey,
},
);
if (response.statusCode == 200) {
final data = json.decode(response.body);
return Product.fromJson(data);
}
return null;
}
}
Phase 5: 税計算とモーダル実装
Next.jsアプリと同様の税計算ロジックをFlutterで実装：
class TaxModalWidget extends StatelessWidget {
final int totalAmount;
final VoidCallback onContinue;
@override
Widget build(BuildContext context) {
final taxAmount = (totalAmount * 0.1).round();
final totalWithTax = totalAmount + taxAmount;
return Container(
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.8),
),
child: Center(
child: Card(
child: Padding(
padding: EdgeInsets.all(24),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text('購入確認', style: Theme.of(context).textTheme.headline6),
SizedBox(height: 16),
_buildAmountRow('小計', totalAmount),
_buildAmountRow('消費税(10%)', taxAmount),
Divider(),
_buildAmountRow('合計', totalWithTax, isTotal: true),
SizedBox(height: 24),
Row(
children: [
Expanded(
child: ElevatedButton(
onPressed: onContinue,
child: Text('購入確定'),
),
),
],
),
],
),
),
),
),
);
}
}
バーコードスキャン機能の実装
ネイティブアプリの最大の利点であるバーコードスキャン機能を実装しました。
カメラ権限設定
<!-- android/app/src/main/AndroidManifest.xml -->
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" android:required="false" />
<!-- ios/Runner/Info.plist -->
<key>NSCameraUsageDescription</key>
<string>商品のバーコードをスキャンするためにカメラを使用します</string>
バーコードスキャナー画面
class BarcodeScannerScreen extends StatefulWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('バーコードスキャン')),
body: Column(
children: [
Expanded(
flex: 4,
child: MobileScanner(
onDetect: (capture) {
final code = capture.barcodes.first.rawValue;
if (code != null) {
Navigator.pop(context, BarcodeResult(code: code));
}
},
),
),
Expanded(
flex: 1,
child: Container(
padding: EdgeInsets.all(16),
child: Text(
'バーコードをカメラに向けてスキャンしてください',
style: TextStyle(fontSize: 16),
textAlign: TextAlign.center,
),
),
),
],
),
);
}
}
認証とセキュリティ対策
ネイティブアプリからのAPI利用において、セキュリティは重要な課題です。
API キー認証の実装
# FastAPI側での実装
from fastapi import Header, HTTPException
async def verify_api_key(x_api_key: str = Header(...)):
if x_api_key != "your-secure-api-key":
raise HTTPException(status_code=401, detail="無効なAPIキーです")
return x_api_key
@app.get("/products/{code}")
async def get_product(
code: str,
api_key: str = Depends(verify_api_key)
):
# 商品検索ロジック
pass
CORS設定の調整
from fastapi.middleware.cors import CORSMiddleware
app.add_middleware(
CORSMiddleware,
allow_origins=[
"https://your-nextjs-app.vercel.app", # Next.jsアプリ
"https://your-api-domain.com", # 本番API
],
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
デプロイメントと配布
Android APK生成
# リリースビルド
flutter build apk --release
# APKファイルの場所
# build/app/outputs/flutter-apk/app-release.apk
配布戦略
- 内部テスト: APKファイルを直接配布
- Google Play Store: 将来的なパブリック配布
- Enterprise配布: 企業向けの専用配布チャネル
パフォーマンス比較
実際の使用において、Webアプリとネイティブアプリのパフォーマンスを比較しました：
| 機能 | Next.js Web | Flutter Native |
|---|---|---|
| 起動時間 | 2.3秒 | 1.1秒 |
| バーコードスキャン | PWA制約あり | ネイティブサポート |
| オフライン対応 | 限定的 | 完全対応可能 |
| プッシュ通知 | Web通知 | ネイティブ通知 |
課題と学び
開発効率の課題
- コード重複: UI部分の実装が2重になる
- メンテナンス: WebとNativeの同期が必要
- テスト工数: 2つのプラットフォームでのテストが必要
解決アプローチ
- 共通API設計: バックエンドを共通化
- デザインシステム: Figmaでの統一デザイン
- 自動化: CI/CDでの同期デプロイ
まとめ
Next.jsで構築したPOSアプリをFlutterでネイティブ化することで：
✅ 既存のWebアプリユーザーはそのまま利用可能
✅ モバイルユーザーはネイティブアプリの恩恵を享受
✅ バーコードスキャンなどのネイティブ機能を追加
✅ 統一されたバックエンドAPIで効率的な運用
を実現できました。
開発工数は増加しますが、ユーザー体験の向上とビジネス要件への対応力が大幅に改善されました。特に小売業界では、WebとNativeの両方に対応することで、様々な利用シーンに対応できるPOSシステムを構築できたと考えています。
次回は、このハイブリッドアプリにリアルタイム在庫管理機能を追加した話をお届けする予定です！