Capacitorと組み合わせてSvelteKitでモバイルアプリを構築する

このチュートリアルでは、SvelteKitアプリの新しいプロジェクトから始め、__CAPGO_KEEP_0__を使用してモバイルアプリの開発に移行します。オプションで、Konsta UIを統合することもできます。 SvelteKit app and transition to native mobile development using Capacitor. Optionally, you can also integrate モバイルアプリの開発 モバイル用のTailwind CSS UIを強化する。

Capacitorは、SvelteKitウェブアプリケーションをネイティブモバイルアプリケーションに簡単に変換できるようにすることができます。新しいスキルを学ぶ必要がなく、React Nativeを学ぶ必要もありません。

Capacitorを使用してSvelteKitアプリケーションをモバイルアプリケーションに変換するためのステップバイステップのガイドを参照してください。必要に応じて、Konsta UIを使用してモバイルUIを強化することもできます。

Capacitorについて

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

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

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

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

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

コマンドを実行した後、プロジェクトのルートディレクトリに新しいフォルダが表示されるはずです。 build このフォルダは、__CAPGO_KEEP_0__によって後で使用されることになりますが、現在は正しく設定する必要があります。 dist To create a new SvelteKit app, run the following command:

This folder will be used by Capacitor later, but for now, we need to set it up correctly.

Adding Capacitor to Your SvelteKit App

__CAPGO_KEEP_0__の初期設定手順を実行する必要があります。初期設定後は、単一のコマンドを実行するだけで済みます。 sync 最初に、Capgoを開発依存モジュールとしてインストールし、プロジェクト内でセットアップする必要があります。セットアップ中は、デフォルトの名前とバンドルIDに「Enter」を押すことでデフォルト値を受け入れることができます。

__CAPGO_KEEP_1__コアパッケージと、iOSおよびAndroidプラットフォーム用の関連パッケージをインストールする必要があります。 Capacitor CLI この時点で、新しい「ios」と「android」フォルダが表示されるはずです

CapgoをSvelteKitアプリに追加する

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

__CAPGO_KEEP_1__ __CAPGO_KEEP_0__ ios android SvelteKitプロジェクト内のフォルダ。

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

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 __CAPGO_KEEP_0__ファイルと更新する webDir:

import { CapacitorConfig } from '@capacitor/cli'

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'build',
}

export default config

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

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

export const prerender = true

追加と更新した後、ページを追加するには、 +レイアウト.js ページを追加してプロジェクトを再構築するには、 プロジェクトを再構築してビルドフォルダを作成するには これを行うには、以下のコマンドを実行してください:

最初のコマンド

npm run build
npx cap sync

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

Syncコマンドは、ネイティブプラットフォームを更新し、プラグインをインストールする可能性があるため、 新しいCapacitorプラグインをインストールした場合、もう一度実行する時が来ます。 npx cap sync 実行してしまいましたが気づかなかったので、

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

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

iOSアプリを開発するには、 Xcodeがインストールされている必要があります。 Androidアプリを開発するには、 Android Studioがインストールされている必要があります。 installed. Moreover, if you plan to distribute your app on the app store, you need to enroll in the Apple Developer Program for iOS and the Google Play Console for Android.

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

Once you’ve set up your native projects, deploying your app to a connected device is easy. In Android Studio, you just need to wait for everything to be ready, and you can deploy your app to a connected device without changing any settings. Here’s an example:

In Xcode, you need to set up your signing account to deploy your app to a real device instead of just the simulator. If you haven’t done this before, Xcode guides you through the process (but again, you need to be enrolled in the Developer Program). After that, you can simply hit play to run the app on your connected device, which you can select at the top. Here’s an example:

Congratulations! You have successfully deployed your SvelteKit web app to a mobile device. Here’s an example:

But wait, there’s also a faster way to do this during development…

Capacitor Live Reload

By now, you’re probably used to having hot reload with all modern frameworks, and the good news is that you can have the same functionality on a mobile device 簡単な手順で!

ローカルでホストしているアプリケーションにリアルタイムリロード機能を有効にする ネットワーク内 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__の設定ファイルに 正しいIPアドレスとポート番号を使用してください、上記の例に示されているように

