VueとCapacitorを使用したモバイルアプリの構築

このチュートリアルでは、Capacitorを使用してVueウェブアプリケーションをネイティブモバイルアプリに変換するプロセスを案内します。オプションとして、Tailwind CSSベースのモバイルUIライブラリであるKonsta UIを使用してモバイルUIを強化することもできます。

Capacitorについて

Capacitorは、任意のウェブプロジェクトに簡単に統合し、アプリケーションをネイティブモバイルアプリに変換することを可能にする画期的なツールです。ネイティブのXcodeおよびAndroid Studioプロジェクトを生成し、JavaScriptブリッジを通じてカメラなどのネイティブデバイス機能へのアクセスを提供します。

Vueアプリの準備

まず、次のコマンドを実行して新しいVueアプリを作成します：

vue create my-app
cd my-app
npm install

ネイティブモバイル展開のためにVueアプリを準備するには、プロジェクトをエクスポートする必要があります。package.jsonファイルにスクリプトを追加して、Vueプロジェクトをビルドし、コピーします：

{
  "scripts": {
    // ...
    "build": "vue-cli-service build"
  }
}

buildコマンドを実行すると、プロジェクトのルートディレクトリに新しいdistフォルダーが表示されるはずです。このフォルダーは後でCapacitorによって使用されます。

VueアプリにCapacitorを追加

Vueウェブアプリをネイティブモバイルコンテナに変換するには、次の手順に従います：

Capacitor CLIを開発依存関係としてインストールし、プロジェクト内でセットアップします。セットアップ中に名前とバンドルIDのデフォルト値を受け入れます。
コアパッケージおよびiOSおよびAndroidプラットフォームに関連するパッケージをインストールします。
プラットフォームを追加すると、Capacitorはプロジェクトのルートに各プラットフォームのフォルダーを作成します：

# Install the Capacitor CLI locally
npm install -D @capacitor/cli

# Initialize Capacitor in your Vue project
npx cap init

# Install the required packages
npm install @capacitor/core @capacitor/ios @capacitor/android

# Add the native platforms
npx cap add ios
npx cap add android

これで、Vueプロジェクトに新しいiOSおよびandroidフォルダーが表示されるはずです。

capacitor.config.jsonファイルを更新して、webDirがビルドコマンドの結果を指すようにします：

{
  "appId": "com.example.app",
  "appName": "my-app",
  "webDir": "dist"
}

これで、Vueプロジェクトをビルドし、Capacitorと同期できます：

npm run build
npx cap sync

ネイティブアプリのビルドとデプロイ

iOSアプリを開発するにはXcodeがインストールされている必要があり、AndroidアプリにはAndroid Studioがインストールされている必要があります。さらに、アプリをアプリストアで配布するために、iOS用のApple Developer ProgramとAndroid用のGoogle Play Consoleに登録する必要があります。

Capacitor CLIを使用して両方のネイティブプロジェクトを開きます：

npx cap open ios
npx cap open android

Android StudioまたはXcodeを使用して接続されたデバイスにアプリをデプロイします。

Capacitor Live Reload

Capacitorアプリがネットワーク上の特定のURLからコンテンツを読み込むことによって、モバイルデバイスでライブリロードを有効にします。

ローカルIPアドレスを見つけて、capacitor.config.tsファイルを正しいIPとポートで更新します：

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'dist',
  bundledWebRuntime: false,
  server: {
    url: 'http://192.168.x.xx:8080',
    cleartext: true
  }
};

export default config;

これらの変更をネイティブプロジェクトにコピーして適用します：

npx cap copy

これで、Vueアプリを更新すると、アプリが自動的にリロードされ、変更が表示されるようになります。

Capacitorプラグインの使用

Capacitorプラグイン（たとえば、Shareプラグイン）をインストールし、Vueアプリで使用します：

npm i @capacitor/share

パッケージをインポートし、アプリ内でshare()関数を呼び出します：

<template>
  <div>
    <h1>Welcome to Vue and Capacitor!</h1>
    <button @click="share">Share now!</button>
  </div>
</template>

<script setup lang="ts">
import { Share } from '@capacitor/share';

async function share() {
  await Share.share({
    title: 'Open Youtube',
    text: 'Check new video on youtube',
    url: 'https://www.youtube.com',
    dialogTitle: 'Share with friends'
  });
}
</script>

新しいプラグインをインストールした後、syncコマンドを実行して、アプリをデバイスに再デプロイします：

npx cap sync

Konsta UIの追加

VueアプリでKonsta UIを使用するには、tailwindを既にインストールしている必要がありますおよびパッケージをインストールする必要があります： VueアプリでKonsta UIを使用するには、パッケージをインストールし、tailwind.config.jsファイルを修正します：

npm i konsta

pages/_app.vueファイルでアプリをAppコンポーネントでラップし、VueページでKonsta UI Vueコンポーネントを使用します。

結論

Capacitorは、既存のウェブプロジェクトに基づいてネイティブアプリケーションを構築するための優れたオプションです。Capgoを追加すれば、アプリにライブ更新を追加することがさらに容易になり、ユーザーが最新の機能やバグ修正に常にアクセスできるようになります。

Capgoがどのようにしてあなたのアプリをより良く、より早く構築できるかを学ぶには、無料アカウントにサインアップしてください。