CapacitorとQuasarを使用したリアルタイム更新のあるモバイルアプリの作成

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

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

このチュートリアルでは、Quasarアプリの新しいインスタンスから始め、Capacitorを使用してモバイルアプリに移行するプロセスを指示します。また、Capacitorを使用して、秒単位でアプリにライブアップデートを送信することもできます。 Capgo CapacitorJSは、Webプロジェクトに簡単に組み込むことができ、WebアプリケーションをネイティブのWebビューにラップし、ネイティブの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!

__CAPGO_KEEP_0__は、Webアプリケーションをネイティブモバイルアプリに変換するためのパッケージです。

CapacitorJSは、Webプロジェクトに簡単に組み込むことができ、WebアプリケーションをネイティブのWebビューにラップし、ネイティブのXcodeとAndroid Studioプロジェクトを生成します。さらに、プラグインは、カメラなどのネイティブデバイス機能へのアクセスを提供するJSブリッジを提供します。

npm init quasar

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

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

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

CapacitorをQuasarアプリに追加する generate__CAPGO_KEEP_0__はCapacitorのことです。 dist __CAPGO_KEEP_0__はCapacitorのことです。

CapacitorはCapacitorのことです。

CapacitorはCapacitorのことです。

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

最初に、開発依存の Capacitor CLI をインストールし、プロジェクト内でセットアップします。セットアップ中は、名前とバンドルIDのデフォルト値を承認するには「Enter」を押すことができます。

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

最後に、Capacitorを追加し、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

この時点で、iOS用の ios とAndroid用の android Quasarプロジェクト内のフォルダ。

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

Androidプロジェクトにアクセスするには、 Android Studioをインストールする必要があります。iOSの場合はMacが必要で、 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 プロジェクトをビルドし、静的ビルドをコピーするだけです。 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.

は、すべてのWeb __CAPGO_KEEP_0__をネイティブプラットフォームの正しい場所にSyncし、表示するアプリ内で表示することができます。 Capacitor plugins __CAPGO_KEEP_0__ プラグインをインストールした場合 npx cap sync もう一度実行する必要があります。

気づかなければならないことですが、実際には完了しています。 では、デバイスでアプリを表示してみましょう!

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

iOSアプリを開発するには、 Xcode がインストールされている必要があります。また、Androidアプリを開発するには、 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では、設定を変更することなく実機にアプリをデプロイすることができます。ここに例があります:

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

おめでとうございます！Quasar Webアプリをモバイルデバイスに成功でデプロイしました。ここに例があります:

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

Capgo ライブ更新

Capgo ライブ更新は、開発者がアプリの更新をアプリストアの通常の提出プロセスを経ることなく、配信できるサービスです。このサービスは、急いでバグを修正したり、アプリの小さな更新を実行したりするために便利です。

QuasarアプリにCapgoを統合することは、リアルタイムのライブ更新の力を手に入れるための簡単なプロセスです。このステップバイステップのガイドでは、Capgo Live Updateの統合と実装を通して、滑らかな更新を提供できるようにサポートします。

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

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

CapgoでCapgoとSDKをインストールしてください。:

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

npm i @capgo/capacitor-updater && npx cap sync To install the plugin into your Capacitor app.

Capgoを使用して、次のcodeをアプリに追加してください。これはCodePushの代替です。

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

CapacitorUpdater.notifyAppReady()

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

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

最初に、 all アカウントに含まれる CLIでログインするために使用する

`npx @capgo/cli@latest login YOU_KEY`

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

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

    npx @capgo/cli@latest app add

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

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

Run the command to build your code and send it to Capgo with:

