このチュートリアルでは、 SvelteKit app and transition to native mobile development using Capacitor. You can also add Capgo Native Navigation and Transitions for a native mobile feel, and use tailwind-capacitor for safe areas.
Capacitor allows you to easily convert your SvelteKit web application into a native mobile app without the need for significant modifications or learning a new skill like React Native.
Follow this step-by-step guide to transform your SvelteKit app into a mobile app using Capacitor, with optional Capgo Native Navigation, Transitions, and iOS layout guidance.
About Capacitor
Capacitorを使用してモバイルアプリケーションを開発する方法
Capacitor enables you to create a fantastic native mobile app without any complicated setup or steep learning curve. Its slim API and streamlined functionality make it easy to integrate into your project. You’ll be amazed at how simple it is to achieve a fully functional native app with Capacitor!
Capacitorは、モバイルアプリケーションを開発するための素晴らしいツールです。複雑なセットアップや急激な学習曲線が必要ありません。Capacitorは、プロジェクトに簡単に統合できるスリムで機能的なツールです。
Capacitorを使用してモバイルアプリケーションを開発する方法
npm create svelte@latest my-app
cd my-app
npm install
npm run buildCapacitorを使用してモバイルアプリケーションを開発する方法 build Capacitorを使用してモバイルアプリケーションを開発する方法 dist プロジェクトのルートディレクトリにあるフォルダ。
このフォルダは後でCapacitorによって使用されるが、現在は正しく設定する必要があります。
CapacitorをSvelteKitアプリに追加する
ウェブアプリをネイティブモバイルコンテナにパッケージ化するには、最初にいくつかのステップを実行する必要があります。その後は、単一のコマンドを実行するだけです。 sync 最初に、__CAPGO_KEEP_0__ __CAPGO_KEEP_1__を開発依存モジュールとしてインストールし、プロジェクト内で設定します。セットアップ中に、名前とバンドルIDのデフォルト値に「Enter」を押してください。
次に、コアパッケージとiOSおよびAndroidプラットフォームの関連パッケージをインストールします。 Capacitor CLI この時点で、new "ios"フォルダが表示されるはずです。
Capacitor
Finally, 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 SvelteKit 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 androidCapacitor Capacitor と アンドロイド プロジェクトのフォルダ
これらは実際のネイティブプロジェクトです!
Androidプロジェクトにアクセスするには、後で必要になるため、まず Android Studioをインストールする必要があります。iOSの場合はMacが必要で、 Xcode.
をインストールする必要があります。さらに、プロジェクト内で capacitor.config.ts file in your project, which contains some basic Capacitor settings used during the sync. The only thing you need to pay attention to is the __CAPGO_KEEP_0__設定が含まれています。webDirという設定だけは注意してください。、これは、現在は不正です。
この問題を解決するには、 capacitor.config.ts ファイルを開いて webDir:
import { CapacitorConfig } from '@capacitor/cli'
const config: CapacitorConfig = {
appId: 'com.example.app',
appName: 'my-app',
webDir: 'build',
}
export default configow that we’ve updated our Capacitor settings, let’s change out Sveltekit project to a static application by downloading the proper static adapter package:
npm i -D @sveltejs/adapter-static設定を更新した後、Sveltekitプロジェクトを静的アプリケーションに変更するために、適切な静的アダプターペッケージをダウンロードしてください。 パッケージがインストールされた後、 svelte.config.js
import adapter from '@sveltejs/adapter-static'
import { vitePreprocess } from '@sveltejs/kit/vite'
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
preprocess: vitePreprocess(),
kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
adapter: adapter({
// default options are shown. On some platforms
// these options are set automatically — see below
pages: 'build',
assets: 'build',
fallback: null,
precompress: false,
strict: true
})
}
}
export default configファイルを自動アダプターから静的アダプターに変更する必要があります。 svelte.config.js を更新した後、 前処理 オプションを作成する +レイアウト.js ページ src/ルート と 以下のエクスポートを追加する:
export const prerender = true+レイアウト.js 追加と更新した後 +レイアウト.js ページ モバイルプラットフォームを追加し、プロジェクトを再構築してビルドを作成する必要があります。
コマンドを実行してください。
npm run build
npx cap sync最初のコマンド npm run build は、SvelteKitプロジェクトをビルドし、静的ビルドをコピーします。 npx cap sync will sync all the web code into the right places of the native platforms so they can be displayed in an app.
は、ウェブ __CAPGO_KEEP_0__ をネイティブプラットフォームの正しい場所に同步します。 追加で、syncコマンドはネイティブプラットフォームを更新し、プラグインをインストールする可能性があるため、新しい Capacitor プラグインをインストールした場合、再度実行する必要がある。新しい __CAPGO_KEEP_0__ プラグイン npx cap sync をインストールした場合
再度実行する必要がある。
実行しないと気づかずにプロセスを完了したので、デバイスでアプリを確認してみましょう。
ネイティブアプリをビルドしてデプロイする iOSアプリを開発するには、Xcode インストールしてあり、Androidアプリの場合はAndroid Studioがインストールされている必要があります。 Android Studio インストールされている必要があります。また、iOSとAndroidのアプリをアプリストアで配布する場合は、Apple Developer ProgramとGoogle Play Consoleに登録する必要があります。
iOSとAndroidのネイティブモバイル開発に新人であれば、Capacitor CLI を使用して、両方のネイティブプロジェクトを簡単に開くことができます。
npx cap open ios
npx cap open androidネイティブプロジェクトをセットアップした後、デバイスにアプリをデプロイするのは簡単です。Android Studioでは、設定を変更することなく、デバイスにアプリをデプロイする準備が整うのを待ちます。ここに例があります。
Xcodeでは、実機にアプリをデプロイするには署名アカウントを設定する必要があります。シミュレータにのみアプリをデプロイする場合は、設定を変更する必要はありません。署名アカウントを設定する必要がある場合は、Xcodeがガイドを提供します (ただし、開発者プログラムに登録する必要があります)。署名アカウントを設定した後、実機にアプリをデプロイするには、上部で選択したデバイスを選択するだけで、実行を実行するだけで済みます。ここに例があります。
SvelteKitのWebアプリをモバイルデバイスにデプロイすることに成功しました。ここに例があります。
しかし、開発中にこのプロセスを高速化する方法もあります。
Capacitor Live Reload
今では、すべての現代フレームワークでホットリロードが利用できるようになりました。良いニュースは、同じ機能をモバイルデバイスでも利用できることです。 モバイルデバイスでも同じ機能を利用できます。 最小限の手間で!
ローカルホストのアプリケーションにリアルタイムリロードのアクセスを許可するには ローカルネットワーク上で Capacitor アプリが特定のURLからコンテンツを読み込むようにする必要があります。
最初のステップは、ローカルIPアドレスを調べることです。Macを使用している場合は、ターミナルで次のコマンドを実行して調べることができます。
ipconfig getifaddr en0Windowsを使用している場合は、
ipconfig次に、IPv4アドレスを探してください。
Capacitor をサーバーから直接アプリを読み込ませるように指示するには、ファイルに別のエントリを追加する必要があります。 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:3000',
cleartext: true
}
};
export default config;Be sure to use __CAPGO_KEEP_0____CAPGO_KEEP_0__
これらの変更を適用するには、nativeプロジェクトにコピーする必要があります。
npx cap copyThe copy __CAPGO_KEEP_0__ syncこのコマンドは ですが、webフォルダと設定のみをコピーし、nativeプロジェクトを更新せずに実行します。 Android StudioまたはXcodeを使用してアプリをもう一度デプロイしてください。その後、Svelteアプリに何か変更が加わった場合、アプリは自動的にリロードされ、変更が表示されます。
注意してください __CAPGO_KEEP_0__ __CAPGO_KEEP_0__
__CAPGO_KEEP_0__ Capacitorを使用してSvelteKitでモバイルアプリを作成する
注意: 正しいIPアドレスとポート番号を設定する必要があります。上記のcodeブロックは、デモ用にデフォルトのSvelteKitポートを表示しています。
Capacitor プラグインの使用
SvelteKitで使用するCapacitor プラグインの実際の使用方法を確認してみましょう。
npm i @capacitor/shareプラグインの使用は簡単です。 シェア プラグインですが、ネイティブのシェアダイアログを表示します。 share() このプラグインを使用するには、パッケージをインポートし、関数を呼び出すだけです。 src/routes/index.svelteを次のように変更してみましょう。 プラグインをインストールした後、Sync操作を行い、再度アプリをデバイスにデプロイする必要があります。
<script>
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>
<h1>Welcome to SvelteKit and Capacitor!</h1>
<button on:click={share}>Share now!</button>この操作を行うには、以下のコマンドを実行してください。
npx cap syncボタンをクリックすると、美しいネイティブのシェアダイアログが表示されます!
次に、iOS と Android でアプリがよりネイティブの感覚を与えるようにすることができます。Capgo ナビゲーションとトランジションを使用し、水平オーバーフローまたはクロップされたセーフエリアを引き起こす可能性のある一般的なiOSレイアウト問題を修正します。
ネイティブ感覚のUIにCapgoネイティブナビゲーションとトランジションを使用します。
数年間、Ionicを使用してクロスプラットフォームアプリケーションを構築してきましたが、SvelteKitと統合することはハック的で、すでにTailwind CSSを持っている場合にはほとんど価値がありません。 Ionicを使用してクロスプラットフォームアプリケーションを構築するには数年間働いてきましたが、SvelteKitと統合することはハック的で、すでにTailwind CSSを持っている場合にはほとんど価値がありません。 SvelteKit + __CAPGO_KEEP_0__アプリケーションでネイティブモバイルの感覚を得るには、WebのみのUIキットであるKonsta UIではなく、__CAPGO_KEEP_1__プラグインを使用します。 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation.
For a native mobile feel in a SvelteKit + Capacitor app, use Capgo plugins instead of web-only UI kits like Konsta UI:
- @capgo/capacitor-transitions —IonicスタイルのページトランジションとiOSのエッジスワイプバックをWebView層で実行しますが、IonicのUIを採用する必要はありません。
- @capgo/capacitor-transitions __CAPGO_KEEP_0__
__CAPGO_KEEP_1__
bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap syncnativeナビゲーションをCSSのインセットモードで設定して、ウェブコンテンツがネイティブのバーを尊重するようにします:
import { NativeNavigation } from '@capgo/capacitor-native-navigation';
await NativeNavigation.configure({
contentInsetMode: 'css',
animationDuration: 360,
glass: {
effect: 'liquidGlass',
},
});液体ガラスのタブバーをレンダリングします (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 }) => {
goto(`/${id}`);
});アプリシェル内でネイティブのページトランジションを追加します:
<script>
import { goto } from '$app/navigation';
import { routerOutlet, page, setDirection } from '@capgo/capacitor-transitions/svelte';
import '@capgo/capacitor-transitions';
function openSettings() {
setDirection('forward');
goto('/settings');
}
</script>
<cap-router-outlet use:routerOutlet>
<cap-page use:page>
<cap-content slot="content">
<slot />
</cap-content>
</cap-page>
</cap-router-outlet>ルーティングされたページを cap-router-outlet, cap-page、とラップし、 cap-content、を呼び出してください。 setDirection('forward') または setDirection('back') 、
、 Using @capgo/capacitor-native-navigation 、 Using @capgo/capacitor-transitions.
セーフエリアの設定
Tailwind CSSのデバイスセーフエリアを設定するには @capgo/tailwind-capacitor として公開 tailwind-capacitor npm safe-areas utilities and other Capacitor-friendly Tailwind plugins:
bun add -D tailwind-capacitorTailwind CSSのユーティリティを使用する src/app.css:
@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";、 pt-safe, pb-safe手作業で px-safe セーフエリアの設定 env(safe-area-inset-*) プロジェクトは積極的に開発されています。 SvelteKitの設定で不足しているものがあれば、 GitHub.
iOSレイアウトの修正 (ビューポート、セーフエリア、水平オーバーフロー)
iOSでコンテンツが切り取られた、ずれた、または水平方向にスクロールできるように見えている場合、追加するかビューポートタグを調整するだけでは通常解決しません。順序に従ってこれらのチェックを実行してください。 overflow-x: hidden ビューポートメタタグが正しく適用されていることを確認してください
Make sure the viewport meta tag is applied correctly
In src/app.htmliOSセーフエリアを1つのルートラッパーからのみ取り扱います <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />単一のアプリシェルを作成し、セーフエリアのパディングをそこに適用するのではなく、複数のネストされたコンポーネントに適用しないでください:
すべてのページコンテンツを内側にラップする。ヘッダー、モーダル、レイアウトラッパーでセーフエリアのパディングを複製すると、UIが切り取られたり大きすぎるように見えることがあります。
html,
body,
body {
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);
}Wrap all page content inside .app-shell. Duplicated safe-area padding in headers, modals, and layout wrappers often makes the UI look cropped or too large.
@__CAPGO_KEEP_0__/tailwind-__CAPGO_KEEP_1__ @capgo/tailwind-capacitor、ユーティリティライクの pt-safe pb-safe px-safe シングルシェルの
Capacitor iOS contentInset に never ページ/エリア: ライブアップデート製品ページ。役割: 短いUIラベルまたはナビゲーションアイテム。メッセージキー `live_update_dynamic_label_to` (ライブアップデートダイナミックラベルTo)。
最初 capacitor.config.ts中 contentInsetMode: 'css'、ネイティブのインセットを無効にしてCSS (またはネイティブナビゲーションの
const config: CapacitorConfig = {
appId: 'com.example.myapp',
appName: 'my-app',
webDir: 'build',
ios: {
contentInset: 'never',
},
};Mixing Capacitor’s automatic content inset with CSS env(safe-area-inset-*) __CAPGO_KEEP_0__の自動コンテンツインセットとCSSのパディングを組み合わせることは、ダブルスペースの原因となる一般的な問題です。
実際にオーバーフローしている要素を探します。
通常の原因は、 100vw、テールウィンド 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,
}));テールウィンドで置き換え: w-screen 、 w-full 可能な限り、水平方向のオーバーフロー問題は、 100vw / w-screen、重複したセーフエリアのパディング、または固定幅のコンテナ — ではなく、ビューポートのメタタグ自体から
結論
Capacitorは既存のWebプロジェクトに基づいて構築されるネイティブアプリケーションの優れたオプションであり、codeを簡単に共有し、UIの統一性を維持する方法を提供します。
そして、__CAPGO_KEEP_0__の追加 Capgo__CAPGO_KEEP_0__を追加すると、
If you would like to learn how to add Capgo to your SvelteKit app, take a look at the next article:
Capgoを使用して、より高速で優れたアプリを構築する方法を学びましょう。 無料アカウントに登録する 今日
Keep going from Building Mobile Apps with SvelteKit and Capacitor
Capgoを使用している場合 Building Mobile Apps with SvelteKit and Capacitor Capgo CI/CDと連携して Capgo CI/CD for the product workflow in Capgo CI/CD, Capgo Native Builds Capgo Native Builds Capgo 連携 Capgo 連携の製品ワークフローに CI/CD 連携 __CAPGO_KEEP_0__ アクション連携 GitHub アクション連携の実装詳細 GitHub アクション連携の実装詳細
