QuasarとCapacitorでライブ更新を実現したモバイルアプリの作成

このチュートリアルでは、Capacitor を使用して Quasar のモバイルアプリを作成する方法について説明します。クアサール. その後、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.

このチュートリアルでは、Quasarアプリの新しいプロジェクトから始めて、Capacitorを使用して、ネイティブモバイルアプリの世界に進む方法を説明します。さらに、Capacitorを使用して Capgo 秒以内にアプリにライブアップデートを送信することができます。

Capacitor

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

Capacitorを使用すると、複雑なセットアップや急勾配の学習カーブなしで素晴らしいネイティブモバイルアプリを取得できます。APIと機能性がスリムでstreamlinedなので、プロジェクトに簡単に組み込むことができます。私に任せれば、Capacitorを使用して完全に機能するネイティブアプリを実現するのは簡単です。

Quasarアプリの準備

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

npm init quasar

Quasarプロジェクトの設定

「Quasar CLI」のオプションを選択し、「Quasar v2」を選択してください。

ネイティブモバイルアプリを作成するには、 エクスポート プロジェクトのための方針。したがって、Quasar プロジェクトに含める簡単なスクリプトをパッケージ.jsonに追加します。 パッケージ.json Quasar プロジェクトを構築およびコピーするために利用できるスクリプトを含めることができます。

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

コマンドを実行した後 generate、プロジェクトのルートディレクトリに新しいフォルダが表示されます。 dist このフォルダは後でCapacitorによって使用される予定ですが、現在は正しく設定する必要があります。

This folder will be used by Capacitor later on, but for now, we must set it up correctly.

Adding Capacitor to Your Quasar App

最初に、CapacitorとCapacitor CLIをインストールします。 sync __CAPGO_KEEP_0__

__CAPGO_KEEP_1__ CapacitorはCapacitor、CLIはCapacitor CLIです。開発依存として追加し、プロジェクト内でセットアップする。セットアップ中は、デフォルト値の名前とバンドルIDに「Enter」を押すと設定されます。

次に、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

Initialize Capacitor

この時点で、Quasarプロジェクト内に新しい iOS と Android フォルダが観察できるはずです。

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

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

さらに、プロジェクト内で capacitor.config.ts ファイルを見つける必要があります。このファイルには、Syncの際に使用される基本的なCapacitor設定が含まれています。webDirという項目に注目してください。 これは、ビルドコマンドの結果を指す必要があります。現在は不正確です。この問題を解決するには、

__CAPGO_KEEP_0__.config.json capacitor.config.json webDirという項目に注目してください。 この設定を試すには、以下のコマンドを実行してみてください。:

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

You can try it out by executing the following commands:

npm run generate
npx cap sync

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

Sync コマンドは、ネイティブプラットフォームを更新し、プラグインをインストールする可能性があるため、追加の __CAPGO_KEEP_0__ プラグインをインストールした場合 Capacitor plugins 気づかなければならないことなく、実際には完了しています。では、デバイスでアプリを表示してみましょう! npx cap sync ネイティブアプリをビルドしてデプロイする

iOS アプリを開発するには、

Xcode

がインストールされている必要があります。Android アプリを開発するには、 がインストールされている必要があります。 __CAPGO_KEEP_0__ Android Studio インストール済み。さらに、App Storeでアプリを配布する計画がある場合は、iOS用にApple Developer Programに登録し、Android用にGoogle Play Consoleに登録する必要があります。

nativeモバイル開発に新人ですか? Capacitor CLI を使用すると、両方のネイティブプロジェクトを簡単に開くことができます。

npx cap open ios
npx cap open android

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

android-studio-run

Xcodeでは、実機にアプリをデプロイするには署名アカウントを設定する必要があります。シミュレーターにのみアプリをデプロイする場合は、署名アカウントを設定する必要はありません。署名アカウントを設定する必要がある場合は、Xcodeがガイドを提供します (ただし、開発者プログラムに登録する必要があります)。署名アカウントを設定した後、デバイスにアプリを実行するには、上部でデバイスを選択し、実行をクリックするだけです。ここでは例を示します。

xcode-run

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

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

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.

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

Capgoの登録をして、APIキーを取得して最初のバージョンをアップロードする準備ができました。最初に signing up for a Capgo account.

Install the Capgo SDK:

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

npm i @capgo/capacitor-updater && npx cap sync CapacitorをあなたのCapacitorアプリにインストールするには。

Capacitorを置き換えるために、あなたのアプリにこのcodeを追加してください。

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

CapacitorUpdater.notifyAppReady()

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

Login to Capgo CLOUD:

Capacitorを使用してQuasarモバイルアプリを作成する all APIキーあなたのアカウントに保存されている情報でログインするために使用できる CLI:

`npx @capgo/cli@latest login YOU_KEY`

最初のアプリを追加する:

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

    npx @capgo/cli@latest app add

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

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

Capacitor の code をビルドし、 Capgo に送信するには、以下のコマンドを実行してください。

