Creating Mobile Apps with live updates, Quasar and Capacitor.

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

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

このチュートリアルでは、Quasarの新しいアプリから始め、Capacitorを組み込んで、ネイティブモバイルアプリに進むプロセスを指示します。また、Capacitorを使用して、秒単位でアプリにライブアップデートを送信することもできます。 Capgoについて CapacitorJSは本当にゲームチェンジャーです! どのWebプロジェクトでも容易に組み込むことができ、ネイティブのWebビューにアプリケーションをwrapし、ネイティブのXcodeとAndroid Studioプロジェクトを生成します。さらに、プラグインはJSブリッジを通じてカメラなどのネイティブデバイス機能にアクセスできます。

Capacitorを使うと、複雑なセットアップや急な学習カーブなしで素晴らしいネイティブモバイルアプリを取得できます。__CAPGO_KEEP_1__はスリムで、機能はストリーミングされており、プロジェクトに簡単に組み込むことができます。私に任せると、__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!

__CAPGO_KEEP_0__

__CAPGO_KEEP_1__

npm init quasar

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

Quasar Project のセットアップのために、Quasar __CAPGO_KEEP_0__ の "App with Quasar __CAPGO_KEEP_0__" オプションを選択し、 "Quasar v2" を選択します。 Quasar Project のセットアップのために、Quasar Project をエクスポートする必要があります。 export Quasar Project のセットアップのために、Quasar Project の package.json に簡単なスクリプトを追加します。 package.json

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

Quasar Project のセットアップのために、Quasar Project をビルドし、Quasar Project をコピーするために使用できるスクリプトを追加します。 generateQuasar Project のセットアップのために、コマンドを実行します。 dist Quasar Project のセットアップのために、プロジェクトのルートディレクトリに新しいフォルダが表示されます。

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

Quasar Project のセットアップのために、Quasar Capacitor に Quasar Project を追加します。

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

__CAPGO_KEEP_0__ Capacitor CLI をインストールし、プロジェクト内で設定します。セットアップ中に、名前とバンドルIDのデフォルト値に「Enter」を押してデフォルト値を受け入れることができます。

次に、iOSおよびAndroidプラットフォームの関連パッケージとコアパッケージをインストールする必要があります。

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

はプロジェクトのルートディレクトリに各プラットフォーム用のフォルダを作成します: Capgoを初期化する この時点で、新しい ios Quasarプロジェクト内のフォルダ。

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

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

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

この不正確さを直すには、 capacitor.config.json __CAPGO_KEEP_0__.ファイルと更新する 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するので、App内で表示されるようにします。

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

__CAPGO_KEEP_0__

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

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

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

npx cap open ios
npx cap open android

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

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

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

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

Capgo Live Update

Capgo Live Updateは、開発者がアプリケーションにアップデートを配信できるサービスです。通常のApp Storeの提出プロセスを経ることなく、アプリケーションにアップデートを配信できるため、バグの修正や小規模なアップデートを迅速に実施できる便利な方法となります。

QuasarアプリにCapgoを統合することは、リアルタイムでアップデートを実施できるようにする簡単なプロセスです。このステップバイステップのガイドでは、Capgo Live Updateの統合と実装を通して、シームレスなアップデートを提供できるようにします。

Capgoアカウントにサインアップして、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()

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

Login to Capgo CLOUD:

最初に、 all apikey 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にアプリを送信した後、デフォルトチャンネルを設定して、アプリが__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]

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

おめでとうございます！ 🎉 Capgo で初めてのライブアップデートを成功させました。これはライブアップデートの始まりです。ライブアップデートの詳細については、ドキュメントを参照してください。 ライブアップデートドキュメント.

Capacitor プラグインの使用

Capacitor プラグインの使用方法をご紹介します。プラグインの使用方法については、以前にもご紹介しました。プラグインをインストールするには、以下のコマンドを実行してください。

npm i @capacitor/share

Share プラグインは、特別な機能はありませんが、ネイティブの共有ダイアログを表示します。 Share プラグインプラグインをインストールした後、import を実行し、関連する関数を呼び出すだけです。アプリの pages/index.vue を以下のように変更してください。 share() プラグインをインストールした後、sync を実行し、再度アプリをデバイスにデプロイする必要があります。以下のコマンドを実行してください。 pages/index.vue アプリの 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>

pages/index.vue

npx cap sync

ボタンを押した後、素晴らしいネイティブシェアダイアログが実行されます!

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

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

数年間、 イオニック を使用してクロスプラットフォームアプリケーションを構築してきましたが、 クアサーの.

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 を持っている場合、Quasar + __CAPGO_KEEP_0__ アプリでネイティブモバイルフィーリングを実現するには、WebのみのUIキットであるKonsta UIではなく、__CAPGO_KEEP_1__ プラグインを使用します。
• @capgo/capacitor-native-navigation —ネイティブナビゲーションバー、iOSのLiquid Glassタブバー、Androidのブラーしたタブバーのスタイル。Quasarルーターのルート状態を維持し、プラグインはネイティブのChromeを所有します。

CapacitorとQuasarを両方インストールしてください。

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

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

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

Capacitorでアプリシェルにネイティブのページトランジションを追加してください。

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

ページルーティングを実装した場合、Capacitor によって管理される Quasar のルーティングを Wrap する必要があります。 cap-router-outlet, cap-page、 cap-content, して呼び出す setDirection('forward') Capacitorライブアップデートの代替手段の比較ページです。 setDirection('back') ページを移動する前に。ウェブヘッダーまたはフッターを複製しないでください。ネイティブのナビゲーションが管理する画面では。

全ガイドを参照してください。 Using @capgo/capacitor-native-navigation と Capgoで使用する@capgo/capacitor-transitions.

セーフエリアのTailwind

Tailwind CSSのデバイスセーフエリアの場合、使用 @capgo/tailwind-capacitor (__CAPGO_KEEP_0__で公開) tailwind-capacitor npmが提供するユーティリティと、npmフレンドリーなTailwind プラグイン: safe-areas utilities and other Capacitor-friendly Tailwind plugins:

npm add -D tailwind-capacitor

Quasar用のユーティリティとして使用 src/css/app.scss:

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

, pt-safe, pb-safe代わりに手作業で px-safe プロジェクトは積極的に開発されています。何かが不足している場合、Quasarの設定用に env(safe-area-inset-*) __CAPGO_KEEP_0__ GitHubでPRを開く.

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

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

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

iOSセーフエリアを1つのルートラッパーから処理する index.html 単一のアプリシェルを作成し、セーフエリアのパディングをそこに適用する — 複数のネストされたコンポーネントに適用するのではなく: <head>:

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

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

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

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__CAPGO_KEEP_0__でPRを開く

Fixing iOS Layout Issues (Viewport, Safe Area, and Horizontal Overflow) @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, prefer native inset disabled and let CSS (or Native Navigation’s) 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.

In 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水平方向のオーバーフロー問題は、

, セーフエリアの安全なパディングが重複していること、または固定幅のコンテナが原因であることが多いです。 — これは、ビューポート メタタグ自体の問題ではありません。

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 ネイティブ ビルドの製品ワークフローについて