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

このチュートリアルでは、__CAPGO_KEEP_0__ を使用して新しい 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 ウェブアプリケーションをネイティブモバイルアプリケーションに変換できます。ウェブアプリケーションをネイティブモバイルアプリケーションに変換するには、重大な変更や新しいスキルを学ぶ必要はありません。

このチュートリアルでは、Capacitor を使用して SvelteKit アプリケーションをモバイルアプリケーションに変換するためのステップバイステップのガイドを提供します。Capgo Native Navigation、Transitions、iOSレイアウトガイドをオプションで使用できます。

Capacitor

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

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

SvelteKit アプリケーションを準備する

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

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

コマンドを実行した後、 build コマンドを実行した後、 dist プロジェクトのルートディレクトリにあるフォルダです。

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

Adding Capacitor to Your SvelteKit App

任意のWebアプリをネイティブモバイルコンテナにパッケージ化するには、最初にいくつかの初期ステップを実行する必要があります。その後、単一のコマンドを実行するだけです。 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

このフォルダは後で__CAPGO_KEEP_0__によって使用されますが、現在は正しく設定する必要があります。 CapgoをSvelteKitアプリに追加する と アンドロイド プロジェクト内のフォルダ。

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

アンドロイドプロジェクトにアクセスするには後で必要になります。 アンドロイドスタジオをインストールする必要があります。iOSの場合、Macが必要であり、Xcodeをインストールする必要があります。 さらに、プロジェクト内でSync中に使用される基本的な__CAPGO_KEEP_0__設定が含まれる.

__CAPGO_KEEP_0__.config.ts 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 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

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

設定を更新した後、Sveltekit プロジェクトを静的アプリケーションに変更するために、適切な静的アダプターペッケージをダウンロードしてください。 パッケージがインストールされた後、 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 プレレンダリング オプションを作成することで src/routes/+layout.js ページを作成する src/routes/+layout.js src/routes/+layout.js src/routes/+layout.js:

export const prerender = true

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

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

npm run build
npx cap sync

最初のコマンド npm run build は、SvelteKitプロジェクトをビルドし、静的ビルドをコピーすることになります。2番目のコマンド npx cap sync は、Web codeをネイティブプラットフォームの正しい場所にSyncし、表示するアプリ内で表示できるようにします。

Syncコマンドは、ネイティブプラットフォームを更新し、プラグインをインストールする可能性があるため、新しい Capacitor プラグインをインストールした場合はまた、Syncコマンドを実行する必要があります。 npx cap sync 実行せずに気づかなかった場合、プロセスを完了したことになります。

したがって、デバイスでアプリを表示してみましょう。

ネイティブアプリをビルドおよびデプロイする

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

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では、設定を変更することなく、デバイスにアプリをデプロイできます。例えば、

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

成功しました！SvelteKit Webアプリをモバイルデバイスにデプロイしました。例えば、

しかし、開発中にはもっと速くする方法もあります…

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

使用する際には __CAPGO_KEEP_0__と__CAPGO_KEEP_1__を正しく設定してください。上記の例に示されているように、

これらの変更を適用するには、以下の手順に従ってください。

npx cap copy

この copy コマンドは syncと似ていますが、 webフォルダと設定のみをコピーし、 nativeプロジェクトを更新せずにします。

Android StudioまたはXcodeを使用してアプリを再度デプロイしてください。変更を加えた後、 Svelteアプリで何かを変更すると、 自動的にリロードされ、変更が表示されます!

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

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

Capacitor プラグインの使用

Capacitor プラグインの使用方法を確認してみましょう。これは、前にも何度か言及したことがあります。

npm i @capacitor/share

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

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

このコマンドを実行すると、美しいネイティブの共有ダイアログが表示されます！

npx cap sync

After hitting the button, you can witness the beautiful native share dialog in action!

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

ネイティブフィーリングのUIにCapgoネイティブナビゲーションとトランジションを使用します。

