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

このチュートリアルでは、SvelteKitの新しいアプリから始め、__CAPGO_KEEP_0__を使用してネイティブモバイル開発に移行します。__CAPGO_KEEP_1__ Native NavigationとTransitionsを追加すると、ネイティブモバイルのフィールを実現し、tailwind-__CAPGO_KEEP_2__を使用して安全なエリアを実現できます。 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は、SvelteKitのWebアプリケーションをネイティブモバイルアプリに変換することを容易にします。モバイルアプリの作成に必要な大きな変更やReact Nativeの学習が必要なくても、Capacitorを使用できます。

Capacitorのステップバイステップガイドを参照して、SvelteKitアプリをCapacitorとオプションのCapgoネイティブナビゲーション、トランジション、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は、SvelteKitアプリをモバイルアプリに変換するためのステップバイステップガイドです。

__CAPGO_KEEP_1__は、ネイティブナビゲーション、トランジション、iOSレイアウトガイドを提供します。 sync コマンド。

最初に、開発依存の Capacitor CLI をプロジェクト内で設定するようにしてください。セットアップの際、名前とバンドルIDのデフォルト値を「エンター」で受け入れることができます。

次に、コアパッケージと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プロジェクトに表示されます。

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

Capacitorを使用してAndroidプロジェクトにアクセスするには、後で必要になります。 Android StudioiOS用の場合、Macが必要であり、Capacitorをインストールする必要があります。 Xcode.

また、Capacitorを使用してSvelteKitアプリを開発する際に、Capgoを使用してモバイルアプリを開発する方法についての情報も見つけることができます。 capacitor.config.ts プロジェクト内にあるファイル、Syncの際に使用される基本的なCapacitor設定が含まれています。注目すべきは、 ウェブディレクトリCapacitorのビルドコマンドの結果を指すURLが正しくありません。

アプリを再起動します。 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

パッケージがインストールされた後、自動アダプタから静的アダプターに変更する必要があります。 svelte.config.js 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

静的アダプターに更新された後、+layout.jsページを作成して prerenderオプションを追加する必要があります。 __CAPGO_KEEP_0__ __CAPGO_KEEP_0__ __CAPGO_KEEP_0__ __CAPGO_KEEP_0__ __CAPGO_KEEP_0__ src/routes と追加するには、以下のエクスポートを +layout.js:

export const prerender = true

追加して更新した後 +layout.js ページを追加した後、モバイルプラットフォームを追加し、プロジェクトを再構築してビルドを作成する必要があります。 build フォルダ

これを行うには、以下のコマンドを実行できます。

npm run build
npx cap sync

最初のコマンド npm run build は、SvelteKitプロジェクトをビルドし、静的ビルドをコピーすることになります。2番目のコマンド npx cap sync は、ウェブのcodeを、ネイティブプラットフォームの適切な場所に同步することになります。

さらに、Syncコマンドは、ネイティブプラットフォームを更新し、プラグインをインストールする可能性があるため、新しいプラグインをインストールしたときに実行する必要がある。 Capacitor プラグイン実行する npx cap sync 再度。

意識せずに、プロセスを完了したことになります。では、デバイスでアプリを確認してみましょう。

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

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

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

Nativeプロジェクトを設定した後、デバイスにアプリをデプロイするのは簡単です。Android Studioでは、設定を変更することなくデバイスにアプリをデプロイすることができます。ここでは例を示します。

android-studio-run

Xcodeでは、実機にアプリをデプロイするには署名アカウントを設定する必要があります。シミュレータにのみデプロイする場合は、署名アカウントを設定する必要はありません。署名アカウントを設定する必要がある場合は、Xcodeはプロセスをガイドします (ただし、開発プログラムに登録する必要があります)。署名アカウントを設定した後、実機にアプリをデプロイするには、上部で選択したデバイスを選択し、実行をクリックするだけです。ここでは例を示します。

xcode-run

