QuasarとCapacitorを使用したモバイルアプリの作成

Web アプリを作成するには、まず Capgo を使用して新しいプロジェクトを作成します。 クアサール後で、Capacitor を使用してモバイルアプリに変換する方法を学びます。モバイルでアプリが見栄えの良いようにしたい場合は

With Capacitor, you can change your Quasar web app into a mobile app without needing to do lots of hard things or learn a completely new way of making apps like you would with something called React Native.

This tutorial will guide you through the process, starting with a new Quasar app and then incorporating Capacitor to move into the realm of native mobile apps. Additionally, you will use Capgo Capacitorをあなたのアプリにlive updateを秒で送信することができます。

About Capacitor

CapacitorJSは実に革新的なものです！あらゆるWebプロジェクトに簡単に組み込むことができ、Webビューをネイティブにラップし、ネイティブのXcodeとAndroid Studioプロジェクトを自動生成します。さらに、プラグインはJSブリッジを通じてカメラなどのネイティブデバイス機能にアクセスできます。

With Capacitor, you get a fantastic native mobile app without any complicated setup or steep learning curve. Its slim API and streamlined functionality make it a breeze to integrate into your project. Trust me, you’ll be amazed at how effortless it is to achieve a fully functional native app with Capacitor!

Quasarアプリの準備

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

npm init quasar

Pick the “App with Quasar CLI” option then “Quasar v2”.

ネイティブモバイルアプリを作成するには、プロジェクトの export が必要です。したがって、プロジェクトの package.json に簡単なスクリプトを追加して、Quasarプロジェクトをビルドしてコピーすることができます。

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

コマンドを実行した後、 generate新しい dist プロジェクトのルートディレクトリにあるフォルダ。

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

Quasar アプリにCapacitorを追加する

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

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

この時点で、新しいフォルダが観察できるはずです。

CapacitorはCapacitorを使用してQuasarアプリをモバイルアプリに変換します。

# 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

Capacitorは、Quasarアプリをモバイルアプリに変換するための、QuasarとCapacitorの統合です。 iOS と Android プロジェクトのフォルダ

実際のネイティブプロジェクトです!

Androidプロジェクトにアクセスするには、 Android Studio. iOSの場合、Macが必要で、 Xcode.

さらに、プロジェクトの capacitor.config.ts ファイルを見つける必要があります。このファイルには、Syncの際に使用される基本的なCapacitor設定が含まれています。 webDir、これは現在不正確です。

この問題を解決するには、 capacitor.config.json ファイルを開いて webDir:

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

実行することができます。

npm run generate
npx cap sync

最初のコマンドは、Quasar プロジェクトをビルドし、静的ビルドをコピーするだけです。2 番目のコマンドは、ウェブ __CAPGO_KEEP_0__ をネイティブ プラットフォームの適切な場所に同步し、表示するアプリに表示することができます。 npm run generate Capacitorを使用したQuasarモバイルアプリの作成 npx cap sync code

plugins Capacitor plugins 時は再び始まる npx cap sync もう一度。

気づかずに、実際には完了しているので、デバイスでアプリを確認してみましょう!

ネイティブアプリをビルドして配信する

iOSアプリを開発するには、 Xcode をインストールする必要があります。また、Androidアプリを開発するには、 Android Studio をインストールする必要があります。さらに、App Storeでアプリを配信する場合、iOSではApple Developer Programに登録し、AndroidではGoogle Play Consoleに登録する必要があります。

ネイティブモバイル開発に慣れていない場合は、以下のCapacitor CLIを使用して、両方のネイティブプロジェクトを簡単に開くことができます:

npx cap open ios
npx cap open android

ネイティブプロジェクトを設定した後、デバイスにアプリをデプロイすることは簡単です。Android Studioでは、設定を変更することなく、デバイスにアプリをデプロイすることができます。以下が例です:

Xcodeで、実機にアプリを展開するには、シミュレーターではなく署名アカウントを設定する必要があります。まだこの手順を実行したことがない場合は、Xcodeは開発者プログラムに登録されている場合にのみ、プロセスをガイドします。署名アカウントを設定した後、実機に接続したデバイスでアプリを実行するには、上部でデバイスを選択し、再生ボタンをクリックするだけです。

