メインコンテンツにジャンプ
Capgoロゴ
チュートリアル

Creating Mobile Apps with live updates, Quasar and Capacitor.

How to create a mobile app with Quasar, Capacitor and implement live updates.

Anik Dhabal Babu

Anik Dhabal Babu

Content Marketer
Creating Mobile Apps with live updates, Quasar and Capacitor.

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

Capacitorを使用すると、QuasarのWebアプリをモバイルアプリに変換する必要がなくなるので、React Nativeのような別の方法を学ぶ必要がなくなる。

このチュートリアルでは、Quasarアプリの新しいインスタンスから始め、Capacitorを使用してモバイルアプリに移行する方法を学びます。また、 Capgoを使用してモバイルアプリに移行する方法を学びます。 To send live updates to your app in seconds.

About Capacitor

CapacitorJSは、ゲームチェンジャーです！ どのようなWebプロジェクトでも、簡単に取り入れることができ、Webビューにアプリケーションを包み、ネイティブのXcodeとAndroid Studioプロジェクトを自動生成します。また、プラグインは、JSブリッジを介してカメラなどのネイティブデバイス機能にアクセスできます。

Capacitorを使用すると、複雑なセットアップや急勾配の学習曲線なしで素晴らしいネイティブモバイルアプリを取得できます。スリムなAPIとストリーミングされた機能により、プロジェクトに簡単に取り入れることができます。私に任せると、Capacitorで完全に機能するネイティブアプリを実現するのは驚くほど簡単です。

Quasarアプリの準備

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

npm init quasar

Quasarプロジェクトのセットアップ

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

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

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

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

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

Adding Capacitor to Your Quasar App

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

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

__CAPGO_KEEP_0__

最後に、プラットフォームを追加できます。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

Capacitorを初期化します。

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

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

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

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

この不正確さを修正するには、 capacitor.config.json ファイルを開き、 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 をすべて正しい場所に同期するので、ネイティブプラットフォームで表示できるようになります。

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

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

__CAPGO_KEEP_0__

__CAPGO_KEEP_0__ __CAPGO_KEEP_0__ __CAPGO_KEEP_0__ __CAPGO_KEEP_0__ __CAPGO_KEEP_0__

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

npx cap open ios
npx cap open android

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

android-studio-run

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

xcode-run

成功しました！Quasar Webアプリをモバイルデバイスにデプロイしました。ここに例があります。

quasar-mobile-app

待ってください、開発中にはもっと速い方法があります…

Capgo Live Update

Capgo Live Updateは、開発者がアプリの更新をApp Storeの通常の提出プロセスを経ることなく実行できるサービスです。このサービスは、アプリのバグを修正したり、小さな更新を実行したりするために便利な方法です。

CapgoをQuasarアプリに統合することは、リアルタイムのライブ更新の力を手に入れるための簡単なプロセスです。このステップバイステップのガイドでは、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()

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

Capgo CLOUDにログイン:

apikeyを使用して all __CAPGO_KEEP_0__ あなたのアカウント内にあるもので、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 を実行してアプリを更新してください。

Receive a Live Update:

Live Updateを受信するには、アプリをデバイスまたはエミュレータで実行する必要があります。簡単な方法は、以下のコマンドを実行してローカルアプリをエミュレータまたはコンピュータに接続されたデバイスで起動することです。

  npx cap run [ios | android]

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

Congrats! 🎉 アプリの最初の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

このようなプラグインの使用方法をご紹介します。ご存知のとおり、数回ご紹介しました。 Share pluginShare プラグイン share() There’s nothing fancy about the Share プラグインは、特別な機能はありませんが、native share dialogを呼び出します。 function from our app, so let’s change the

<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

pages/index.vueを変更してください。

As mentioned earlier, when installing new plugins, we need to perform a sync operation and then redeploy the app to our device.

新しいプラグインをインストールする場合、sync操作を行い、再度アプリをデバイスにデプロイする必要があります。 run the following command: "__CAPGO_KEEP_1__" そしてパッケージをインストールするには:

npm i konsta

さらに、ファイルを修正する必要があります: tailwind.config.js ファイル:

// import konstaConfig config
const konstaConfig = require('konsta/config')

// wrap config with konstaConfig config
module.exports = konstaConfig({
  content: [
    './pages/**/*.{vue}',
    './components/**/*.{vue}',
  ],
  darkMode: 'media', // or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
})

