【個人開発】絵文字 “だけ” で日記を書いて友達とシェアするサービスを作りました。

## はじめに

プログラミングの勉強を始めて約半年、初めて作ったアプリ**『emory』**をリリースしました！

日記を習慣化させたい気持ちはあるけれど、忙しい日々の中で三日坊主になってしまう、、
新型コロナウィルスの影響で友達や所属コミュニティのメンバーと直接顔を合わせることが難しくなり、会話をする機会がなくなってしまった、、

**『emory』**は、そんな悩みを抱えている方々に使っていただきたいサービスです！！

https://www.emory.app/


## サービス概要

絵文字 “だけ” を使って日記を書き、友達と日記をシェアすることで、
コミュニケーションのきっかけを作れるサービスです。

**なぜわざわざ『絵文字だけで書くこと』に制限したのか**、2つ理由があります。
① 簡単にそして直感的にその日の感情を表現できるから
② 友達と日記をシェアしたときに、絵文字で書かれた日記なのでプライベートに踏み込みすぎることがないから


では実際に絵文字だけで書いた日記を見てみましょう！
これは私の書いた日記です。どんな一日だったのか想像できますか？？
![スクリーンショット 2021-09-23 13.46.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465735/034490e8-8857-be68-9157-652db6aacae8.png)
絵文字だけしか使っていなくても、どんな日だったのかなんとなくわかりますよね！
そして普通の日記を友達に見られるのは恥ずかしいと思いますが、絵文字で書いているからあまり気にならないと思います！

## こだわったポイント

### マイページ
カレンダーには顔の絵文字を表示して、楽しかった日、悲しかった日がスグにわかるようにしました。また顔の絵文字に合わせて感情のレベルを5段階で色分け（赤、黄、緑、青、紫）して背景色を設定しています。この部分をクリックすると各日記の詳細画面に遷移します。
そしてグラフを使って直近30日の感情の変化をわかりやすく表現しました。後からグラフを見て感情の変化を確認することで自分の振り返りができます。
![top-calendar.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465735/a156d464-34f0-1b89-688f-ab0ce2269b4e.jpeg)


### 日記新規投稿画面
忙しい時は、その日の気分だけでも直感的に記録できるように顔の絵文字をクリックして選択できるようにしました。全ての顔の絵文字を並べてしまうと冗長になって選ぶのが難しいと思ったので、タブを使って感情のタイプ（楽しい、嬉しい、悩む、悲しい、疲れ、怒り）に合わせて分類しました。感情のフォームはラジオボタンを使っています。
余裕がある日は、その日の出来事を絵文字で表現してみましょう！絵文字だけしか入力できないバリデーションを作るのが少し大変でした。正規表現を組み合わせて色々な言語（韓国語やロシア語など）に対してバリデーションをかけています。
![diary-new.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465735/170778a9-e3df-a7e9-7890-1faced2553b4.png)


### 友達の日記一覧
リリースしたばかりの頃は、フォローしている友達の日記を週間カレンダー形式にして表示していました。しかしフォローした順にカレンダーを表示していたので、直近で日記を更新した人に気付くことが難しいという意見をいただきました。なのでTwitterなどのSNSと同様、日記を更新した順（日付が新しい順）に並べて表示する方法に変えました。
![friend-diary.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465735/bde28694-3a72-21c3-d896-e79f69615b62.png)


### テーマカラーの選択
構想の段階では、かわいくて落ち着けるアプリにしたいと思っていたので、ピンクを基本色にしたアプリを作成していました。より多くの人に使ってもらいたいけど、ピンク色のぶりぶりしたかわいいアプリを使うのに抵抗がある人もいるだろうなあと思い、アプリのテーマカラーを選択できるようにしました。今後もっと色の選択肢を増やしたいと思っています。
![スクリーンショット 2021-09-21 23.58.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465735/58d79700-6e2b-6d69-fa17-09f786b9306e.png)




## ER図

![スクリーンショット 2021-09-23 14.00.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465735/1bdc81fa-a919-9eb7-f7f9-312a0cf390a8.png)


## 使用技術
###バックエンド
Ruby 2.7.2
Rails 6.1.3
Rubocop
RSpec

###フロントエンド
HTML
CSS(SCSS)
JavaScript(jQuery)
bootstrap4

###主要なgem
sorcery (認証)
rails_admin (管理画面)
pagy (ページネーション)
meta-tags (メタタグ)
ransack (検索機能)
simple_calendar (カレンダー)
chartkick (グラフ)
simple_form (フォーム)


## 今後実装したいこと

### 日記詳細ページから前の日記、次の日記に遷移できるようにする

現在日記の詳細ページから、他の日の日記をみたいなあと思ったら、一度日記一覧ページに戻ってから、気になる日の日記を選択して表示するという仕様になっています。
詳細ページからそのまま違う日の日記に遷移できたらスマートだなと思うので直していきたいと思っています。

### LINEで日記を投稿する

LINEの公式アカウントを使って毎日夜9時にリマインドを行なっているのですが、LINEのチャットにその日の日記を送信したら更新できるようにしたいです。より簡単に日記を書くことができるようになり、日記のつけ忘れを防げるようになると思うので、導入していきたいと思っています。

## 終わりに
設計の段階からアドバイスしていただいたり、リリース前、リリース後にアプリを使っていただきフィードバックをいただいたり、たくさんの方にサポートいただきました。本当に感謝しています。

ポートフォリオではありますが、自分の欲しいサービスを一から作ってみて、制作の難しさや楽しさ、たくさんの方に使ってもらえる嬉しさを感じました。
これからも技術を追求してより良いアプリを作れるように頑張っていきます。

最後までご覧いただき、ありがとうございました！

🐵Twitter : https://twitter.com/sayo_saru


https://www.emory.app/