__CAPGO_KEEP_3__ Capacitor

このチュートリアルでは、新しいCapgoアプリを作成し、SvelteKitとCapacitorを使用してモバイルアプリを作成する方法について説明します。スベルトキットスマートフォンアプリと、Capacitorを使用したネイティブモバイル開発への移行が可能です。さらに、Capgo Native Navigation and Transitionsを追加することでネイティブモバイルのフィールを実現し、安全なエリアをtailwind-capacitorで使用することができます。

Capacitorは、SvelteKitのウェブアプリケーションをネイティブモバイルアプリケーションに簡単に変換できるようにすることができます。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

CapacitorJSは大きな変化をもたらします！これは、任意のWebプロジェクトに容易に統合でき、Webビューをネイティブにラップし、ネイティブのXcodeとAndroid Studioプロジェクトを自動生成します。プラグインは、JavaScriptブリッジを通じてカメラなどのネイティブデバイス機能にアクセスできるようになります。

Capacitorは、複雑な設定や急勾配の学習曲線なしで素晴らしいネイティブモバイルアプリを作成できるように支援します。スリムで API な機能と、プロジェクトに簡単に組み込めるようにした機能により、プロジェクトに簡単に組み込むことができます。 Capacitor を使用することで、完全に機能するネイティブアプリを実現することが驚くほど簡単です。

Capgoアプリを準備する

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

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

Capacitor CLI create command, you can start building your mobile app with SvelteKit and Capacitor. build コマンドを実行した場合、Capacitor によって新しいアプリケーションが作成されます。 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__設定が含まれています。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

コンテキスト: HTMLの長いCapgo UIの文字列から取得したテキストの部分 (親キー `solutions_cordova_to_capacitor_ai_step2_body`). ページ/エリア: Capgoのソリューションマーケティングページ。役割: ウェブサイトのコピー文。見つかった場所: page solutions/cordova-to-capacitor-ai.astro。メッセージキー `solutions_cordova_to_capacitor_ai_step2_body` (Solutions Cordova To Capacitor Ai Step2 Body)。 設定を更新した後、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 ファイルを自動アダプタから静的アダプタに変更する必要があります: 静的アダプタに更新された後、svelte.config.jsファイルに次の内容を追加してください: 前置レンダリング オプションを作成する +layout.js ページ src/routes と src/routes:

export const prerender = true

に 次のエクスポートを追加する +layout.js 追加して更新した後 +layout.js

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

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.

は、ウェブの__CAPGO_KEEP_0__を、ネイティブプラットフォームの正しい場所に同步させることになります。ウェブのCapacitorが表示されるようにするためです。syncコマンドは、ネイティブプラットフォームを更新し、プラグインをインストールすることもあります。 npx cap sync 新しい__CAPGO_KEEP_0__プラグインをインストールした場合、再度syncコマンドを実行する必要があります。

あなたは、プロセスを完了したことさえ気づいていません。

では、デバイスでアプリを確認してみましょう。

ネイティブアプリのビルドとデプロイ iOSアプリを開発するには、 インストールしてあり、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では、設定を変更することなく、デバイスにアプリをデプロイする準備が整うのを待ちます。ここに例があります。

android-studio-run

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

xcode-run

成功しました！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__はCapacitorの機能です。 正しいIPアドレスとポート番号, as shown in the example above.

ここで、これらの変更をNativeプロジェクトにコピーできます:

npx cap copy

コマンドは copy と似ていますが、 syncWebフォルダと設定のみをコピーし、Nativeプロジェクトを更新せずに実行します。 Android StudioまたはXcodeを使用してアプリをもう一度デプロイしてください。その後、Svelteアプリで何かが変更された場合、アプリは自動的にリロードされ、変更が表示されます! 注意してください

__CAPGO_KEEP_0__ __CAPGO_KEEP_0__ __CAPGO_KEEP_0__

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

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

Capacitor プラグインの使用

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

npm i @capacitor/share

Share プラグインは何も特別なことはありませんが、native の共有ダイアログを表示します。このプラグインをインストールするには、パッケージをインポートし、関数を呼び出すだけです。したがって、src/routes/index.svelte を次のように変更してください。前にも言及したように、新しいプラグインをインストールした場合、sync オペレーションを実行し、再度アプリをデバイスにデプロイする必要があります。次のコマンドを実行してください。 share() ボタンをクリックすると、美しいnative共有ダイアログが表示されます! src/routes/index.svelte to this:

