LoginSignup
17
15

More than 3 years have passed since last update.

個人でアプリ作りました!(読書管理アプリ)

Posted at

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

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

概要

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

開発経緯

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

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

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

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

操作説明

ユーザー登録・ログイン

ページ右上の新規登録をクリックすると登録画面に移動するので、ニックネームとメールアドレス、パスワードを登録すると全ての機能が使えます。
top2.png

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

登録は面倒だけど試しに使ってみたい方はゲストログインを使ってください
ログインページのゲストでログインをクリックするとゲストアカウントでログインできます。
ログイン.png

本の登録

トップページの本を登録というボタンをクリックすると登録ページに飛びます。
検索ボックスがあるので探したいキーワードを入力して検索マークをクリックすると最大で10件データが表示されます。
87c28087d8e03325f2fc516482c371e8.gif

検索結果の一覧から登録したい本の欄にある登録ボタンをクリックすると登録用の画面が表示されます。
選択ボックスから今の状態(これから読む、読み終わったなど)を選択して、登録ボタンをクリックすると登録が完了します。
完了後、マイページに本が追加されます。
a4da35d08596c6c02200fe89c78c135f.gif

ノート作成

本の画像をクリックすると詳細ページに移動します。
ノート作成をクリックするとノート作成ページに移動するので、そこから内容を記入します。
19e2c4c35e1dba8f495d669bfacb8668.gif

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

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

ノート編集・削除

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

編集 削除

マイページ

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

アクションプラン

アクションプランの進捗を管理することができます。
レベルの変更をクリックするとレベルを0〜5の範囲で変更できます。
最大の5レベルになると完了マークがつくようになっています。
e4180f0f5eaa2e8f06cc936a012f1289.gif

いいね・コメント

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

いいね コメント

使用言語・フレームワークなど

  • Ruby
  • Ruby on Rails
  • JavaScript(jQuery)
  • Haml
  • SCSS
  • Heroku
  • PostgreSQL
  • Github

最後に

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

17
15
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
17
15