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