Live Updates、Quasar、Capacitor を使ったモバイルアプリ開発

このチュートリアルでは、まず次に使用するツールを使って Quasarで新しいWebアプリを作成することから始めます。その後、Capacitor を使って、モバイルアプリ化する方法を学びます。モバイルでのアプリの見た目をより良くしたい場合に最適です。

Capacitor を使えば、React Native のように全く新しい開発手法を学んだり、複雑な作業を繰り返したりすることなく、Quasar Webアプリをモバイルアプリへと変換できます。

このチュートリアルでは、新しいQuasarアプリの作成から始まり、Capacitorを組み込んでネイティブモバイルアプリの世界へと進むプロセスを解説します。さらに、以下のツールを使用して、 Capgo 数秒でアプリにlive updateを配信できます。

Capacitor について

CapacitorJSはまさにゲームチェンジャーです！あらゆるWebプロジェクトに簡単に組み込むことができ、アプリケーションをネイティブWebViewでラップして、XcodeやAndroid Studioのネイティブプロジェクトを自動生成します。さらに、プラグインを使用することで、JSブリッジ経由でカメラなどのネイティブデバイス機能にアクセスできます。

Capacitorを使えば、複雑なセットアップや学習コストなしで、素晴らしいネイティブモバイルアプリを実現できます。軽量なAPIと合理化された機能により、プロジェクトへの統合も非常にスムーズです。Capacitorを使って、これほど簡単にフル機能のネイティブアプリが作れることに、きっと驚くはずです！

Quasarアプリの準備

新しいQuasarアプリを作成するには、次のコマンドを実行してください：

npm init quasar

「App with Quasar CLI」を選択し、次に「Quasar v2」を選択します。

ネイティブモバイルアプリを作成するには、 export プロジェクトに、以下のシンプルなスクリプトを package.json に追加して、Quasarプロジェクトのビルドとコピーを行えるようにします：

{
  "scripts": {
    // ...
    "build": "quasar build"
  }
}

コマンドを実行すると、 generateプロジェクトのルートディレクトリに新しい dist フォルダが作成されます。

このフォルダは後ほど Capacitor で使用しますが、まずは正しくセットアップする必要があります。

Quasarアプリに Capacitor を導入する

WebアプリをNative Buildのコンテナにパッケージングするには、最初にいくつかの手順が必要ですが、その後はたった一つの sync command.

まず、以下をインストールします。 Capacitor CLI 開発用依存関係として追加し、プロジェクト内でセットアップを行います。セットアップ中に「Enter」キーを押すと、名前とbundle IDのデフォルト値が適用されます。

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

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

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

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

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

これらは本物のNativeプロジェクトです！

後でAndroidプロジェクトにアクセスするには、インストールが必要です デバッグ。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 Quasarプロジェクトをビルドして静的ビルドをコピーするだけで、2番目のコマンドは npx cap sync すべてのWeb code をネイティブプラットフォームの適切な場所に同期し、アプリ内で表示できるようにします。

さらに、syncコマンドはネイティブプラットフォームの更新やプラグインのインストールを行う場合があるため、新しい Capacitor プラグイン をインストールした際は、 npx cap sync を再度呼び出してください。

を実行するタイミングです。気づかないうちに作業は完了しています。それでは、デバイスでアプリを確認しましょう！

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

iOSアプリを開発するには、 Xcode のインストールが必要です。また、Androidアプリの場合は、 デバッグ のインストールが必要です。さらに、アプリをApp Storeで配布する場合は、iOS用にApple Developer Programへ、Android用にGoogle Play Consoleへの登録が必要になります。

ネイティブモバイル開発が初めての方でも、Capacitor CLI を使えば、両方のネイティブプロジェクトを簡単に開くことができます：

npx cap open ios
npx cap open android

ネイティブプロジェクトの設定が完了すれば、接続されたデバイスへのアプリのデプロイは簡単です。Android Studioでは、準備が整うのを待つだけで、設定を変更することなく接続デバイスへアプリをデプロイできます。例を以下に示します：

Xcodeでは、シミュレーターだけでなく実機にアプリをデプロイするために、署名アカウントの設定が必要です。初めての場合は、Xcodeが手順を案内してくれます（ただし、Developer Programへの登録が必要です）。設定後は、上部で接続済みのデバイスを選択し、再生ボタンを押すだけでアプリを実行できます。以下に例を示します：

おめでとうございます！Quasarウェブアプリをモバイルデバイスへのデプロイに成功しました。以下がその例です：

でもちょっと待ってください。開発中にもっと速い方法があります…

Capgo Live Update

Capgo Live Update は、従来のApp Storeの審査プロセスを経ることなく、モバイルアプリにアップデートをデプロイできるサービスです。App Storeのレビューを待つことなく、バグ修正や軽微なアップデートを迅速に行えるため、非常に便利です。

QuasarアプリにCapgoを統合するのは非常に簡単で、リアルタイムなLive Updateの力を最大限に活用できるようになります。このステップバイステップガイドでは、Capgo Live Updateの統合と実装方法を解説し、シームレスなアップデートを実現する方法を紹介します。

