フロントエンジニアのふっけです。

今回は「勝手に裏ハックツハッカソン 」ということで、現場でメンターをしながらアプリ開発に挑戦してみました。

技術選定について

CapacitorJSというライブラリを採用しました。 このライブラリは任意のWebプロダクトをアプリ化できるものです。 今回はReactでコーディングし、ライブラリを使って Web / iOS / Android アプリの同時作成をしました。

環境構築

最初に、iOSとAndroidのアプリの雛形を作成しました。

Reactプロジェクトを作成しCapacitorを導入、エミュレーターで確認するまでの流れを紹介します。

# viteのドキュメントに沿ってReact-tsプロジェクトを作成
pnpm create vite . --template react-ts
# capacitorを導入する
pnpm add @capacitor/core @capacitor/cli
# capacitorの初期化
npx cap init
pnpm add  @capacitor/ios
npx cap add ios
# reactアプリのビルド
pnpm run build
# sync pod installなどがおこなわれる
npx cap sync
# simulatorで動作確認
npx cap run ios

Androidも同じような手順で可能です。 動かした様子はこちらです。

iOS	Android

開発の方法について

Capacitorを使ったアプリ開発では3種類の開発方法があります。

1. ブラウザで確認しながら開発 中身はReact+viteのため、通常のWeb開発と同じように localhost:5173をブラウザで開くと動作します。アプリ開発ですが、Web開発と同じ開発者体験が可能です。

2. Capacitorのlive reloadをつかってシミュレーターで開発

capacitor.config.jsのserver.urlにlocalhostを指定するとシミュレーター上でホットリロードをしながら開発できます。ネイティブの機能をデバッグしたい場合はこの方法がおすすめです。

+if (process.env.NODE_ENV === "development") {
+  config.server!.url = "http://localhost:5173";
+  config.server!.hostname = "localhost";
+}

export default config;

3. buildして実機で確認しながら開発

実際に実機で動作確認する場合はこの方法で行います。

pnpm run build & pnpm run ios 

デモ

日記一覧 / 作成 / プレビュー / 編集画面を作成しました。 デモでごらんください。

使用したライブラリ

    "@capacitor/android": "^5.7.3",
    "@capacitor/cli": "^5.7.3",
    "@capacitor/core": "^5.7.3",
    "@capacitor/dialog": "^5.0.7",
    "@capacitor/ios": "^5.7.3",
    "@capacitor/preferences": "^5.0.7",
    "@hookform/resolvers": "^3.3.4",
    "@ionic/react": "^7.8.0",
    "@ionic/react-router": "^7.8.0",
    "dayjs": "^1.11.10",
    "ionicons": "^7.2.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.51.1",
    "react-router-dom": "5",
    "swr": "^2.2.5",
    "zod": "^3.22.4"