Capgo logo
Tutorial

モバイルアプリケーションの作成：SvelteKitとCapacitor

SvelteKitとCapacitorを使用してモバイルアプリを作成し、Konsta UIでネイティブUIを強化する方法を学びましょう。

モバイルアプリケーションの作成：SvelteKitとCapacitor

このチュートリアルでは、新しいSvelteKitアプリから始めて、Capacitorを使用してネイティブモバイル開発に移行します。オプションとして、Konsta UIを統合して、Tailwind CSSモバイルUIを強化することもできます。

Capacitorを使用すると、大きな変更やReact Nativeのような新しいスキルを学ぶ必要なく、SvelteKitウェブアプリケーションを簡単にネイティブモバイルアプリに変換できます。

このステップバイステップガイドに従って、SvelteKitアプリをCapacitorを使用してモバイルアプリに変換し、必要に応じてKonsta UIでモバイルUIを強化しましょう。

Capacitorについて

CapacitorJSは画期的です！任意のウェブプロジェクトに簡単に統合でき、アプリケーションをネイティブウェブビューでラップし、XcodeとAndroid Studioのプロジェクトを生成します。そのプラグインは、JavaScriptブリッジを介してカメラなどのネイティブデバイス機能へのアクセスを提供します。

Capacitorを使用すると、複雑なセットアップや急な学習曲線なしに、素晴らしいネイティブモバイルアプリを作成できます。スリムなAPIと合理化された機能により、プロジェクトへの統合が容易です。Capacitorで完全に機能するネイティブアプリを実現する簡単さに驚くことでしょう！

SvelteKitアプリの準備

新しいSvelteKitアプリを作成するには、次のコマンドを実行します：

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

buildコマンドを実行すると、プロジェクトのルートに新しいdistフォルダが表示されるはずです。

このフォルダは後でCapacitorによって使用されますが、今は正しくセットアップする必要があります。

SvelteKitアプリにCapacitorを追加する

任意のウェブアプリをネイティブモバイルコンテナにパッケージ化するには、いくつかの初期ステップを実行する必要があります。その後は、単一のsyncコマンドを実行するだけで簡単です。

まず、Capacitor CLIを開発依存関係としてインストールし、プロジェクト内でセットアップします。セットアップ中は、名前とバンドルIDのデフォルト値を受け入れるためにEnterキーを押すことができます。

次に、コアパッケージとiOSおよびAndroidプラットフォーム用の関連パッケージをインストールします。

最後に、プラットフォームを追加すると、Capacitorがプロジェクトのルートに各プラットフォーム用のフォルダを作成します：

Terminal window
# 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をインストールする必要があります。

さらに、同期中に使用される基本的なCapacitor設定を含むcapacitor.config.tsファイルがプロジェクトに表示されるはずです。注意が必要なのは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プロジェクトを静的アプリケーションに変更しましょう：

Terminal window
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_を更新したら、src/routes_に+layout.js_ページを作成し、+layout.js_に次のエクスポートを追加して、_prerender_オプションを追加する必要があります：

export const prerender = true

_+layout.js_ページを追加して更新したら、モバイルプラットフォームを追加し、_build_フォルダを作成するためにプロジェクトを再ビルドする必要があります。

以下のコマンドを実行して実行できます：

Terminal window
npm run build
npx cap sync

最初のコマンドnpm run buildはSvelteKitプロジェクトをビルドして静的ビルドをコピーし、2番目のコマンドnpx cap syncはすべてのウェブコードをネイティブプラットフォームの適切な場所に同期してアプリに表示できるようにします。

さらに、同期コマンドはネイティブプラットフォームを更新してプラグインをインストールする場合があるので、新しいCapacitorプラグインをインストールする際は、再度npx cap syncを実行する時です。

気付かないうちにプロセスが完了したので、デバイスでアプリを確認してみましょう！

ネイティブアプリのビルドとデプロイ

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

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

Terminal window
npx cap open ios
npx cap open android

ネイティブプロジェクトをセットアップしたら、接続されたデバイスへのアプリのデプロイは簡単です。Android Studioでは、すべての準備が整うのを待つだけで、設定を変更することなく接続されたデバイスにアプリをデプロイできます。例：

