このチュートリアルでは、VueのWebアプリケーションをCapacitorを使用してネイティブモバイルアプリケーションに変換するプロセスをガイドすることから始めます。Capgoネイティブナビゲーションとトランジションを追加することでネイティブモバイルのフィールを実現し、安全なエリアを使用するためにtailwind-capacitorを使用することもできます。
Capacitorについて
Capacitorは、Webプロジェクトに簡単に統合できるゲームチェンジャーです。アプリケーションをネイティブモバイルアプリケーションに変換することができ、ネイティブデバイスの機能にアクセスするJavaScriptブリッジを提供します。また、ネイティブXcodeとAndroid Studioプロジェクトを生成します。
Vueアプリを準備する
First, create a new Vue app by running the following command:
vue create my-app
cd my-app
npm installnative mobile deployment用にVueアプリを準備するには、プロジェクトをエクスポートする必要があります。package.jsonファイルにスクリプトを追加して、Vueプロジェクトをビルドしてコピーしてください: After running the command, you should see a new
{
"scripts": {
// ...
"build": "vue-cli-service build"
}
}folder in your project’s root directory. This folder will be used by __CAPGO_KEEP_0__ later. build VueアプリにCapgoを追加する dist folder in your project’s root directory. This folder will be used by Capacitor later.
Adding Capacitor to Your Vue App
CapacitorのコアパッケージとiOSおよびAndroidプラットフォーム用の関連パッケージをインストールしてください。
-
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.
-
Adding __CAPGO_KEEP_0__ to Your Vue App
-
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__CAPGO_KEEP_0__.config.jsonファイルを更新して、webDirをビルドコマンドの結果に指すようにしてください。 iOS と android フォルダがVueプロジェクトに表示されます。
__CAPGO_KEEP_0__.config.json capacitor.config.json ビルドコマンドの結果にwebDirを指すようにしてください。 ビルドとデプロイされたネイティブアプリ 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 sync__CAPGO_KEEP_0__と同期することができます。
iOSアプリを開発するには、Xcodeがインストールされている必要があります。Androidアプリを開発するには、Android Studioがインストールされている必要があります。さらに、iOSの場合はApple Developer Programに登録し、Androidの場合はGoogle Play Consoleに登録する必要があります。アプリをアプリストアに配布するためです。
Capgoを使用して、両方のネイティブプロジェクトを開くための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() function in your app:
<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の一般的なレイアウト問題を修正できます。
Capgoネイティブナビゲーションとトランジションを使用してネイティブフィーリングのUIを作成します
数年間、Ionicを使用してクロスプラットフォームアプリケーションを構築してきましたが、Vueと統合することはハック的で、既存のTailwind CSSと統合することよりもあまり価値がありません。 Vue + __CAPGO_KEEP_0__アプリケーションでネイティブモバイルフィーリングを実現するには、WebのみのUIキットであるKonsta UIではなく、__CAPGO_KEEP_1__プラグインを使用してください。 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation — iOSではLiquid Glassタブバー、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 — iOSではLiquid Glassタブバー、Androidではブラー効果のあるタブバーを使用できます。ルートの状態はVueルーターが保持し、プラグインはネイティブのブラウザを管理します。
- @capgo/capacitor-transitions — WebViewレイヤーでIonicスタイルのページ遷移とiOSのエッジスワイプバックを実現するため、Ionic UIを採用する必要はありません。
両方をインストールする:
bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap syncCSSのインセットモードでネイティブのナビゲーションを設定して、ウェブコンテンツがネイティブのバーを尊重するようにします:
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') または
を呼び出してください。ネイティブのナビゲーションが管理する表面にはウェブヘッダーまたはフッターを重複して表示しないでください。 @capgo/capacitor-native-ナビゲーション と @capgo/capacitor-トランジション.
デバイスの安全なエリアにTailwind
デバイスの安全なエリアにTailwind CSSを使用するには @capgo/tailwind-capacitor (GitHubで公開された tailwind-capacitor @npm)。 これは safe-areas @Capacitor-対応のTailwind プラグインのユーティリティやその他の機能を提供します:
bun add -D tailwind-capacitor使用するユーティリティとしては 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-*) __CAPGO_KEEP_0__にPRを開く open a PR on GitHub.
iOSでコンテンツが切り取られた、ずれた、または水平方向にスクロールできるように見えている場合、ビューポートタグを追加したり調整したりするだけでは通常解決しません。順序に従ってこれらのチェックを実行してください。
ビューポートメタタグが正しく適用されていることを確認する overflow-x: hidden ビューポートメタタグを追加する
内部
iOSセーフエリアを1つのルートラッパーからのみ処理する 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 がカットされたり大きすぎるように見えることがよくあります。
と @capgo/tailwind-capacitor, では、ヘッダーなどの 1 つのシェルにUTILITYスタイルを使用して同じ余白を表現できます。 pt-safe pb-safe px-safe Set __CAPGO_KEEP_0__ iOS
Set Capacitor iOS contentInset 最初 never ,
In capacitor.config.ts, contentInsetMode: 'css'ネイティブのインセットを無効にして、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-*) 余白は、ダブルスペースの原因となる一般的な問題です。
実際にオーバーフローしている要素を探してください
通常の原因は、 100vwTailwind w-screen、固定ピクセル幅、または大きい min-width.
Safari Web Inspectorで実行してください:
[...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安全エリアの余白の重複、または固定幅のコンテナ — ではなく、ビューポートメタタグ自体から
結論
Capacitorは既存のWebプロジェクトに基づいてネイティブアプリケーションを構築するのに素晴らしいオプションです。Capgoを追加すると、さらに簡単にアプリにリアルタイム更新を追加できます。ユーザーは常に最新の機能やバグ修正にアクセスできるようになります。
Capgoはあなたのアプリをより速く、より良く作るのに役立ちます。 __CAPGO_KEEP_0__の無料アカウントに登録してください。 今日です。
VueとCapacitorを使用してモバイルアプリを構築し続けます。
あなたがVueと__CAPGO_KEEP_0__を使用して、ネイティブのメディアとインターフェイスの動作を計画している場合、__CAPGO_KEEP_0__を__CAPGO_KEEP_1__-live-activitiesと接続してください。 Capacitor/__CAPGO_KEEP_1__-live-activitiesを使用してネイティブの機能を実装する __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-activitiesを使用してネイティブの機能を実装する capgo/capacitor-live-activitiesを使用してネイティブの機能を実装する capgo/capacitor-video-playerを使用してビデオを再生する capgo/capacitor-video-playerを使用してビデオを再生する capgo/capacitor-video-playerを使用してビデオを再生する 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.
