モバイルアプリの作成にlive updates、QuasarとCapacitorを使用します。

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

Capacitorを使用すると、QuasarのWebアプリをモバイルアプリに変換することができます。モバイルアプリを作成するには、React Nativeのような別の方法を学ぶ必要はありません。

このチュートリアルでは、Quasarアプリの新しいプロジェクトから始めて、Capacitorを使用してネイティブモバイルアプリに移行するプロセスを説明します。さらに、Capacitorを使用して、秒数でアプリにライブアップデートを送信します。 Capgo CapacitorJSは本当にゲームチェンジャーです！あなたは、CapacitorJSをあらゆるWebプロジェクトに簡単に組み込むことができ、そして、WebアプリケーションをネイティブWebviewにラップし、ネイティブXcodeとAndroid Studioプロジェクトを生成します。また、プラグインは、JSブリッジを介してカメラなどのネイティブデバイス機能にアクセスすることも提供します。

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

Quasarアプリの準備

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 __CAPGO_KEEP_0__」のオプションを選択し、「Quasar v2」を選択してください。

npm init quasar

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

__CAPGO_KEEP_0__は、Quasarアプリの新しいプロジェクトから始めて、__CAPGO_KEEP_0__を使用してネイティブモバイルアプリに移行するプロセスを説明します。さらに、__CAPGO_KEEP_0__を使用して、秒数でアプリにライブアップデートを送信します。 CapacitorJSは本当にゲームチェンジャーです！あなたは、CapacitorJSをあらゆるWebプロジェクトに簡単に組み込むことができ、そして、WebアプリケーションをネイティブWebviewにラップし、ネイティブXcodeとAndroid Studioプロジェクトを生成します。また、プラグインは、JSブリッジを介してカメラなどのネイティブデバイス機能にアクセスすることも提供します。 プロジェクトのうちのどれかを選択します。 したがって、package.jsonに含める簡単なスクリプトを追加して、Quasarプロジェクトを構築およびコピーすることができます: package.json コマンドを実行した後、プロジェクトのルートディレクトリに新しいフォルダが表示されます。

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

このフォルダは後で__CAPGO_KEEP_0__によって使用される予定ですが、現在は正しく設定する必要があります。 generate__CAPGO_KEEP_0__をQuasarアプリに追加する dist ウェブアプリをネイティブモバイルコンテナにパッケージ化するには、最初のいくつかのステップを実行する必要がありますが、その後は単に1つのコマンドを実行するだけです。

最初に、Capacitor __CAPGO_KEEP_1__をインストールできます。

CapacitorはCapgoの

__CAPGO_KEEP_1__はCapacitorの sync __CAPGO_KEEP_0__はCapgoの

__CAPGO_KEEP_1__はCapacitorの Capacitor CLI As a development dependencyを追加し、プロジェクト内でセットアップする。セットアップ中は、デフォルトの名前とバンドル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

この時点で、Quasarプロジェクト内で新しい ios と android フォルダを観察することができます。

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

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

また、__CAPGO_KEEP_0__を探す必要があります。 capacitor.config.ts プロジェクト内にあるファイルは、Syncの際に利用される基本的なCapacitor設定を含んでいます。注意する必要があるのは、 webDir, では、ビルドコマンドの結果を指す必要があります。現在は不正確です。

Capacitorの設定を変更するには、Capacitorの設定ファイルを開いてください。 capacitor.config.json ファイルを更新する webDir:

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

コマンドを実行して試してみてください。

npm run generate
npx cap sync

The first command npm run generate will simply build your Quasar project and copy the static build, while the second command npx cap sync will sync all the web code into the right places of the native platforms so they can be displayed in an app.

Additionally, the sync command might update the native platforms and install plugins, so when you install a new Capacitor plugins it’s time to run npx cap sync again.

Without noticing, you are now actually done, so let’s see the app on a device!

Nativeアプリのビルドとデプロイ

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

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

npx cap open ios
npx cap open android

ネイティブプロジェクトを設定した後、実機にアプリをデプロイするのは簡単です。Android Studioでは、設定を変更することなく実機にアプリをデプロイすることができます。Android Studioでは、すべての準備が整うのを待ちます。

Xcodeでは、実機にアプリをデプロイするには署名アカウントを設定する必要があります。シミュレータにのみアプリをデプロイする場合と同じです。署名アカウントを設定する必要がある場合は、Xcodeはプロセスをガイドします (ただし、再び、開発者プログラムに登録する必要があります)。その後、実機にアプリを実行するには、上部で選択できる実機を選択するだけで、実行を実行するだけです。

おめでとうございます! Quasar Webアプリをモバイルデバイスに成功でデプロイしました。

しかし、開発中はもっと速くする方法もあります…

Capgo Live Update

Capgo Live Updateは、開発者がアプリの更新をApp Storeの通常の提出プロセスを通さずにデプロイできるサービスです。このサービスは、バグを修正したり、アプリに小さな更新を加えたりするために、App Storeのレビュープロセスを待つ必要がなくなるため、便利な方法です。

