このチュートリアルでは、まず新しい SvelteKit アプリを作成し、Capacitor を使ってネイティブモバイル開発へと移行します。Capgo Native Navigation and Transitions を追加してネイティブアプリのような操作感を実現したり、セーフエリア対策に tailwind-capacitor を使用したりすることも可能です。
Capacitor を使えば、React Native のような新しいスキルを学んだり、大幅な変更を加えたりすることなく、SvelteKit の Web アプリケーションを簡単にネイティブモバイルアプリへ変換できます。
このステップバイステップガイドに従って、Capacitor を使用して SvelteKit アプリをモバイルアプリに変換します。オプションの Capgo Native Navigation、Transitions、および iOS レイアウトのガイドも含まれています。
Capacitor について
CapacitorJSはゲームチェンジャーです！どんなWebプロジェクトにも簡単に統合でき、アプリをネイティブWebViewでラップし、XcodeとAndroid Studioのネイティブプロジェクトを自動生成します。プラグインを通じて、JavaScriptブリッジでカメラなどのネイティブデバイス機能にアクセスできます。
Capacitorを使えば、複雑なセットアップや急峻な学習曲線なしに、素晴らしいネイティブモバイルアプリを作成できます。スリムなAPIと洗練された機能により、プロジェクトへの統合が容易です。Capacitorで完全な機能を持つネイティブアプリをこれほど簡単に実現できることに驚くでしょう！
SvelteKitアプリの準備
新しいSvelteKitアプリを作成するには、以下のコマンドを実行します：
npm create svelte@latest my-app
cd my-app
npm install
npm run buildこの build コマンドを実行すると、プロジェクトのルートディレクトリに新しい dist プロジェクトのルートにあるフォルダ。
このフォルダは後でCapacitorで使用されますが、まずは正しく設定する必要があります。
SvelteKitアプリにCapacitorを追加する
Webアプリをネイティブモバイルコンテナにパッケージングするには、いくつかの初期手順が必要です。その後、単一の sync コマンドを実行してください。
まず、以下をインストールします： Capacitor CLI 開発依存関係としてインストールし、プロジェクト内でセットアップします。セットアップ中、名前とbundle IDのデフォルト値を受け入れるには「enter」を押してください。
次に、コアパッケージとiOSおよびAndroidプラットフォーム用の関連パッケージをインストールします。
最後に、プラットフォームを追加すると、Capacitor がプロジェクトのルートに各プラットフォーム用のフォルダを作成します：
# 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 androidこの時点で、新しい iOS と Android フォルダがSvelteKitプロジェクト内に表示されるはずです。
これらは実際のネイティブプロジェクトです！
後でAndroidプロジェクトにアクセスするには、次をインストールする必要があります： デバッグ。iOSの場合はMacが必要で、次をインストールしてください： iOSプロファイリング.
さらに、プロジェクト内に次のファイルがあるはずです： capacitor.config.ts このファイルには、同期時に使用される基本的な Capacitor 設定が含まれています。唯一注意すべき点は、 webDirです。これはビルドコマンドの出力先を指す必要があります。現在は正しく設定されていません。
これを修正するには、 capacitor.config.ts ファイルを開き、次を更新してください： webDir:
import { CapacitorConfig } from '@capacitor/cli'
const config: CapacitorConfig = {
appId: 'com.example.app',
appName: 'my-app',
webDir: 'build',
}
export default configCapacitor の設定を更新したので、次に適切な static adapter パッケージをダウンロードして、SvelteKit プロジェクトを静的アプリケーションに変更しましょう：
npm i -D @sveltejs/adapter-staticパッケージをインストールしたら、 svelte.config.js ファイルを auto-adapter から static に変更する必要があります：
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 更新したら、 prerender オプションを追加する必要があります。 +layout.js ページを src/routes に以下のexportを追加するだけで +layout.js:
export const prerender = trueページを追加・更新した後、 +layout.js モバイルプラットフォームを追加し、プロジェクトを再ビルドして に作成してビルドします フォルダ
以下のコマンドを実行することで可能です：
npm run build
npx cap sync最初のコマンドは npm run build SvelteKitプロジェクトをビルドして静的ビルドをコピーし、2番目のコマンドは npx cap sync すべてのWeb code をネイティブプラットフォームの適切な場所に同期し、アプリ内で表示できるようにします。
さらに、syncコマンドはネイティブプラットフォームを更新したりプラグインをインストールしたりする場合があるため、新しいプラグインをインストールしたら Capacitor プラグイン実行する時です npx cap sync を再度呼び出してください。
いつの間にかプロセスが完了しました。それでは、実機でアプリを確認してみましょう！
ネイティブアプリのビルドとデプロイ
iOSアプリを開発するには、 iOSプロファイリング のインストールが必要です。また、Androidアプリの場合は、 デバッグ のインストールが必要です。さらに、アプリをApp Storeで配布する場合は、iOS用にApple Developer Programへ、Android用にGoogle Play Consoleへの登録が必要になります。
ネイティブモバイル開発が初めてなら、Capacitor CLI を使って両方のネイティブプロジェクトを簡単に開けます：
npx cap open ios
npx cap open androidネイティブプロジェクトの設定が完了すれば、接続されたデバイスへのアプリのデプロイは簡単です。Android Studioでは、準備が整うのを待つだけで、設定を変更することなく接続デバイスへアプリをデプロイできます。例を以下に示します：
Xcodeでは、シミュレーターだけでなく実機にアプリをデプロイするために、署名アカウントの設定が必要です。初めての場合は、Xcodeが手順を案内してくれます（ただし、Developer Programへの登録が必要です）。設定後は、上部で接続済みのデバイスを選択し、再生ボタンを押すだけでアプリを実行できます。以下に例を示します：
おめでとうございます！SvelteKitのWebアプリをモバイルデバイスにデプロイできました。以下がその例です：
でも待ってください。開発中にもっと速くできる方法もあります…
Capacitor Live Reload
最近のフレームワークを使っていれば、ホットリロードには慣れているはずです。嬉しいことに、同じ機能を モバイルデバイス上でも 最小限の手間で利用できます！
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;必ず使用してください： 正しいIPアドレスとポート番号、上の例のように。
これで、これらの変更をネイティブプロジェクトにコピーして適用できます：
npx cap copyこの copy コマンドは次と似ています syncただし、 webフォルダと設定への変更内容だけをコピーし、 ネイティブプロジェクトは更新しません。
Android StudioやXcodeを使って、アプリをもう一度デプロイできます。その後、Svelteアプリに変更を加えた場合、 アプリが自動的にリロードされ、 変更が反映されます！
注意点として、 カメラなどの新しいプラグインをインストールする場合、ネイティブプロジェクトの再ビルドが必要です。ネイティブファイルが変更されるため、その場で行うことはできません。
設定では正しいIPとポートを使用してください。上記のcodeブロックは、デモ用にデフォルトのSvelteKitポートを示しています。
Capacitor プラグインの使用
これまで何度か触れてきたCapacitorプラグインを、実際にどう使うか見ていきましょう。そのために、以下のコマンドでシンプルなプラグインをインストールします。
npm i @capacitor/share特別なものはありませんが、 プラグインを共有を使えば、ネイティブの共有ダイアログが表示されます！そのためには、パッケージをインポートして share() アプリから関数を呼び出すだけなので、次は src/routes/index.svelte を次のように変更します：
<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>先ほど説明したように、新しいプラグインをインストールするときは、sync 操作を行ってからアプリをデバイスに再デプロイする必要があります。これを行うには、次のコマンドを実行してください：
npx cap syncボタンを押すと、美しいネイティブの共有ダイアログが実際に動作する様子を確認できます！
次に、Capgo のナビゲーションとトランジションで、iOS と Android でアプリをよりネイティブに感じさせ、横方向のオーバーフローやセーフエリアの欠けを引き起こす iOS でよくあるレイアウト問題も修正できます。
Capgo Native Navigation and Transitions によるネイティブ感のあるUI
私は長年、 Ionic クロスプラットフォームアプリの構築には適していますが、既存の環境がある場合、SvelteKitとの統合はハック的で、ほとんど意味がありません Tailwind CSS がある場合は、あまりメリットがありません。.
SvelteKit + Capacitor アプリでネイティブなモバイル体験を実現するには、Konsta UIのようなWeb専用UIキットではなく、Capgo プラグインを使用します:
- @capgo/capacitor-native-navigation — ネイティブなナビゲーションバー、iOS向けのLiquid Glassタブバー、Android向けのブラー付きタブバースタイル。SvelteKitのルーターがルート状態を管理し、プラグインがネイティブのUI要素（chrome）を制御します。
- @capgo/capacitor-transitions — Ionic UIを採用せずに、WebViewレイヤーでIonicスタイルのページ遷移とiOSのエッジスワイプによる戻る操作を実現します。
両方をインストールしてください：
bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap syncCSS insetモードでネイティブナビゲーションを設定し、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 }) => {
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') 遷移前に実行してください。ネイティブナビゲーションがその領域を管理している場合、Webのヘッダーやフッターを重複させないでください。
ガイドの全文はこちら： @capgo/capacitor-native-navigation の活用 と @capgo/capacitor-transitions の活用.
Tailwind によるセーフエリア対応
Tailwind CSS でデバイスのセーフエリアを扱うには、以下を使用します： @capgo/tailwind-capacitor （ tailwind-capacitor として npm で公開）。これは、 safe-areas ユーティリティや Capacitor と相性の良いその他の Tailwind プラグインを提供します：
bun add -D tailwind-capacitorでは 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 でPRを作成してください.
iOSのレイアウト問題を修正（ビューポート、セーフエリア、横方向のオーバーフロー）
iOSでコンテンツが切れて見えたり、ずれて見えたり、横スクロールが発生したりする場合は、さらに追加するだけでも、 overflow-x: hidden viewportタグを調整するだけでも通常は解決しません。以下のチェックを順番に確認してください。
viewport メタタグが正しく適用されているか確認する
では src/app.html、viewportメタタグを設定します <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />iOSのセーフエリアは1つのルートラッパーだけで処理する
単一のアプリシェルを作成し、そこにセーフエリアのパディングを適用してください — 複数のネストしたコンポーネントではなく：
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);
}すべてのページコンテンツを以下でラップします： .app-shellヘッダー、モーダル、レイアウトラッパーで safe-area のパディングが重複すると、UI が欠けたり、逆に大きすぎたりすることがよくあります。
を使用すると、 @capgo/tailwind-capacitor同じパディングを次のようなユーティリティで表現できます： pt-safe pb-safe px-safe その単一のシェル上で。
Capacitor iOS を設定 contentInset まで never 最初に
では capacitor.config.ts、native inset を無効にすることを推奨し、CSS（または Native Navigation のもの contentInsetMode: 'css'）に safe area を任せる：
const config: CapacitorConfig = {
appId: 'com.example.myapp',
appName: 'my-app',
webDir: 'build',
ios: {
contentInset: 'never',
},
};Capacitor の自動コンテンツ inset と CSS を混在させると env(safe-area-inset-*) padding は二重スペースのよくある原因です。
実際にオーバーフローしている要素を特定する
原因はたいてい、使用している要素です 100vw、Tailwind 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、重複したセーフエリアのパディング、または固定幅のコンテナに起因し、viewportのmetaタグ自体が原因ではありません。
まとめ
Capacitor は、既存のWebプロジェクトをベースにネイティブアプリを構築するための優れた選択肢です。code を簡単に共有し、一貫したUIを維持できます。
さらに、追加されたことで Capgo、アプリへのLive Updatesの追加がより簡単になり、ユーザーは常に最新の機能とバグ修正を利用できます。
SvelteKit アプリに Capgo を追加する方法を知りたい場合は、次の記事をご覧ください:
Capgo が、より良いアプリをより速く作るのにどう役立つかをご覧ください。 無料アカウントに登録する を今すぐ作成してください。
SvelteKitとCapacitorでモバイルアプリ開発の続きを読む
使用している場合 SvelteKitとCapacitorによるモバイルアプリ開発 CI/CD自動化を計画するには、次と連携してください Capgo での CI/CD 設定 Capgo CI/CDでのプロダクトワークフローについては、 Capgo Native Build Capgo Native Buildsでのプロダクトワークフローについては、 Capgo インテグレーション Capgo インテグレーションでのプロダクトワークフロー向けに、 CI/CD 連携 CI/CD Integrationの実装詳細については、 GitHub Actions 連携 GitHub Actions Integrationの実装詳細については。
