Nuxt 3とCapacitorでモバイルアプリを作成する

このチュートリアルでは、新しいNuxt 3アプリから始めて、Capacitorを使用してネイティブの領域に移行し、最終的にはKonsta UIを追加してTailwind CSSモバイルUIを改善します（最後のステップは完全にオプションです）。

Capacitorを使用することで、React Nativeのような新しいスキルを学ぶ必要や大きな修正を必要とせずに、Nuxt 3のWebアプリケーションを簡単にネイティブモバイルアプリに変換できます。

わずか数ステップで、ほとんどのNuxt 3アプリケーションをモバイルアプリに変換できます。

このチュートリアルでは、新しいNuxt 3アプリから始めて、Capacitorを組み込んでネイティブモバイルアプリの領域に移行するプロセスをガイドします。さらに、オプションとしてKonsta UIを使用してTailwind CSSでモバイルUIを強化することもできます。

Capacitorについて

CapacitorJSは本当に革新的です！任意のWebプロジェクトに簡単に組み込むことができ、アプリケーションをネイティブWebviewでラップし、XcodeとAndroid Studioのプロジェクトを生成します。さらに、そのプラグインはJSブリッジを介してカメラなどのネイティブデバイス機能へのアクセスを提供します。

Capacitorを使用すると、複雑なセットアップや急な学習曲線なしに素晴らしいネイティブモバイルアプリを得ることができます。スリムなAPIと合理化された機能により、プロジェクトへの統合が非常に簡単です。Capacitorで完全に機能するネイティブアプリを実現する簡単さに驚くことでしょう！

Nuxt 3アプリの準備

新しいNuxt 3アプリを作成するには、以下のコマンドを実行します：

npx nuxi init my-app
cd my-app
npm install

Nuxtバージョンの選択を求められたら「Nuxt 3」を選択してください。

ネイティブモバイルアプリを作成するには、プロジェクトのエクスポートが必要です。そのため、Nuxtプロジェクトをビルドしてコピーするための簡単なスクリプトをpackage.jsonに含めましょう：

{
  "scripts": {
    // ...
    "generate": "nuxt generate"
  }
}

generateコマンドを実行した後、プロジェクトのルートに新しいdistフォルダが表示されるはずです。

このフォルダは後でCapacitorによって使用されますが、今のところ正しく設定する必要があります。

Nuxt 3アプリへのCapacitorの追加

任意のWebアプリをネイティブモバイルコンテナにパッケージ化するには、最初にいくつかのステップを踏む必要がありますが、その後は単一のsyncコマンドを実行するだけで済みます。

まず、Capacitor CLIを開発依存関係としてインストールし、プロジェクト内でセットアップします。セットアップ中、名前とバンドルIDのデフォルト値を受け入れるにはEnterキーを押すだけです。

次に、コアパッケージとiOSおよびAndroidプラットフォーム用の関連パッケージをインストールする必要があります。

最後に、プラットフォームを追加すると、Capacitorがプロジェクトのルートに各プラットフォーム用のフォルダを作成します：

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

# Initialize Capacitor in your Nuxt 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

この時点で、Nuxt 3プロジェクトに新しいiosとandroidフォルダが表示されているはずです。

これらは実際のネイティブプロジェクトです！

後でAndroidプロジェクトにアクセスするには、Android Studioをインストールする必要があります。iOSの場合は、Macが必要でXcodeをインストールする必要があります。

また、プロジェクトにcapacitor.config.tsファイルが存在し、同期中に使用される基本的なCapacitor設定が含まれています。注意が必要なのはwebDirだけで、これはビルドコマンドの結果を指している必要があります。現在は不正確です。

これを修正するには、capacitor.config.jsonファイルを開いてwebDirを更新します：

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

以下のコマンドを実行して試すことができます：

npm run generate
npx cap sync

最初のコマンドnpm run generateは単にNuxt 3プロジェクトをビルドして静的ビルドをコピーし、2番目のコマンドnpx cap syncはすべてのWebコードをネイティブプラットフォームの適切な場所に同期してアプリで表示できるようにします。

さらに、同期コマンドはネイティブプラットフォームを更新しプラグインをインストールする可能性があるので、新しいCapacitorプラグインをインストールした際は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では、すべての準備が整うのを待つだけで、設定を変更せずに接続されたデバイスにアプリをデプロイできます。例：

android-studio-run

Xcodeでは、シミュレータだけでなく実際のデバイスにアプリをデプロイするために、署名アカウントを設定する必要があります。これを初めて行う場合、Xcodeがプロセスをガイドしてくれます（ただし、Developer Programへの登録が必要です）。その後、上部で選択できる接続されたデバイスでアプリを実行するために、単にplayを押すだけです。例：

xcode-run

おめでとうございます！Nuxt 3のWebアプリをモバイルデバイスに正常にデプロイしました。例：

