このチュートリアルでは、VueのWebアプリケーションをCapacitorを使用してネイティブモバイルアプリケーションに変換するプロセスをガイドします。Capgo Native NavigationとTransitionsを追加すると、ネイティブモバイルのフィールを実現し、tailwind-capacitorを使用して安全なエリアを実現できます。
Capacitorについて
Capacitorは、Webプロジェクトに簡単に統合できるゲームチェンジングツールです。アプリケーションをネイティブモバイルアプリケーションに変換し、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"
}
}__CAPGO_KEEP_0__を使用してVueアプリケーションをネイティブモバイルアプリケーションに変換する build Vueアプリケーションを__CAPGO_KEEP_0__でネイティブモバイルアプリケーションに変換する dist VueアプリケーションをCapacitorでネイティブモバイルアプリケーションに変換する
VueアプリケーションをCapacitorでネイティブモバイルアプリケーションに変換する
Vueウェブアプリをネイティブモバイルコンテナに変換するには、以下の手順に従ってください。
-
CapacitorとCLIを開発依存モジュールとしてインストールし、プロジェクト内でセットアップしてください。名前とバンドルIDのデフォルト値を受け入れます。
-
コアパッケージとiOSおよびAndroidプラットフォームの関連パッケージをインストールしてください。
-
プラットフォームを追加し、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ここで、 iOS と android フォルダがVueプロジェクト内に表示されます。
プロジェクトのルートディレクトリにある capacitor.config.json ファイルを更新してください。 webDir ビルドコマンドの結果に
{
"appId": "com.example.app",
"appName": "my-app",
"webDir": "dist"
}さて、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 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;ビルドとデプロイされたネイティブアプリ
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>新しいプラグインをインストールした後、 sync コマンドを実行し、デバイスに再デプロイしてください:
npx cap sync次に、iOS と Android で Capgo ナビゲーションとトランジションを使用して、アプリをよりネイティブに感じさせ、水平オーバーフローまたはカットオフされたセーフエリアを解決するための一般的なiOSレイアウト問題を修正できます。
ネイティブなUIを実現する Capgo ナビゲーションとトランジション
私は Ionic を使用して、複数のプラットフォーム間でアプリケーションを構築するために数年間働いてきましたが、Vueと統合することはハック的で、すでに持っている場合にあまりにも価値がないことが多いため、 Tailwind CSS.
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 — iOSではLiquid Glassタブバー、Androidではぼやけたタブバーのスタイルが使用されます。Vueルーターのルート状態は維持され、プラグインはネイティブのブラウザを管理します。
- @capgo/capacitor-transitions — WebViewレイヤーでIonicスタイルのページ遷移とiOSのエッジスワイプバックを実現します。IonicのUIを採用する必要はありません。
両方のプラグインをインストールします。
bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap syncネイティブナビゲーションをCSSのインセットモードで設定して、Webコンテンツがネイティブのバーを尊重するようにします。
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}`);
});ネイティブのページ遷移をアプリシェルに追加します。
<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') Capacitorライブアップデートの代替手段を比較するページ。役割：長いマーケティングまたは法的文章。見つける場所：ページalternatives.astro。Capgo製品/ブランドと開発者用語を完全に保持する。
Capacitorライブアップデートの代替手段を比較するページ。役割：長いマーケティングまたは法的文章。見つける場所：ページalternatives.astro。Capgo製品/ブランドと開発者用語を完全に保持する。 Using @capgo/capacitor-native-navigation Capacitorライブアップデートの代替手段を比較するページ。役割：長いマーケティングまたは法的文章。見つける場所：ページalternatives.astro。Capgo製品/ブランドと開発者用語を完全に保持する。 Using @capgo/capacitor-transitions.
ページのヘッダーまたはフッターを複製しないでください。ネイティブのナビゲーションがそれらの表面を所有している場合。
全ガイドを参照してください: Using @capgo/capacitor-native-navigation そして tailwind-capacitor Using @npm/__CAPGO_KEEP_1__-transitions safe-areas Capacitorのフレンドリーなユーティリティやその他のTailwindプラグイン:
bun add -D tailwind-capacitorIn 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-*) プロジェクトは積極的に開発されています — Vueの設定で不足しているものがあれば、__CAPGO_KEEP_0__にPRを提出してください open a PR on GitHub.
iOSでコンテンツが切り取られた、ずれた、または水平方向にスクロールできるように見えている場合、ビューポートタグを追加したり変更したりするだけでは通常解決しません。次のチェックを順番に実行してください。
ビューポートメタタグが正しく適用されていることを確認してください overflow-x: hidden ビューポートメタタグを追加してください
__CAPGO_KEEP_0__
__CAPGO_KEEP_0__ index.html 内部 <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />iOS セーフエリアを 1 つのルートラッパーからのみハンドルする
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. ヘッダー、モーダル、レイアウトラッパーなどに複数回セーフエリアのパディングを適用すると、UI がカットされたり大きすぎるように見えることがあります。
で @capgo/tailwind-capacitor、 pt-safe pb-safe px-safe Tailwind CSS
Set Capacitor iOS contentInset Capacitor never のiOSセーフエリアを
In capacitor.config.ts,nativeのインセットを無効にして、CSS(またはNative Navigationの) contentInsetMode: 'css')の安全エリアを管理する:
const config: CapacitorConfig = {
appId: 'com.example.myapp',
appName: 'my-app',
webDir: 'dist',
ios: {
contentInset: 'never',
},
};Capacitorの自動コンテンツインセットとCSSのパディングを組み合わせると、通常のスペースの倍倍の原因となる env(safe-area-inset-*) 実際にオーバーフローしている要素を探す
通常の原因は、
、Tailwind 100vw、固定ピクセル幅、または大きい w-screenSafari Web Inspectorで実行: 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 with w-full 可能の場合。多くの水平オーバーフロー問題は、安全エリアの重複パディングや固定幅のコンテナからではなく、ビューポートメタタグ自体から生じることが多い。 100vw / w-screen結論
__CAPGO_KEEP_0__は既存のWebプロジェクトに基づいてネイティブアプリケーションを構築するのに素晴らしいオプションです。__CAPGO_KEEP_1__を追加すると、さらに簡単にライブアップデートを追加できます。ユーザーは常に最新の機能やバグ修正にアクセスできます。
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.
Learn how Capgo can help you build better apps faster, 今日 Building Mobile Apps with Vueと__CAPGO_KEEP_0__から続けて
Building Mobile Apps with VueとCapacitorを使用している場合
Building Mobile Apps with Vueと__CAPGO_KEEP_0__を使用してネイティブメディアとインターフェイスの動作を計画し、__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-activitiesに接続する Using @Capacitor/__CAPGO_KEEP_1__-live-activities __CAPGO_KEEP_0__ Using @capgo/capacitor-live-activities for the native capability in Using @capgo/capacitor-live-activities, @capgo/capacitor-live-activities for the implementation detail in @capgo/capacitor-live-activities, Using @capgo/capacitor-video-player for the native capability in Using @capgo/capacitor-video-player, @capgo/capacitor-video-player for the implementation detail in @capgo/capacitor-video-player, and Using @capgo/capacitor-native-navigation for the native capability in Using @capgo/capacitor-native-navigation.