Capgoの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()

プラグインのインストールが成功したことをnativeプラグインに通知します。

Capgoにログイン:

最初に all __CAPGO_KEEP_0__ APIキー あなたのアカウントに存在するもので、CLIでログインするために

`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 ビルドが存在するかどうかを確認する

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

Make channel default:

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

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

Configure app to validate updates:

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

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

CapacitorUpdater.notifyAppReady()

Then do a npm run build && npx cap copy __CAPGO_KEEP_0__を使用してアプリを更新するには、次のコマンドを実行してください。

Receive a Live Update:

Live Updateを受信するには、アプリをデバイスまたはエミュレータで実行する必要があります。デバイスまたはエミュレータに接続されたコンピューターでアプリを実行するには、次のコマンドを実行してください。

  npx cap run [ios | android]

Open the app, put it in the background and open it again, you should see in the logs the app did the update.

Congrats! 🎉 __CAPGO_KEEP_0__を使用して初めてのLive Updateを成功的にデプロイしました。これはLive Updateの機能の始まりです。Live Updatesの詳細については、 Live Updates docs.

Capacitor プラグインを使用する

Let’s take a look at how to use a Capacitor plugin in action, which we’ve mentioned a few times before.

npm i @capacitor/share

この機能を実際に使ってみるには、前にも何度か言及したように、次のコマンドを実行して簡単なプラグインをインストールすることができます。 There’s nothing fancy about the「Share plugin」は、実際には何も特別なことはないのですが、native share dialogを呼び出すだけです。 share() Share plugin ですが、実際にはnative share dialogを呼び出すだけです。なので、まずはpackageをimportし、次に呼び出す関数を呼び出すだけです。なので、 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>

を次のように変更してみましょう。

npx cap sync

As mentioned earlier, when installing new plugins, we need to perform a sync operation and then redeploy the app to our device. To do this, run the following command:

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-feeling UI with Capgo Native Navigation and Transitions

ボタンを押すと、美しいnative share dialogが実際に動作することができます！ Ionic クロスプラットフォームアプリケーションを構築するには、ですがQuasarと統合することはハック的で、既存のものと比較してほとんど価値がない場合があります。 Tailwind CSS.

Quasar + Capacitorアプリケーションで、ネイティブモバイルのフィールを得るには、WebのみのUIキットのようなKonsta UIではなく、Capgoプラグインを使用することをお勧めします。

• @capgo/capacitor-native-navigation —ネイティブのナビゲーションバー、iOSのLiquid Glassタブバー、Androidのブラーされたタブバーのスタイル。Quasarルーターはルートの状態を維持しますが、プラグインはネイティブのブラウザを所有します。
• @capgo/capacitor-transitions —Ionicスタイルのページ遷移とiOSのエッジスワイプバックをWebViewレイヤーで実行しますが、IonicのUIを採用する必要はありません。

両方をインストールする

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>

ルーティングされたページを囲みます。 cap-router-outlet, cap-page, cap-content、 setDirection('forward') , setDirection('back') 、

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

@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-ネイティブナビゲーションの使用

と @capgo/capacitor-トランジションの使用 (published as tailwind-capacitor on npm). It provides safe-areas utilities and other Capacitor-friendly Tailwind plugins:

npm add -D tailwind-capacitor

In src/css/app.scss:

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

Use utilities such as pt-safe, pb-safe、 px-safe 、 env(safe-area-inset-*) instead of sprinkling open a PR on GitHub.

open a PR on __CAPGO_KEEP_0__

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

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

In index.html (またはQuasarのHTMLテンプレート)、ビューポートメタタグを <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ヘッダー、モーダル、レイアウトラッパーなどで重複したセーフエリアのパディングを適用すると、UIが切り取られたり大きすぎるように見えることがよくあります。

With @capgo/tailwind-capacitor,同じパディングを pt-safe pb-safe px-safe 単一のシェルに適用することで、

Set Capacitor iOS contentInset To never first

In capacitor.config.ts, prefer native inset disabled and let CSS (or Native Navigation’s contentInsetMode: 'css'nativeのインセットを無効にして、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-screenSafari Web Inspectorで実行: min-width.

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

With 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をNext.jsアプリに追加する方法を学びたい場合は、次の記事を参照してください :

Creating Mobile Apps with live updates、QuasarとCapacitorから始めてください。

__CAPGO_KEEP_0__を使用している場合 モバイルアプリの作成にライブ更新、QuasarとCapacitorを使用します。 native プラグインの作業を計画するには、__CAPGO_KEEP_0__と接続します。 Capgo プラグイン ディレクトリ Capgo プラグイン ディレクトリの製品ワークフロー Capacitor プラグインのCapgo Capacitor プラグインのCapgoの実装詳細 プラグインの追加または更新 プラグインの追加または更新の実装詳細 Ionic Enterprise プラグインの代替 Ionic Enterprise プラグインの代替の製品ワークフロー、そして Capgo ネイティブ ビルド Capgo ネイティブ ビルドの製品ワークフロー