コーヒーの味を維持したまま量を変える変換器「Co-fitting」を作成しました

## 作成のきっかけ

私はコーヒーが大好きで、ほぼ毎日のようにハンドドリップをし、コーヒーを飲んでいます。
その中で、「美味しいレシピはあるんだけど、200mlじゃなくて300ml作りたいんだよな...」ということがしばしばあり、手軽に出来上がり量を調整できるツールがあれば便利だと思ったので、これを行う変換器を作成しました。

最終的なツールはWebアプリとして公開し、[Github上](https://github.com/Hiru-ge/Co-fitting)にもソースコードを公開しています。

https://co-fitting.com

ちなみに、Co-fittingにはその前段階となる、より簡素なバージョンがあります。
私が以前公開した以下の記事が、まさにその「前段階」のものであり、Co-fittingはこれのアップグレード版となります。

https://qiita.com/Hiru-ge/items/8efb07f2cf52788f7eda


## 使用方法

基本原理や使用技術について述べる前に、使用方法について説明をしておきます。
[使い方ページ](https://co-fitting.com/how-to-use)にも同様の以下の説明と同様の内容が書いてあります。

### デモ映像

https://youtube.com/shorts/pewlOHhF0Jc?si=Zj6mI3uNMcUoqP0V

### 1. プリセットレシピ呼び出しボタン

利用したいものがあれば、登録されているプリセットレシピを呼び出します。
プリセットレシピは、後述する「変換前レシピ入力欄」に自動的に入力されます。
3つの「デフォルトプリセットレシピ」はユーザー登録無しで使えますが、ユーザー登録して自分だけのプリセットレシピを登録すると、それらも呼び出すことができます！

![presetRecipe.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3482722/6e2491ef-ee65-4866-32fa-6251e27ec15d.png)

### 2. 変換前レシピ入力欄

変換する前のレシピの情報を入力します。
投数、豆の量、そして各投入段階の経過時間と注湯量を記入します。
※ 投数を入力すると、その分だけレシピ入力欄が生成されます。

![originRecipeForm.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3482722/e67a8350-25f3-7c08-8254-067a454e05ab.png)

アイスコーヒーを入れたい場合は、アイスモードをONにし、氷量を入力します。

![originRecipeForm[ice-mode].png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3482722/1259b012-8521-a8f4-93ba-86880bde9ea2.png)

### 3. 変換目標入力欄

変換後のレシピの情報を入力します。
目標とする豆の量、総湯量、そして豆と湯の比率を指定します。

![targetParameterForm[bean,water].png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3482722/38f9c9e2-f4cf-1905-1c16-dfb2a5a21ee5.png)

**倍率変換**
変換目標の入力が手間かと思い、倍率を入力するだけで変換できる機能を実装しました。適宜活用してください。

![targetParameterForm[convertRate].png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3482722/c99d7e6c-553f-3418-0634-9f6f572d0a9d.png)

**入力補助**
豆量と総湯量の両方が入力されると自動的に比率が計算・入力されます。
また、豆量あるいは総湯量のいずれかが入力された状態で比率が入力されると、もう一方が更新されます。

クリアボタンを押すと、変換目標入力欄の値が全てクリアされます。
※ 入力補助機能がある都合上、豆量・総湯量・比率が全て入力されていると目標値の変更が難しくなる問題を確認したためクリア機能を実装しました。
      
### 4. 変換後レシピの出力

変換されたレシピが表形式で表示されます。

![convertedRecipe.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3482722/5baf07c3-deb2-81d1-fa67-857372060cbc.png)

### 5. ストップウォッチ機能

抽出時の経過時間を計測する機能です。
スタートボタンを押すと計測が始まり、ストップボタンを押すと計測が終了します。

![stopWatch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3482722/c51da78b-5397-a0b2-d424-d5b5ab17cf1c.png)

## 主な機能と使用技術

このCo-fittingの主な機能は3つです
- 量の変換機能
- マイプリセットの登録機能
- 課金によるプリセット枠増枠

### 量の変換機能
これは「コーヒーの味を維持しながら出来上がり量を変化させる」という処理を行う、本ツールのメイン部分です。ちなみに、この変換器が行っている変換処理の根幹は、「変換前と変換後の最終量から倍率を求め、各注湯プロセスに倍率をかける」という単純な比率変換です。
そのため変換には複雑な処理を必要とせず、HTML･CSSとJavaScript(jQuery)のみで実現されています。


#### Tips:単純な比率変換が味のキープに結び付く理由

ここでは、「この比率変換がなぜ味のキープにつながるのか」という点について述べます(コーヒー自体の理論に興味がない方は本節を読み飛ばしても大丈夫です)。

<details>
<summary>単純な比率変換が味のキープに結びつく理由</summary>
  
### 前提となる基本原理：成分が溶け出す順番

まず、コーヒーの粉から溶け出す成分には、「溶け出す順番」というものがあります。

抽出の際には湯を注ぐので、親水性のものから疎水性のものという順番で溶け出してくるというわけです。

しかし溶け出す成分の種類はとても多く、それら一つ一つを特定してコントロールするということはほぼ不可能に近いです。

ですが、この溶け出す順番には経験則的にいわれているある程度の大まかな流れがあります。それは、 **「香り→酸味→甘み→苦味→雑味」** の順に溶け出すという流れです。下図のように、溶け出しやすさのピークがこの順番に来るというイメージですね。

そこで、図をもとに「抽出をどの程度進めるか」によって、大まかなコーヒーの味を調整することができるのです。

これは本変換器を利用しない場合にも有効な基本原理なので、ぜひ自分でコーヒーを淹れる際にも意識し、湯温や粉の粒度などを調整してみてください。

![extraction-graph.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3482722/321c349e-d91e-01f0-774a-673b8d0f0bb7.png)

※ 上図は[Kenken Coffeeさんの動画](https://youtu.be/lg7bafltXsk?si=rhBRmGLMRcgXcitu&t=848)に登場したものを参考に作成

### 本ツールにおける基本原理の応用

本変換器が行っていることは、単純な比率変換です。
本節では、その単純な比率変換が味のキープに結びつく理由について説明します。

さて、本ツールを理解する上で重要なのは、 **「どの味をどれだけ抽出するか」** という点です。

先ほど述べた通り、コーヒーの味は「香り→酸味→甘み→苦味→雑味」という順番で溶け出してくるとされています。

この順番を踏まえると、例えば「甘み」が出やすい時点で大量に湯を注げば、甘味成分の多いコーヒーが全体量中の多くを占め、その後段階で出てくるはずの苦味は少なく、酸味や甘みの多いコーヒーになります。
一方、「苦味」の時点で大量に湯を注げば、甘みの割合が比較的少なくなって甘みを感じにくくなります。

つまり本ツールでは、元レシピにおける各タイミングでの注湯配分を維持することで、「どの味が出やすい(割合が大きい)タイミングで」「全体量のどれだけを占める分注ぐのか」を維持し、コーヒー成分のバランス(=味)を保っているというわけです。

余談ですが、これは前節でも述べたように、本来「抽出をどの程度進めるかによって、大まかな味を決定できる」という話であり、このツールではその理論を本来とは異なる形で利用しています。
その点に注意して、この説明を理解していただければと思います。

</details>

### マイプリセットの登録機能
「マイプリセットの登録機能」は、変換元レシピを各々が登録しておき、簡単に呼び出せるようにするための機能です。ユーザー登録をしていただき、マイプリセット登録することで、変換元レシピ入力時と同様のUIからマイプリセットを呼び出せます。
これは<b>変換を行う際</b>にも、<b>普段のコーヒーレシピのメモ</b>にも便利かと思います。
この部分はバックエンド処理も必要だったので、Djangoを使っています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3482722/894ec3bb-993b-4e36-b1de-184d4cf8dd6d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3482722/348a51b5-64e2-4c7c-9ddb-2f02149a4cb5.png)


### 課金によるプリセット枠増枠
最後に、3つ目の「課金によるプリセット枠増枠」について説明します。まず本サービスの仕様として、ユーザーが新規登録をすると、<b>マイプリセット枠</b>というものが1つ配布されます。ユーザーはこのマイプリセット枠の上限を超えてプリセット登録を行うことはできません。
そして「もっとプリセットを登録したい」という場合には、月額100円でプリセット枠を3枠増枠(つまり合計4枠に)することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3482722/83aeb494-785b-4238-8798-0abef6a33b06.png)


この課金機能の実装には、Stripeを活用しました。Stripeは初めて使用しましたが、「欲しい」と思った機能が全部用意されていて驚きました。
Stripe、すごい。

以上が本ツールの主な3機能であり、これらをHTML･CSS、JavaScript(jQuery)、Python(Django)、Stripeを使って実装しました。
そしてこのWebアプリが、AWS EC2上に構築したLAMP環境の上で動いています。LAMP環境の構築には以下のAMIを活用しました。

https://aws.amazon.com/marketplace/pp/prodview-erpe42ufsbor4

## 既知の問題

### 湯の抜け
  
この変換器では、豆量変化による流速(湯の抜け)の変化が加味されていません。単純な比率変換であることを理解した上で、変換結果を参考にしてください。<br>
湯の抜けが考慮されていないため、投数が少ない(3投以下)とかなり無理のあるレシピになってしまうことがあります。投数の多いレシピで試してみてください。

なお、この問題に対する改善を検討中ですが、現在具体的な改善の目処は立っていません。
  
## 不具合等

バグ修正等は[Googleフォーム](https://docs.google.com/forms/d/e/1FAIpQLSfV0YJ6VBoIUsFkAkiktcJMfc2jZRZ9aRZmbi-_JdEmUK2uIA/viewform)か、GitHubの[issue](https://github.com/Hiru-ge/Co-fitting/issues)まで連絡をお願いします！

## 最後に

Co-fittingは、私が初めて一般公開した動的Webアプリです。
これを作るにあたって様々なことを経験しました。
「ユーザー情報管理や課金機能実装に伴う責任」「毎月のサーバー代」「サービスを継続的に提供していくために、どうやってサーバー代を回収すればよいのか」etc... 
新たなことに挑戦することは多少のリスクを伴い、そしてそれ以上に楽しいということを実感しました。
今後も、ユーザーに価値を提供できるサービスの開発を目指して頑張っていきたいと思います。
ぜひとも、Co-fittingを使用、オススメしていただければ幸いです！
ここまで読んでいただきありがとうございました！