Creating Mobile Apps with live updates, Quasar and 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 を使用してネイティブモバイルアプリの世界に進む方法を説明します。さらに、 Capgo 即時アップデートをアプリに送信することが秒単位で可能です。

About Capacitor

CapacitorJSは実に革新的な技術です！あらゆるWebプロジェクトに容易に取り入れることができ、WebアプリケーションをネイティブのWebビューにラップし、ネイティブのXcodeとAndroid Studioプロジェクトを自動生成します。さらに、プラグインはJSブリッジを通じてカメラなどのネイティブデバイス機能にアクセスできるのです。

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アプリを作成するには、以下のコマンドを実行してください。

npm init quasar

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

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

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

__CAPGO_KEEP_0__ generate__CAPGO_KEEP_0__ dist __CAPGO_KEEP_0__

このフォルダは後でCapacitorによって使用されますが、現在は正しく設定する必要があります。

CapacitorをQuasarアプリに追加する

ウェブアプリをネイティブモバイルコンテナにパッケージ化するには、最初にいくつかのステップを実行する必要がありますが、その後は単一のコマンドを実行するだけです。 sync 最初に、__CAPGO_KEEP_0__と__CAPGO_KEEP_1__を開発依存モジュールとしてインストールし、プロジェクト内で設定します。セットアップ中に、名前とバンドルIDのデフォルト値を承認するには「Enter」を押すことができます。

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

この時点で、新しい「ios」フォルダが観察できるはずです。

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

__CAPGO_KEEP_0__ ios と アンドロイド Quasarプロジェクト内のフォルダ

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

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

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

この問題を解決するには、 capacitor.config.json ファイルを開き、 webDir:

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

コンテキスト:Capgo UIの長い文字列の親キー(solutions_cordova_to_capacitor_ai_step2_body)から取得したHTMLテキストのフラグメント。ページ/エリア:Capgoのソリューションマーケティングページ。役割:ウェブサイトのコピー文。見つかった場所:ページソリューション/コルダバトゥーキャパシタライ.astro。メッセージキー(solutions_cordova_to_capacitor_ai_step2_body)(ソリューションコルダバトゥーキャパシタライステップ2ボディ)。

npm run generate
npx cap sync

実際に試すには、以下のコマンドを実行してみてください。 npm run generate 最初のコマンド 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 もう一度。

気づかないうちに、実際には終わりましたので、デバイスでアプリを確認してみましょう!

ネイティブアプリをビルドしてデプロイする

iOSアプリを開発するには、 Xcode がインストールされている必要があります。また、Androidアプリを開発するには、 Android Studio がインストールされている必要があります。さらに、App Storeでアプリを配布する場合、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の通常の提出プロセスを経ることなく、モバイルアプリにデプロイできるサービスです。この方法は、バグを修正したり、アプリの小さな更新を実行したりするのに便利です。App Storeのレビュープロセスを待つ必要がなくなります。

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

Capgoアカウントにサインアップして、Capgoダッシュボードにアクセスしてください。:

サインアップするのはもう十分です。APIキーを取得して、最初のバージョンをアップロードしましょう。まずは Capgo __CAPGO_KEEP_1__をインストールしてください。.

Install the Capgo SDK:

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

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 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を使用してQuasarモバイルアプリを構築する Run the command to build your code and send it to Capgo with:

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ファイルに次の設定を追加してください。:

__CAPGO_KEEP_0__

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

CapacitorUpdater.notifyAppReady()

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

リアルタイムアップデートを受け取る:

Deployからリアルタイムアップデートを受け取るには、デバイスまたはエミュレータでアプリを実行する必要があります。簡単な方法は、次のコマンドを実行して、ローカルアプリをエミュレータまたはコンピューターに接続されたデバイスで起動することです。

  npx cap run [ios | android]

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

おめでとう！ 🎉 これで最初のリアルタイムアップデートを成功させました。これは、リアルタイムアップデートのすべてのことができるのはこれからです。詳しく知りたい場合は、完全な リアルタイムアップデートドキュメント.

Capacitor プラグインの使用

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

npm i @capacitor/share

プラグインは特別な機能はありませんが、 シェア プラグインは、ネイティブのシェアダイアログを表示します。プラグインを使用するには、パッケージをインポートし、関連する share() 関数を呼び出すだけです。したがって、 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>

前回説明したように、新しいプラグインをインストールする際には、Sync操作を実行し、次にアプリをデバイスに再デプロイする必要があります。 これを行うには、以下のコマンドを実行してください。

npx cap sync

ボタンをクリックすると、美しいネイティブシェアダイアログが実行されます!

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

ネイティブなUIとCapgoネイティブナビゲーションとトランジション

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

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

• @capgo/capacitor-native-navigation — iOSではLiquid Glassタブバー、Androidではブラーしたタブバーのスタイルが使用されます。Quasarルーターはルートの状態を保持し、プラグインはネイティブのブラウザを管理します。
• @capgo/capacitor-transitions — WebViewレイヤー内でのIonicスタイルのページ遷移とiOSのエッジスワイプバック、Ionic UIを採用せずに。

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>

ページルーティングを囲む cap-router-outlet, cap-page、 cap-content、呼び出し setDirection('forward') Capacitorライブアップデートの代替手段の比較ページです。Capacitorライブアップデートの代替手段を比較するには、以下の質問を考慮する必要があります。 setDirection('back') ページを移動する前に。ウェブヘッダーまたはフッターを複製しないでください。ネイティブのナビゲーションがそれらの表面を所有している場合。

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

セーフエリア

デバイスのセーフエリアを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

In src/css/app.scss:

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

Tailwindのユーティリティを使用する pt-safe, pb-safe、 px-safe CapgoのCapacitorを使用したQuasarモバイルアプリ env(safe-area-inset-*) 手動で散らすのではなく、 open a PR on GitHub.

Capgoの__CAPGO_KEEP_0__にPRを提出してください

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

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

(またはご自身の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);
}

内部にラッパーしてください .app-shell. iOS のセーフエリアの安全なパディングをヘッダー、モーダル、レイアウトラッパーに複数回適用すると、UI がカットされたり大きすぎるように見えることがあります。

With @capgo/tailwind-capacitorで、同じパディングをユーティリティとして表現できます。 pt-safe pb-safe px-safe on その単一のシェル。

Set Capacitor iOS contentInset を never first

In capacitor.config.ts, contentInsetMode: 'css'native のインセットを無効にして、CSS (または Native Navigation の)

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-*) 余白は二重スペースの原因となることが多い。

実際に溢れている要素を見つける

通常の原因は、固定ピクセル幅の要素、または大きい 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.

Capacitorを使用することで、Quasarモバイルアプリの開発がさらに簡単になります。 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を使用している場合、CapgoのQuasarモバイルアプリケーションを使用できます。 Creating Mobile Apps with live updates, Quasar and Capacitor. プラグインのネイティブワークを計画するには、それを接続する Capgo Plugin Directory Capacitor 製品ワークフローにおける Capgo プラグインディレクトリに。 Capacitor プラグインは Capgo によって提供されます。 Capacitor プラグインの実装詳細については、Capgo によって提供されます。 プラグインの追加または更新 プラグインの追加または更新の実装詳細について Ionic Enterprise プラグインの代替 Ionic Enterprise プラグインの製品ワークフローについて Capgo ネイティブ ビルド Capgo ネイティブ ビルドの製品ワークフローについて