個人でアプリ作りました！（読書管理アプリ）

個人で制作・公開したアプリの説明をしようと思います。
実際に使ってみていただけると嬉しいです。

↓こちらからアクセスしてみてください
https://www.booknotes73.com/

## 概要
読んだ本を管理するアプリです。


## 開発経緯
私は2年ほど前から読書をするようになったのですが、本の内容って割とすぐに忘れてしまうんですよね。

最初はマインドマップのアプリ（iThoughts）で内容を記録していました。
しかし、スマホからだと文字の入力が煩わしくデータの管理もしにくかったんですよね。
なので、**PCで簡単に管理できたら良くない？ということでwebアプリを作ることにしました。**

既存サービスのブクログというサイトが似たようなことをやっておりまして、少しでも差別化したいなーと思ったので以下の点を**工夫**しております。

* 本の内容を記録するフォームを項目ごとに分けて書きやすくしている
* 本を読んで感じた実践したいことをアクションプランとしてマイページ上に表示し、進捗具合を管理できるようにしている


## 操作説明
### ユーザー登録・ログイン
ページ右上の新規登録をクリックすると登録画面に移動するので、ニックネームとメールアドレス、パスワードを登録すると全ての機能が使えます。
![top2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605568/a40f415a-f84b-9f1d-6614-7cb563afe1e6.png)


ログインしていなくても他人が書いたノートやユーザー詳細ページは覗くことができます。


登録は面倒だけど試しに使ってみたい方は**ゲストログイン**を使ってください
ログインページの`ゲストでログイン`をクリックするとゲストアカウントでログインできます。
![ログイン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605568/52f7973d-0e2a-1849-e93e-cff943e6f9d0.png)

### 本の登録
トップページの`本を登録`というボタンをクリックすると登録ページに飛びます。
検索ボックスがあるので探したいキーワードを入力して検索マークをクリックすると最大で10件データが表示されます。
![87c28087d8e03325f2fc516482c371e8.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605568/e8cb60ba-8557-b0d7-c3b7-8db9a20c15ae.gif)

検索結果の一覧から登録したい本の欄にある`登録`ボタンをクリックすると登録用の画面が表示されます。
選択ボックスから今の状態（これから読む、読み終わったなど）を選択して、`登録`ボタンをクリックすると登録が完了します。
完了後、マイページに本が追加されます。
![a4da35d08596c6c02200fe89c78c135f.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605568/f74992ac-7dbb-2ce2-98d1-b31c95cf073c.gif)

### ノート作成
本の画像をクリックすると詳細ページに移動します。
`ノート作成`をクリックするとノート作成ページに移動するので、そこから内容を記入します。
![19e2c4c35e1dba8f495d669bfacb8668.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605568/9bc3ef69-7c6b-ecb3-4f5e-9bf68b78a5fc.gif)

ノートには
* 本を読む目的
* 本のポイント
* 感想
* アクションプラン
* メモ
を記録することができます。

**本のポイント**と**アクションプラン**は最大５つまで入力することができます。
入力フォームは`追加する`ボタンをクリックすると追加できます。
フォームを消したい時は`削除する`ボタンまたは`×`ボタンをクリックします。

||
|:-:|
|<img width=50% src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605568/3d04b4d6-c0b5-277d-7aac-485de0effda1.gif">|

### ノート編集・削除
ノート詳細ページから編集のアイコンをクリックすると編集画面に移動できます。
同じくノート詳細ページの削除アイコンをクリックすると削除することができます。

|編集|削除|
|:-:|:-:|
|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605568/7130529d-ba20-37c8-62b2-069ff00f7b33.gif">|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605568/05881880-c026-b3a0-0233-ef413a1ad9db.gif">|


### マイページ
画面右上の`マイページ`をクリックするとマイページに飛びます。マイページでは、
* プロフィールの編集
* オススメ本の編集
* アクションプランの管理
* 本の管理
をすることができます。

### アクションプラン
アクションプランの進捗を管理することができます。
`レベルの変更`をクリックするとレベルを0〜5の範囲で変更できます。
最大の５レベルになると`完了マーク`がつくようになっています。
![e4180f0f5eaa2e8f06cc936a012f1289.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605568/4932623c-8f3c-1884-3553-4d988de6a8bb.gif)


### いいね・コメント
ノートにはいいねやコメントができます。

|いいね|コメント|
|:-:|:-:|
|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605568/19a1fe88-e049-9388-c46e-70174f233954.gif">|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605568/14dcee93-c959-9ab9-5ed5-3972e29d89e9.gif">|


## 使用言語・フレームワークなど
* Ruby
* Ruby on Rails
* JavaScript（jQuery）
* Haml
* SCSS
* Heroku
* PostgreSQL
* Github

## 最後に
使いにくいなどのクレームは大歓迎ですのでコメントください。
追加して欲しい機能などもあればお待ちしています！