QuasarとCapacitorを使用したモバイルアプリの作成

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

このチュートリアルでは、Quasarアプリの新しい作成から始め、Capacitorを使用してモバイルアプリに移行するプロセスを指導します。また、Capacitorを使用して、ネイティブモバイルアプリにアクセスすることもできます。

Capacitorを使用して、Quasarアプリをモバイルアプリに変換する方法を学びます。 Capgo 秒でアプリにlive updateを送信します。

Capacitorについて

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

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

Quasarアプリの準備

新しいQuasarアプリを作成するには、以下のコマンドを実行してください。

npm init quasar

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

ネイティブモバイルアプリを作成するには、プロジェクトの export が必要です。したがって、プロジェクトに簡単なスクリプトを含めることができます。 package.json Quasarプロジェクトを作成およびコピーするために利用できるものです。

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

コマンドを実行した後 generate、プロジェクトのルートディレクトリに新しい dist フォルダが見つかります。

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

QuasarアプリにCapacitorを追加する

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

translations Capacitor CLI Quasarプロジェクトを作成およびコピーするために利用できるものです。

次に、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

この時点で、iOSとAndroidのフォルダがQuasarプロジェクト内に表示されるはずです。 ios そして android プロジェクト内にフォルダが表示されるはずです。

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

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

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

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

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

Syncの際に注目する必要があるのは

npm run generate
npx cap sync

Syncの際に注目する必要があるのは npm run generate Quasar プロジェクトを単純にビルドし、静的ビルドをコピーするだけです。最初のコマンド npx cap sync 2 番目のコマンドは、ウェブ code をネイティブ プラットフォームの正しい場所に同步します。これにより、アプリ内で表示できるようになります。

さらに、Sync コマンドはネイティブ プラットフォームを更新し、プラグインをインストールする可能性があるため、新しい __CAPGO_KEEP_0__ プラグインをインストールすると、 Capacitor plugins 再度実行してください。 npx cap sync again.

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

iOS アプリを開発するには、Xcode

がインストールされている必要があります。Android アプリを開発するには、Android Studio Xcode plugins Capgoソリューション iOSとAndroidのGoogle Play Consoleに登録する必要があります。

Capacitorを使用してnativeモバイル開発を始めての方は、Capacitor CLI を使用して、nativeプロジェクトを簡単に開くことができます。

npx cap open ios
npx cap open android

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

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

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

しかし、開発中にこのプロセスを高速化する方法もあります。

Capgo Live Updateは、開発者がアプリの更新を従来のアプリストアの提出プロセスを経ることなく、実行可能なファイルをデプロイできるサービスです。このサービスは、バグの修正や小規模な更新を迅速に実行できるようにすることができます。アプリストアのレビュープロセスを待つ必要がなくなるため、開発者にとって便利な方法となります。

Capgo Live Updateは、開発者がアプリの更新を従来のアプリストアの提出プロセスを経ることなく、実行可能なファイルをデプロイできるサービスです。このサービスは、バグの修正や小規模な更新を迅速に実行できるようにすることができます。アプリストアのレビュープロセスを待つ必要がなくなるため、開発者にとって便利な方法となります。

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

Sign Upと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 CLOUDにログイン:

まずは all apikey あなたのアカウントに保存されている情報でログインするために使用する 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 __CAPGO_KEEP_0__がビルドされている場合

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

チャンネルをデフォルトに設定:

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

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

アップデートを検証するアプリを設定:

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

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

CapacitorUpdater.notifyAppReady()

次に、 npm run build && npx cap copy アプリをアップデートします。

Live Updateを受信:

アプリケーションがDeployからlive updateを受信するには、デバイスまたはエミュレータでアプリを実行する必要があります。エミュレータまたはデバイスをコンピューターに接続して、次のコマンドを実行してローカルアプリを起動するのが簡単です。

  npx cap run [ios | android]

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

おめでとう！🎉あなたは初めてのLive Updateを成功させた。これはLive Updatesの始まりです。Live Updatesの詳細なドキュメントを確認して、さらに学びましょう。 Live Updatesドキュメント.

