このチュートリアルでは、まず新しい 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これで、SvelteKitプロジェクト内に新しい iOS と Android フォルダが表示されるはずです。
これらは本物のNative Buildプロジェクトです！
後で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 モバイルプラットフォームを追加し、プロジェクトを再ビルドして build フォルダ
以下のコマンドを実行することで可能です：
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 metaタグを <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が原因で、余白が二重に表示されることがよくあります。
実際にオーバーフローしている要素を特定する
主な原因は、以下の要素を使用している場合です： 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、重複したセーフエリアのパディング、または固定幅のコンテナに起因し、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の実装詳細については。