Congratulations! Quasarのウェブアプリをモバイルデバイスに成功でデプロイしました。 ここでは例を示します。

開発中はもっと速い方法があります。

Capgo Live Update

Capgo Live Updateは、開発者がアプリの更新をApp Storeの通常の提出プロセスを経ることなく、配信できるサービスです。このサービスは、バグの修正や小規模な更新を迅速に実施できるようにするため、開発者にとって便利な手段となります。

Integrating Capgo into your Quasar app is a straightforward process that empowers you to harness the power of real-time live updates. This step-by-step guide will walk you through the integration and implementation of Capgo Live Update, enabling you to deliver seamless updates.

Sign Up でアカウントを作成し、Capgo ダッシュボードにアクセス:

Capgoの登録と、最初のバージョンをアップロードするためのAPIキーを取得する時間です。始めに signing up for a Capgo account.

Install the Capgo SDK:

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

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

そして、codeをコードプッシュの代わりにアプリに追加してください。

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

CapacitorUpdater.notifyAppReady()

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

Capgoにログインします。:

まず、 all apikey CLIアカウントに含まれる

`npx @capgo/cli@latest login YOU_KEY`

__CAPGO_KEEP_0__にログインしてください。:

Let’s get started by first creating an app in Capgo Cloud with the CLI.

    npx @capgo/cli@latest app add

Capacitorクラウドにアプリを作成してください。

__CAPGO_KEEP_1__を使用してください。:

code を実行して、Capgo に送信します:

npx @capgo/cli@latest bundle upload`

デフォルトでは、バージョン名は package.json ファイル内のものになります。

チェックイン Capgo ビルドが存在する場合。

私のモバイルサンドボックスアプリでテストすることもできます。 チャネルをデフォルトに設定.

__CAPGO_KEEP_0__ を __CAPGO_KEEP_1__ に送信した後、チャネルをデフォルトに設定して、アプリが __CAPGO_KEEP_1__ からアップデートを受け取るようにします。:

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

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

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

次に、

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

CapacitorUpdater.notifyAppReady()

__CAPGO_KEEP_0__ npm run build && npx cap copy を更新するには。

Receive a Live Update:

For your application to receive a live update from Deploy, you’ll need to run the app on a device or an emulator. The easiest way to do this is simply to use the following command to launch your local app in an emulator or a device connected to your computer.

  npx cap run [ios | android]

アプリを起動し、バックグラウンドに置き、再度アプリを起動すると、ログにアプリが更新されたことを確認できます。

Congrats! 🎉 You have successfully deployed your first Live Update. This is just the start of what you can do with Live Updates. To learn more, view the complete Live Updatesドキュメント.

Using Capacitor Plugins

Let’s take a look at how to use a Capacitor plugin in action, which we’ve mentioned a few times before. To do this, we can install a fairly simple plugin by running:

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

ボタンを押した後、美しいネイティブシェアダイアログが実行できます!

次に、iOSとAndroidでアプリがよりネイティブに感じられるようにするには、Capgoナビゲーションとトランジションを使用し、水平オーバーフローまたは安全エリアがカットされたiOSの一般的なレイアウト問題を修正できます。

ネイティブフィーリングUIとCapgoネイティブナビゲーションとトランジション

私は数年間 Ionic を使用してクロスプラットフォームアプリケーションを構築してきましたが、Quasarと統合することはハック的で、すでに Tailwind CSS.

を使用している場合、Quasar + Capacitorアプリケーションでネイティブモバイルフィーリングを実現するには、WebのみのUIキットであるKonsta UIではなく、Capgoプラグインを使用してください。

• @capgo/capacitor-ネイティブナビゲーション — iOSのnative navbar、Liquid Glassタブバー、Androidのblurredタブバースタイル。Quasarルーターのルート状態を保持し、プラグインはnative chromeを所有します。
• @capgo/capacitor-transitions — WebViewレイヤー内でIonicスタイルのページトランジションとiOSのエッジスワイプバックを実装することができます。Ionic UIを採用する必要はありません。

両方をインストールします。

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

nativeナビゲーションをCSSのインセットモードで設定して、webコンテンツがnativeバーを尊重するようにします。

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

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

Liquid Glassタブバーをレンダリングします (iOSはシステムが所有するレンダリングを使用し、Androidはblurred 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}`);
});

