SvelteKitとCapacitorを使用したモバイルアプリの作成

このチュートリアルでは、SvelteKitアプリの新しいプロジェクトから始め、__CAPGO_KEEP_0__を使用してネイティブモバイル開発に移行します。__CAPGO_KEEP_1__ネイティブナビゲーションとトランジションを追加してネイティブモバイルのフィールを実現し、安全なエリアを使用するためにtailwind-__CAPGO_KEEP_2__を使用することもできます。 __CAPGO_KEEP_0__は、React Nativeのような新しいスキルを学ぶことなく、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.

Capacitorのステップバイステップガイドに従って、SvelteKitアプリをモバイルアプリに変換します。CapgoのオプションでNative Navigation、Transitions、iOSレイアウトガイドも利用できます。

Capacitorについて

CapacitorJSはゲームチェンジャーです! どのWebプロジェクトでも容易に統合でき、WebアプリケーションをネイティブWebビューで包み、ネイティブXcodeとAndroid Studioプロジェクトを生成します。プラグインはJavaScriptブリッジを通じてカメラなどのネイティブデバイス機能にアクセスできます。

Capacitorは、複雑なセットアップや急勾配の学習曲線なしで素晴らしいネイティブモバイルアプリを作成できるようにします。APIはスリムで、プロジェクトに簡単に統合できます。Capacitorで完全に機能するネイティブアプリを実現するのは驚くほど簡単です!

SvelteKitアプリの準備

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

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

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

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

Capacitor

__CAPGO_KEEP_1__ sync コマンド。

最初に、 Capacitor CLI 開発依存モジュールとしてインストールし、プロジェクト内でセットアップしてください。セットアップ中に、名前とバンドル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 フォルダが見つかります。

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

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__.config.tsファイルを見つける必要があります。これには、Sync中に使用される基本的な

__CAPGO_KEEP_0__ capacitor.config.ts webDir webDir:

import { CapacitorConfig } from '@capacitor/cli'

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

export default config

Capacitorを更新した後、静的アプリケーションに変更するSveltekitプロジェクトをダウンロードする適切な静的アダプターページをダウンロードしてください:

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

静的アダプターを使用する svelte.config.js を更新した後、 prerender オプションを追加する必要があります。 +layout.js ページを作成してください src/routes そして、以下のエクスポートを追加してください Capgoを追加して更新した後、+layout.js:

export const prerender = true

ページを追加して更新した後、+layout.js モバイルプラットフォームを追加し、プロジェクトを再構築してビルドフォルダを作成する必要があります。 ビルド 以下のコマンドを実行してください。 最初のコマンド

SvelteKitプロジェクトをビルドし、静的ビルドをコピーします。2番目のコマンド

npm run build
npx cap sync

ウェブ__CAPGO_KEEP_0__をすべて同期し、ネイティブプラットフォームの正しい場所に配置します。 npm run build これにより、ウェブコンテンツがアプリ内で表示されるようになります。 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.

さらに、syncコマンドは、ネイティブプラットフォームを更新し、プラグインをインストールする可能性があるため、__CAPGO_KEEP_0__ プラグインをインストールする際には、 Capacitorを実行する必要がある。 npx cap sync 気づかないうちにプロセスを完了したので、実機でアプリを確認してみよう!

ネイティブアプリをビルドして配信する

iOSアプリを開発するには、

Xcode がインストールされている必要があり、Androidアプリを開発するには、 Android Studio がインストールされている必要がある。また、アプリをアプリストアで配信する場合、iOSではApple Developer Programに登録し、AndroidではGoogle Play Consoleに登録する必要がある。 ネイティブモバイル開発に慣れていない場合は、__CAPGO_KEEP_0__ __CAPGO_KEEP_1__を使用して、両方のネイティブプロジェクトを簡単に開くことができる。

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

あなたのネイティブプロジェクトを設定した後、接続されたデバイスにアプリを展開することは簡単です。Android Studioでは、すべての設定を変更することなく、接続されたデバイスにアプリを展開するために、すべての準備が整うのを待ちます。ここでは例を示します。

Xcodeでは、実機にアプリを展開するのではなく、シミュレータにのみ展開する場合にのみ、署名アカウントを設定する必要があります。署名アカウントを設定することがまだない場合は、Xcodeはプロセスを案内します (ただし、開発プログラムに登録されている必要があります)。その後、実機にアプリを展開するには、上部で選択できる接続されたデバイスを選択するだけで済みます。ここでは例を示します。

成功しました！あなたのSvelteKitウェブアプリをモバイルデバイスに展開しました。ここでは例を示します。

待ってください、展開に加えて、開発中にこのプロセスを高速化する方法もあります。

Capacitor Live Reload

