---
title: Capacitorでスマホアプリ開発
tags: 
author: [DE-TEIU🍟](https://www.docswell.com/user/de_teiu_tkg)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/YJ9WQDDRJ3.jpg?width=480
description: Capacitorでスマホアプリ開発 by DE-TEIU🍟
published: June 18, 24
canonical: https://www.docswell.com/s/de_teiu_tkg/5YWPY9-2024-06-18-203659
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/YJ9WQDDRJ3.jpg)

Capacitorでスマホアプリ開発
Capacitorでスマホアプリ開発
2024/06/18(火)
クラメソさっぽろIT勉強会 (仮) #3
DE-TEIU(@de_teiu_tkg)
クラメソさっぽろIT勉強会 (仮) #3 2024/06/18
1


# Page. 2

![Page Image](https://bcdn.docswell.com/page/GJ8NG33GED.jpg)

Capacitorでスマホアプリ開発
自己紹介
名前 ： DE-TEIU（@de_teiu_tkg）
職業 ： 株式会社 LIC エンジニア(雑用)
趣味 ： クソアプリ開発、麻雀
サイト： Uselesscode
つい最近、メモアプリをGoogle Playで
公開しました。あとで軽く紹介します
クラメソさっぽろIT勉強会 (仮) #3 2024/06/18
2


# Page. 3

![Page Image](https://bcdn.docswell.com/page/LJLPGVVXER.jpg)

Capacitorでスマホアプリ開発
クロスプラットフォーム開発の話
クラメソさっぽろIT勉強会 (仮) #3 2024/06/18
3


# Page. 4

![Page Image](https://bcdn.docswell.com/page/47M4QGG3EW.jpg)

Capacitorでスマホアプリ開発
世はまさにクロスプラットフォーム戦
国時代
Tauri
React Native
Cordova
Unity
Flutter
などなど
クラメソさっぽろIT勉強会 (仮) #3 2024/06/18
4


# Page. 5

![Page Image](https://bcdn.docswell.com/page/P7RW8ZZRE9.jpg)

Capacitorでスマホアプリ開発
メリット
1つのプロジェクトで様々なOS用のアプリが作れる
→ Android、MacOS、iOS、Windows、Linuxなどなど
UIを作りやすい気がする。(自分で好きな開発環境を選べるからか)
デメリット
OS固有の機能を呼び出しにくい
→ プラグインとか作れば呼べるけど、ひと手間かかったりする
→ OSの最新機能とかは呼べないかも
実行速度が遅くなるかも
クラメソさっぽろIT勉強会 (仮) #3 2024/06/18
5


# Page. 6

![Page Image](https://bcdn.docswell.com/page/PJXP899YEX.jpg)

Capacitorでスマホアプリ開発
Capacitor触ってみました
クラメソさっぽろIT勉強会 (仮) #3 2024/06/18
6


# Page. 7

![Page Image](https://bcdn.docswell.com/page/3JKDKPP47D.jpg)

Capacitorでスマホアプリ開発
Capacitorとは
https://capacitorjs.jp/docs
クラメソさっぽろIT勉強会 (仮) #3 2024/06/18
“
“ Capacitorはクロスプラットフォームのネイティブランタイムで、
最新のWebツールを使用して、iOS、Androidなどでネイティブに
動作するパフォーマンスの高いモバイルアプリケーションを簡単
に構築することができます。ハイブリッドアプリの次の進化とし
て、CapacitorはWebネイティブアプリを作成し、必要なときにネ
イティブSDKへのフルアクセスを犠牲にすることなく、Webファ
ーストで構築したいチームに最新のネイティブコンテナアプロー
チを提供します。
7


# Page. 8

![Page Image](https://bcdn.docswell.com/page/LE3RZXXD75.jpg)

Capacitorでスマホアプリ開発
つまり何？
フロントエンドの技術（HTML、CSS、JavaScript）だけでスマホアプ
リが作れるOSS。
クラメソさっぽろIT勉強会 (仮) #3 2024/06/18
8


# Page. 9

![Page Image](https://bcdn.docswell.com/page/8EDYR222EG.jpg)

Capacitorでスマホアプリ開発
Capacitorにはどんな特徴があるの？
開発に使用するフレームワークやライブラリに縛りなし
→ ブラウザ上で動くものなら何使ってもok
Cordovaのプラグインとそこそこ互換性がある
→ Cordovaで開発したアプリをCapacitorに移行できる
公式ドキュメントが充実してる
PWAも作れる
クラメソさっぽろIT勉強会 (仮) #3 2024/06/18
9


# Page. 10

![Page Image](https://bcdn.docswell.com/page/V7P6W11LJ8.jpg)

Capacitorでスマホアプリ開発
Capacitorにはどんな特徴があるの？
プラグインも充実してる
広告表示
SQLite
プッシュ通知
スプラッシュスクリーン
ファイルシステム
デバイス制御(カメラ、GPS)
などなど
クラメソさっぽろIT勉強会 (仮) #3 2024/06/18
10


# Page. 11

![Page Image](https://bcdn.docswell.com/page/2JV38YY6EQ.jpg)

Capacitorでスマホアプリ開発
Capacitorにはどんな特徴があるの？
Webアプリ用のプロジェクトに、後からCapacitorを導入してスマホア
プリ化できる。最初から入れても良いし、後で入れても良い。
手順も簡単
1. npmとかyarnでCapacitorを現在のプロジェクトに導入
2. スマホアプリ用にビルドする
3. ビルド後にできたプロジェクトをAndroid StudioやXcodeで開く
クラメソさっぽろIT勉強会 (仮) #3 2024/06/18
11


# Page. 12

![Page Image](https://bcdn.docswell.com/page/5EG359927L.jpg)

Capacitorでスマホアプリ開発
クラメソさっぽろIT勉強会 (仮) #3 2024/06/18
12


# Page. 13

![Page Image](https://bcdn.docswell.com/page/4JQ5ZWW97P.jpg)

Capacitorでスマホアプリ開発
ということで今回作ったアプリがこちら
クラメソさっぽろIT勉強会 (仮) #3 2024/06/18
13


# Page. 14

![Page Image](https://bcdn.docswell.com/page/K7493K1RE1.jpg)

Capacitorでスマホアプリ開発
クラメソさっぽろIT勉強会 (仮) #3 2024/06/18
14


# Page. 15

![Page Image](https://bcdn.docswell.com/page/LJ1K1XGV7G.jpg)

Capacitorでスマホアプリ開発
名前の通りただのメモ帳
広告なし
アプリ起動時に表示する
画面を設定で変更可能
クラメソさっぽろIT勉強会 (仮) #3 2024/06/18
15


# Page. 16

![Page Image](https://bcdn.docswell.com/page/GJWD8NK372.jpg)

Capacitorでスマホアプリ開発
平均評価は脅威の★5.0
(評価数:1件)
クラメソさっぽろIT勉強会 (仮) #3 2024/06/18
16


# Page. 17

![Page Image](https://bcdn.docswell.com/page/4EZG83ZGJ3.jpg)

Capacitorでスマホアプリ開発
ちょっとだけデモをやる
クラメソさっぽろIT勉強会 (仮) #3 2024/06/18
17


# Page. 18

![Page Image](https://bcdn.docswell.com/page/Y76YPXZQEV.jpg)

Capacitorでスマホアプリ開発
まとめ
Capacitorを使うと、フロントエンドの技術だけでスマホアプリが
作れる
Cordovaからの移行がしやすい
既存のWebアプリプロジェクトに後から追加できる
(かき揚げと同じ)
プラグインも色々あるのでわりと融通が利く
クラメソさっぽろIT勉強会 (仮) #3 2024/06/18
18