成功しました！SvelteKitのWebアプリをモバイルデバイスにデプロイしました。ここでは例を示します。

待ってください、開発中にはもっと速い方法があります…

Capacitor Live Reload

ここまで来たら、すべてのモダンフレームワークでホットリロードができるようになっているので、同じ機能をモバイルデバイスでも利用できることを知っておきましょう。 モバイルデバイスでも 最小限の努力で!

ローカルにホストされているアプリケーションにアクセスするには、ライブリロードを有効にします。 On your network Capacitorを使用して、特定のURLからコンテンツを読み込むように設定します。

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

ipconfig getifaddr en0

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

ipconfig

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

Capacitorをサーバーから直接読み込むように設定するには、ファイルに追加のエントリを追加する必要があります。 capacitor.config.ts 正しいIPアドレスとポート番号を使用してください。

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;

上記の例を参照してください。 次の変更を適用するには、nativeプロジェクトにコピーする必要があります。変更

__CAPGO_KEEP_0__

npx cap copy

IPアドレス copy コマンドは、 syncが似ていますが、 ウェブフォルダの変更を含む変更をコピーするだけです。 設定とともに、ネイティブプロジェクトを更新しません。

Android StudioまたはXcodeを通じてアプリをもう一度デプロイできます。アプリの変更後、 スベルトアプリで何かを変更すると、アプリは自動的に再読み込みされ、変更が表示されます。 注意してください。

新しいプラグインをインストールした場合、カメラなどのプラグインは、ネイティブプロジェクトを再構築する必要があります。これは、ネイティブファイルが変更されたため、オンザフライで行うことはできません。正しいIPアドレスとポート番号を使用するように注意してください。上記の__CAPGO_KEEP_0__ブロックは、デモ用にデフォルトのスベルトキーポートを示しています。

code プラグインの使用

Capacitor プラグインの使用方法をご紹介します。

Let’s take a look at how to use a Capacitor plugin in action, which we’ve mentioned a few times before. To do this, we can install a simple plugin by running:

npm i @capacitor/share

There’s nothing fancy about the Share プラグイン, but it brings up the native share dialog! share() function 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

を実行すると、美しいネイティブの共有ダイアログが実行されます。

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.

I’ve worked for years with アイオニッククロスプラットフォームアプリケーションを構築するには、しかしSvelteKitと統合することはハック的で、すでに持っている場合にあまりにも価値がないことが多いため 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 —ネイティブのナビゲーションバー、iOSのLiquid Glassタブバー、Androidのブレードタブバー
@capgo/capacitor-transitions —IonicスタイルのページトランジションとiOSのエッジスワイプバック、WebViewレイヤー内で、IonicのUIを採用することなく

両方をインストールする

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

ネイティブナビゲーションをCSSのインセットモードで設定して、Webコンテンツがネイティブバーを尊重するようにする

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ライブアップデートの代替

Capacitorライブアップデートの代替 Using @capgo/capacitor-native-navigation Capawesomeの代替 Using @capgo/capacitor-transitions.

Appflowの代替

使用する前に進む @capgo/tailwind-capacitor と使用する@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-ネイティブナビゲーション tailwind-capacitor On npm)、Capacitorを使用してSvelteKitアプリを作成する方法については、Capacitorのドキュメントを参照してください。Capacitorは、SvelteKitアプリに必要な機能を提供するための、Capacitorを使用するためのフレームワークです。 safe-areas utilities and other Capacitor-friendly Tailwind plugins:

bun add -D tailwind-capacitor

SvelteKitアプリを作成するためのCapacitorを使用する方法については、Capacitorのドキュメントを参照してください。 src/app.css:

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

