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”を選択します。

ネイティブモバイルアプリを作成するには、プロジェクトの エクスポート が必要です。そこで、シンプルなスクリプトを package.json を使用して、Quasarプロジェクトのビルドとコピーを行うことができます：

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

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

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

Quasarアプリに Capacitor を追加する

Webアプリをネイティブモバイルコンテナにパッケージ化するには、いくつかの初期ステップが必要ですが、その後は単一のコマンドを実行するだけです。 sync コマンドを実行してください。

まず、次をインストールします： 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

この時点で、Angular プロジェクト内に新しい iOS と Android Quasarプロジェクト内のフォルダ

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

後で Android プロジェクトにアクセスするには、次をインストールする必要があります： デバッグ。iOSの場合はMacが必要で、次をインストールしてください： iOSプロファイリング.

さらに、プロジェクト内に次のファイルがあるはずです： 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 1つ目のコマンドはQuasarプロジェクトをビルドして静的ファイルをコピーするだけで、2つ目のコマンドは npx cap sync すべてのWeb code をネイティブプラットフォームの適切な場所に同期し、アプリ内で表示できるようにします。

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

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

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

iOSアプリを開発するには、 iOSプロファイリング のインストールが必要です。また、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 でクロスプラットフォームアプリを構築できますが、Quasar との統合は強引で、すでに Quasar があるならほとんどメリットはありません。 Tailwind CSS.

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

• @capgo/capacitor-native-navigation — ネイティブのナビゲーションバー、iOS の Liquid Glass タブバー、Android のぼかしタブバースタイル。Quasar router がルート状態を保持し、プラグインがネイティブのクロームを担います。
• @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のレイアウト問題を修正（ビューポート、セーフエリア、横方向のオーバーフロー）

iOSでコンテンツが切れて見えたり、ずれて見えたり、横スクロールが発生したりする場合は、さらに追加するだけでも、 overflow-x: hidden viewportタグを調整するだけでも通常は解決しません。以下のチェックを順番に確認してください。

viewport メタタグが正しく適用されているか確認する

では index.html （または独自の Quasar HTML テンプレート）の viewport メタタグを設定してください <head>:

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

iOSのセーフエリアは1つのルートラッパーだけで処理する

単一のアプリシェルを作成し、そこにセーフエリアのパディングを適用してください — 複数のネストしたコンポーネントではなく：

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が原因で、余白が二重に見えることがよくあります。

実際にオーバーフローしている要素を特定する

主な原因は、以下の要素を使用している場合です： 100vwTailwind 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 のプロダクトワークフローについては、