ライブ更新機能付きのモバイルアプリを作成するには、クアサーやCapacitorを使用します。

このチュートリアルでは、Quasar を使用して新しい Web アプリを作成し始めます。 Quasar後で、Capacitor を使用してモバイルアプリに変換する方法を学びます。モバイルでアプリが見栄えが良くなるようにしたい場合は。

Capacitor を使用すると、Quasar の Web アプリをモバイルアプリに変換することができます。React Native のような別の方法を学ぶことなく、多くの困難なことを行う必要がなくなる。

このチュートリアルでは、Quasar アプリの新しいインスタンスから始め、Capacitor を使用してモバイルアプリに移行するプロセスを指示します。さらに、Capacitor を使用して、秒単位でアプリにライブアップデートを送信します。 Capgo コンテキスト:CapacitorJS の HTML テキストフラグメント (親キー `submitting_a_pr_to_capgo`)。ページ/エリア:Capgo マーケティングウェブサイト。ロール:ウェブサイトコピー。見つかった場所:contributing.astro ページ。

About Capacitor

__CAPGO_KEEP_0__

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!

__CAPGO_KEEP_0 を使用すると、複雑なセットアップや急勾配の学習曲線なしで素晴らしいネイティブモバイルアプリを取得できます。CAPGO_KEEP_1 と機能性がスリムで、ストリーミングされたもので、プロジェクトに簡単に統合できます。私に任せると、CAPGO_KEEP_2__ を使用して完全に機能するネイティブアプリを実現するのは、驚くほど簡単です!

Quasar アプリを準備するには

npm init quasar

Quasarプロジェクトの設定

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

ネイティブモバイルアプリを作成するには、プロジェクトのエクスポートが必要です。 エクスポート package.jsonに、プロジェクトのビルドとコピーを実行するための簡単なスクリプトを追加してください。 コマンドを実行すると、プロジェクトのルートディレクトリに新しいフォルダが表示されます。 このフォルダは、後で__CAPGO_KEEP_0__によって使用される予定ですが、現在は正しく設定する必要があります。

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

__CAPGO_KEEP_0__をQuasarアプリに追加する generatesetup dist Quasar v2の「Quasar App with __CAPGO_KEEP_0__」オプションを選択してください。

Capacitor

Adding Capacitor to Your Quasar App

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

をインストールし、プロジェクト内で設定します。設定中に、名前とバンドルIDのデフォルト値を承認するには「Enter」を押すことができます。 Capacitor CLI 最後に、プラットフォームを追加し、

は各プラットフォーム用にプロジェクトのルートディレクトリにフォルダを作成します:

Finally, we can add the platforms, and Capacitor will create folders for each platform at the root of our project:

# 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

ios と android のフォルダが観察できます。 Quasarプロジェクト内のフォルダ。

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

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

さらに、プロジェクト内で capacitor.config.ts file in your project, which contains some fundamental Capacitor settings utilized during the sync. The only thing you need to pay attention to is the __CAPGO_KEEP_0__設定が含まれています。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 は、ウェブcodeを、ネイティブプラットフォームの適切な場所に同步するので、アプリ内で表示されるようにします。

さらに、syncコマンドはネイティブプラットフォームを更新し、プラグインをインストールする可能性があるため、新しい__CAPGO_KEEP_0__プラグインをインストールした場合 Capacitorプラグインを再度実行する必要があります。 npx cap sync 気づかないうちに、実際には完了していますので、デバイスでアプリを確認してみましょう!

__CAPGO_KEEP_0__

nativeアプリをビルドしてデプロイする

iOSアプリを開発するには、Xcodeがインストールされている必要があります。また、Androidアプリを開発するには、Android Studioがインストールされている必要があります。さらに、App Storeでアプリを配布する場合、iOSの場合はApple Developer Programに登録し、Androidの場合はGoogle Play Consoleに登録する必要があります。 Capacitorを使用してnativeモバイル開発を始めています場合は、__CAPGO_KEEP_0__ __CAPGO_KEEP_1__を使用して、iOSとAndroidの両方のnativeプロジェクトを簡単に開くことができます。 nativeプロジェクトを設定した後、デバイスにアプリをデプロイするのは簡単です。Android Studioでは、設定を変更することなく、デバイスにアプリをデプロイできます。ここでは、Android Studioでデバイスにアプリをデプロイする方法の例を示します。 android-studio-run Xcodeでは、実機にアプリをデプロイするには署名アカウントを設定する必要があります。署名アカウントを設定することは初めての場合は、Xcodeがガイドを提供します (ただし、開発者プログラムに登録する必要があります)。署名アカウントを設定した後、デバイスにアプリを実行するには、上部でデバイスを選択して、プレイをクリックするだけです。ここでは、Xcodeでデバイスにアプリを実行する方法の例を示します。

If you’re new to native mobile development, you can use the Capacitor CLI to easily open both native projects:

npx cap open ios
npx cap open android

Quasar Webアプリをモバイルデバイスにデプロイすることに成功しました。ここでは、Quasar Webアプリをモバイルデバイスにデプロイする方法の例を示します。

ですが、開発中にはこの作業をより速く行う方法もあります…

Capgo Live Update

Capgo Live Updateは、開発者がアプリの更新をアプリストアの通常の提出プロセスを経ることなく行うことができるサービスです。この方法は、バグの修正や小さな更新をアプリストアのレビュープロセスを待たずに迅速に行うための便利な方法です。

QuasarアプリにCapgoを統合することは、リアルタイムのライブ更新の力を引き出すための簡単なプロセスです。このステップバイステップのガイドでは、Capgo Live Updateの統合と実装を通して、シームレスな更新を提供することができます。