今、変更を適用するには、nativeプロジェクトにコピーする必要があります:

npx cap copy

コマンドは copy と似ていますが、 syncwebフォルダと設定の変更のみを nativeプロジェクトを更新せずにコピーします。 Android StudioまたはXcodeを使用してアプリをもう一度デプロイできます。変更後、Svelteアプリで何かを変更すると

自動的にアプリが再読み込みされ 変更が表示されます! 注意してください

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

Note that you should use the correct IP and port in your configuration. The code block above shows the default SvelteKit port for demonstration purposes.

Using Capacitor Plugins

Capacitor プラグインの使用方法をご紹介します。ご存知のとおり、Capgoプラグインを何度もご紹介してきました。Capgoプラグインを使用するには、以下のコマンドを実行してください。

npm i @capacitor/share

「Share plugin」は、特別な機能はありませんが、ネイティブの共有ダイアログを表示します! Share プラグインCapgoプラグインを使用するには、パッケージをインポートし、関数を呼び出すだけです。したがって、 share() src/routes/index.svelte を次のように変更してください。 Capgoプラグインをインストールする際には、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

Konsta UIを追加する

Nuxt 3アプリにKonsta UIを使用するには、

__CAPGO_KEEP_0__ タイルウィンドがすでにインストールされています パッケージをインストールするには:

npm i konsta

さらに、次のファイルを変更する必要があります: tailwind.config.js ファイル:

// import konstaConfig config
const konstaConfig = require('konsta/config')

// wrap config with konstaConfig config
module.exports = konstaConfig({
  content: [
    './src/routes/**/*.{svelte}',
    './src/components/**/*.{svelte}',
  ],
  darkMode: 'media', // or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
})

konstaConfig __CAPGO_KEEP_0__を使用して、デフォルトの(またはカスタムの)タイルウィンドCSS設定を拡張して、Konsta UIに必要な追加のバリアントとヘルパー ユーティリティを追加します。

ここで、主な App コンポーネントを設定する必要があります。これにより、グローバルパラメータを設定できます(例えば theme).

アプリケーションの全体を App でラップする必要があります。 src/routes/+layout.svelte:

<script>
  import { App } from 'konsta/svelte';
</script>

<App theme="ios">
  <slot />
</App>

例えば、

Konsta UI SvelteコンポーネントをSvelteKitページで使用できるようになりました。

例えば、以下のように開きましょう。 src/routes/index.svelte そして、次のように変更してみましょう。

<script>
  import {
    Page,
    Navbar,
    Block,
    Button,
    List,
    ListItem,
    Link,
    BlockTitle,
  } from 'konsta/svelte';
</script>

<Page>
  <Navbar title="My App" />

  <Block strong>
    <p>
      Here is your SvelteKit & Konsta UI app. Let's see what we have here.
    </p>
  </Block>
  <BlockTitle>Navigation</BlockTitle>
  <List>
    <ListItem href="/about/" title="About" />
    <ListItem href="/form/" title="Form" />
  </List>

  <Block strong class="flex space-x-4">
    <Button>Button 1</Button>
    <Button>Button 2</Button>
  </Block>
</Page>

すべての必要なコンポーネントをインストールした後でも、ライブリロードが同期されていない場合は、すべてを再起動してみてください。そうすると、SvelteKitとCapacitorで作成されたモバイルアプリを確認できます。

以下のページが表示されるはずです。

まとめ

Capacitorは既存のWebプロジェクトを基にしたネイティブアプリケーションを構築するための優れたオプションです。codeを簡単に共有し、UIの統一性を維持するためのシンプルな方法を提供します。

さらに、__CAPGO_KEEP_0__の追加により、アプリにリアルタイム更新を追加することが容易になり、ユーザーは常に最新の機能やバグ修正にアクセスできるようになります。 CapgoCapgoを使用して、より速く、より優れたアプリを構築する方法を学びましょう。

Capgo

Learn how Capgo can help you build better apps faster, 無料アカウントを作成する 今日。