, ,

Sveltekit + Capacitor + ionicでiOS、Androidアプリの開発手順

SveltekitをベースとしたCapacitorの環境を整える手順の解説。

最初にプロジェクトの作成を行う。

npm create svelte@latest my-app

いくつかの選択では、環境に合わせて設定を行う。例えばTypeScript を使用している場合は、「Skeleton Project」を選択し、 「Yes, using TypeScript syntax」を選択する。

ここでは、次の通りとした。

ステップ１「Skeleton project」

ステップ２「Yes, using TypeScript syntax」

ステップ３「Add ESLint for code linting」

作成後、ディレクトリに移動しインストールを行う。

cd my-app
npm install
git init && git add -A && git commit -m "Initial commit"

次に、選択した IDE でプロジェクトを開き、組み込みターミナルからプロジェクトを実行する。ここではvscodeでの場合を想定した。

code .
npm run dev -- --open

次に仮ページとして緯度経度を取得するページを作成する。

npm install @capacitor/core @capacitor/cli @capacitor/geolocation
npx cap init

作成後、buildする。

npm run build

ビルドが完了したら、src/routes/+page.svelteファイルを更新して、ネイティブ Capacitor 呼び出しを Sveltekit プロジェクトに追加してテストを行う。

<script>
    import { Geolocation } from '@capacitor/geolocation';

    let loc = null;
    async function getCurrentPosition(){
        const res = await Geolocation.getCurrentPosition()
        loc = res
    }
</script>

<div>
    <h1>Geolocation</h1>
    <p>Your location is:</p>
    <p>Latitude: {loc?.coords.latitude}</p>
    <p>Longitude: {loc?.coords.longitude}</p>

    <button on:click={getCurrentPosition}>
        Get Current Location
    </button>
</div>

<style>
    div {
        padding-top: 50px;
    }
</style>

ここまでがWEBアプリの作成手順となる。次に、WEBアプリをios、androidアプリに転用する。

Sveltekit をモバイルで利用するには、プロジェクトに変更を加える必要がある。
まず最初に、「capacitor.config.ts」ファイルのwebDirを「build」に変更する。
理由として、Sveltekit プロジェクトを変更する際、アプリケーションをbuildというフォルダーにビルドするため。

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'jp.example.my-app',
  appName: 'my-app',
  webDir: 'build',
  bundledWebRuntime: false,
  server: {
    androidScheme: 'https'
  }
};

export default config;

Capacitor設定を変更後、「@sveltejs/adapter-static」をダウンロードして、Sveltekit プロジェクトを静的アプリケーションに変更する。

npm i -D @sveltejs/adapter-static

パッケージのインストール後、「svelte.config.js」を変更する。

import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/kit/vite';

const config = {
	preprocess: vitePreprocess(),

	kit: {
		adapter: adapter({
			pages: 'build',
			assets: 'build',
			fallback: null,
			precompress: false,
			strict: true
		})
	}
};

export default config;

「svelte.config.js」を変更後、 「+layout.js」ページを「src/routes」に作成してプリレンダリングオプションを追加し、exportを「+layout.js」に追加する。

export const prerender = true;

「+layout.js」ページを追加して更新した後、モバイルプラットフォームを追加、プロジェクトを再ビルドして「build」フォルダを作成する。
また、Web アプリをCapacitorに同期後モバイルの依存関係を更新する必要がある。

mkdir build
npm install @capacitor/ios @capacitor/android
npm run build
npx cap add ios
npx cap add android
npm run build
npx cap sync

次に、iOS、Androidまたはその両方を実行するかどうかによって異なるが、デバイス上で緯度経度情報を実行できるようにアクセス許可を構成する必要がある。
ネイティブ デバイスの許可の詳細については、@capacitor/geolocationドキュメントを参照。
iOS の場合は、XCode でプロジェクトを開いたら「info.plist」ファイルを更新する。
Android の場合は、 IDE の「android/app/src/main/AndroidManifest.xml」にある AndroidManifest.xml ファイルを更新する。

npx cap open ios
npx cap open android

最後にモバイルアプリらしいデザインに変更するため、ionicを導入する。

「@ionic/core」と「ionic-svelte」をインストールする。

npm i @ionic/core ionic-svelte

ionicを利用する上で邪魔になる不要なパッケージを削除する。

npm remove @sveltejs/adapter-auto

「src/routes/+layout.svelte」を作成し、「ionic-svelte」を呼び出す。

<script lang="ts">
  import { setupIonicBase } from "ionic-svelte";
  import "ionic-svelte/components/all";
  setupIonicBase();
</script>

<ion-app>
  <slot />
</ion-app>

「src/routes/+layout.ts」にて「export const ssr = false;」を追加する。

export const prerender = true;
export const ssr = false;

次に「+page.svelte」内の「button」をionic用に変更する。

<script>
  import { Geolocation } from "@capacitor/geolocation";

  let loc = null;
  async function getCurrentPosition() {
    const res = await Geolocation.getCurrentPosition();
    loc = res;
  }
</script>

<div>
  <h1>Geolocation</h1>
  <p>Your location is:</p>
  <p>Latitude: {loc?.coords.latitude}</p>
  <p>Longitude: {loc?.coords.longitude}</p>

  <ion-button on:click={getCurrentPosition}> Get Current Location </ion-button>
</div>

<style>
  div {
    padding-top: 50px;
  }
</style>

更新後、buildを行い、iosでチェックする。

npm run build
npx cap run ios