Capgo ダッシュボードへのサインアップとアクセス:

さあ、サインアップしてAPIキーを取得し、最初のバージョンをアップロードしましょう！まずは、 Capgo アカウントの作成から始めましょう.

Capgo SDK のインストール:

コマンドラインから、Capacitor アプリのルートディレクトリで以下を実行してください：

npm i @capgo/capacitor-updater && npx cap sync Capacitor アプリにプラグインをインストールします。

次に、CodePushの代わりとして、このcodeをアプリに追加します：

import { CapacitorUpdater } from '@capgo/capacitor-updater'

CapacitorUpdater.notifyAppReady()

これにより、ネイティブプラグインにインストールが成功したことが通知されます。

Capgo CLOUD にログイン:

まず、 all apikey CLI でログインするには、アカウントに以下が必要です:

`npx @capgo/cli@latest login YOU_KEY`

最初のアプリを追加:

まずは CLI を使って、Capgo Cloud でアプリを作成しましょう。

    npx @capgo/cli@latest app add

このコマンドは、Capacitor の設定ファイルで定義されたすべての変数を使用してアプリを作成します。

最初のバージョンをアップロード:

以下のコマンドを実行して code をビルドし、Capgo へ送信します:

npx @capgo/cli@latest bundle upload`

デフォルトでは、package.json ファイルに記載されているバージョン名が使用されます。

チェックイン Capgo ビルドが存在するか確認します。

さらに、こちらでテストすることも可能です: モバイルサンドボックスアプリ.

チャンネルをデフォルトに設定:

アプリを Capgo に送信した後、Capgo からアップデートを受信できるように、チャンネルをデフォルトに設定する必要があります。

npx @capgo/cli@latest channel set production -s default

アップデート検証用のアプリ設定:

メインのJavaScriptファイルにこの設定を追加してください。

import { CapacitorUpdater } from '@capgo/capacitor-updater'

CapacitorUpdater.notifyAppReady()

その後、 npm run build && npx cap copy を実行してアプリをアップデートします。

Live Update を受信する:

Deploy から live update を受信するには、実機またはエミュレータでアプリを実行する必要があります。最も簡単な方法は、以下のコマンドを使用して、エミュレータまたはコンピュータに接続されたデバイスでローカルアプリを起動することです。

  npx cap run [ios | android]

アプリを起動し、バックグラウンドに送ってから再度開くと、ログにアプリがアップデートを完了したことが表示されます。

おめでとうございます！ 🎉 初めての Live Update のデプロイに成功しました。これは Live Updates でできることのほんの始まりです。詳しくは、完全な Live Updates ドキュメント.

Capacitor プラグインの使用

これまで何度か触れてきた Capacitor プラグインの実際の使い方を見てみましょう。次のコマンドを実行して、かなりシンプルなプラグインをインストールできます：

npm i @capacitor/share

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

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

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

次に、Capgo のナビゲーションとトランジションで、iOS と Android でアプリをよりネイティブに感じさせ、横方向のオーバーフローやセーフエリアの欠けを引き起こす iOS でよくあるレイアウト問題も修正できます。

Capgo Native Navigation and Transitions によるネイティブ感のあるUI

私は長年、 Ionic はクロスプラットフォームアプリの開発に適していますが、すでに Tailwind CSS.

Quasar + Capacitor アプリでネイティブな操作感を実現するには、Konsta UI のような Web 専用 UI キットではなく、Capgo プラグインを使用してください：

• @capgo/capacitor-native-navigation — ネイティブのナビゲーションバー、iOS 用の Liquid Glass タブバー、Android 用のブラー加工されたタブバー。Quasar router がルートの状態を管理し、プラグインがネイティブの UI 要素（chrome）を制御します。
• @capgo/capacitor-transitions — Ionic UI を導入することなく、WebView レイヤーで Ionic スタイルのページ遷移や iOS のエッジスワイプによる戻る操作を実現します。

両方をインストール：

npm add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
npmx cap sync

CSS の inset モードを使用してネイティブナビゲーションを設定し、Web コンテンツがネイティブバーと重ならないようにします：

import { NativeNavigation } from '@capgo/capacitor-native-navigation';

await NativeNavigation.configure({
  contentInsetMode: 'css',
  animationDuration: 360,
  glass: {
    effect: 'liquidGlass',
  },
});

Liquid Glass タブバーをレンダリング（iOS はシステムによるレンダリング、Android はブラーをかけた WebView バックドロップを使用）：

await NativeNavigation.setTabbar({
  selectedId: 'home',
  labelVisibilityMode: 'labeled',
  icons: true,
  colors: { dynamic: true },
  tabs: [
    { id: 'home', title: 'Home', icon: { svg: '...' } },
    { id: 'settings', title: 'Settings', icon: { svg: '...' } },
  ],
});

await NativeNavigation.addListener('tabSelect', ({ id }) => {
  router.push(`/${id}`);
});

アプリシェルにネイティブのページ遷移を追加：

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import '@capgo/capacitor-transitions';
import { initTransitions, setDirection, setupRouterOutlet } from '@capgo/capacitor-transitions/vue';

initTransitions({ platform: 'auto' });

const router = useRouter();
const outletRef = ref(null);

onMounted(() => {
  if (outletRef.value) {
    setupRouterOutlet(outletRef.value, { platform: 'auto', swipeGesture: 'auto' });
  }
});

const openSettings = () => {
  setDirection('forward');
  router.push('/settings');
};
</script>

<template>
  <cap-router-outlet ref="outletRef">
    <router-view />
  </cap-router-outlet>
</template>

ルーティングされたページを cap-router-outlet, cap-pageや cap-contentでラップし、 setDirection('forward') または setDirection('back') に呼び出します。ネイティブナビゲーションがそれらの領域を制御している場合は、Web用のヘッダーやフッターを重複させないでください。

詳細なガイドはこちら: @capgo/capacitor-native-navigation の活用 と @capgo/capacitor-transitions の活用.

Tailwind によるセーフエリア対応

Tailwind CSS でデバイスのセーフエリアを扱うには、以下を使用します： @capgo/tailwind-capacitor （ tailwind-capacitor として npm で公開）。これは、 safe-areas ユーティリティや Capacitor と相性の良いその他の Tailwind プラグインを提供します：

npm add -D tailwind-capacitor

では src/css/app.scss:

@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";

次のようなユーティリティを使用します： pt-safe, pb-safeや px-safe 手作業でバラバラに env(safe-area-inset-*) 追加するのではなく。このプロジェクトは活発に開発されています。Quasarの設定で足りないものがあれば、 GitHub で PR を作成してください.

iOS のレイアウト問題の修正 (Viewport、Safe Area、横方向のオーバーフロー)

iOS でコンテンツが切れたり、ずれたり、横スクロールが発生したりする場合、単に overflow-x: hidden viewport タグを追加・調整するだけでは解決しないことがよくあります。以下のチェック項目を順番に確認してください。

viewport metaタグが正しく適用されていることを確認してください

では index.html (またはQuasarのHTMLテンプレート) のviewport metaタグを設定します <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

iOSのセーフエリアは単一のルートラッパーで処理します

単一のapp shellを作成し、そこにセーフエリアのpaddingを適用してください。複数のネストされたコンポーネントに適用してはいけません。

html,
body,
#q-app {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

.app-shell {
  min-height: 100dvh;
  width: 100%;
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

すべてのページコンテンツを以下でラップします .app-shellヘッダー、モーダル、レイアウトラッパーで safe-area のパディングが重複すると、UI が欠けたり、逆に大きすぎたりすることがよくあります。

を使用すると、 @capgo/tailwind-capacitor同じパディングを次のようなユーティリティで表現できます： pt-safe pb-safe px-safe その単一のシェル上で。

Capacitor iOS を設定 contentInset まで never 最初に

では capacitor.config.ts、native inset を無効にすることを推奨し、CSS（または Native Navigation のもの contentInsetMode: 'css'）に safe area を任せる：

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: 'dist/spa',
  ios: {
    contentInset: 'never',
  },
};

Capacitor の自動コンテンツ inset と CSS を混在させると env(safe-area-inset-*) paddingが原因で二重にスペースが開くことがよくあります。

実際に溢れている要素を特定しましょう

主な原因となるのは、以下を使用している要素です： 100vw、Tailwind、 w-screen、固定のピクセル幅、または大きな min-width.

Safari Web Inspectorで以下を実行してください：

[...document.querySelectorAll('*')]
  .filter(el => el.scrollWidth > document.documentElement.clientWidth)
  .map(el => ({
    el,
    tag: el.tagName,
    class: el.className,
    scrollWidth: el.scrollWidth,
    clientWidth: document.documentElement.clientWidth,
  }));

Tailwindを使用する場合は、可能な限り w-screen を使用して w-full 置き換えてください。水平方向のオーバーフロー問題の多くは 100vw / w-screen、重複したセーフエリアのパディング、または固定幅のコンテナに起因し、viewportのmetaタグ自体が原因ではありません。

まとめ

Capacitor は、既存のWebプロジェクトをベースにネイティブアプリを構築するための優れた選択肢です。code を簡単に共有し、一貫したUIを維持できます。

さらに、追加されたことで Capgo、アプリへのLive Updatesの追加がより簡単になり、ユーザーは常に最新の機能とバグ修正を利用できます。

Next.jsアプリに Capgo を追加する方法については、こちらの記事をご覧ください：

「Live Updates、Quasar、Capacitor を使ったモバイルアプリ開発」の続きはこちら。

使用している場合 Live Updates、Quasar、Capacitor を使ったモバイルアプリ開発 ネイティブプラグインの作業を計画するには、次と連携してください： Capgo プラグインディレクトリ Capgo プラグインディレクトリのプロダクトワークフローについては、 Capgo による Capacitor プラグイン Capgo による Capacitor プラグインの実装詳細については、 プラグインの追加または更新 プラグインの追加または更新に関する実装詳細については、 Ionic Enterprise プラグインの代替案 Ionic Enterprise Plugin Alternatives のプロダクトワークフロー、および Capgo Native Build Capgo Native Builds のプロダクトワークフローについては、