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

VueとCapacitorでモバイルアプリを作成する

Vue、Capacitor、およびオプションでCapgoのネイティブナビゲーション、トランジション、iOSレイアウトのベストプラクティスを使用してモバイルアプリを作成する方法を学びます。

マーティン・ドナディュー

マーティン・ドナディュー

コンテンツマーケター
VueとCapacitorでモバイルアプリを作成する

このチュートリアルでは、Vue Web アプリケーションを Capacitor を使用してネイティブモバイルアプリケーションに変換するプロセスをガイドします。 Capgo Native Navigation と Transitions を追加すると、ネイティブモバイルのフィールが得られ、安全なエリアに tailwind-capacitor を使用できます。

Capacitor

Capacitor は、Web プロジェクトに簡単に統合できるゲームチェンジャーです。アプリケーションをネイティブモバイルアプリケーションに変換し、Xcode と Android Studio のプロジェクトを生成し、JavaScript ブリッジを使用してカメラなどのネイティブデバイス機能にアクセスできます。

Vue アプリを準備する

最初に、次のコマンドを実行して新しい Vue アプリを作成します。

vue create my-app
cd my-app
npm install

ネイティブモバイルのデプロイ用に Vue アプリを準備するには、プロジェクトをエクスポートする必要があります。package.json ファイルにスクリプトを追加して、Vue プロジェクトをビルドしてコピーします。 コマンドを実行した後、プロジェクトのルートディレクトリに新しいフォルダが表示されます。このフォルダは、後で __CAPGO_KEEP_0__ を使用して使用されます。 __CAPGO_KEEP_0__ を Vue アプリに追加する

{
  "scripts": {
    // ...
    "build": "vue-cli-service build"
  }
}

このチュートリアルでは、Vue Web アプリケーションを __CAPGO_KEEP_0__ を使用してネイティブモバイルアプリケーションに変換するプロセスをガイドします。 __CAPGO_KEEP_1__ Native Navigation と Transitions を追加すると、ネイティブモバイルのフィールが得られ、安全なエリアに tailwind-__CAPGO_KEEP_2__ を使用できます。 build __CAPGO_KEEP_0__ dist Capacitor は、Web プロジェクトに簡単に統合できるゲームチェンジャーです。アプリケーションをネイティブモバイルアプリケーションに変換し、Xcode と Android Studio のプロジェクトを生成し、JavaScript ブリッジを使用してカメラなどのネイティブデバイス機能にアクセスできます。

Adding Capacitor to Your Vue App

テストログムートイントイントに当前パティショナに当前パティショナを安被してくださせくだ。

  1. Capacitor、CLIを安被しつパティショナに安被してくださせくだ、パティショナを安被してくださせくだ。パティショナを安被してくださせくだ、パティショナを安被してくださせくだ。

  2. パティショナを安被してくださせくだ、アシャーケイントイント、アシャーケイントイント。

  3. パティショナを安被してくださせくだ、Capacitorでパティショナを安被してくださせくだ。

# Install the Capacitor CLI locally
npm install -D @capacitor/cli

# Initialize Capacitor in your Vue 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.config.json パティショナを安被してくださせくだ、アシャーケイントイント、アシャーケイントイント、パティショナを安被してくださせくだ。 webDir buildコマンドの結果に

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

Capgoを使用して、Vueプロジェクトをビルドし、Capacitorと同期することができます。

npm run build
npx cap sync

ネイティブアプリをビルドおよび配布

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を使用して、接続されたデバイスにアプリをデプロイします。

Capacitor Live Reload

モバイルデバイス上でリアルタイムリロードを有効にするには、Capacitorアプリがネットワーク上の特定のURLからコンテンツを読み込むようにします。

ローカルIPアドレスを確認し、ファイルに正しいIPアドレスとポート番号を入力してください。 capacitor.config.ts 変更を適用するには、変更内容をネイティブプロジェクトにコピーしてください。

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'dist',
  bundledWebRuntime: false,
  server: {
    url: 'http://192.168.x.xx:8080',
    cleartext: true
  }
};

export default config;

__CAPGO_KEEP_0__

npx cap copy

今、Vueアプリを更新すると、自動的にアプリがリロードされ、変更が表示されます。

Capacitor プラグインを使用する

Capacitor プラグインをインストールし、Share プラグインなどをインストールし、Vue アプリで使用します:

npm i @capacitor/share

パッケージをインポートし、アプリで関数を呼び出します: share() 新しいプラグインをインストールした後、デバイスにアプリを再展開するには、コマンドを実行してください:

<template>
  <div>
    <h1>Welcome to Vue 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>

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

npx cap sync

Capgo

Native-feeling UI with Capgo Native Navigation and Transitions

__CAPGO_KEEP_0__ __CAPGO_KEEP_0__ __CAPGO_KEEP_0__ targetLanguage":"Japanese","protectedTokens":["Cloudflare","Capacitor","GitHub","Capgo","code","API","SDK","CLI","npm","bun"],"texts":["Tailwind CSS","Vueアプリにnativeモバイルのフィールを得るには、Konsta UIなどのwebのみのUIキットではなく、__CAPGO_KEEP_0__ プラグインを使用する。",.