しかし、開発中にはもっと速い方法もあります…

Capacitorのライブリロード

現在では、すべての最新フレームワークでホットリロードが当たり前になっていますが、良いニュースは、最小限の努力でモバイルデバイス上でも同じ機能を持つことができるということです！

特定のURLからコンテンツを読み込むようにCapacitorアプリを設定することで、ライブリロード機能付きでネットワーク上でローカルにホストされたアプリケーションへのアクセスを有効にします。

最初のステップは、ローカルIPアドレスを確認することです。Macを使用している場合は、ターミナルで以下のコマンドを実行して確認できます：

ipconfig getifaddr en0

Windowsの場合は以下を実行します：

ipconfig

そしてIPv4アドレスを探します。

capacitor.config.tsファイルに別のエントリを追加することで、サーバーから直接アプリを読み込むようにCapacitorに指示できます：

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:3000',
    cleartext: true
  }
};

export default config;

この例ではNuxt 3のデフォルトポートを使用していますが、正しいIPとポートを使用してください。

これらの変更を適用するために、ネイティブプロジェクトにコピーできます：

npx cap copy

copyコマンドはsyncに似ていますが、ネイティブプロジェクトを更新せずに、Webフォルダと設定に加えられた変更のみをコピーします。

これで、Android StudioまたはXcodeを通じてアプリを再度デプロイできます。その後、Nuxtアプリで何か変更を加えると、アプリは自動的にリロードされ、変更が表示されます！

注意として、カメラなどの新しいプラグインをインストールする場合は、依然としてネイティブプロジェクトの再ビルドが必要です。これは、ネイティブファイルが変更され、その場での変更ができないためです。

設定では正しいIPとポートを使用する必要があることに注意してください。上記のコードブロックはデモンストレーション目的でNuxt 3のデフォルトポートを示しています。

Capacitorプラグインの使用

以前から何度か言及してきたCapacitorプラグインの実際の使用方法を見てみましょう。比較的シンプルなプラグインをインストールするには、以下を実行します：

npm i @capacitor/share

Shareプラグインには特別なものはありませんが、ネイティブの共有ダイアログを表示します！これには、パッケージをインポートしてアプリから対応するshare()関数を呼び出すだけで済みます。pages/index.vueを以下のように変更しましょう：

<template>
  <div>
    <h1>Welcome to Nuxt 3 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>

先ほど述べたように、新しいプラグインをインストールする際は、同期操作を実行してからデバイスにアプリを再デプロイする必要があります。これを行うには、以下のコマンドを実行します：

npx cap sync

ボタンを押すと、美しいネイティブ共有ダイアログが動作するのを確認できます！

Konsta UIの追加

Nuxt 3アプリでKonsta UIを使用するには、tailwindがすでにインストールされている必要があり、パッケージをインストールする必要があります：

npm i konsta

さらに、tailwind.config.jsファイルを修正する必要があります：

// import konstaConfig config
const konstaConfig = require('konsta/config')

// wrap config with konstaConfig config
module.exports = konstaConfig({
  content: [
    './pages/**/*.{vue}',
    './components/**/*.{vue}',
  ],
  darkMode: 'media', // or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
})

konstaConfigは、デフォルト（またはカスタム）のTailwind CSS設定を、Konsta UIに必要な追加のバリアントとヘルパーユーティリティで拡張します。

次に、グローバルパラメータ（themeなど）を設定できるように、メインのAppコンポーネントをセットアップする必要があります。

pages/_app.vueで、アプリ全体をAppでラップする必要があります：

<template>
  <App theme="ios">
    <Nuxt />
  </App>
</template>

<script setup>
import { App } from 'konsta/vue';
</script>

サンプルページ

すべてのセットアップが完了したら、Nuxt 3ページでKonsta UI Vueコンポーネントを使用できます。

例えば、pages/index.vueを開いて以下のように変更しましょう：

<template>
  <Page>
    <Navbar title="My App" />

    <Block strong>
      <p>
        Here is your Nuxt 3 & Konsta UI app. Let's see what we have here.
      </p>
    </Block>
    <BlockTitle>Navigation</BlockTitle>
    <List>
      <ListItem href="/about/" title="About" />
      <ListItem href="/form/" title="Form" />
    </List>

    <Block strong class="flex space-x-4">
      <Button>Button 1</Button>
      <Button>Button 2</Button>
    </Block>
  </Page>
</template>

<script setup>
import {
  Page,
  Navbar,
  Block,
  Button,
  List,
  ListItem,
  Link,
  BlockTitle,
} from 'konsta/vue';
</script>

必要なコンポーネントをすべてインストールした後にライブリロードが同期していない場合は、すべてを再起動してみてください。それが完了すると、Nuxt 3とCapacitorで構築された、ややネイティブな外観のモバイルアプリが表示されるはずです！

結果として以下のページが表示されるはずです：