スベルトキットとCapacitorを使用したモバイルアプリの作成

このチュートリアルでは、新しい スベルトキット 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は、React Nativeなどの新しいスキルを学ぶ必要がなくても、SvelteKitのWebアプリをネイティブモバイルアプリに簡単に変換できるようにします。

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

Capacitor

CapacitorJSは大きな変化をもたらします! 実際には、任意のWebプロジェクトに簡単に統合できるWebビューでアプリケーションをラップし、XcodeとAndroid Studioのプロジェクトを生成します。

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

__CAPGO_KEEP_0__の準備

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

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

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

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

Capacitor

CapacitorJSは大きな変化をもたらします! 実際には、任意のWebプロジェクトに簡単に統合できるWebビューでアプリケーションをラップし、XcodeとAndroid Studioのプロジェクトを生成します。 sync command.

最初に、 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

この時点で、 ios と android フォルダがSvelteKitプロジェクト内に表示されます。

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

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

さらに、プロジェクトに必要な capacitor.config.ts 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 config

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

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

With the svelte.config.js prerenderオプションを追加するには、+layout.jsページをsrc/routesに追加する必要があります。 +layout.js +layout.jsページをsrc/routesに追加する必要があります。 src/routes ページを src/routes そして、以下のエクスポートを追加してください +レイアウト.js:

export const prerender = true

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

最初のコマンド

npm run build
npx cap sync

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

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

もう一度。

モバイルアプリを開発する

iOSアプリを開発するには Xcode がインストールされている必要があります。Androidアプリを開発するには Android Studio がインストールされている必要があります。また、App Storeでアプリを配布する場合、iOSではApple Developer Programに登録し、AndroidではGoogle Play Consoleに登録する必要があります。

Capgoを使用して、ネイティブモバイル開発に新しい場合は、Capacitor CLI を使用して、両方のネイティブプロジェクトを簡単に開くことができます。

npx cap open ios
npx cap open android

Capacitorを使用して、iOSとAndroidの両方のプロジェクトを簡単に開くことができます。

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

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

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

Capacitor ライブ リロード

あらゆるモダンフレームワークでホットリロードが利用できるようになったことで、もうあなたはホットリロードに慣れているはずです。良いニュースは、ホットリロードの機能をモバイルデバイスでも利用できるようになります。 モバイルデバイスでもホットリロードを利用できるようになります。 ホットリロードを利用して、ローカルにホストされているアプリにアクセスできます。

ネットワーク上でローカルにホストされているアプリにアクセスできます。 __CAPGO_KEEP_0__ CapgoのCapacitorアプリが、特定のURLからコンテンツを読み込むように設定します。

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

ipconfig getifaddr en0

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

ipconfig

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

Capgoの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;

上記の例を参照してください。 これらの変更を適用するには、nativeプロジェクトにコピーしてください。コマンドは以下のとおりです。

コマンドは上記のとおりです。

npx cap copy

The copy コマンドは上記のとおりです。 syncですが、変更は webフォルダの変更をコピーするだけです。 設定ファイルも含めて、ネイティブプロジェクトを更新せずに。

Android StudioまたはXcodeを使用してアプリをもう一度デプロイできます。その後、Svelteアプリに何か変更を加えた場合、 アプリは自動的に再読み込みされ 変更が表示されます!

注意してください。 新しいプラグインをインストールした場合、カメラなどのプラグインはネイティブプロジェクトを再構築する必要があります。これは、ネイティブファイルが変更されたため、オンザフライで行うことはできません。

設定ファイルに使用するIPアドレスとポート番号を正しく指定してください。上記のcodeブロックは、デモ用にSvelteKitのデフォルトポートを示しています。

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

何も特別なことはありません。 プラグインを共有ですが、ネイティブの共有ダイアログが表示されます! これで、パッケージをインポートし、アプリから関数を呼び出すだけです。なので、src/routes/index.svelteを次のように変更してみましょう。 share() function からアプリのものに変更する ボタンを押すと、美しいネイティブの共有ダイアログが実行できます! このようにします。

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