SvelteKitアプリを作成するためのCapacitorを使用するための、Capacitorフレームワークに適したTailwindプラグインを使用します。 pt-safe, pb-safeCapacitorフレームワークに適したTailwindプラグインを使用することで、Capacitorを使用するための、SvelteKitアプリを作成するための機能を提供します。 px-safe SvelteKitアプリを作成するためのCapacitorを使用するための、Capacitorフレームワークに適したTailwindプラグインを使用することで、Capacitorを使用するための機能を提供します。 env(safe-area-inset-*) iOSのレイアウト問題を解決する方法については、Capacitorのドキュメントを参照してください。 open a PR on GitHub.

iOSのレイアウト問題を解決する方法については、Capacitorのドキュメントを参照してください。

iOSのレイアウト問題を解決する方法については、Capacitorのドキュメントを参照してください。 overflow-x: hidden iOSのレイアウト問題を解決する方法については、Capacitorのドキュメントを参照してください。

iOSのレイアウト問題を解決する方法については、Capacitorのドキュメントを参照してください。

In src/app.html, <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が切り取られたり大きすぎるように見えることがある。

で、 @capgo/tailwind-capacitorを使用すると、同じパディングを単一のシェルに適用できます。 pt-safe pb-safe px-safe __CAPGO_KEEP_0__ iOS

Set Capacitor iOS `contentInset` に設定します。 `never` 最初

In capacitor.config.ts, 自然のインセットを無効にしてCSS (またはネイティブナビゲーションの contentInsetMode: 'css') がセーフエリアを管理するようにします。

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

Capacitorの自動コンテンツインセットとCSSのパディングを組み合わせると、一般的なダブルスペースの原因となります。 env(safe-area-inset-*) 実際にオーバーフローしている要素を探します。

通常の原因は、

、固定ピクセル幅、または大きい 100vwSafari Web インスペクターで実行します: w-screenTailwindの場合、置き換え min-width.

protectedTokens

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

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

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_KEEP_0__をあなたのSvelteKitアプリに追加する方法を学びたい場合は、次の記事を参照してください: __CAPGO_KEEP_0__があなたに速く、より良いアプリを構築するのにどのように役立つかを学びましょう、

Building Mobile Apps with SvelteKit and Capacitor

あなたが使用している Building Mobile Apps with SvelteKit and Capacitor CI/CD自動化の計画を続けるには、__CAPGO_KEEP_0__ CI/CD Capgo CI/CD Capgo CI/CD Capgo Native Builds Capgo Native Builds Capgo Integrations Capgo Integrations CI/CD統合 CI/CD統合の実装詳細 GitHub Actions Integration GitHub Actions Integrationの実装詳細について

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

Capacitorについて

SvelteKitアプリの準備

Capacitorは、SvelteKitアプリをモバイルアプリに変換するためのステップバイステップガイドです。

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

Capacitor Live Reload

Capacitor プラグインの使用方法をご紹介します。

ネイティブフィーリングのUIとCapgo Native Navigation and Transitions

Appflowの代替

iOSのレイアウト問題を解決する方法については、Capacitorのドキュメントを参照してください。

iOSのレイアウト問題を解決する方法については、Capacitorのドキュメントを参照してください。

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

Set Capacitor iOS `contentInset` に設定します。 `never` 最初

通常の原因は、

ビューポートメタタグ自体から

Building Mobile Apps with SvelteKit and Capacitor

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

Capacitorについて

SvelteKitアプリの準備

Capacitorは、SvelteKitアプリをモバイルアプリに変換するためのステップバイステップガイドです。

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

Capacitor Live Reload

Capacitor プラグインの使用方法をご紹介します。

ネイティブフィーリングのUIとCapgo Native Navigation and Transitions

Appflowの代替

iOSのレイアウト問題を解決する方法については、Capacitorのドキュメントを参照してください。

iOSのレイアウト問題を解決する方法については、Capacitorのドキュメントを参照してください。

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

Set Capacitor iOS contentInset に設定します。 never 最初

通常の原因は、

ビューポートメタタグ自体から

Building Mobile Apps with SvelteKit and Capacitor

Set Capacitor iOS `contentInset` に設定します。 `never` 最初