Building Mobile Apps with SvelteKit and Capacitor

このチュートリアルでは、SvelteKitの新しいアプリから始め、Capacitorを使用してネイティブモバイル開発に移行します。Capacitor Native NavigationとTransitionsを追加することで、ネイティブモバイルのフィールを実現し、tailwind-safe-areasを使用して安全なエリアを確保することもできます。 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は、プロジェクトに簡単に統合できるスリムで機能が簡素化されたものです。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!

新しいSvelteKitアプリケーションを作成するには、以下のコマンドを実行してください:

Capacitor

npm create svelte@latest my-app
cd my-app
npm install
npm run build

実行後、コマンドを実行すると、プロジェクトのルートディレクトリに新しいフォルダが表示されます。 build このフォルダは後で__CAPGO_KEEP_0__によって使用される予定ですが、現在は正しく設定する必要があります。 dist CapacitorをSvelteKitアプリに追加する

This folder will be used by Capacitor later, but for now, we need to set it up correctly.

最初に、Capacitorと__CAPGO_KEEP_1__を開発依存モジュールとしてインストールし、プロジェクト内でセットアップします。セットアップ中は、名前とバンドルIDのデフォルト値に「Enter」を押してください。

次に、コアパッケージとiOSおよびAndroidプラットフォームの関連パッケージをインストールします。 sync 最後に、プラットフォームを追加し、__CAPGO_KEEP_0__はプロジェクトのルートディレクトリに各プラットフォーム用のフォルダを作成します:

コマンドの実行後、プロジェクトのルートディレクトリに新しいフォルダが表示されます。 Capacitor CLI CapacitorをSvelteKitアプリに追加する

任意のWebアプリをネイティブモバイルコンテナにパッケージ化するには、初期ステップを実行する必要があります。その後、単一のコマンドを実行するだけです。

最初に、Capacitorと__CAPGO_KEEP_1__を開発依存モジュールとしてインストールし、プロジェクト内でセットアップします。セットアップ中は、名前とバンドルIDのデフォルト値に「Enter」を押してください。

# 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

この時点で、Capgoの新しい ios と android フォルダがSvelteKitプロジェクト内に表示されるはずです。

これらは実際のネイティブプロジェクトです!

Androidプロジェクトにアクセスするには、Android Studioをインストールする必要があります。 iOSの場合はMacが必要で、Xcodeをインストールする必要があります。さらに、 __CAPGO_KEEP_0__.config.ts.

ファイルを見つける必要があります。 capacitor.config.ts プロジェクト内にあるファイル、Capacitor には基本的な Sync 時の設定が含まれています。Sync 時に注意する必要があるのは webDir、これはビルドコマンドの結果を指す必要があります。現在は正しくありません。

この問題を解決するには、__CAPGO_KEEP_0__.config.ts capacitor.config.ts を更新してください。 __CAPGO_KEEP_0__ の設定を更新した後、Sveltekit プロジェクトを静的アプリケーションに変更するために、適切な静的アダプターペッケージをダウンロードしてください。:

import { CapacitorConfig } from '@capacitor/cli'

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'build',
}

export default config

ow 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

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

With the svelte.config.js 更新後、Capacitorを使用するには、+layout.jsファイルにオプションを追加する必要があります。 prerender +layout.jsファイルを作成し、src/routesディレクトリに追加します。 src/routes +layout.jsファイルにexportを追加します。 +layout.jsファイルにexportを追加します。 +layout.jsファイルにexportを追加した後、プロジェクトを再構築し、モバイルプラットフォームを追加します。 +layout.jsファイルにexportを追加した後、プロジェクトを再構築し、モバイルプラットフォームを追加します。:

export const prerender = true

+layout.jsファイルにexportを追加した後、プロジェクトを再構築し、モバイルプラットフォームを追加します。 +layout.jsファイルにexportを追加した後、プロジェクトを再構築し、モバイルプラットフォームを追加します。 +layout.jsファイルにexportを追加した後、プロジェクトを再構築し、モバイルプラットフォームを追加します。 開発 フォルダ

以下のコマンドを実行してください。

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.

は、ウェブアプリケーションをネイティブプラットフォームに同步することになります。 Capacitor plugins新しいプラグインをインストールした場合 npx cap sync 、再度実行してください。

プラグイン

、再度実行してください。

iOSアプリを開発するには Xcode Androidアプリを開発するには Android Studio iOSアプリをアプリストアで配布するには

If you’re new to native mobile development, you can use the Capacitor CLI to easily open both native projects:

npx cap open ios
npx cap open android

Xcode

android-studio-run

xcode-run

ですが、開発中にはもっと速い方法があります…

Capacitor Live Reload

この時点で、すべての現代的なフレームワークでホットリロードが可能なことをおなじみのようになっています。幸いなことに、同じ機能をモバイルデバイスで利用することも可能です。 モバイルデバイス 最小限の手間で!

ローカルホストで実行中のアプリケーションにアクセスするためのライブリロードを有効にします。 ローカルネットワーク上で Capacitor アプリが、特定のURLからコンテンツを読み込むように指示することで実現します。

最初のステップは、ローカルIPアドレスを調べることです。Macを使用している場合、ターミナルで以下のコマンドを実行して調べることができます。

ipconfig getifaddr en0

Windowsを使用している場合、以下のコマンドを実行してください。

ipconfig

次に、IPv4アドレスを探してください。