ネイティブのUIを実現する__CAPGO_KEEP_0__ナビゲーションとトランジション

npx cap sync

数年間、Ionicを使用してクロスプラットフォームアプリケーションを構築してきましたが、SvelteKitと統合することはハック的で、既存のものと組み合わせるとほとんど価値がありません。

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ネイティブのナビゲーションとトランジション

Share plugin Ionic function from our app, so let’s change the 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-ナビゲーション —ネイティブのナビゲーションバー、iOSでは液体ガラスのタブバー、Androidではぼやけたタブバーのスタイルが使用されます。SvelteKitルーターはルートの状態を保持し、プラグインはネイティブのブラウザを管理します。
• @capgo/capacitor-トランジション —Ionicスタイルのページ遷移とiOSのエッジスワイプバックがWebView層で実現されますが、Ionicの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>

ルーティングされたページを囲みます。 cap-router-outlet, cap-page, cap-content、そして呼び出し setDirection('forward') または setDirection('back') Capacitorライブアップデートの代替

Capacitorライブアップデートの代替 Capacitorで使用する@capgo/capacitor-native-navigation and @capgo/capacitor-トランジションを使用します。.

Capacitorライブアップデートの代替

Capacitorライブアップデートの代替 @capgo/Tailwind-capacitor Capacitorライブアップデートの代替 tailwind-capacitor Capgoで利用可能なnpm)。これは safe-areas Capacitorのユーティリティやその他のTailwindプラグイン:

bun add -D tailwind-capacitor

In 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 ビュー ポートメタタグが正しく適用されていることを確認してください

Fixing iOS Layout Issues (Viewport, Safe Area, and Horizontal Overflow)

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

すべてのページコンテンツをラッパー内に Wrap します。 .app-shell. ヘッダー、モーダル、レイアウトラッパーにセーフエリアのパディングを複数回適用すると、UI がカットされたり大きすぎるように見えることがあります。

With @capgo/テールウィンドcapacitor__CAPGO_KEEP_0__ iOS を "first" に設定します。 pt-safe pb-safe px-safe コンテキスト: Live updates product page. 役割: 短い UI ラベルまたはナビゲーションアイテム。メッセージキー `live_update_dynamic_label_to` (Live Update Dynamic Label To)。

Capacitor contentInset to never first

In capacitor.config.ts, nativeのインセットを有効にし、CSS (またはNative Navigationの) contentInsetMode: 'css')が安全なエリアを管理するようにします:

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

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

通常の原因は、

, Tailwind 100vw, 固定ピクセル幅、または大きい w-screenSafari Web Inspectorで実行します: min-width.

Tailwindの場合、

[...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 with w-full 可能な限り。多くの水平オーバーフロー問題は、安全エリアの重複パディングや固定幅のコンテナからではなく、ビューポートメタタグ自体から生じることが多い。 100vw / w-screen結論

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_KEEP_0__ Capgoあなたが__CAPGO_KEEP_0__をSvelteKitアプリに追加する方法を学びたい場合は、次の記事を参照してください。

Capgoを使用して、より速く、より優れたアプリを構築する方法を学びましょう。

Learn how Capgo can help you build better apps faster, 今日。 today.

Capacitor

Capgoを使用している場合 Building Mobile Apps with SvelteKit and Capacitor CI/CDの自動化を計画する場合、Capgoと接続する Capgo CI/CD for the product workflow in Capgo CI/CD, Capgo 本機ビルド for the product workflow in Capgo Native Builds, Capgo 連携機能 Capgoの製品ワークフローでCapgo統合 CI/CD統合 CI/CD統合の実装詳細 GitHub アクション統合 Capgoの実装詳細についてはGitHubアクション統合で。