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