Webからモバイルへ Vue.js × Capacitor 活用事例

Vue.js v-tokyo Meetup #23
https://vuejs-meetup.connpass.com/event/355473/

Transcript

1. 2025年6月13日 Naoki Haba Webからモバイルへ Vue.js × Capacitor 活用事例 Vue.js v-tokyo Meetup #23
2. 2 • Naoki Haba • 株式会社 コドモン ソフトウェアエンジニア • Vue Fes Japan 2025 コアスタッフ 自己紹介
3. 3 Capacitorとは何か
4. 4 Capacitorとは何か
5. 5 Capacitorとは何か https://capacitorjs.jp/blog/how-capacitor-works
6. 6 Capacitorとは何か https://capacitorjs.jp/blog/how-capacitor-works
7. 7 Capacitorとは何か https://capacitorjs.jp/blog/how-capacitor-works
8. 8 Capacitorとは何か ① Capacitorインストール（今回はiOSのみ） ② プロジェクトのビルド & iOSプラットフォームの追加
9. 9 Capacitorとは何か ③ ビルドファイルをiOSプロジェクトに同期 & 起動 ④ 起動完了🚀
10. 10 Capacitorとは何か https://capacitorjs.jp/blog/how-capacitor-works
11. 11 コドモンにおけるCapacitorの活用事例
12. 12 すべての先生に 子どもと向き合う 時間と心のゆとりを こんなプロダクトを開発しています メインプロダクトは、保育・教育施設向けWebアプリケーション。 保護者と施設のやり取りを支えるモバイルアプリケーションや、施設職員向けモバイル版 アプリケーション、外部サービスと連携するAPIなども開発しています。
13. 13 • Flutter • React Native • NativeScript etc.. コドモンにおけるCapacitorの活用事例
14. 14 コドモンにおけるCapacitorの活用事例
15. 15 • ビルド速度の課題 • プラグインのメンテナンス継続性 コドモンにおけるCapacitorの活用事例
16. 16 • ビルド速度の改善 • Apache Cordova との高い互換性 • Live Update 機能を活用したリリースフロー高速化 コドモンにおけるCapacitorの活用事例
17. 17 • Web技術（HTML、CSS、JavaScript）を活用して モバイルアプリケーション開発が可能 • Web技術に精通したチームがモバイルアプリ開発に 取り組める まとめ