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

このチュートリアルでは、 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を使用すると、複雑なセットアップや急な学習曲線なしで素晴らしいネイティブモバイルアプリケーションを作成できます。

SvelteKitアプリケーションの準備

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

新しいSvelteKitアプリケーションを作成するには、以下のコマンドを実行してください: build コマンドを実行した後、 dist プロジェクトのルートディレクトリにあるフォルダ。

このフォルダは後でCapacitorによって使用されるが、現在は正しく設定する必要があります。

CapacitorをSvelteKitアプリに追加する

ウェブアプリをネイティブモバイルコンテナにパッケージ化するには、最初にいくつかのステップを実行する必要があります。その後、単一のコマンドを実行するだけです。 sync 最初に、__CAPGO_KEEP_0__ __CAPGO_KEEP_1__を開発依存モジュールとしてインストールし、プロジェクト内で設定します。セットアップ中に、名前とバンドルIDのデフォルト値に「Enter」を押してください。

次に、コアパッケージとiOSおよびAndroidプラットフォームの関連パッケージをインストールします。 Capacitor CLI この時点で、新しい

ios

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 android

At this point, you should see new ios と アンドロイド プロジェクト内のフォルダ

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

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__設定が含まれています。Syncの際に注目する必要があるのは、, という結果は、ビルドコマンドの結果に指す必要があります。現在は不正です。

この問題を解決するには、 capacitor.config.ts ファイルを開いて webDir:

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

コンテキスト: HTML の長い Capgo UI の文字列 (親キー `solutions_cordova_to_capacitor_ai_step2_body`)。ページ/エリア: Capgo のソリューションズ マーケティング ページ。役割: ウェブサイトのコピー文。見つかった場所: ソリューションズ/コルダボアトキャパシタオアイ.astro。メッセージキー `solutions_cordova_to_capacitor_ai_step2_body` (ソリューションズ コルダボアトキャパシタオアイ ステップ2 ボディ)。 設定を更新した後、Sveltekit プロジェクトを静的アプリケーションに変更するために、適切な静的アダプターペッケージをダウンロードしてください: パッケージがインストールされた後、自動アダプタから静的アダプタに変更する必要があります:

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 ファイルを更新してください。 前処理 オプションを作成する layout.jsに+を追加 ページ src/routes layout.jsにexportを追加 layout.jsを追加および更新した後:

export const prerender = true

layout.js モバイルプラットフォームを追加し、プロジェクトを再構築してビルドを作成する ビルド フォルダ context

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

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.

は、Web __CAPGO_KEEP_0__ をネイティブプラットフォームの正しい場所に同步します。 Capacitor plugins__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

現在、すべてのモダンフレームワークでホットリロードができるようになっているので、同じ機能をモバイルデバイスでも利用できるようになります。 モバイルデバイスでも利用できるようになります。 最小限の手間で!

ローカルホストのアプリケーションにアクセスし、ライブリロードを実行するには、ネットワーク上で __CAPGO_KEEP_0__ アプリが特定のURLからコンテンツを読み込むようにする必要があります。 by having the Capacitor app load the content from the specific URL.

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

ipconfig getifaddr en0

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

ipconfig

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

We can instruct Capacitor to load the app directly from the server by adding another entry to our capacitor.config.ts __CAPGO_KEEP_0__

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;

を使用してください。 __CAPGO_KEEP_0____CAPGO_KEEP_0__

これらの変更を適用するには、nativeプロジェクトにコピーする必要があります。

npx cap copy

__CAPGO_KEEP_0__ copy __CAPGO_KEEP_0__ syncこのコマンドは、上記の例に示されているように似ていますが、webフォルダと設定のみを更新し、nativeプロジェクトを更新しないようにします。 __CAPGO_KEEP_0__ Android StudioまたはXcodeを使用してアプリをもう一度デプロイしてください。その後、Svelteアプリで何かを変更すると、アプリは自動的に再読み込みされ、変更が表示されます。

__CAPGO_KEEP_0__ 注意してください __CAPGO_KEEP_0__

__CAPGO_KEEP_0__ Capacitorを使用してSvelteKitでモバイルアプリを作成する

注意: 正しいIPアドレスとポート番号を設定する必要があります。上記のcodeブロックは、デモ用にデフォルトのSvelteKitポートを表示しています。

Capacitor プラグインの使用

実際に使用するCapacitor プラグインについては、前にも何度か言及したことがあります。使用方法を確認してみましょう。簡単なプラグインをインストールするには、以下のコマンドを実行します。

