Capacitor / Ionic Reactでモバイルアプリを開発した話
はじめましてumayukiと申します。
前々から個人開発に興味があり、作っては途中で辞めてしまうを繰り返していたのですが、今回はじめてリリースまで辿りつくことができました。
自分は普段Webのフロントエンドをメインでやっているのですが、今回Capacitor / Ionicを使って初めてモバイルアプリのリリースにも挑戦しましたので、そのあたりを中心にご紹介できたらと思います。
今回作ったサービス
自分の趣味である競馬で使えるWeb・モバイルアプリを作りました。
競馬の出馬表に自分のメモを書き込めるノートエディタサービスとなっています。
かなりニッチなアプリだとは思いますが、競馬の予想や回顧をまとめてる人にとって便利だと思いますので、是非使ってみてください。
（作った理由など↓）
Capacitor / Ionicとは？
-
Capacitor
→ ネイティブの機能にアクセスできるプラグインなどが用意されており、Web技術（HTML / CSS / JavaScript）で作ったWebアプリをネイティブアプリ化してくれる技術（いわゆるガワネイティブというやつ）。 -
Ionic Framework
→ ネイティブ風のUIを再現できるUIライブラリ。Angular、React、Vueにも対応。（自分は慣れてるReactを使いました）
モバイルアプリ化するだけならCapacitorだけでもいけるので、最初はNext.jsかRemixのSPAモードで作ったものをアプリ化しようと思っていましたが、せっかく作るならばUIや画面遷移などもネイティブアプリっぽくしたいなと途中で思うようになり、Ionic（React）を採用することにしました。
Ionicはルーティングなどに少し独特の癖がありますが、ネイティブの機能を使うところ以外は基本的にはWebアプリを作るのと同じ感覚で開発できました。
また、ネイティブアプリっぽいUIにしたいところはIonicのUIコンポーネントを使っていますが、それ以外は基本的にshadcn/uiで構築しており、Webで使ってるReactライブラリ等がそのまま使い回せたのも良かったポイントです。
そして出来上がったアプリも、そんなに違和感ないというか、パフォーマンスも悪くないんじゃないかな？と思っています。まぁネイティブアプリは開発したことないので比較はできないのですが…。
結果的に大きく躓くこともなくリリースできたので、現状の自分のスキル的にはベストな選択肢だったと満足しています。
（参考にさせていただいた記事・書籍↓）
アプリ向けに導入したCapacitorプラグイン
参考までに一例をご紹介します。
-
@capacitor/browser
→ アプリ内ブラウザとしてWebページを開ける -
@capacitor/keyboard
→ キーボードの出現を検知してくれる -
@capacitor/preferences
→ localStorageの代わりにアプリ内でキー/バリュー保存できる（localStorageだとアプリでは永続化されない） -
@capacitor/splash-screen
→ スプラッシュスクリーンの制御で使用 -
@capgo/capacitor-social-login
→ ソーシャルログインで使用 -
@revenuecat/purchases-capacitor
→ サブスクリプションの支払いでRevenueCatを使うために使用
App Storeでの公開について
App Reviewなど初めての体験だったので戸惑うことも多かったですが、下記の記事が大変参考になりました。
審査もそれほど大きな修正もなく1回の修正で通ることができました。
Webだとサーバーに上げれば即時反映できますが、アプリの場合ちょっと修正したいことがあっても審査を通さなければならないのは若干もどかしく感じるところですね…。
（ちなみに）Android版について
Capacitor / Ionicで開発していますので、もちろんAndroid版もビルドしようと思えばできるのですが、最近個人でのリリースのハードルが上がったようなのと、複数プラットフォームを管理するのも大変そうなので一旦見送ることにしました。
もし一定の需要があれば挑戦はしたいとは思っていますが…。
おわりに
実際に自分の作ったアプリがApp Storeで公開されているのを見ると、やはり嬉しいものですね。達成感があるというか。
ガワネイティブではありますが、これで憧れの（？）アプリ開発者になれました。
自分のようにWeb開発者だけどモバイルアプリも作ってみたいと考えている人にCapacitor / Ionicはオススメです。
それでは。
Discussion