Coffee Drip Recipe App

Capacitor 5 とバニラ JavaScript で作成した、コーヒードリップ用レシピ計算アプリです。 iOS と Android OS に Deploy できるスマホアプリです。

概要

このアプリは、カップ数やドリップタイプに応じて、以下を計算して表示します。

• 豆の量
• 抽出用のお湯の量
• 抽出時間
• お湯を注ぐステップ
• ホット時のカップ温め用のお湯
• アイス時の氷量

レシピ生成前に、豆:お湯の比率を 1:x 形式で指定できます。 初期値は 1:17.2 です。

技術スタック

• Capacitor 5
• Vanilla JavaScript (ES6+)
• HTML5
• CSS3
• npm

ディレクトリ構成

example004/
├── android/
├── docs/
├── www/
│   ├── index.html
│   ├── css/style.css
│   └── js/app.js
├── capacitor.config.json
├── package.json
└── README.md

前提条件

• Node.js 18 以上を推奨
• npm
• Android ビルドを行う場合:
  • Android Studio
  • Android SDK
  • Java 17 系
• iOS ビルドを行う場合:
  • macOS
  • Xcode
  • CocoaPods

セットアップ

1. 依存パッケージをインストール

   npm install

2. ローカルサーバーを起動

   npm run start

3. ブラウザで確認

   http://localhost:8080

主な npm スクリプト

• start: http-server で 8080 ポート起動
• build: ダミーのビルド完了メッセージを出力

Android 連携

Web 側の変更を Android プロジェクトへ反映する手順です。

1. Android プロジェクトへ同期

   npx cap sync android

2. Android Studio で開く

   npx cap open android

3. Android Studio からビルド・実行

必要に応じて adb で APK をインストールして確認してください。

iOS 連携

Web 側の変更を iOS プロジェクトへ反映する手順です。

1. （初回のみ）iOS プラットフォームを追加

   npx cap add ios

2. iOS プロジェクトへ同期

   npx cap sync ios

3. Xcode で開く

   npx cap open ios

4. Xcode からビルド・実行

iPhone シミュレータ、または実機を選択して実行してください。

設定ファイル

• Capacitor 設定: capacitor.config.json
  • appId: com.example.coffeedriprecipe
  • appName: Coffee Drip Recipe
  • webDir: www

ライセンス

本アプリは「独自ライセンス」に基づき公開しています。

ライセンス内容

• 利用・複製・改変：自由に行えます。
• 配布・再配布：禁止します。
• 商用利用：禁止します。
• 著作権表示：本アプリの著作権表示を削除しないでください。
• 無保証：本アプリの利用によるいかなる損害も、作者は一切責任を負いません。

詳細説明

本アプリのソースコードおよび成果物は、個人または組織内での利用・複製・改変は許可しますが、 第三者への配布や再配布、または商用目的での利用・販売・公開は禁止します。 また、著作権表示および本ライセンス文は削除せず、必ず残してください。

ご不明点があれば、リポジトリ管理者までご連絡ください。

ローカル画像（images/ フォルダ）