このチュートリアルでは、Capacitorを使用してVueのWebアプリケーションをネイティブモバイルアプリケーションに変換するプロセスをガイドすることから始めます。Capgoのネイティブナビゲーションとトランジションを追加することでネイティブモバイルのフィールを実現し、安全なエリアを使用するためにtailwind-capacitorを使用することもできます。
Capacitorについて
Capacitorは、Webプロジェクトに簡単に統合できるゲームチェンジングツールです。アプリケーションをネイティブモバイルアプリケーションに変換するために、ネイティブのXcodeとAndroid Studioプロジェクトを生成し、JavaScriptブリッジを使用してネイティブデバイスの機能にアクセスできます。
Vueアプリを準備する
まず、次のコマンドを実行して新しいVueアプリを作成してください:
vue create my-app
cd my-app
npm installVueアプリをネイティブモバイル向けに準備するには、プロジェクトをエクスポートする必要があります。package.jsonファイルにスクリプトを追加して、Vueプロジェクトをビルドしてコピーしてください: package.json コマンドを実行した後、プロジェクトのルートディレクトリに新しいフォルダが表示されます。このフォルダは、後で__CAPGO_KEEP_0__によって使用されます。
{
"scripts": {
// ...
"build": "vue-cli-service build"
}
}__CAPGO_KEEP_0__をVueアプリに追加する build __CAPGO_KEEP_0__をインストールして、開発依存モジュールとして設定する必要があります。セットアップの際にデフォルト値の名前とバンドルIDを受け入れてください。 dist Capacitorのコアパッケージと、iOSおよびAndroidプラットフォーム用の関連パッケージをインストールしてください。
プラットフォームを追加すると、Capacitorはプロジェクトのルートディレクトリに各プラットフォーム用のフォルダを作成します:
First, create a new Vue app by running the following command:
-
Install the Capacitor CLI as a development dependency and set it up within your project. Accept the default values for name and bundle ID during the setup.
-
package.json
-
Add the platforms, and Capacitor will create folders for each platform at the root of your project:
# 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あなたは新しい iOS と Android フォルダがあなたのVueプロジェクトに表示されるはずです。
あなたの capacitor.config.json ファイルを更新してください。 ビルドコマンドの結果に指すように設定してください。 あなたはあなたのVueプロジェクトをビルドし、__CAPGO_KEEP_0__と同期することができます。
{
"appId": "com.example.app",
"appName": "my-app",
"webDir": "dist"
}Now, you can build your Vue project and sync it with Capacitor:
npm run build
npx cap syncNativeアプリをビルドしてデプロイする
iOSアプリを開発するには、Xcodeがインストールされている必要があります。Androidアプリを開発するには、Android Studioがインストールされている必要があります。さらに、iOSの場合はApple Developer Programに登録し、Androidの場合はGoogle Play Consoleに登録して、アプリをアプリストアに配布する必要があります。
両方のネイティブプロジェクトを開くには、Capacitor CLIを使用してください。
npx cap open ios
npx cap open androidAndroid 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;アプリが自動的にリロードされ、Vueアプリの変更が表示されます。
npx cap copy使用する__CAPGO_KEEP_0__ プラグイン
Capacitor プラグインをインストールし、Shareプラグインなどを使用してVueアプリに統合することができます:
Install a Capacitor plugin, such as the Share plugin, and use it in your Vue app:
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>新しいプラグインをインストールした後、デバイスにアプリを再デプロイするには、以下のコマンドを実行してください: sync コマンドを実行し、アプリをデバイスに再デプロイしてください:
npx cap sync次に、iOSおよびAndroid用にアプリがよりネイティブの感覚を与えるようにすることができます。Capgoナビゲーションとトランジションを使用し、水平オーバーフローまたは安全エリアがカットされたiOSの一般的なレイアウト問題を修正します。
ネイティブのUI感覚を与えるCapgoナビゲーションとトランジション
数年間、Ionicを使用してクロスプラットフォームアプリケーションを構築してきましたが、Vueと統合することはハック的で、すでにTailwind CSSを持っている場合にはほとんど価値がありません。 Vue + __CAPGO_KEEP_0__アプリケーションでネイティブのモバイル感覚を得るには、WebのみのUIキットであるKonsta UIではなく、__CAPGO_KEEP_1__プラグインを使用します。 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation — iOS用の液体ガラスタブバー、Android用のぼやけたタブバーのスタイル、ネイティブのナビゲーションバー。Vueルータがルート状態を保持し、プラグインがネイティブのブラウザを管理します。.
For a native mobile feel in a Vue + Capacitor app, use Capgo plugins instead of web-only UI kits like Konsta UI:
- @capgo/capacitor-native-navigation Ionic
- capgo-capacitor-transitions --- WebView層のIonicスタイルのページ遷移とiOSのエッジスワイプバック
Install both:
bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap syncConfigure native navigation with CSS inset mode so web content respects the native bars:
import { NativeNavigation } from '@capgo/capacitor-native-navigation';
await NativeNavigation.configure({
contentInsetMode: 'css',
animationDuration: 360,
glass: {
effect: 'liquidGlass',
},
});Render a Liquid Glass tab bar (iOS uses system-owned rendering; Android uses a blurred WebView backdrop):
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}`);
});Add native page transitions in your app shell:
<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、 cap-content、 setDirection('forward') or setDirection('back') before navigating. Do not duplicate web headers or footers when native navigation owns those surfaces.
context Capacitorを使用した@capgo/capacitorネイティブナビゲーション と Capacitorを使用した@capgo/capacitorトランジション.
安全なエリアにTailwind
デバイスの安全なエリアにTailwind CSSを使用するには @capgo/tailwind-capacitor (Capacitorで公開された tailwind-capacitor on npm。 safe-areas utilities and other Capacitor-friendly Tailwind plugins:
bun add -D tailwind-capacitorIn src/assets/main.css:
@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";Capacitorが対応しているユーティリティを使用します、 pt-safe, pb-safe、 px-safe 手作りではなく env(safe-area-inset-*) Vueの設定で欠けているものがあれば、 GitHubにPRを提出してください.
iOSレイアウトの問題を解決する
iOSでコンテンツが切り取られた、ずれた、または水平方向にスクロールできるようになっている場合、 overflow-x: hidden またはビューポートタグを調整するだけでは解決しないことがあります。順序に従って、以下のチェックを実行してください。
ビューポートメタタグが正しく適用されていることを確認してください
ビューポートメタタグを追加してください index.html ビューポートメタタグを <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />内部
iOSセーフエリアを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);
}単一のアプリシェルを作成し、セーフエリアのパディングを適用してください — 複数のネストされたコンポーネントではありません:「 .app-shell. iOS のセーフエリアの安全なパディングをヘッダー、モーダル、レイアウトラッパーに複数回適用すると、UI がカットされたり大きすぎるように見えることがあります。
With @capgo/tailwind-capacitorで、同じパディングをユーティリティとして表現できます。 pt-safe pb-safe px-safe Set __CAPGO_KEEP_0__ iOS
Set Capacitor iOS contentInset 最初に never In
, capacitor.config.tsネイティブのインセットを無効にして、CSS (またはネイティブナビゲーションの contentInsetMode: 'css') がセーフエリアを管理するようにします。
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-*) スペースの余白は、ダブルスペースの一般的な原因です。
実際にフラッタリングしている要素を探してください。
通常の原因は、固定ピクセル幅の要素、または大きい要素を使用していることです。 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結論
Capgoは既存のWebプロジェクトを基にしたネイティブアプリケーションを構築するのに素晴らしいオプションです。Capacitorの追加により、最新の機能やバグ修正をユーザーが常に利用できるようにするために、ライブアップデートを追加することが容易になりました。
Capacitor is a great option for building native applications based on an existing web project. With the addition of Capgo, it’s even easier to add live updates to your app, ensuring that your users always have access to the latest features and bug fixes.
Capgoで、より良いアプリをより速く作る方法を学びましょう 無料アカウントに登録する 今日
VueとCapacitorを使用してモバイルアプリを構築し続ける
Vueと__CAPGO_KEEP_0__を使用している場合 VueとCapacitorを使用してモバイルアプリを構築し続ける ネイティブメディアとインターフェイスの動作を計画するには、__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-activitiesと接続する capgo/capacitor-live-activitiesのネイティブ機能 capgo/capacitor-live-activitiesの実装詳細 capgo/capacitor-video-player capgoは、Vueとcapacitor-live-activitiesを使用してネイティブ機能を実装する capgoは、Vueとcapacitor-live-activitiesを使用してネイティブ機能を実装する Capacitorのネイティブ機能を使用するために@capgo/capacitor-video-player @capgo/capacitor-video-player Capacitorの実装詳細を使用するために@capgo/capacitor-video-player、そして Capacitorのネイティブナビゲーションを使用するために@capgo/capacitor-native-navigation Capacitorのネイティブ機能を使用するためにCapacitorのネイティブナビゲーションを使用するために@capgo/capacitor-native-navigation。