Capacitor にアプリを直接サーバーから読み込ませるように指示するには、設定ファイルに別のエントリを追加する必要があります。 capacitor.config.ts file:

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 ですが、 syncWebフォルダと設定のみをコピーし、ネイティブプロジェクトを更新せずにします。 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>

As mentioned earlier, when installing new plugins, we need to perform a sync operation and then redeploy the app to our device. To do this, run the following command:

npx cap sync

Buttonを押すと、美しいネイティブシェアダイアログが実行されます。

次に、iOSとAndroidでアプリをよりネイティブに感じることができます。Capgoナビゲーションとトランジションを使用し、水平オーバーフローまたは安全エリアがカットされたiOSの一般的なレイアウト問題を修正します。

Native-feeling UI with Capgo Native Navigation and Transitions

数年間、 Ionic を使用してクロスプラットフォームアプリケーションを構築してきましたが、SvelteKitと統合することはハック的で、すでに Tailwind CSS.

を持っている場合にあまりにも価値がありません。SvelteKit + Capacitorアプリケーションでネイティブモバイルフィーリングを実現するには、WebのみのUIキットであるKonsta UIではなく、Capgoプラグインを使用します。

• @capgo/capacitor-native-navigation — iOSではLiquid Glassタブバー、Androidではブラーしたタブバーのスタイルが使用されます。SvelteKitルータがルート状態を保持し、プラグインがネイティブのブラウザを管理します。
• @capgo/capacitor-transitions イオニックスタイルのページ遷移とiOSのエッジスワイプバックをWebViewレイヤーで実現することができます。イオニックUIを採用することなく。

両方をインストールする必要があります。

bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap sync

ネイティブナビゲーションを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>

ルーティングされたページをwrapします。 cap-router-outlet, cap-page、 cap-content、 setDirection('forward') または setDirection('back') Capacitorライブアップデートの代替案を比較するページです。

Appflowの比較/移行のマーケティングコピーです。 Using @capgo/capacitor-native-navigation と @capgo/capacitor-トランジションを使用する.

セーフエリアに安全なスペースを追加する

デバイスのセーフエリアをTailwind CSSで使用するには @capgo/tailwind-capacitor (公開日 tailwind-capacitor on npm). It provides safe-areas Capacitorで公開されました。

bun add -D tailwind-capacitor

機能とその他の__CAPGO_KEEP_0__-対応のTailwindプラグインを提供します。 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-*) 手作り。Capgoのプロジェクトは活発に開発されています — SvelteKitのセットアップで何かが欠けている場合 GitHubにPRを開く.

iOSレイアウトの修正 (ビュー ポート、セーフ エリア、水平オーバーフロー)

iOSでコンテンツが切り取られた、ずれた、または水平方向にスクロールできる場合、ビュー ポートタグを追加または調整するだけでは通常解決しません。次のチェックを順番に実行してください。 overflow-x: hidden ビュー ポートメタタグが正しく適用されていることを確認する

In

、ビュー ポートメタタグを src/app.htmliOSセーフエリアを1つのルートラッパーからのみ取り扱う <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

単一のアプリシェルを作成し、セーフエリアのパディングを適用する — 複数のネストされたコンポーネントにのみ適用するのではなく

すべてのページコンテンツを

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);
}

セーフエリアのパディングを複数回追加したり、ヘッダー、モーダル、レイアウトラッパーに追加したりすると、UIが切り取られたり大きすぎるように見えることがあります。 .app-shell. Duplicated safe-area padding in headers, modals, and layout wrappers often makes the UI look cropped or too large.

With @capgo/tailwind-capacitor, you can express the same padding with utilities like pt-safe pb-safe px-safe on that single shell.

Set Capacitor iOS contentInset first never In

, prefer native inset disabled and let CSS (or Native Navigation’s) capacitor.config.tsMixing __CAPGO_KEEP_0__’s automatic content inset with CSS contentInsetMode: 'css'to

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-*) }

実際にフローが溢れている要素を見つける

通常の容疑者は、固定ピクセル幅の要素を使用している 100vw, Tailwind 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,
  }));

Tailwindの場合、 w-screen を置き換える w-full を使用する 100vw / w-screen可能な限り。多くの水平方向のフロー問題は、

、重複した安全エリアのパディング、または固定幅のコンテナから来ています — ではなく、ビューポートのメタタグ自体から

Capacitor is an excellent option for building native applications based on an existing web project, offering a simple way to share code and maintain a consistent UI.

__CAPGO_KEEP_0__は既存のWebプロジェクトに基づいてネイティブアプリケーションを構築するための優れたオプションであり、__CAPGO_KEEP_1__を共有し、UIの統一性を維持する簡単な方法を提供します。 Capgo最新の機能やバグ修正を常に利用できるように、リアルタイムの更新をアプリに追加するのは、もうとても簡単です。

If you would like to learn how to add Capgo to your SvelteKit app, take a look at the next article:

Learn how Capgo can help you build better apps faster, 無料アカウントを作成する 今日。

Building Mobile Apps with SvelteKit and Capacitorから続けてください。

Building Mobile Apps with SvelteKit and __CAPGO_KEEP_0__を使用している場合、CI/CD自動化の計画に接続するには Capacitor CI/CD Capgo CI/CDの製品ワークフローに Capgo CI/CD Capgo Capgo Native Builds Capgo Native Builds Capgo Integrations Capgo Integrations __CAPGO_KEEP_0__ Integrations CI/CD統合 GitHub CI/CD統合の実装詳細 GitHub アクション統合