Zenn
✨

Vue3+Capacitorでのモバイルアプリ開発

2022/11/21に公開
Vue.js
Android Studio
Capacitor
tech

はじめに

前回の記事で作成したToDoアプリをiOSやAndroid上で実行できるようにします。Quasar上でも開発できるのですが、バージョンが古かったため、直接Capacitorを利用しています。

Capacitorとは

※公式サイトからの引用です。
Capacitor は、iOS、Android、Web 上でネイティブに動作する最新の Web アプリケーションを簡単に構築することができるクロスプラットフォームのネイティブライブラリです。ハイブリッドアプリの次の進化を象徴する Capacitor は、Web Native appsを作成し、必要に応じてネイティブ SDK への完全なアクセスを犠牲にすることなく、Web ファーストで構築したいチームに、最新のネイティブコンテナアプローチを提供します。

また、Capacitorプラグインをインストールすることで、ネイティブAPI(カメラやPush通知など)へのアクセスをWebアプリで提供します。

モバイルアプリ開発

Capacitorの公式サイトに従い、Capacitorを追加します。

  1. Capacitorをインストールし、ビルドする。ここでは適当です。
$ npm i @capacitor/core
$ npm i -D @capacitor/cli
$ npx cap init
[?] What is the name of your app?
    This should be a human-friendly app name, like what you'd see in the App Store.
✔ Name … quasar-todo
[?] What should be the Package ID for your app?
    Package IDs (aka Bundle ID in iOS and Application ID in Android) are unique identifiers for apps. They must be in reverse domain name notation, generally representing a domain name that you or your company owns.
✔ Package ID … com.example.app
✔ Creating capacitor.config.ts in /home/XXXX/quasar-todo in 4.97ms
[success] capacitor.config.ts created!
$ npm run build
  1. AndroidまたはiOSのプラットフォームをインストールし、それぞれのプロジェクトの作成を実行する。すると、各プロジェクトのフォルダが生成される。
npm i @capacitor/android @capacitor/ios
npx cap add android
npx cap add ios
  1. ビルドしたアプリを更新したい場合は、以下のコマンドを実行する。
npx cap sync

Androidアプリ実行

今回は、VS CodeをWSLで、Android StudioをWindows上で行っています。Windows11では、WSLg(Linux GUI)でAndroid Studioが利用できるようですが、Windows10は素直にWindowsで開発した方が環境構築は楽です。

Android Studioセットアップ＆日本語化

  1. Android Studioをダウンロードし、インストールする。

  2. [Menu] - [Help]を選択し、BuildバージョンからAIの番号を確認する。
    「Build #AI-213.7172.25.2113.9123335, built on September 30, 2022」

  3. Japanese Language Pack / 日本語言語パック
    で、AI番号に対応するバージョン「213.370」のzipファイルをダウンロードする。

  4. 初回起動時に表示されるWelcmon to Android Studioから、[Plugins] - [⚙️] - [Install Plugin from Disk]から先ほどダウンロードしたzipファイルを選択し、Restartする。

アプリ実行

  1. 作成したアプリから、以下のフォルダをCドライブ上にコピーする。VS Codeのフォルダを右クリックし、「Exploerで表示」を利用する。
    ・android
    ・node_modules\@capacitor

  2. Android StudioからOpenを選択し、androidフォルダを選択する。すると、Gradleプロジェクトを読み込み、SDKやJavaのライブラリを一通りダウンロードしてくれる。

  3. 最後に、右上の実行ボタンを押すと、仮想のAndroidデバイスが起動し、作成したVueアプリが実行される。Android 11以降の実機をお持ちの方は、開発者オプションのワイヤレスデバッグから、「Pair devices over Wi-Fi」でQAコードを読み込むと、自分のAndroid端末でも確認できる。

iOSアプリ実行

iOS版を確認するためには、MacOS+XCodeが必要になるので、今回は割愛しました。もし、実施する場合は、2021/6/23以降のMacOSから無料配布に切り替わっており、例えば、ここなどからmacOS 12(Monterey, 15G程度)のISOファイルがダウンロードして、VMWare Workstation Player＋Auto-Unlockerで起動できると思います。

おわりに

モバイル開発の世界では、React Native(Typescript)、Flutter(Dart)などが主流ですが、VueでもCapacitorを利用すれば、モバイル開発できるという紹介でした。
あくまで、VueでWeb開発してたけど、スマホやタブレットのネイティブアプリ機能を使いたいという需要があれば、Capacitorを使ってみてください。

Discussion