nativeページトランジションをアプリシェルに追加します:

<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') iOSのnativeナビゲーションバー、Liquid Glassタブバー、Androidのblurredタブバースタイル。Quasarルーターのルート状態を保持し、プラグインはnative chromeを所有します。

全てのガイドを見る: Capacitorによる@capgo/capacitorネイティブナビゲーションを使用する そして Capacitorによる@capgo/capacitorトランジションを使用する.

セーフエリアの安全性

Capacitorでデバイスセーフエリアを使用するには Capacitorの@capgo/tailwind-capacitorを使用します （Capacitorで公開 tailwind-capacitor on npm). It provides safe-areas utilities とその他の Capacitor 対応 Tailwind プラグイン

npm add -D tailwind-capacitor

In src/css/app.scss:

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

Capacitorの機能を使用する pt-safe, pb-safe、 px-safe 手作ではなく env(safe-area-inset-*) プロジェクトは活発に開発されています — ご自身のQuasar設定で不足しているものがあれば GitHub.

iOSレイアウトの修正 (ビューポート、セーフエリア、水平スクロール)

iOSでコンテンツが切り取られた、ずれた、または水平スクロールできる場合、ビューポートタグを追加したり修正したりするだけでは通常解決されません。順序に従ってこれらのチェックを実行してください。 overflow-x: hidden ビューポートメタタグが正しく適用されていることを確認してください

(またはQuasarのHTMLテンプレート)、ビューポートメタタグを

In index.html 単一のアプリシェルを作成し、セーフエリアのパディングをそこに適用してください — 複数のネストされたコンポーネントではありません: <head>:

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

1つのアプリシェルを作成し、セーフエリアのパディングをそこに適用してください — 複数のネストされたコンポーネントではありません:

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ヘッダー、モーダル、レイアウトラッパーで安全エリアの余白が重複して表示されることがよくあり、UIが切り取られたり大きすぎるように見えます。

With @capgo/テールウィンドcapacitorの余白を単一のシェルで表現できます。 pt-safe pb-safe px-safe __CAPGO_KEEP_0__ iOS

Set Capacitor iOS contentInset に設定します。 never 最初に

、 capacitor.config.tsの安全エリアを無効化し、CSS (またはNative Navigationの) contentInsetMode: 'css')が安全エリアを管理するようにします。

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

Mixing Capacitor’s automatic content inset with CSS env(safe-area-inset-*) __CAPGO_KEEP_0__のパディングがダブルスペースの原因となることが多い

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

通常の原因は、 100vw、固定ピクセル幅、または大きい w-screenSafari Web インスペクターで実行: min-width.

Tailwindの場合、

[...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,
  }));

を置き換える w-screen 可能な限り w-full 水平方向のオーバーフロー問題の多くは、 100vw / w-screen、安全エリアのパディングの重複、または固定幅のコンテナ — ではなく、ビューポートメタタグ自体から

結論

Capacitorは、既存のWebプロジェクトに基づいてネイティブアプリケーションを構築するための優れたオプションであり、codeを簡単に共有し、UIの統一性を維持する方法を提供します。

そして、__CAPGO_KEEP_0__の追加により Capgo、アプリにリアルタイムの更新を追加することも簡単になりました。これにより、ユーザーは常に最新の機能とバグ修正にアクセスできます。

If you would like to learn how to add Capgo to your Next.js app, take a look at the next article :

Keep going from Creating Mobile Apps with live updates, Quasar and Capacitor.

Capgoを使用している場合は、 Creating Mobile Apps with live updates, Quasar and Capacitor. ネイティブプラグインの作業を計画するには、Capgoプラグインディレクトリと接続します。 Capgo プラグインディレクトリ Capacitor 製品ワークフローにおける Capgo プラグインディレクトリ Capacitor プラグインは Capgo によって提供されます。 Capgoの実装詳細についてはCapacitorプラグインによってCapgoで プラグインの追加または更新 Capgoの実装詳細についてはプラグインの追加または更新 Ionic Enterpriseプラグインの代替 Ionic Enterpriseプラグインの代替の製品ワークフローについて Capgoネイティブビルド Capgoネイティブビルドの製品ワークフローについて