npx @capgo/cli@latest bundle upload`

確認してください。

__CAPGO_KEEP_0__ 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からライブアップデートを受け取るには、アプリケーションがデバイスまたはエミュレータで実行されている必要があります。簡単な方法は、次のコマンドを実行して、ローカルアプリをエミュレータまたはコンピューターに接続されたデバイスで起動することです。:

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]

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

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

Capacitor プラグインの使用

実際にCapacitor プラグインを使用する方法をご紹介します。何度も言及したことのあるこのプラグインを使用するには、以下のコマンドを実行してください。

npm i @capacitor/share

このプラグインは何も特別なことはしていませんが、native share dialogを表示します! プラグインをインストールした後、importする必要があるパッケージと、関連する関数を呼び出す必要があります。アプリのpages/index.vue share() を以下のように変更してください。 プラグインをインストールした後、sync操作を実行し、再度アプリをデバイスにデプロイする必要があります。以下のコマンドを実行してください。 __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>

__CAPGO_KEEP_0__

npx cap sync

__CAPGO_KEEP_0__を押すと、素晴らしいネイティブシェアダイアログが実行されます!

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

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

__CAPGO_KEEP_1__年間で数年間、 Ionic を使用してクロスプラットフォームアプリケーションを構築してきましたが、Quasarと統合することはハック的で、Quasarがすでに持っている場合にあまりにも価値のあることはほとんどありません。 Quasar + __CAPGO_KEEP_0__アプリケーションでネイティブモバイルフィーリングを実現するには、WebのみのUIキットであるKonsta UIのような代替品ではなく、__CAPGO_KEEP_1__プラグインを使用します。.

@Capacitor/Capgo-native-navigation

• @capgo/capacitor-native-navigation @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions
• @capgo/capacitor-transitions __CAPGO_KEEP_1__

を両方インストールする:

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

CSS inset モードでネイティブのバーを使用して、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') または

を呼び出して、移動する前に呼び出してください。ネイティブのナビゲーションが管理する表面には、Web ヘッダーまたはフッターを重複して表示しないでください。 Using @capgo/capacitor-native-navigation @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigationを使用する @capgo/capacitor-transitions.

安全なエリアにTailwind

Tailwind CSSのデバイス安全エリアを使用するには @capgo/tailwind-capacitor (公開日 tailwind-capacitor npmで公開)。 これは safe-areas 機能やその他の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";

Quasarの設定で使用する機能としては pt-safe, pb-safe、 px-safe 、 env(safe-area-inset-*) を使用します。 これらの機能を手動で配置するのではなく、代わりに使用します。 このプロジェクトは、Quasarの設定に欠けているものがあれば、積極的に開発されています。 open a PR on GitHub.

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

セーフエリアのパディングを単一のアプリシェルに適用する — 複数のネストされたコンポーネントにすると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);
}

ヘッダー、モーダル、レイアウトラッパーで重複したセーフエリアパディングがUIが切り取られたり大きすぎるように見える原因となることが多い .app-shellWith

__CAPGO_KEEP_0__ @capgo/capacitor, __CAPGO_KEEP_0__で表現できるパディングは pt-safe pb-safe px-safe 単一のシェルで実行します。

Capacitor iOS contentInset を never 最初

In capacitor.config.ts, __CAPGO_KEEP_0__のnative insetを無効にして、CSS (またはNative Navigationの) contentInsetMode: 'css')が安全なエリアを管理することを優先します。

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

Capacitorの自動コンテンツインセットとCSSのパディングを組み合わせると、通常のスペースの倍増が原因となることがよくあります。 env(safe-area-inset-*) __CAPGO_KEEP_0__の実際のオーバーフロー要素を見つける

@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__

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

Capacitor を使用する Next.js アプリに Capgo を追加する方法を学びたい場合は、次の記事を参照してください。

リアルタイムの更新を使用してモバイル アプリを作成し、Quasar と Capacitor を継続して使用する方法については、次の記事を参照してください。

Capacitor を使用していて リアルタイムの更新を使用してモバイル アプリを作成し、Quasar と Capacitor を継続して使用する方法については、次の記事を参照してください。 ネイティブ プラグインの作業を計画する場合、Cloudflare と接続するには 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_KEEP_0__ プラグインの実装詳細 プラグインの追加または更新 Ionic Enterprise Plugin Alternatives Ionic Enterprise Plugin Alternativesの製品ワークフローについて Capgo Native Builds Capgo Native Buildsの製品ワークフローについて