ここまで来たら、すべてのモダンフレームワークでホットリロードを利用しているので、良いニュースは、同様の機能をモバイルデバイスでも利用できることです。 モバイルデバイス上で 最小限の努力で実現できます。

ローカルにホストされているアプリケーションへのアクセスを有効にします。Live Reload あなたのネットワーク上で Capacitorアプリが特定のURLからコンテンツを読み込むようにすることで

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

ipconfig getifaddr en0

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

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アドレスとポート番号を使用してください 上記の例に示されているように。これらの変更を適用するには、nativeプロジェクトにコピーする必要があります。

The

npx cap copy

The copy コマンドは、 syncが使用されますが、 ウェブフォルダと設定のみをコピーする ネイティブプロジェクトを更新せずに

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

sync操作を行うには、以下のコマンドを実行してください。

Next, you can make the app feel more native on iOS and Android with Capgo navigation and transitions, and fix common iOS layout issues that cause horizontal overflow or cropped safe areas.

ネイティブのUIを実現するには、Capgoナビゲーションとトランジションを使用し、iOSの共通のレイアウト問題を解決してください。

ネイティブのUI 私は数年間、Ionicと仕事をしてきました。 to build cross-platform applications, but integrating it with SvelteKit is hacky and rarely worth it when you already have Tailwind CSS.

For a native mobile feel in a SvelteKit + Capacitor app, use Capgo plugins instead of web-only UI kits like Konsta UI:

• @capgo/capacitor-native-navigation @Capgo/__CAPGO_KEEP_1__-native-navigation
• @capgo/capacitor-transitions @Capgo/__CAPGO_KEEP_1__-transitions

— WebViewレイヤーでIonicスタイルのページトランジションとiOSのエッジスワイプバックを実現します。

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

Capgoプラグインをインストールしてください。

import { NativeNavigation } from '@capgo/capacitor-native-navigation';

await NativeNavigation.configure({
  contentInsetMode: 'css',
  animationDuration: 360,
  glass: {
    effect: 'liquidGlass',
  },
});

ネイティブナビゲーションをCSSインセットモードで設定してください。

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

Liquid Glassタブバーをレンダリングしてください。

<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') 移動する前に、重複するウェブ ヘッダーまたはフッターを表示しないでください。

詳細なガイドを参照してください: Capgo Native ナビゲーションを使用する場合、@capgo/capacitor-native-navigation と Capgo トランジションを使用する場合、@capgo/capacitor-transitions.

セーフ エリア (Safe Area) について Tailwind

Tailwind CSS でデバイス セーフ エリアを使用する場合、@__CAPGO_KEEP_0__/tailwind-__CAPGO_KEEP_1__ @capgo/tailwind-capacitor __CAPGO_KEEP_0__ tailwind-capacitor On npm)。Capgoは、 safe-areas utilities and other Capacitor-friendly Tailwind plugins:

bun add -D tailwind-capacitor

In src/app.css:

@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";

Capgoのユーティリティを使用する pt-safe, pb-safe, px-safe 代わりに手動で env(safe-area-inset-*) Capgoの開発は積極的に行われています。Capgoのセットアップに必要なものが不足している場合、 open a PR on GitHub.

iOSレイアウトの問題を解決する (ビュー ポート、セーフ エリア、水平方向のオーバーフロー)

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

__CAPGO_KEEP_0__

In src/app.html, 画面幅を設定する viewport メタタグを <head>:

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

iOS セーフエリアを 1 つのルートラッパーからのみハンドルする

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ヘッダー、モーダル、レイアウトラッパーなどで、セーフエリアのパディングを複数回適用すると、UI がカットされたり大きすぎるように見えることがあります。

With @capgo/tailwind-capacitor, 1 つのシェルに pt-safe pb-safe px-safe セーフエリアのパディングを適用する

Set Capacitor iOS contentInset に never first

In capacitor.config.ts, native のインセットを無効にして、CSS (または Native Navigation の ) が安全なエリアを管理することをお勧めします。 contentInsetMode: 'css'Mixing __CAPGO_KEEP_0__’s automatic content inset with 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-*) 通常の原因は、

, Tailwind

, 固定ピクセル幅、または大きい 100vwSafari Web Inspector で実行: w-screenTailwind の場合、 min-width.

replace

[...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,
  }));

In w-screen with w-full when possible. Many horizontal overflow issues come from 100vw / w-screen, duplicated safe-area padding, or a fixed-width container — not from the viewport meta tag itself.

Conclusion

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, it’s even easier to add live updates to your app, ensuring that your users always have access to the latest features and bug fixes.

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, Capgoの追加により、 を追加することがさらに簡単になりました。アプリのユーザーは常に最新の機能やバグ修正にアクセスできるようになります。

Building Mobile Apps with SvelteKitとCapacitor

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