konstaConfig Konsta UI のために必要な追加のバリアントとヘルパー ユーティリティを含むデフォルトの (またはカスタムの) Tailwind CSS 設定を拡張します。

ここで、主な App コンポーネントを設定する必要があります。グローバルパラメータ (例えば theme).

アプリ全体を App でラップする必要があります。 pages/_app.vue:

<template>
  <App theme="ios">
    <Quasar />
  </App>
</template>

<script setup>
import { App } from 'konsta/vue';
</script>

例えば、

Example Page

すべての設定が完了したら、Quasar ページで Konsta UI Vue コンポーネントを使用できます。 pages/index.vue と変更してください：

<template>
  <Page>
    <Navbar title="My App" />

    <Block strong>
      <p>
        Here is your Quasar & Konsta UI app. Let's see what we have here.
      </p>
    </Block>
    <BlockTitle>Navigation</BlockTitle>
    <List>
      <ListItem href="/about/" title="About" />
      <ListItem href="/form/" title="Form" />
    </List>

    <Block strong class="flex space-x-4">
      <Button>Button 1</Button>
      <Button>Button 2</Button>
    </Block>
  </Page>
</template>

<script setup>
import {
  Page,
  Navbar,
  Block,
  Button,
  List,
  ListItem,
  Link,
  BlockTitle,
} from 'konsta/vue';
</script>

必要なすべてのコンポーネントをインストールした後、ライブリロードが同期されていない場合は、すべてを再起動してみてください。QuasarとCapacitorを使用して、モバイルアプリを構築し、ある程度のネイティブな見た目を持つはずです。

まとめ

Capacitorは既存のWebプロジェクトを基にしたネイティブアプリケーションを構築するための優れたオプションであり、codeを簡単に共有し、UIの統一性を維持する方法を提供します。

さらに、__CAPGO_KEEP_0__の追加により、ライブアップデートをアプリに追加することがさらに簡単になり、ユーザーは常に最新の機能とバグ修正にアクセスできるようになります。 CapgoをNext.jsアプリに追加する方法を学びたい場合は、次の記事を参照してください：Creating Mobile Apps with live updates, Quasarと__CAPGO_KEEP_0__から始めてください。

Capgoを使用してネイティブプラグインの作業を計画し、接続する場合は、

Creating Mobile Apps with live updates, QuasarとCapacitorを使用します。

を使用してください。 Capacitorは既存のWebプロジェクトを基にしたネイティブアプリケーションを構築するための優れたオプションであり、__CAPGO_KEEP_1__を簡単に共有し、UIの統一性を維持する方法を提供します。 __CAPGO_KEEP_0__の追加により、ライブアップデートをアプリに追加することがさらに簡単になり、ユーザーは常に最新の機能とバグ修正にアクセスできるようになります。 Capgo プラグイン ディレクトリ Capgo プラグイン ディレクトリの製品ワークフローについて Capacitor プラグインは Capgo によって提供されます Capacitor プラグインの実装詳細については Capgo を参照してください プラグインの追加または更新 プラグインの追加または更新の実装詳細についてはこちら Ionic Enterprise プラグインの代替 Ionic Enterprise プラグインの代替の製品ワークフローについて Capgo ネイティブ ビルド Capgo ネイティブ ビルドの製品ワークフローについて

Capacitor アプリのリアルタイム更新

Capgo アプリのバグ修正

ウェブ層のバグが生じた場合、__CAPGO_KEEP_0__ を使用して修正を配信するのを待つのではなく、数日間のアプリストアの承認を待つ必要がなくなる。ユーザーはバックグラウンドで更新を受け取り、ネイティブの変更は通常のレビュー経路を通る。

スタートする

Capgo gives you the best insights you need to create a truly professional mobile app.

Capacitor アプリで2方向の通信
__CAPGO_KEEP_0__ アプリで2方向の通信
開発、モバイル、アップデート

2-Way Communication in Capacitor Apps

5つのOTA更新ミスを避ける
開発、セキュリティ、更新
2025年4月13日

5つのOTA更新ミスを避ける

モバイルアプリライブ更新のための5つのセキュリティベストプラクティス
開発、モバイル、更新
2025年1月14日

モバイルアプリライブ更新のための5つのセキュリティベストプラクティス

ブログからすべてを参照