SvelteKitとCapacitorでモバイルアプリを構築する

このチュートリアルでは、SvelteKitの新しいアプリから始めます。次に、__CAPGO_KEEP_0__を使用してネイティブモバイル開発に移行します。オプションで、Konsta UIを統合して、Tailwind CSSモバイルUIを強化できます。 Capacitorは、React Nativeのような新しいスキルを学ぶことなく、SvelteKitのWebアプリをネイティブモバイルアプリに簡単に変換できるようにします。マーティン・ドナディューマーティン・ドナディュー

Capacitor allows you to easily convert your SvelteKit web application into a native mobile app without the need for significant modifications or learning a new skill like React Native.

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

Capacitorについて

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

Capacitorは、複雑なセットアップや急な学習曲線なしで素晴らしいネイティブモバイルアプリを作成できるようにします。APIと機能がstreamlinedされるため、プロジェクトに統合するのは簡単です。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_0__は、SvelteKitアプリをモバイルアプリに変換するための簡単な方法を提供します。 sync command.

First, install the 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

この時点で、SvelteKitプロジェクト内に新しい ios と android フォルダが見つかります。

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

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

をインストールする必要があります。さらに、プロジェクト内で基本的な__CAPGO_KEEP_0__設定を使用するために使用される 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

Capacitorを更新した後、静的アプリケーションにSveltekitプロジェクトを変更するには、適切な静的アダプターペッケージをダウンロードする必要があります:

npm i -D @sveltejs/adapter-static

パッケージがインストールされた後、自動アダプターから静的アプリケーションに変更する必要があります。 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 を更新した後、プリレンダリングオプションを追加する必要があります。 プリレンダリングオプションを追加するには、+layout.js ページを作成する必要があります。 __CAPGO_KEEP_0__ __CAPGO_KEEP_0__ __CAPGO_KEEP_0__ src/ルート そして、次のエクスポートを追加してください Capgoを追加して更新した後、+layout.js:

export const prerender = true

ページを追加して更新した後、+layout.js ページを追加して更新した後、モバイルプラットフォームを追加し、プロジェクトを再構築してアプリ内で表示できるようにするために、buildフォルダを作成する必要があります。 buildフォルダを作成するには、以下のコマンドを実行してください。 最初のコマンド は、SvelteKitプロジェクトをビルドし、静的ビルドをコピーすることになります。

2番目のコマンド

npm run build
npx cap sync

は、Web __CAPGO_KEEP_0__ をネイティブプラットフォームの正しい場所に同步することになります。 npm run build Web __CAPGO_KEEP_0__ をネイティブプラットフォームの正しい場所に同步することになります。 npx cap sync Web code をネイティブプラットフォームの正しい場所に同步することになります。

さらに、同期コマンドはネイティブプラットフォームを更新し、プラグインをインストールする可能性があるため、__CAPGO_KEEP_0__ プラグインをインストールしたときに、再度実行する必要がある。 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__ を使用して、両方のネイティブプロジェクトを簡単に開くことができる

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

ここまで来たら、すべてのモダンフレームワークでホットリロードを利用しているので、同じ機能をモバイルデバイスでも利用できることを知るのは嬉しいニュースです。 モバイルデバイス上で 最小限の努力で

ローカルにホストされているアプリケーションへのアクセスを有効にします。ライブリロード ネットワーク上 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;

正しいIPアドレスとポート番号を使用してください 上記の例に示されているように。これらの変更を適用するには、nativeプロジェクトにコピーする必要があります:

The

npx cap copy

The copy コマンドは、 syncが使用されますが、 ウェブフォルダと設定のみをコピーするようにします。 ネイティブプロジェクトを更新せずに。

Android StudioまたはXcodeを使用してアプリをもう一度デプロイできます。その後、 あなたのスベールアプリに何か変更を加えた場合、 自動的にリロードされ、変更が表示されます。

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

正しいIPアドレスとポート番号を使用するようにしてください。上記の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 pluginがnativeのシェアダイアログを呼び出します。 share() packageをインポートし、 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>

を次のように変更してください。

npx cap sync

新しいプラグインをインストールする際には、sync操作を実行し、再度アプリをデバイスにデプロイする必要があります。

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

ボタンをクリックすると、美しいnativeシェアダイアログが実行されます。 Konsta UIを追加する Konsta UIをNuxt 3アプリに使用するには、

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 Konsta UI のために必要な追加のバリアントとヘルパーユーティリティを含むデフォルト (またはカスタムの) Tailwind CSS 設定を変更する必要があります。

主なアプリコンポーネントを設定する必要があります。例えば、グローバルパラメータ (例えば、 theme).

をラップする必要があります。 App の src/routes/+layout.svelte:

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

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

例

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

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

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

If you would like to learn how to add Capgo to your SvelteKit app, take a look at the next article:

Capgo __CAPGO_KEEP_1__ __CAPGO_KEEP_0__

Building Mobile Apps with SvelteKitとCapacitor

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

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