<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

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

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

数年間、Ionicを使用してクロスプラットフォームアプリケーションを構築してきましたが、SvelteKitと統合することはハック的で、すでにTailwind CSSを使用している場合にはほとんど価値がありません。ネイティブモバイルフィーリングのSvelteKit + __CAPGO_KEEP_0__アプリでは、WebのみのUIキットであるKonsta UIではなく、__CAPGO_KEEP_1__プラグインを使用します。 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation — iOSではLiquid Glassタブバー、Androidではブラーしたタブバーのスタイルを使用するネイティブナビゲーションバー。SvelteKitルーターのルート状態を保持し、プラグインはネイティブのChromeを管理します。.

@Capacitor/Capgo-transitions

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

__CAPGO_KEEP_0__

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

Liquid Glass タブバーをレンダリングします (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 Capacitor のネイティブナビゲーションを使用する方法 Using @capgo/capacitor-transitions.

安全領域のTailwind

Tailwind CSSのデバイス安全領域のために使用する @capgo/tailwind-capacitor （公開された tailwind-capacitor on 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設定のために何かが欠けている場合、 open a PR on 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-shell「@__CAPGO_KEEP_0__/tailwind-__CAPGO_KEEP_1__」を使用します

@__CAPGO_KEEP_0__/tailwind-__CAPGO_KEEP_1__ @capgo/tailwind-capacitor、ユーティリティライブラリを使うことで同じパディングを表現できます。 pt-safe pb-safe px-safe 単一のシェル上で。

Capacitor iOS `contentInset` に `never` ページ/エリア: ライブアップデート製品ページ。役割: 短いUIラベルまたはナビゲーションアイテム。メッセージキー `live_update_dynamic_label_to` (ライブアップデートダイナミックラベルTo)。

最初 capacitor.config.ts中 contentInsetMode: 'css'、ネイティブのインセットを無効にして、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-*) __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 UIの長い文字列から取り出されたHTMLテキストのフラグメント (親キー`submitting_a_pr_to_capgo`). ページ/エリア:Capgo マーケティングウェブサイト。役割:ウェブサイトコピー文。見られる場所:contributing.astroページ。Capgo製品/ブランドと開発者用語を厳密に保持する。メッセージキー`submitting_a_pr_to_capgo` (Submitting A Pr To 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 アクション連携の実装詳細

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

About Capacitor

Capgoアプリを準備する

CapacitorをSvelteKitアプリに追加する

では、デバイスでアプリを確認してみましょう。

Capacitor Live Reload

Capacitor プラグインの使用

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

安全領域のTailwind

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

In

単一のアプリシェルを作成し、セーフエリアのパディングをそこに適用する — 複数のネストされたコンポーネントに適用するのではなく:

Capacitor iOS `contentInset` に `never` ページ/エリア: ライブアップデート製品ページ。役割: 短いUIラベルまたはナビゲーションアイテム。メッセージキー `live_update_dynamic_label_to` (ライブアップデートダイナミックラベルTo)。

実際にオーバーフローしている要素を探します。

結論

Keep going from Building Mobile Apps with SvelteKit and Capacitor

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

About Capacitor

Capgoアプリを準備する

CapacitorをSvelteKitアプリに追加する

では、デバイスでアプリを確認してみましょう。

Capacitor Live Reload

Capacitor プラグインの使用

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

安全領域のTailwind

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

In

単一のアプリシェルを作成し、セーフエリアのパディングをそこに適用する — 複数のネストされたコンポーネントに適用するのではなく:

Capacitor iOS contentInset に never ページ/エリア: ライブアップデート製品ページ。役割: 短いUIラベルまたはナビゲーションアイテム。メッセージキー `live_update_dynamic_label_to` (ライブアップデートダイナミックラベルTo)。

実際にオーバーフローしている要素を探します。

結論

Keep going from Building Mobile Apps with SvelteKit and Capacitor

Capacitor iOS `contentInset` に `never` ページ/エリア: ライブアップデート製品ページ。役割: 短いUIラベルまたはナビゲーションアイテム。メッセージキー `live_update_dynamic_label_to` (ライブアップデートダイナミックラベルTo)。