【個人開発】積読本撲滅運動！積読ストレスからの解放を手助けするアプリをリリースしました

## 積読本を抱えた経験はありますか？
読もうと思ってもなかなか減っていかない未読の書籍がたまっているという人は、意外と多いことだと思います。
実際、統計結果として積読の経験がある人は **79%** だったという結果が出ています。

https://hon.jp/news/1.0/0/25587

・いざ買ったけど放置している本があるんだけどな〜忙しくて読む時間ない..
・セール期間で安かったから買ってたけど、結局手付かずで放置してるんだよな..
・読みたい気持ちはあるけど、時間取られるしなかなか踏み切れないな..
・買ってから数日は頑張って少しずつ読んでたんだけどな..

様々な理由から積読本は増加傾向に...

### そもそも積読本って何？？？
> 本を購入し、「いつか読もう」と思ってはいるものの、まだ読まずに放置してある（積んである）状態、あるいはその本を意味する語。「（本を）積んでおく」ことをもじった言葉で、シャレが効いていることから、最近作られた造語に思えるかもしれません。しかし、実は明治時代から使われている古い言葉なのです。

## 読書することにメリットってあるの？
- 知識量が圧倒的に増える
- 判断力が身につく
- 想像力が向上する
- 語彙力が増す
- コミュニケーション能力が向上する
- 漢字や文章に強くなる
- 想像力が高まる
- 思考力が身に付く
- ストレス発散になる
- 仕事に役立つ知恵を得られる
- コミュニケーション能力が向上する
- 生き方のヒントを得られる

https://domani.shogakukan.co.jp/410528

https://www.rere.jp/beginners/138192/

## 成功者ほど読書をしている
**ビル・ゲイツ**
彼は年間50冊以上の本を読んでいて、2012年からは毎年、自身のブログ「ゲイツノーツ」（Gates Notes）を通じて、彼が読んだ本の中から数冊を推薦書として公開しています。

**マーク・ザッカーバーグ**
Facebookの共同創業者兼会長兼CEOである彼は、2015年にファイスブックで「2週間に1冊の本を読む」というルールを自分に課したことを伝えています。

**孫正義**
ソフトバンクグループ創業者兼会長兼社長の孫正義は、起業後わずか2年で患った肝炎で入院していた3年半の間に、3000冊もの本を読破したといわれています。
彼の言葉を借りれば、『私は1日に3冊の本を読みます。若いころは1日5時間読んでいました』

https://love-freedom-peace.com/3216/

https://www.businessinsider.jp/post-100406

https://savehack.net/successful-people-are-reading-books


**成功者に近づくには本を読んだらいいのか..**

**いやいや、フルタイムで働いてて忙しいんだよ..**

**そんな1日5時間も時間取れねーよ..**

**って思った方、ちょっと立ち止まって自分の生活を振り返ってみてください**



## 1日6分の時間って、空けられませんか？
イギリスのサセックス大学の研究によって証明されています。その研究によれば、音楽鑑賞やコーヒーブレイクなどよりも、“たった6分間の読書” のほうがストレス解消効果が高かったのだそう。
本に没頭することで、良い意味でストレスや心配事から逃避出来るからだと、研究者は分析しています。

https://studyhacker.net/reading-method-variation

**でもな~分厚い本を読み始めるのが面倒なんだよな..**

## その分厚い本を計算してみました！！

![Component 14 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3139831/6fbc1e37-c83d-671e-36ea-3fb13d9a9d48.png)

# 【結論】

**1日6分、もしくは1日5ページだったら...**

**読書習慣が継続出来て、積読本撲滅が出来るのでは？？**

