現場写真がスマホで撮れない！WEB版は動くのになぜ？

問題発生

モバイルアプリの「現場記録」機能で、カメラ撮影した写真が表示されない。

WEBブラウザでは動くのに、アプリだと真っ白。

---

原因調査

1. Chrome DevToolsで確認

   • chrome://inspect でAndroid WebViewをデバッグ
   • コンソールエラー: Failed to load resource: net::ERR_INVALID_URL

2. base64データを確認

   • image.base64String が undefined になっている
   • Capacitor 6.x で仕様が変わっていた

---

解決策

Capacitor 6.x では webPath を使う方が推奨されていた。

```typescript const image = await Camera.getPhoto({ quality: 90, allowEditing: false, resultType: CameraResultType.Uri // Base64 → Uri に変更 })

// webPath を直接使う setPhoto(image.webPath!) ```

これで解決！

---

学び

• 公式ドキュメントは最新版を見る

  • Capacitor 5.x の記事を参考にしていた
  • バージョンアップで仕様が変わる

• WebとNativeの違い

  • ブラウザ: FileReader でbase64変換
  • Native: プラグインが自動でパス変換

• デバッグ方法

  • Chrome DevToolsの chrome://inspect が最強
  • adb logcat でネイティブログも見る