Vue3_Capacitorでモバイルアプリ開発

Vue3アプリ等のWebアプリを、Capacitorでモバイルアプリ化する方法の紹介です。

Transcript

1. 2026.08.24 / VueSapporo #4 Vue3 & Capacitorでモバイルアプリ開発 三浦 恒樹 (MIURA KOUKI) / 医療ITエンジニア
2. 自己紹介 - ドゥウェル株式会社 に所属（マネージャー） 医療ITエンジニア / 診療情報管理士 / 上級医療情報技師 / 医用画像情報専門技師 TypeScript / Vue.js / Node.js / Java / C# / PHP - 3兄弟の父、休日は習い事の送り迎えとか... - 参加している勉強会 札幌PHP勉強会 ゆるWeb勉強会 AWS初心者LT会in札幌 hokkaido.js さっぽろ医療IT勉強会 - コーディングBGM ラックライフ BLUE ENCOUNT SHANK Dizzy Sun Fist JBUG札幌 えびてく 札幌すごいAI会 函館本線沿線勉強会 JavaDO クラメソ札幌IT勉強会（仮） 札幌IT石狩鍋 VueSapporo ※運営 - Naru, 名前を呼ぶよ, 初めの一歩, 変わらない空 - Survivor, ポラリス
3. 今日話すこと Vue3で作ったWebアプリを、モバイルアプリにしてみる 01 Capacitorとは？ 02 モバイルアプリ開発の選択肢 03 Vue3 + Capacitorの仕組み 04 実際にAndroidアプリとして動かしてみる 05 Capacitorを使うメリット・注意点
4. まず結論 Vue3 の Webアプリ ▶ Capacitor Capacitor • Vue / React / AngularなどのWebアプリをモバイルアプリ化する • Web技術をそのまま活用できる • App Store / Google Playへ公開できる • カメラ、位置情報、プッシュ通知などのネイティブ機能も利用できる 「Webアプリを作る技術」で、モバイルアプリも作れる。 ▶ iPhone / Android アプリ
5. そもそも「クロスプラットフォーム」とは？ 1つのコードベースから複数のプラットフォームへ アプローチ UIの実体 主な技術 ネイティブ Native UI Swift / Kotlin クロスプラットフォーム Native UI など Flutter / React Native ハイブリッド Web UI Cordova / Capacitor Webアプリ Browser Vue / React / Angular ポイント 「クロスプラットフォーム」といっても、何を共通化しているかが違う。Capacitorが共通化するのは「UIそのもの」＝Web UI。
6. Capacitorはどこにいる？ Web技術をネイティブアプリの中で動かす iOS / Android つまり WebView Vueアプリ ＋ WebView ＋ Native Bridge Vue3 Application Capacitor Runtime 画面はWebView上のVueアプリ。ネイティブ機能は CapacitorのBridge経由で呼び出す。 • Vueのコードは基本そのまま • OSごとのネイティブプロジェクトが生成される Native API Bridge Camera / Files / Push • Native APIはPluginとして追加する
7. CordovaとCapacitor どちらも「Webアプリ × Native」のアプローチ Cordova Capacitor • ハイブリッドアプリの代表的なフレームワーク • Ionicチームが開発 • WebViewを利用する • Cordovaの思想を引き継ぎつつ、現代的なWeb開発と の統合を重視 • Pluginを通してNative APIを利用する • npmベースでVueなどの既存プロジェクトへ導入しやす い • Cordova Pluginとの互換性も持つ 今回は Vue3 + Capacitor を試す。
8. Vue3プロジェクトにCapacitorを追加 ① Capacitorをインストール ② Capacitorを初期化 pnpm add @capacitor/core pnpm add -D @capacitor/cli pnpm exec cap init ③ Webアプリをビルド pnpm build ④ Androidプロジェクトを追加 pnpm add @capacitor/android pnpm exec cap add android → 既存のVue3プロジェクトにnpmパッケージを足していくだけで、ネイティブプロジェクトが生成される。
9. VueアプリとAndroidアプリの関係 Capacitorは「Webアプリをネイティブプロジェクトへ同期」する Vue3 Project ▶ pnpm build dist/ ▶ Android Project cap sync ▶ Android Studio cap open ビルド成果物をネイティブ側へコピーするのが cap sync pnpm exec cap sync → Vue側を変更したら「pnpm build → cap sync」。これがCapacitor開発の基本サイクル。 ▶ Run ▶ Android App
10. Androidアプリとして実行 Android Studioを起動する pnpm exec cap open android Android Studioから 1. Emulatorを起動 またはCLIから pnpm exec cap run android Android Studioを開かずに、接続中のデバイス ／Emulatorへそのままデプロイして実行できる。 2. 対象デバイスを選択 3. Run ▶ Vueのコードを書いて、いつものビルドをして、Androidの実機／Emulatorで動く。
12. ネイティブ機能も使える 例えばカメラ Pluginを追加する 呼び出しの流れ Vue pnpm add @capacitor/camera ▼ Vueから利用する const photo = await Camera.getPhoto({ resultType: CameraResultType.Uri }) Capacitor ▼ Android / iOS ▼ Camera → TypeScriptのAPIとして呼ぶだけ。Swift / Kotlinを書かずにNative機能へ到達できる。
13. Capacitorのメリット Webエンジニアにとって始めやすい • Vueの知識をそのまま活用できる • 既存Webアプリをベースにできる • TypeScript / npmエコシステムを利用できる • iOS / Androidのコードをある程度共通化できる • 必要に応じてNative APIを利用できる 「Webエンジニアがモバイルアプリを始める」という用途と、とくに相性が良い。
14. 注意点 「WebアプリがそのままNativeになる」わけではない • UIは基本的にWebView上で動く（Native UIとは異なる） • OSごとの差異への対応が必要 • カメラ、通知などは権限設定が必要 • iOS / Androidのビルド環境が必要 • App Store / Google Play公開には、それぞれの審査・設定が必要 モバイル固有のUXを、完全に無視できるわけではない。
15. どんなときにCapacitor？ 向いている Native / Flutterなどを検討したい • 既存のWebアプリをモバイル化したい • 高度なNative UIが必要 • Vue / ReactなどWeb技術を活かしたい • GPUを多用する • iOS / Android両方に対応したい • 高いパフォーマンスが必要 • カメラ・位置情報・通知などを利用したい • モバイル専用UXを徹底的に作り込みたい • Webとモバイルでロジックを共有したい → 「何を共通化したいか」で選ぶ。UIごと共通化したいならCapacitorが効く。
16. まとめ — Vue3 × Capacitor Vue3 ▶ Capacitor 今日覚えてほしい3つ 1 CapacitorはWebアプリをNativeアプリとして動かすための仕組み 2 Vue3の知識を活かしてモバイルアプリを開発できる 3 WebとNativeのいいとこ取りができる一方、完全なNativeアプリではない Webエンジニアのモバイルアプリ開発への入口として、Capacitor！ ▶ iOS / Android
17. Appendix — 今回使用したコマンド # Capacitor pnpm add @capacitor/core pnpm add -D @capacitor/cli # 初期化 pnpm exec cap init # Android pnpm add @capacitor/android pnpm exec cap add android ご清聴ありがとうございました。 # Build & Sync pnpm build pnpm exec cap sync # Android Studio pnpm exec cap open android # Android実行 pnpm exec cap run android