# 積読本解消 読書管理カレンダーアプリ「積みログ」
前振りが長くなりましたが、こんな発想のもと積読本撲滅運動の一環として開発したのが「積みログ」です。

 **アプリ名　: [積みログ](https://www.tsumilog.net/)** 
[![Image from Gyazo](https://i.gyazo.com/e21db215392bbde33c8a55fcb552a27f.png)](https://gyazo.com/e21db215392bbde33c8a55fcb552a27f)


▼ アプリURL
[積みログ](https://www.tsumilog.net/)

▼ GitHub URL
[GitHub](https://github.com/aya1357/yumelog777)

# 機能1. 計算機能
| 終了日を計算 | 1日のページ数を計算 |
|:------:|:------:|
|[![Image from Gyazo](https://i.gyazo.com/270ac770e3ac04814988de16fe18ace7.gif)](https://gyazo.com/270ac770e3ac04814988de16fe18ace7)|[![Image from Gyazo](https://i.gyazo.com/e411001dc4045e0089c6ee88f3a7ce61.gif)](https://gyazo.com/e411001dc4045e0089c6ee88f3a7ce61)|
|本の総ページ数と1日の目標ページ数を入力したら終了日を計算出来ます。|本の総ページ数と読み終えたい日付を入力すると1日のページ数を計算出来ます。|

- **「どれぐらいのページ数を読んでいったらいいかわからない。」**
- **「このページ数で読み進めていつ終わるんだろうか。」**
煩わしい計算の手間を省くために、 **終了日** と **1日のページ数** を計算する機能をつけています。

# 機能2. 詳細な本の登録
[![Image from Gyazo](https://i.gyazo.com/e5b2e6bc14e58e0ddb942505c18f2aca.gif)](https://gyazo.com/e5b2e6bc14e58e0ddb942505c18f2aca)

- **「金曜日は大体会社終わりに飲み会に行くから時間ないからどうしよう。」**
- **「土日は家族サービスをしないといけないから暇がないんだよな。」**
- **「目次までは読まないからそのページを抜いた総ページ数で記録していきたい。」**

このアプリでの総ページ数は、目次を抜いたページ数から索引を抜いたページ数までで換算しています。
加えて、読む曜日もカスタマイズ出来ます。毎日読むのが厳しい方向けに、曜日の選択機能も付属しています。

# 機能3. カレンダー機能
| 終了日を計算 | 1日のページ数を計算 |
|:------:|:------:|
|[![Image from Gyazo](https://i.gyazo.com/d5932c23c22fcdf44da236d46df52fe1.png)](https://gyazo.com/d5932c23c22fcdf44da236d46df52fe1)|[![Image from Gyazo](https://i.gyazo.com/4ae2f534d2448cb1a9022890340042d2.gif)](https://gyazo.com/4ae2f534d2448cb1a9022890340042d2)|
|読書記録のある日付には本マークがつきます。|今日読む本の一覧や、残りの日数、読むページ数が一目で分かる仕様となっています。|

# 機能4. 読書記録登録前の計算機能
[![Image from Gyazo](https://i.gyazo.com/974a02a1c07c3db1701d4ad508fe21b9.gif)](https://gyazo.com/974a02a1c07c3db1701d4ad508fe21b9)

- **「最近仕事が忙しくて読めない日が続いていたけど、最初に設定した終了日からどれくらい差が出来ているのかわからない。」**
- **「今日読んだ分足したら、あと残り何ページになるんだろうか。」**

最初に設定した終了日を **目標終了予定日** に設定し、その日までに読書記録で登録した読書ページ数を加味して終了日を設定した **自動計算終了日** の2種類を用意しています。
自動計算終了日に関しては、初期の予定より多く読書したら、その分終了日が前倒しになり、もし、初期の予定より少ない読書量の場合は終了日が延長される仕様となっています。
ログの登録前には、その日の読書ページ数を加味した状態で自動計算終了日が算出出来、もし、目標終了予定日より、自動計算終了日が延長された日付であれば、より読書量の促進が出来るように、 **差分を可視化** しています。

# 苦労した点
### Form Objectの実装
読書記録の登録、更新のフォームでのForm Objectの実装に苦労しました。パラメータでの値の受け渡しが上手くいかず、フォームがフォームの数の2倍、3倍になるなどの事態に見舞われる等、エラーの解決に苦労しました。

### フロントエンド(jQuery)とバックエンド(Ruby on Rails)とDB間の値の受け渡しと変更処理(Ajax通信)
カレンダー画面にて任意の日付をクリックした際に、その日付のログの有無をDBの値からチェックして、ログの有無によって、ページ遷移を新規画面か詳細画面かどちらに遷移するか設定する使用に苦労しました。

### 計算機能の実装、リファクタリング
終了日の計算機能の実装とリファクタリングに苦労しました。

# その他、マーケティング対策

## SEO対策
https://trends.google.co.jp/home?geo=JP

![スクリーンショット 2023-04-30 21.25.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3139831/76e3519d-4c53-624c-ad87-18979352aeab.png)
Google Trendsを用いてどのワードが検索数が多いかの分析を行いました。
例) 一番検索数の多い「カレンダー」というワードを積みログでは導入しています。

## ファーストビュー(トップページ)の工夫
よくある起承転結の法則だとユーザーの離脱率が高くなるとのことから、 **結論(このアプリを通して出来ること)を上部に配置** しました。

https://yuki-ikawa.com/story-kishotenketsu/

https://gohako.jp/wake/a-00034/


また、 **ユーザーのアクション** を促すための、 **計算入力機能** をトップページの上部に配置しました。
[【ガチ添削】未経験が作った自作アプリをエンジニア起業家がレビュー！](https://www.youtube.com/watch?v=MZDJmeA-_q0&t=232s)

また、 **ファーストビュー** で **インパクト** を与えるために、CSSアニメーションを取り入れてサイトに **動的な要素を追加** しました。
トップページのヒーローエリアで、「眠っている本 (積読本) を目覚ましで起こし、読書を促す」というメッセージを **視覚的に訴求** するデザインにこだわりました。そのため、3DCGアニメーションを作成するための統合環境アプリケーションである **Blender** を活用し、オリジナルのモデリングを作成しました。さらに、アニメーションを通じて **目覚ましのイメージ** を **効果的に表現** する工夫を加えました。


https://leapy.jp/blog/web-design/impact_design/

https://goworkship.com/magazine/hero-area/

https://visumo.asia/articles/detail/visual-marketing




## その他
Google Analyticsとメタタグの導入もしています。

https://wacul-ai.com/blog/access-analysis/google-analytics-method/what-is-google-analytics/

https://qiita.com/momo1010/items/ccb507c013976846a549

# 主な使用技術

## バックエンド
- Ruby on Rails (7.0.3)
- Ruby (3.1.2)

#### 詳細
- ログイン機能
- ゲストログイン機能
- パスワードリセット機能
- CRUD機能
- フラッシュメッセージ
- content_forを用いてタイトルを動的に設定
- Form Object
- Active Record
- ヘルパーとモデルへのリファクタリング
- jQueryからajaxで送られてきた値をRailsのコントローラーで取得、値操作処理
- gem
    - sorcery(ログイン機能)
    - rubocop(Lintツール)
    - letter_opener_web(メールをブラウザで確認)
    - pry-rails(デバッグ)
    - meta-tags(OGP設定)
    - rails-i18n(国際化)
    - simple_calendar(カレンダー)
    - gem 'mini_magick'(画像加工)
    - gem 'rmagick'(画像加工)


## フロントエンド
- jQuery
- Tailwind CSS

## DB
- PostgreSQL

## インフラ
- Heroku

## モデリング、デザイン
- Blender

# ER図
![tsumilog.drawio (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3139831/d4bfd525-42bf-217a-8978-3589ad3f5dac.png)

# 今後の実装予定
- キャラクターを用意して、ログの記録後にカードでキャラクターとメッセージをランダムで表示する機能
- メモに対してワードで全体検索が出来る機能
- 本の中の分からない単語を登録、一覧表示機能
- 本に対して顔マークなどで理解度を表示。後から読み返したい本を一覧で表示出来る機能
- その日までの勉強の進捗の表示機能
- 1日の勉強した範囲の登録後に、タイムラインに表示する機能
- LINE BOT機能(朝とかに目標ページ数が見れたりやる気が出るメッセージを投入)
- 本のカテゴリー機能


# 最後に
今回のアプリが記念すべき私の **人生初アプリ開発** となりました。ただ単純に自分が欲しいアプリを作っただけですw
感想としては、実装をしていく中で思いの外、機能に関するアイディアが溢れ過ぎて、実装が追いつかない事態に追い込まれました(笑)
(朝7時~夜22時半までの仕事の隙間時間を縫ってのアプリ開発はなかなかハード過ぎました:sweat_smile:)
アプリ制作を通じて自分のスキルアップを実感できたことは、非常に良い経験でした。しかし、同時に実装に時間がかかったり、度重なるエラーの連続に心が折れそうになる等、自身の技術不足を痛感する事もありました。
最後に言えることは、アプリを作る前と作った後では見える世界が違うという事と、作ってみたら意外と出来たという事です。
エンジニア未経験の方で、**エンジニアになれるか不安..自分に本当にアプリ作れるの？？難しすぎるし、自分には到底無理。** って不安になっている方がいましたら、その時間を使って手を動かしたら、意外と楽しく成長している自分に出会えるかもしれないですね。

とりあえず、RUNTEQでプログラミングを学び始めて、1年でwebアプリを開発・リリースが出来たことに祝ということで🎊

本記事が少しでも皆様の参考になれば嬉しいです。
まだまだ未熟な身であるため、温かい目で見て頂けたら幸いです。
最後までご覧頂き、本当にありがとうございました🙇‍♂️