【個人開発】「タバコ」辞めたくないけど減らしたい人へ向けた育成型喫煙管理アプリ【NICOTTI】（ニコッチ）を作成しました。


![nicotti_wantedly.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2496320/5e7b15f1-eed4-0712-092d-cd3b9deabbc4.jpeg)

## サービス紹介

「禁煙」ではなく「減煙」を目的とした、喫煙管理アプリです。
NICOTTI(ニコッチ)を育成しながら喫煙を楽しく管理できます。


https://www.nicotti.jp/

https://github.com/asakanobuaki/nicotti/

## アプリを作ったきっかけ
私には喘息持ちでヘビースモーカーな兄がいます。
喫煙を控えるように伝えても「禁煙したら逆にストレスで死ぬ」といつも言われるので、調べてみると多くの人が同じような経験あるとのこと。

喫煙をする人に多いのが「なんとなくの喫煙」で余分にタバコを吸ってしまうことです。(自分がそう)「禁煙」と聞けば大変そうですが、「余分な喫煙」をなくすくらいならできそうな気がします。
せめて、私の兄に喫煙本数を減らさせることはできないかと思い **「禁煙」ではなく「減煙」** を目的としたアプリを作成することにしました。

2022/6/22
このアプリで減煙をしていたら、いつの間にかタバコを吸わなくなりました(^_^)

## サービス概要

大きくわけて以下の３つの機能があります。
1. **喫煙登録機能** (キャラクターを育てる感覚で喫煙を管理できる)
2. **カレンダー機能** （分単位で過去の喫煙を振り返ることができる）
3. **バディ機能** （家族や友達のLINEに毎日の喫煙本数を自動で通知できる）


### 1. 喫煙登録機能

**機能の流れ** 
1. ユーザー登録と同時に【1日の目標喫煙本数】を決める。
2. 喫煙の際に【一服する】ボタンを押して喫煙を登録する。
3. 【1日の目標喫煙本数】と【喫煙本数】に応じてニコッチのステータスが変化する。

**説明** 
【1日の目標喫煙本数】を基準に喫煙を管理します。
この目標本数を超えて喫煙をすると、ニコッチの **ステータス** が変化し徐々に死に近づいていきます。この可愛い可愛いニコッチを死なせまいという気持ちが喫煙の抑止力になります。（そのはず）


ステータス変化は以下の通りです。

| ステータス：【健康】 | ステータス：【ハゲ】 | ステータス：【がん】 |
| ---- | ---- | ---- |
| <img width="100%" alt="healthy!.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2496320/4e8366d3-6cc9-575d-29e0-09f48a5b3b8b.png"> | <img width="100%" alt="baldness!.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2496320/e5c95b44-997b-9197-cdaa-31bbf4d1130f.png"> | <img width="" alt="cancer!.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2496320/89179edb-efa0-7e1b-87f2-b02ae62fc677.png"> |
| デフォルトの **健康** 状態です。【1日の目標喫煙本数】を超過した累計本数が5本に達するまでのステータスになります。 | 【1日の目標喫煙本数】を超過した累計本数が6本以上になるとステータスが **ハゲ** になります。 |【1日の目標喫煙本数】を超過した累計本数が8本以上になるとステータスが **がん** になります。 |

<br>
<br>

目標を超過した喫煙本数が累計10本に達するとニコッチは死を迎え、蘇ります。
人生回数が1回加算され、ステータスはリセットされます。

<img width="40%" alt="to_reborn.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2496320/affeb9f9-8eee-a965-f3fd-6243b80bf2d6.gif">


### 2. カレンダー機能(Fullcaledar)
日々の喫煙を分単位で振り返ることができます。
いつ何時何分に喫煙をしているのか把握することで、喫煙時間の傾向を知ることができます。
それにより、つい喫煙をしてしまう時間に対策を講じることができます。

<p>

<img width="25%" alt="week-caledar.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2496320/6fecd046-9521-493b-4e4e-d4819069b5a0.png">

<img width="60%" alt="desktop-week-calendar.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2496320/5489c435-92fc-2385-b5f6-f005ea444e2d.png">

</p>


### 3. バディ機能(LINE Messaging API)
この機能はNICOTTI公式LINEを使用します。
毎日の喫煙の集計を登録しているバディのLINEに自動で通知することができます。

バディにしたい人に、NICOTTI公式LINEの友達追加と【バディコード】をトークに送信してもらうことで簡単にバディ登録をしてもらうことができます。

| 実際の通知画面 | 連携したバディ一覧 |
|---|---|
| <img width="96%" alt="LINE通知サンプル.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2496320/7971bd30-41c3-20ab-18c3-8c45cc9672a7.jpeg"> | <img width="" alt="スクリーンショット 2022-03-27 23.51.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2496320/7d457094-2bb7-9601-27d8-fc02f38323d5.png"> |


## 使用技術
### バックエンド
- Ruby 3.0.0
- Rails 6.1.4.4

### フロントエンド
- HTML
- CSS
- Javascript(jQuery)
- Bootstrap5

### Gem
- sorcery(認証機能)
- cancancan(認可)
- rails-i18n
- meta-tags
- enum_help
- rails_admin

### インフラ
- Heroku
- Postgre SQL

## こだわったポイント
#### 画面遷移を最小限に

喫煙登録に関する操作は全てajax通信で実装しています。
- 喫煙本数加算
- ステータス変更
- セリフの入れ替え
- キャラクター画像の差し替え
- 人生回数の加算

喫煙を登録した際のステータスの変更やキャラクター画像の変更などで、サクサク切り替えができるようにしました。

| 健康　→　ハゲ | ハゲ　→　がん | がん　→　蘇り |
| ---- | ---- | ---- |
| <img width="100%" alt="to_baldness.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2496320/60e2551a-f899-0c13-f526-0a98fad0413b.gif"> | <img width="100%" alt="to_cancer.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2496320/0dad75e6-1624-7c9b-aa0d-5da8a8474a4f.gif"> | <img width="100%" alt="to_reborn.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2496320/3644be76-cb9e-7c87-d318-79463351df4a.gif"> |


#### LINE API

バディがユーザー登録をせずに通知を受け取れるように実装しました。
現在、バディに登録している人をわかりやすく表示するために、Massageing API のWebhookイベントでバディのLINE IDを取得してバディのLINEの情報を取得しています。

以下の情報をLINEサーバーから取得しています。
- **バディのLINE ID**  (一般ユーザーが使用するIDとは異なります。)
- **プロフィール画像**
- **ユーザーname** 

```ruby:line_bot_controller.rb
response = client.get_profile(event['source']['userId'])
   case response
   when Net::HTTPSuccess then
     contact = JSON.parse(response.body)
     @buddy = Buddy.create!(line_id: event['source']['userId'], 
                            name: contact['displayName'], 
                            buddy_image: contact['pictureUrl'])
   else
     p "#{
          response.code
          } #{
          response.body
          }"
   end
```


## 今後追加したい機能

- LINEのトーク画面からの喫煙登録
- わかりやすいチュートリアル


## おわりに

最後までご覧いただきありがとうございました！
これで完成とまでは言えないですが、ひとまず形にできて非常に嬉しいです泣

このアプリを作成していく中で、改めてコードを書くことはこんなに楽しいんだと再認識しました:joy:
まだまだコードが汚い箇所が多いですが、より深く学習してアップデートしていきたいと思っております！