npm i @capacitor/share

Share プラグインは何も特別なことはしていませんが、ネイティブの共有ダイアログを表示します。この場合、パッケージをインポートし、関数を呼び出すだけです。アプリのsrc/routes/index.svelteを次のように変更してみましょう。 前にも言及したように、新しいプラグインをインストールする場合、Sync操作を実行し、再度アプリをデバイスにデプロイする必要があります。以下のコマンドを実行してください。ボタンをクリックすると、美しいネイティブの共有ダイアログが実際に動作することがわかります! share() targetLanguage pagePath protectedTokens

<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>

items

npx cap sync

text

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

ネイティブのUI感覚を与えるCapgoネイティブナビゲーションとトランジション

数年間、Ionicを使用してクロスプラットフォームアプリケーションを構築してきましたが、SvelteKitと統合することはハック的で、すでにTailwind CSSを持っている場合にはほとんど価値がありません。 Ionic Tailwind CSS SvelteKit + __CAPGO_KEEP_0__アプリケーションでネイティブモバイルの感覚を得るには、WebのみのUIキットであるKonsta UIではなく、__CAPGO_KEEP_1__プラグインを使用します。.

@Capacitor/Capgo-native-navigation

• @capgo/capacitor-native-navigation @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions
• @capgo/capacitor-transitions 両方をインストールします。

__CAPGO_KEEP_0__

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

CSSInsetモードでネイティブのバーを尊重するように、ウェブコンテンツのネイティブナビゲーションを設定する

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

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

iOSではシステムのレンダリングを使用し、AndroidではぼやけたWebViewのバックグラウンドを使用して、Liquid Glassタブバーをレンダリングします。

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

Capacitorを使用したアプリシェルでネイティブのページトランジションを追加してください。

<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>

ページルーティングを実装する場合、Capacitor を使用して SvelteKit でモバイルアプリを作成する際に、ルーティングされたページを Wrap する必要があります。 cap-router-outlet, cap-page、 cap-content、そして呼び出し setDirection('forward') Capacitorライブアップデートの代替手段を比較するページです。Capacitorライブアップデートの代替手段を比較するページです。 setDirection('back') 移動する前に。ウェブヘッダーまたはフッターを複製しないでください。ネイティブナビゲーションが管理する表面には、ウェブヘッダーまたはフッターを複製しないでください。

Capgoのフルガイドを参照してください。 Capgoで使用する@capgo/capacitor-native-navigation と @Capgo/capgo/capacitor-transitions.

SvelteKitとCapacitorでモバイルアプリを作成する

モバイルデバイスの安全なエリアにTailwindを使用する場合 @capgo/tailwind-capacitorを使用します (Capacitorで公開された) tailwind-capacitor on npmで公開されています。 Tailwind CSSのユーティリティとその他のCapacitor対応のプラグインを提供しています。 safe-areas utilities and other Capacitor-friendly Tailwind plugins:

bun add -D tailwind-capacitor

Capacitorで利用できるユーティリティとして src/app.css:

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

, pt-safe, pb-safeの代わりに使用します。手動で px-safe を散らかすのではなく、プロジェクトは積極的に開発されています。 SvelteKitの設定で不足しているものがあれば、 env(safe-area-inset-*) にPRを提出してください GitHub.

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

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

In

In src/app.htmlセーフエリアをiOSから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-shellWith

@__CAPGO_KEEP_0__/tailwind-__CAPGO_KEEP_1__ @capgo/tailwind-capacitor、ユーティリティライクの pt-safe pb-safe px-safe シングルシェルの上で

Capacitor iOS contentInset に never 最初

In capacitor.config.tsCSS（またはネイティブナビゲーションの contentInsetMode: 'css')が安全エリアを管理するようにしてください:

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: 'build',
  ios: {
    contentInset: 'never',
  },
};

Capacitorの自動コンテンツインセットと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__はCapgoのUIの長い文字列の親キー`submitting_a_pr_to_capgo`から取得されたHTMLテキストのフラグメントです。ページ/エリア: Capgoのマーケティングウェブサイト。役割: ウェブサイトのコピー。見られる場所: contributing.astroページ。Capgoの製品/ブランド名と開発者用語を完全に保持すること。メッセージキー`submitting_a_pr_to_capgo` (Capgoにプルリクエストを提出する)。

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 Capgo 連携 Capgo 連携の製品ワークフロー CI/CD 連携 __CAPGO_KEEP_0__ アクション連携 GitHub アクション連携の実装詳細 GitHub アクション連携の実装詳細