Créer des Applications Mobiles avec Vue et 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が必要です。また、アプリストアでアプリを配布するには、Apple Developer ProgramとGoogle Play Consoleへの登録が必要です。

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

npx cap open ios
npx cap open android

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

Capacitorライブリロード

モバイルデバイスでライブリロードを有効にするには、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プラグインをインストールし、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がより良いアプリをより速く構築するのにどのように役立つかを学ぶために、無料アカウントに登録してください。