npx @capgo/cli@latest bundle upload`

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

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

あなた自身の __CAPGO_KEEP_0__ でテストすることもできます。モバイルサンドボックスアプリ.

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

あなたのアプリを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 アプリを更新する

ライブアップデートを受け取るには、デプロイからライブアップデートを受け取るには、デバイスまたはエミュレータでアプリを実行する必要があります。エミュレータまたはデバイスをコンピューターに接続して実行するには、次のコマンドを実行するのが簡単です。:

アプリを開き、バックグラウンドに置き、再度アプリを開くと、ログにアプリがアップデートしたことを確認できます。

  npx cap run [ios | android]

おめでとうございます！🎉あなたはライブアップデートを成功させました。これはライブアップデートの始まりです。ライブアップデートについてもっと学びたい場合は、ライブアップデートのドキュメントをご覧ください。

ライブアップデートのドキュメントをご覧ください __CAPGO_KEEP_0__ プラグインを使用する.

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プラグインは何も特別なことはありませんが、native shareダイアログを呼び出します。 Shareプラグインfunctionを呼び出すだけです。pages/index.vueを次のように変更してみましょう。 share() 前にも言っているように、新しいプラグインをインストールするときはsync操作を行い、再度アプリをデバイスにデプロイする必要があります。次のコマンドを実行してください。 ボタンを押すと、native shareダイアログが実際に動作することがわかります。 次に、iOSとAndroidでCapgoのナビゲーションとトランジションを使用してアプリをよりnativeに感じさせ、水平オーバーフローまたは安全エリアがカットされたiOSの一般的なレイアウト問題を修正できます。

<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>

CapgoのナビゲーションとトランジションでnativeなUIを作成

npx cap sync

Capgoのプラグインを実際に使ってみたことがあります。

Next, you can make the app feel more native on iOS and Android with Capgo navigation and transitions, and fix common iOS layout issues that cause horizontal overflow or cropped safe areas.

ボタンを押すと、native shareダイアログが実際に動作することがわかります。イオンクロスプラットフォームアプリケーションを構築するには、Quasarと統合するには、ハッキィでほとんど価値がないタイルウィンドCSS.

For a native mobile feel in a Quasar + Capacitor app, use Capgo plugins instead of web-only UI kits like Konsta UI:

@capgo/capacitor-native-navigation —ネイティブナビゲーションバー、iOSのLiquid Glassタブバー、Androidのブラーされたタブバー
@capgo/capacitor-transitions —IonicスタイルのページトランジションとiOSのエッジスワイプバック

両方をインストールする

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

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

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

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

液体ガラスのタブバーをレンダリングする(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>

Wrap routed pages in cap-router-outlet, cap-page、そして cap-content、そして呼び出す setDirection('forward') または setDirection('back') Capacitorライブアップデートの代替

Capacitorライブアップデートの代替 Using @capgo/capacitor-native-navigation Capawesomeの代替 Using @capgo/capacitor-transitions.

Appflowの代替

Capgoのガイド @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";

「__CAPGO_KEEP_0__」を使用することで pt-safe, pb-safe、 px-safe 「__CAPGO_KEEP_0__」を手動で散らすのではなく env(safe-area-inset-*) プロジェクトは積極的に開発されています。ご利用のQuasar設定で不足しているものがあれば、「GitHub」にPRを提出してください.

「iOSレイアウトの問題を修正する（ビューポート、セーフエリア、水平方向のオーバーフロー）」

iOSでコンテンツが切り取られた、ずれた、または水平方向にスクロールできるようになっている場合、ビューポートタグを追加したり変更したりするだけでは通常解決しません。これらのチェックを順番に実行してください。 overflow-x: hidden 「__CAPGO_KEEP_0__」でiOSレイアウトの問題を修正する（ビューポート、セーフエリア、水平方向のオーバーフロー）

ビューポートメタタグが正しく適用されていることを確認してください。

In index.html (またはQuasarのHTMLテンプレート) <head>:

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

セーフエリアをハンドルするには、ルートワッパーにのみ適用してください。

アプリケーションシェルを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が切り取られたり大きすぎるように見えることがあります。

「@__CAPGO_KEEP_0__/tailwind-__CAPGO_KEEP_1__」と設定すると、同じパディングをユーティリティとして表現できます。 @capgo/tailwind-capacitorセーフエリアのパディングを適用してください。 pt-safe pb-safe px-safe __CAPGO_KEEP_0__ iOS

CapacitorをiOS `contentInset` に `never` 最初

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

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

Capacitorの自動コンテンツインセットとCSSのパディングを組み合わせることは、一般的なダブルスペースの原因です。 env(safe-area-inset-*) 実際にオーバーフローしている要素を探します。

通常の原因は、

、Tailwind 100vw、固定ピクセル幅、または大きい w-screenIn Safari Web Inspectorで実行します: min-width.

In Safari Web Inspector, run:

[...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安全なエリアの重複したパディング、または固定幅のコンテナからではなく、

ビューポートメタタグ自体から

Capacitor is an excellent option for building native applications based on an existing web project, offering a simple way to share code and maintain a consistent UI.

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

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をNext.jsアプリに追加する方法を学びたい場合は、次の記事を参照してください:「Creating Mobile Apps with live updates, Quasar and __CAPGO_KEEP_0__」から続けてください。 モバイルアプリの作成にライブ更新、QuasarとCapacitor。 ネイティブプラグインの作業計画に接続するには Capgo プラグインディレクトリ Capgo プラグインディレクトリの製品ワークフロー Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, __CAPGO_KEEP_0__ プラグイン __CAPGO_KEEP_1__ プラグインの実装詳細プラグインの追加または更新 Capgo Native Builds for the product workflow in Capgo Native Builds.

Creating Mobile Apps with live updates, Quasar and Capacitor.