Capgoにサインアップしてダッシュボードにアクセス:

アカウントを作成し、APIキーを取得して最初のバージョンをアップロードする準備ができました。まずは Capgoにサインアップしてください.

Capgo SDKをインストール:

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

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

次に、アプリにcodeを追加して、CodePushの代わりに使用してください:

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

CapacitorUpdater.notifyAppReady()

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

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

最初に、__CAPGO_KEEP_0__で使用する all apikey CLIにログインするには、CLIアカウント内のapikeyを使用してください。

`npx @capgo/cli@latest login YOU_KEY`

最初のアプリを追加してください。:

Capgo Cloudにアプリを作成し、CLIで始めましょう。

    npx @capgo/cli@latest app add

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

最初のバージョンをアップロードしてください。:

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

npx @capgo/cli@latest bundle upload`

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

チェックインしてください。 Capgo ビルドが存在する場合

私が作ったモバイルサンドボックスアプリで試すこともできますデフォルトチャンネルに設定.

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

After you have sent your app to Capgo, you need to make your channel default to let apps receive updates from 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 ライブアップデートを受け取る

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

__CAPGO_KEEP_1__

  npx cap run [ios | android]

アプリを開き、バックグラウンドに置き、再度アプリを開きます。ログに表示されるのは、アプリがアップデートを行ったことを示すものです。

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

Capacitor プラグインの使用

Capacitor プラグインの使用方法をご紹介します。ご存知のように、プラグインを使用する方法については何度もご説明しました。プラグインを使用するには、以下のコマンドを実行してください。

npm i @capacitor/share

Share プラグインは、特別な機能はありませんが、ネイティブの共有ダイアログを表示します! Share プラグインを使用するには、パッケージをインポートし、関連する関数を呼び出すだけです。アプリの pages/index.vue を以下のように変更してください。プラグインをインストールする際には、sync を実行し、再度アプリをデバイスにデプロイする必要があります。以下のコマンドを実行してください。 share() pages/index.vue アプリを再度デプロイするには、以下のコマンドを実行してください。 __CAPGO_KEEP_0__

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

pages/index.vue

npx cap sync

ボタンを押した後、素晴らしいネイティブシェアダイアログの実行を目撃できます!

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

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

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

@capgo/capacitor-native-navigation —ネイティブナビゲーションバー、iOSのLiquid Glassタブバー、Androidのブレードタブバーのスタイル。Quasarルーターのルート状態を維持し、プラグインはネイティブのブラウザを管理します。
@capgo/capacitor-transitions —IonicスタイルのページトランジションとiOSのエッジスワイプバック、WebViewレイヤー内で、イオニックUIを採用することなく。

インストールする:

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

CSSInsetモードでネイティブのナビゲーションを設定し、ウェブコンテンツはネイティブのバーを尊重するようにします:

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>

ルーティングされたページを cap-router-outlet, cap-page、 cap-content、 setDirection('forward') または setDirection('back') をwrapし、

、 Using @capgo/capacitor-native-navigation ネイティブのナビゲーションがウェブヘッダーまたはフッターを重複するのを避けるように、ウェブヘッダーまたはフッターを表示しないでください。 Using @capgo/capacitor-transitions.

安全なエリアのTailwind

Tailwind CSSのデバイス安全エリアを使用するには @capgo/tailwind-capacitor (Capacitorで tailwind-capacitor on npm). It provides safe-areas utilities and other Capacitor-friendly Tailwind plugins:

npm add -D tailwind-capacitor

機能とその他のCapacitor対応のTailwindプラグイン: src/css/app.scss:

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

In pt-safe, pb-safe機能を使用する px-safe , env(safe-area-inset-*) 代わりに手動で追加するのではなく、機能を使用する。プロジェクトは活発に開発されています — ご利用のQuasar設定で必要なものが不足している場合 GitHubのPRを開く.

iOSレイアウトの問題を修正する (ビューポート、セーフエリア、水平オーバーフロー)

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

(またはQuasarのHTMLテンプレート内)

ビューポートメタタグを設定する index.html iOSセーフエリアを1つのルートラッパーからのみ処理する <head>:

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

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

すべてのページコンテンツを

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);
}

セーフエリアのパディングを複数回追加したり、ヘッダー、モーダル、レイアウトラッパーに追加すると、UIが切り取られたり大きすぎるように見えることがあります。 .app-shellセーフエリアのパディングを

__CAPGO_KEEP_0__のPRを開く @capgo/tailwind-capacitor, you can express the same padding with utilities like pt-safe pb-safe px-safe on that single shell.

Set Capacitor iOS `contentInset` に設定します。 `never` first

In capacitor.config.ts, native の inset を無効にして、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-*) padding は、ダブルスペースの原因となることがよくあります。

Find the real overflowing element

通常の原因は、固定ピクセル幅の要素を使用している 100vw, Tailwind w-screen, 固定ピクセル幅の要素 min-width.

Safari Web インスペクターで実行:

[...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の追加により、最新の機能やバグ修正を常に利用できるように、リアルタイムの更新をアプリに追加するのは、もうとても簡単です。

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.

Capacitorを使用している場合 Creating Mobile Apps with live updates, Quasar and Capacitor. Capacitorを使用して、ネイティブプラグインの作業計画を立てるには、Capacitorプラグインディレクトリと接続します。 Capgo Plugin Directory for the product workflow in Capgo Plugin Directory, Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, Capacitorプラグインの実装詳細プラグインの追加または更新イオニックエンタープライズプラグインの代替イオニックエンタープライズプラグインの代替の製品ワークフローについて Capgo ネイティブビルド Capgo ネイティブビルドの製品ワークフローについて

Creating Mobile Apps with live updates, Quasar and Capacitor.