【個人開発】『書くこと（ジャーナリング）📝』をもとに、感情の分析や習慣化サポートするアプリをリリースしました！！🎉🎉

# 🔰 はじめに
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032880/bedac600-2ee4-793a-18df-26693dc48a2a.png" width=75%>

『書くこと（ジャーナリング）』をデジタルで実現し，感情の分析や習慣化しやすいようにサポートするサービス【Mikke（ミッケ）習慣ジャーナリング】をリリース致しました。
本サービスへの概要や想いなどを書きましたので、よければ最後までご覧ください。

:::note info
ジャーナリングとは...
「書く瞑想」とも呼ばれ， **頭に浮かんでいることを一定の時間内でただ紙に書いていく**というものです。
:::

【サービスURL】
https://a-mikke.com

:::note warn
※当サービスは，モバイルファーストのサービスになっておりますのでスマホで使用することをおすすめします。
また、PCやiPadでも問題なく使用できます。
:::

# 👣 サービスを作った背景 / ✨ サービスに込めた想い
**自分の感情を言語化したり、思考の癖を理解することが苦手なこともあり、人と1対1で話すのが苦手でした。**

ある本をきっかけに **『書くこと（ジャーナリング）』を毎日するようになり**、感情の言語化だったり、思考の癖、**日々どんなことを考えているか客観的に捉えられるようになり**、人と話すときに話題に困らなくなり、**話すこと自体も好き**になりました。

そこで『書くこと（ジャーナリング）』を多くの人に認知してもらい、 **『書くこと（ジャーナリング）』通じて、日々の生活の解像度が上がり幸せや感謝の気持ちに気づけるきっかけを作りたい**と想い、本サービスを作ろうと思いました。

:::note warn
noteでは、 **「なぜ、今『書くこと』なのか。」** を切り口にサービスに込めた想いについてより詳細に話しています。
- ジャーナリングや日記
- 書くことが好きな方
- 自分の今の感情や思考をどこにしまえばいいかわからない方
特に上記に当てはまる方には、読んでいただけると嬉しいです。
:::

https://note.com/izuha0/n/n10088d618b69