Capacitor プラグインを使用する

Let’s take a look at how to use a Capacitor plugin in action, which we’ve mentioned a few times before. To do this, we can install a fairly simple plugin by running:

npm i @capacitor/share

Shareプラグインは何も特別なことはありませんが、native shareダイアログを呼び出します! Shareプラグインpages/index.vueを次のように変更してみましょう。 share() function からアプリに導入したものを変更する ボタンをクリックすると、美しいnative shareダイアログが実際に動作することがわかります! これまでのところ

<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のNativeナビゲーションとトランジションでnativeなUIを実現

npx cap sync

Capgoのプラグインを実際に使ってみましょう。何度も言及したことがありますが、実際に使ってみましょう。

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.

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

Capgoのプラグインを実際に使ってみましょう。何度も言及したことがありますが、実際に使ってみましょう。 イオン クロスプラットフォームアプリケーションを構築するには、イオンを使用しますが、クアサーの統合はハック的で、既存のものと比較してほとんど価値がありません。 テイルウィンドCSS.

クアサープラスCapacitorアプリケーションでネイティブモバイルのフィールを得るには、ウェブ専用のUIキットのようなコンスタUIではなく、Capgoプラグインを使用することをお勧めします。

• @capgo/capacitor-native-ナビゲーション —ネイティブナビゲーションバー、iOSのリキッドグラスタブバー、Androidのブラーしたタブバーのスタイル。クアサーのルーターはルートの状態を維持し、プラグインはネイティブのブラウザを所有します。
• @capgo/capacitor-transitions —イオンスタイルのページトランジションとiOSのエッジスワイプバックをウェブビュー層に実装することなく、イオンのUIを採用することなく。

両方をインストールします。

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

リキッドグラスタブバーをレンダリングします。(iOSはシステム所有のレンダリングを使用し、Androidはブラーしたウェブビューのバックグラウンドを使用します)。

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') ナビゲーションを開始する前に、重複するウェブヘッダーまたはフッターを生成しないようにします。

詳細なガイドを参照してください: @capgo/capacitor-ネイティブナビゲーションの使用 そして @capgo/capacitor-トランジションの使用.

セーフエリアの安全性を確保するには、Tailwind CSSを使用します。

Capacitorでデバイスの安全なエリアをTailwind CSSで使用する場合 @capgo/Tailwind-capacitor (公開された) tailwind-capacitor on npm。 safe-areas utilities とその他の Capacitor 対応 Tailwind プラグイン

npm add -D tailwind-capacitor

Capgo向けの src/css/app.scss:

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

In pt-safe, pb-safeCapgoで利用できる px-safe , env(safe-area-inset-*) 代わりに open a PR on GitHub.

Capgoで開発が行われているため、Quasarの設定で必要なものが不足している場合、

__CAPGO_KEEP_0__にPRを提出してください。 overflow-x: hidden iOSレイアウトの問題を解決する (ビューポート、セーフエリア、水平方向のオーバーフロー)

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

In index.html (またはQuasarのHTMLテンプレート) <head>:

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

セーフエリアをハンドルするには、ルートワッパーにのみ適用してください。

アプリケーションシェルを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, contentInsetMode: 'css'Nativeのインセットを使用し、CSS (またはNative Navigationの)

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

Mixing Capacitorの自動コンテンツインセットとCSSの env(safe-area-inset-*) Find the real overflowing element

The usual culprit is an element using

, 100vw, w-screenIn Safari Web Inspector, run: 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結論

Conclusion

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__ CapgoCapgoにプルリクエストを送信したい場合は、次の記事を参照してください。

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.

Capgoにプルリクエストを送信する方法を学びたい場合は、次の記事を参照してください。 Capacitor Quasarと Capgo Capacitor 製品ワークフローにおける Capgo プラグインディレクトリ Capacitor プラグインは Capgo によって提供されます。 Capacitorの実装詳細については、Capacitor プラグインによってCapgoで実装されます。 Capacitorプラグイン Capacitorプラグイン Capacitorプラグイン Capacitorプラグイン Capgo ネイティブビルド for the product workflow in Capgo Native Builds.