数年間、 Ionic を使用してクロスプラットフォームアプリケーションを構築してきましたが、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:

• SvelteKit + capgoアプリでネイティブモバイルフィーリングを実現するには、WebのみのUIキットであるKonsta UIのようなものではなくcapacitorプラグインを使用します。 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation
• @capgo/capacitor-transitions @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-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>

ルーティングされたページを、 cap-router-outlet, cap-page, cap-content, setDirection('forward') , setDirection('back') 、および呼び出すことによってラップします。

または Using @capgo/capacitor-native-navigation ネイティブのナビゲーションが管理する表面には、重複するWebヘッダーやフッターを使用しないでください。 詳細なガイドを参照してください:「@capgo/capacitor-native-navigationを使用する」、「@capgo/capacitor-transitionsを使用する」.

安全区域

Tailwind CSSのデバイス安全区域を使用するには @capgo/tailwind-capacitor (__CAPGO_KEEP_0__として公開 tailwind-capacitor on npm). It provides 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";

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

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

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

、で、ビューポートメタタグを

iOSセーフエリアを1つのルートワッパーからのみ取り扱う src/app.html単一のアプリシェルを作成し、セーフエリアのパディングをそこに適用する — 複数のネストされたコンポーネントに適用するのではなく: <head>:

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

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

セーフエリアのパディングが複数回適用されている場合、ヘッダー、モーダル、レイアウトワッパーでUIが切り取られたり大きすぎるように見えることがあります。

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

、@__CAPGO_KEEP_0__/tailwind-__CAPGO_KEEP_1__ .app-shell__CAPGO_KEEP_0__

__CAPGO_KEEP_1__ @capgo/tailwind-capacitor、同等のパディングを、ユーティリティのようなもので表現することができます。 pt-safe pb-safe px-safe 1 つのシェル上で実行します。

Capacitor iOS を "first" に設定します。 contentInset 「first」を「first"に設定します。 never 通常、native inset が disabled されている場合、CSS (または Native Navigation の ) が safe area を管理することを優先します。

__CAPGO_KEEP_0__ の自動コンテンツインセットと CSS のパディングを組み合わせることは、通常の原因の 1 つです。 capacitor.config.ts実際にオーバーフローしている要素を探します。 contentInsetMode: 'css'通常の原因は、CSS のパディングを使用している要素です。

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

Capacitor の自動コンテンツインセットと CSS のパディングを組み合わせることは、通常の原因の 1 つです。 env(safe-area-inset-*) CSS のパディングを使用している要素が原因です。

CSS のパディングを使用している要素が原因です。

CSS のパディングを使用している要素が原因です。 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は既存のWebプロジェクトに基づいてネイティブアプリケーションを構築するための優れたオプションであり、codeを簡単に共有し、UIの統一性を維持するための簡単な方法を提供します。

さらに、 Capgoを追加すると、ライブアップデートを簡単に追加できます。アプリのユーザーは、常に最新の機能とバグ修正にアクセスできます。

CapgoをSvelteKitアプリに追加する方法を学びたい場合は、次の記事を参照してください:

Capgoを用いて、より速く、より良いアプリを開発する方法を学びましょう。 無料アカウントに登録する 今日。

SvelteKitとCapacitorを用いてモバイルアプリを構築する方法から続けてください。

__CAPGO_KEEP_0__を使用している場合 SvelteKitとCapacitorを用いてモバイルアプリを構築する方法 CI/CD自動化の計画に使用している場合、__CAPGO_KEEP_0__ CI/CDと接続する Capgo CI/CDの製品ワークフロー Capgo CI/CDの製品ワークフロー Capgo Native Buildsの製品ワークフロー Capgo Native Buildsの製品ワークフロー Capgo バータイント for the product workflow in Capgo Integrations, バトシャトバータイント バトシャトバータイントにバトシャトをきあるだされています GitHub Actions Integration for the implementation detail in GitHub Actions Integration.