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

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技術に精通したチームがモバイルアプリ開発に 取り組める まとめ

18. None