# 🎮 サービス概要
### トップページ
[![Image from Gyazo](https://i.gyazo.com/e12194d6bb1bebb0c294fe2cc9a264f6.gif)](https://gyazo.com/e12194d6bb1bebb0c294fe2cc9a264f6)
ジャーナリングは、書く瞑想とも呼ばれているので、 **ナチュラルで優しいデザインに内省を思わせるイラストを使用して、全体の世界観を再現すること重視しました。**
また、イラストは、unDrawを使用してモダンな雰囲気で直感的にわかりやすいイラストを使用しました。

### テーマ提案機能
[![Image from Gyazo](https://i.gyazo.com/3e0e117b1b4497bed637f8d50abb1496.gif)](https://gyazo.com/3e0e117b1b4497bed637f8d50abb1496)
『書く』といっても、自分ではなかなか何について書けばいいかわからないものです。
そこで、書く内容を提案してくれる機能を作りました。
また、GIFのようにシャッフル機能もあり、シャッフルマークをタッチ（クリック）することで提案あるテーマが変更されます。
書きたい内容があった場合は、そのままテーマ表示部分をタッチ（クリック）することでジャーナリング作成ページに飛びます。

### ジャーナリングの作成 / 編集機能
[![Image from Gyazo](https://i.gyazo.com/193544b12cbfa7a7598dc51fa2c08ee2.gif)](https://gyazo.com/193544b12cbfa7a7598dc51fa2c08ee2)
『文字を書く』という機能以外にタイマー機能や文字を入力するとカウントダウンする機能やそれに合わせてプログレスバーが埋まるようなデザインにして、ユーザーが少しでも **『書いている』という感覚を味わってもらえるよう**にしております。

### 一覧機能
[![Image from Gyazo](https://i.gyazo.com/6a0d927b429c949b9930e4ed95c08c97.gif)](https://gyazo.com/6a0d927b429c949b9930e4ed95c08c97)
一覧ページでは、最新の日付順に並んでいます。また、その投稿ごとに選択した感情や『どのくらい書いたか』なども詳細ページを確認しなくても見えるようなデザインにしてます。
**こだわりは、一覧ページ上部にある、『最近の気持ち』という部分です。ここでは、直近の投稿時の自身の感情を表示しています。**

### トリビア / エビデンス機能
[![Image from Gyazo](https://i.gyazo.com/fc157f47a33e51fe16eea131351073bb.gif)](https://gyazo.com/fc157f47a33e51fe16eea131351073bb)
トリビア / エビデンス機能では、書くことを少しでも継続するきっかけを見つけてもらうために、書くことや瞑想に関するトリビアやエビデンスをジャーナリングが終わったときに表示します。
それらの情報は、　以下のように確認することもできます。

![スクリーンショット 2022-03-19 19.22.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032880/9bc2a0d6-1ea9-74f7-715d-4ffdf8a60821.png)


### 分析機能
![スクリーンショット 2022-03-19 19.23.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032880/39726a5c-389a-5fde-a2e4-ff6a81a20327.png)
分析結果を表示するページでは、2つのデータを表示してます。
1つは、Google Cloud Natural Language APIを使用した感情分析でネガポジの結果を加工したものです。
2つ目は、文字数を加工して、『どのくらいか書いたか』という情報を『クリエイティビティ』と称してデータを表示してます。




# 🔧 使用技術
<img src="https://user-images.githubusercontent.com/77420123/158318062-1a23db6a-2c3d-4a4c-937b-32fcda60da3e.svg" width="75px"><img src="https://user-images.githubusercontent.com/77420123/158318205-376da0e6-a7b8-4ac3-ac0a-fea96f46a947.svg" width="75px"><img src="https://user-images.githubusercontent.com/77420123/158318263-52895546-6b8d-444c-84d2-0b3ae023ffe7.svg" width="75px"><img src="https://user-images.githubusercontent.com/77420123/158318333-e34b8cda-a1e0-40c5-acb9-5db9f32d8a33.svg" width="75px"><img src="https://user-images.githubusercontent.com/77420123/158318496-22415afd-ba21-4996-878f-6404a26a5c74.svg" width="75px"><img src="https://user-images.githubusercontent.com/77420123/158320756-00105329-7c1b-4bff-a95b-45081b526876.svg" width="75px">
<img src="https://user-images.githubusercontent.com/77420123/158318581-a035babd-d665-483b-bf8b-aa7e2ee5a8fe.svg" width="75px"><img src="https://user-images.githubusercontent.com/77420123/158318651-8e8ab40e-71e9-4909-8997-f60d095acd45.svg" width="75px"><img src="https://user-images.githubusercontent.com/77420123/158318969-44e7e15c-0e3e-446d-a4f6-08fa01c62a49.svg" width="75px"><img src="https://user-images.githubusercontent.com/77420123/158318719-d823eb6a-a938-4f8f-9600-2d3f1a6ac435.svg" width="75px"><img src="https://user-images.githubusercontent.com/77420123/158318814-f9e57d17-52d1-4a4d-816f-c038bbd550ce.svg" width="75px"><img src="https://user-images.githubusercontent.com/77420123/158318842-dc3fb64c-e075-443f-9f14-69d03b106933.svg" width="75px">

### バックエンド
- Ruby 2.6.6
- Rails 6.0.4.1
- Rspec 3.10.1
- Google Cloud Natural Language API(感情分析)

### フロントエンド
- HTML
- CSS(SCSS)
- TailwindCSS
- Javascript
- Jquery
- Alpine.js

### インフラ
- Capistrano
- Nginx
- Puma
- AWS
    - EC2
        - Amazon Linux2(t2.micro)
    - ALB
    - RDS
        - PostgreSQL
    - Route53
    - VPC
    - IAM
# 🌏 インフラ構成図
インフラには、AWSを使用しました。
また、Capistranoでデプロイを自動化しています。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032880/b4ccaa1d-b3d7-b12c-1659-d37a08cb06d8.png" width=75%>


# 📂 ER図
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032880/0e180a75-acac-7061-6c17-6a79abb4ad4d.png" width=50%>

### usersテーブル
ユーザーの情報を保持します。
### diariesテーブル
ジャーナリングの結果を保持します。本サービスの主要なテーブルです。
また、1人のユーザーに対して複数のデータを保持するため　「1対多」のアソシエーションを組んでます。
以下のデータを保持します。
- タイトル
- 文章
- クリエイティビティ
- 文字数
- 感情分析結果

### soliloquiesテーブル
1人のユーザーに対して複数のデータを保持するため　「1対多」のアソシエーションを組んでます。
以下のデータを保持します。
- 文章

### diary_sentimentsテーブル
diariesテーブルとsentimentsテーブルの中間テーブルです。

### sentimentsテーブル
感情選択機能の「感情一覧」を保持するテーブルです。

### writes / trivium / evidencesテーブル
各テーブルは、`gem active_hash`で作成されたテーブルです。
動的なデータを扱わないため、`active_hash`で定義しました。
各テーブルは以下のデータを保持しています。
- writesテーブル（書くテーマのおすすめ用のデータを保持します。）
    - 書くテーマのタイトル
- triviumテーブル（トリビアのデータを保持します。）
    - トリビアのタイトル
    - トリビアの詳細
- evidencesテーブル（エビデンスのデータを保持します。）
    - エビデンスのタイトル
    - エビデンスの詳細

:::note warn
active_hashとは...
静的なデータをモデルファイル内に直接記述することで、データベースへ保存せずにデータを取り扱うことができるgemです
:::

# 📌 このサービスのこだわり
### 感情選択機能
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032880/aaa2d433-743f-324a-5cc5-eeae924b8f7a.png" width=20%>

Google Cloud Natural Language APIを用いた感情分析とは別に、ジャーナリング執筆後自分の今の感情を選択できる機能があります。
**AIが分析してくれる感情分析とは別に、自身の感情を選択できることで、あとから見返したときに『書いた（ジャーナリングした）』ときの自分の感情を見返すことができます。**

:::note info
感情選択一覧は、ロバート・プルチックさんの「感情の輪」という理論をベースに作成しております。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032880/71e06bde-045e-96bb-c809-69ebb3ba4c51.png" width=40%>

:::

### 感情の流れを視覚的に見やすい
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032880/23c3e8de-0cf3-8f62-8c02-f05f74709c62.png" width=50%>

過去1週間の感情の流れを直感的に理解しやすいようなデザインにしてます。
**投稿内容がポジティブな傾向にあるほどピンクの幅が大きく表示され、投稿内容がネガティブな傾向にあるほどミズイロの幅が大きくなります。**


# 💡 今後の実装予定
### ヒートマップ機能
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1032880/0d7d5c03-394e-900c-5578-cb489bcc461e.png" width=80%>

**「投稿すると記録される」** Githubの草のような、ヒートマップ機能を追加予定です。
使用技術は、Chart.jsを使用して導入予定です。

### リマインダー機能
指定した時間になったら通知してくれる機能を追加予定です。

### note記事をRSSで自動取得する機能
新しい機能を追加したときにアプリのチュートリアルで説明すると実装に時間がかかるため、新機能リリース時、noteにて使用方法を発信してその記事（マガジン）をnote投稿後、railsのrakeタスクを利用して自動で受け取るような機能を実装予定です。

# 終わりに
この記事を最後までご覧下さり、ありがとうございます！！

このサービスは、 **『書くこと（ジャーナリング）』通じて、日々の生活の解像度が上がり幸せや感謝の気持ちに気づけるきっかけ**を作りたいという想いから作りました。
少しでも多くの方が、本サービスを通じて幸せになることを心から願っております。
また、サービス作り当たって、ご意見・ご感想をいただいた皆様、本当にありがとうございます！！

ニッチな領域ではありますが、今後とも多くの人に『書くこと（ジャーナリング）』の楽しさ・喜びを伝えるために、ユーザーが使いやすい機能をリリースして参ります。

:::note warn
※当サービスは，モバイルファーストのサービスになっておりますのでスマホで使用することをおすすめします。
また、PCやiPadでも問題なく使用できます。
:::

以上、ご覧いただきありがとうございました。

【Github】

https://github.com/KouSei089/Mikke

【Twitter】
https://twitter.com/izuha0

【サービスURL】
https://a-mikke.com