@Capacitor/Capgo-native-navigation

nativeナビゲーションをCSSのインセットモードで設定する。webコンテンツはnativeバーを尊重する。

bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap sync

Liquid Glassのタブバーをレンダリングする。iOSではシステムが所有するレンダリングを使用し、AndroidではぼやけたWebViewのバックドロップを使用する。

import { NativeNavigation } from '@capgo/capacitor-native-navigation';

await NativeNavigation.configure({
  contentInsetMode: 'css',
  animationDuration: 360,
  glass: {
    effect: 'liquidGlass',
  },
});

nativeページ遷移をアプリシェルに追加する。

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>

Wrap routed pages in cap-router-outlet, cap-page, and cap-content, そしてコール setDirection('forward') または setDirection('back') ナビゲートする前に、重複するウェブ ヘッダーまたはフッターを表示しないでください。

詳細なガイドを参照してください: Capacitor@capgo/capacitor-native-navigation と Capacitor@capgo/capacitor-transitions.

セーフ エリア (Safe areas) については、Tailwind CSS を使用します。

Capacitor@__CAPGO_KEEP_0__/tailwind-__CAPGO_KEEP_1__ @capgo/tailwind-capacitor Capacitor __CAPGO_KEEP_0__。 tailwind-capacitor on npm). It provides safe-areas ユーティリティやその他 Capacitor-対応するTailwindプラグイン:

bun add -D tailwind-capacitor

In src/assets/main.css:

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

使用するユーティリティとして pt-safe, pb-safe, px-safe の代わりに env(safe-area-inset-*) 手作業で open a PR on GitHub.

__CAPGO_KEEP_0__

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

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

ビューポートメタタグを追加する index.html iOSのセーフエリアを1つのルートラッパーからのみハンドルする <head>:

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

アプリのシェルを1つだけ作成し、そのシェルにセーフエリアのパディングを適用する — 複数のネストされたコンポーネントに適用するのではなく:

すべてのページコンテンツを内側にラップする

html,
body,
#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-shellCapgoと

@__CAPGO_KEEP_0__/tailwind-__CAPGO_KEEP_1__ @capgo/tailwind-capacitorその1つのシェルに pt-safe pb-safe px-safe iOSのセーフエリアのパディングを設定する

Set Capacitor iOS contentInset to never first

In capacitor.config.ts, native のインセットを無効にして CSS (または Native Navigation の ) が安全エリアを制御することをお勧めします。 contentInsetMode: 'css'CSS の padding と __CAPGO_KEEP_0__ の自動コンテンツインセットを組み合わせることは、一般的なダブルスペースの原因です。

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

Mixing Capacitor’s automatic content inset with CSS env(safe-area-inset-*) 通常の原因は、

Tailwind

、固定ピクセル幅、または大きい 100vwの要素を使用していることです。 w-screenSafari Web インスペクターで実行します: min-width.

Tailwind の場合、

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

を w-screen に置き換えます。 w-full __CAPGO_KEEP_0__の場合、可能な限り多くの水平方向のオーバーフロー問題は、 100vw / w-screen安全なエリアの重複したパディングまたは固定幅のコンテナから来ていますが、ビューポートメタタグ自体からではありません。

まとめ

Capacitorは既存のWebプロジェクトに基づいてネイティブアプリケーションを構築するのに適したオプションです。Capgoを追加すると、さらに簡単にライブアップデートを追加できます。ユーザーは常に最新の機能やバグ修正にアクセスできます。

Capgoがあなたのアプリをより良く、より速く作る方法を学びましょう 無料アカウントに登録する 今日

Building Mobile Apps with VueとCapacitorから始めて進んで行きましょう

あなたが使用している Building Mobile Apps with VueとCapacitor を使用してネイティブメディアとインターフェイスの動作を計画し、それを @capgo/capacitor-live-activitiesと接続する @capgo/capacitor-live-activitiesのネイティブ機能について @capgo/capacitor-live-activities @capgo/capacitor-live-activitiesの実装詳細について @capgo/capacitor-video-playerを使用する @capgo/capacitor-video-playerのネイティブ機能について @capgo/capacitor-video-player @capgo/capacitor-video-playerの実装詳細について、そして @capgo/capacitor-native-navigationを使用する @capgo/capacitor-native-navigationのネイティブ機能について

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

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

はじめまして

最新のブログ記事

Capgo を使うことで、プロフェッショナルなモバイルアプリを作成するために必要な最良の洞察を得ることができます。

Capacitor アプリで 2 つの方向のコミュニケーション
開発 モバイル +1
2025年4月26日

Capacitor アプリの2方向通信

OTA更新の5つの一般的なミス
開発 セキュリティ +1
2025年4月13日

OTA更新の5つの一般的なミス

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

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

ブログのすべてを参照