android-studio-run

Xcodeでは、シミュレータだけでなく実際のデバイスにアプリをデプロイするために、署名アカウントを設定する必要があります。これを初めて行う場合、Xcodeがプロセスをガイドします（ただし、Developer Programに登録する必要があります）。その後、上部で選択できる接続されたデバイスでアプリを実行するために、単にプレイを押すだけです。例：

xcode-run

おめでとうございます！SvelteKitウェブアプリをモバイルデバイスに正常にデプロイしました。例：

sveltekit-mobile-app

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

Capacitorのライブリロード

現在では、すべての最新フレームワークでホットリロードに慣れているでしょうが、良いニュースは、最小限の努力でモバイルデバイス上で同じ機能を持つことができることです！

Capacitorアプリが特定のURLからコンテンツを読み込むことで、ライブリロードを使用してネットワーク上でローカルでホストされているアプリケーションへのアクセスを有効にします。

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

Terminal window
ipconfig getifaddr en0

Windowsでは、次のコマンドを実行します：

Terminal window
ipconfig

そしてIPv4アドレスを探します。

capacitor.config.tsファイルに別のエントリを追加することで、サーバーから直接アプリを読み込むようにCapacitorに指示できます：

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とポートを使用するようにしてください。

これらの変更をネイティブプロジェクトにコピーすることで適用できます：

Terminal window
npx cap copy

copyコマンドはsyncに似ていますが、ネイティブプロジェクトを更新せずにウェブフォルダとコンフィグレーションに加えられた変更のみをコピーします。

これで、Android StudioまたはXcodeを通じてもう一度アプリをデプロイできます。その後、Svelteアプリで何か変更を加えると、アプリは自動的にリロードされ、変更が表示されます！

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

設定で正しいIPとポートを使用するようにしてください。上のコードブロックはデモンストレーション目的でデフォルトのSvelteKitポートを示しています。

Capacitorプラグインの使用

以前から何度か言及してきたCapacitorプラグインの実際の使用方法を見てみましょう。簡単なプラグインをインストールするには、次のコマンドを実行します：

Terminal window
npm i @capacitor/share

Shareプラグインに特別なものはありませんが、ネイティブの共有ダイアログを表示します！これには、パッケージをインポートしてアプリからshare()関数を呼び出すだけで済みます。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

ボタンを押すと、美しいネイティブ共有ダイアログが動作するのを確認できます！

Konsta UIの追加

Nuxt 3アプリでKonsta UIを使用するには、tailwindがすでにインストールされている必要があり、パッケージをインストールする必要があります：

Terminal window
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は、デフォルト（またはカスタム）のTailwind CSS設定を、Konsta UIに必要な追加のバリアントとヘルパーユーティリティで拡張します。

次に、いくつかのグローバルパラメータ（themeなど）を設定できるように、メインのAppコンポーネントをセットアップする必要があります。

src/routes/+layout.svelteでAppでアプリ全体をラップする必要があります：

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


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

例ページ

すべてのセットアップが完了したら、SvelteKitページで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は、既存のウェブプロジェクトに基づいてネイティブアプリケーションを構築するための優れたオプションであり、コードを共有し一貫したUIを維持する簡単な方法を提供します。

そしてCapgoの追加により、アプリにライブアップデートを追加することがさらに簡単になり、ユーザーが常に最新の機能とバグ修正にアクセスできることを確保します。

SvelteKitアプリにCapgoを追加する方法を学びたい場合は、次の記事をご覧ください：

Capgoがより良いアプリをより速く構築するのにどのように役立つかを学び、今日無料アカウントにサインアップしてください。

CapacitorJSアプリのための即時更新

CapacitorJSアプリに即座に更新、修正、機能をプッシュし、アプリストアの遅延を回避します。Capgoでシームレスな統合、エンドツーエンドの暗号化、リアルタイムの更新を体験してください。

今すぐ始めよう

最新のニュース

Capgoは、真にプロフェッショナルなモバイルアプリを作成するために必要な最高のインサイトを提供します。

ブログのすべてを見る