【解説】ポートフォリオ(NotePro)

URL

NotePro

概要

デバイス内に散らばった情報を一つにまとめることできるWEBアプリケーション

制作背景

日頃から私自身で困っていたことを解決したいという考えから作成いたしました。

1.以前Twitterでいいねした投稿がいいねしすぎてすぐに見つからない
2.YouTubeでためになったことをスクショしたはいいものの、フォルダのどこにあるのかすぐに見つからない
3.参照リンクもまとめたい
4.某投稿サイトなどはあるが何かによりすぎて気軽な投稿はできそうにない雰囲気がある
5.まとめたものにいいねをもらいたい！！！！

1.以前Twitterでいいねした投稿がいいねしすぎてすぐに見つからない

Twitterでは気軽にいいねができすぎて、本当に必要な時、いいねした投稿が見つからないことが皆さんも結構あるのではないでしょうか。
また、Twitterアカウント自体複数持っている方も結構いるのではないでしょうか。そうなると尚更、見つかりずらくなります。
noteとしてまとめる時間はかかるものの、
各アカウントのいいね欄を探しに行く時間を考えたら圧倒的に時間削減できると考えたので作ろうと考えました。

2.YouTubeでためになったことをスクショしたはいいものの、フォルダのどこにあるのかすぐに見つからない

私自身結構な頻度でスクショを撮ります。
動画を見ている際、コメントで出てくるところを撮ったりするのですがフォルダには日常生活で撮影した写真などもあり「あの時スクショした画像どこかな？」と探すことが結構な頻度であります。
なのでこういったことも解決できたらいいなと考えておりました。

3.参照リンクもまとめたい

いいねしたツイート、スクリーンショットなどで、
参照元のリンクやページ内にある別サイトのリンクなども「まとめて管理できないかなあ」と考えておりました。

4.某投稿サイトなどはあるが何かによりすぎて気軽な投稿はできそうにない雰囲気がある

某緑（これ）のやつだったりなどいろいろありますが、
私生活の豆知識なども一緒に投稿できる雰囲気ではないので、
もう少しラフで気軽に投稿できるWEBサービスが欲しかったのです。

5.まとめたものにいいねをもらいたい！！！！

単にnoteの作成であればeveronteやiPhoneのメモなどで事足ります。
ですが、投稿するならまとめたものにいいねとかもらいたいと考えておりました。
しかし、SNSぽくしてしまうと、最近では悲しい事件が起きたりしているで
SNSの使い方、モラルなどが強く必要となり、noteツールにそういうことまではもたせたくないと考えていたりしてました。
なのでSNSのいいところだけを取り、誹謗中傷などはないけど、程よく承認欲求も満たされるものを作ろうじゃないか！

という上記の理由から今回のNoteProを作成いたしました。

機能

リッチテキストによる投稿
idのtoken化
タグ機能
Twitterログイン機能
CSVのエクスポート機能
投稿に対するいいね
ゴミ箱機能
プロフィールの画像設定

リッチテキストによる投稿

・summernoteを使用し制作
※日本語の解説などがあまりなく結構時間とられました。

idのtoken化

・user_idやpost_idを乱数保存
皆さんが良く利用するサービスでも

user/12(id)/edit

上記みたいな簡単なIDで表示されているのはあまりないですよね。
簡単なIDにしてしまうと簡単に推測できてしまい悪用されかねないので
乱数（いろいろ種類がある）でトークン化して保守化しました。

タグ機能

・投稿にタグを紐づけることができる

Twitterログイン機能

・Twitterからのログインをすることができる

CSVのエクスポート機能

・自分の投稿のみSCVで吐き出すことが可能

投稿に対するいいね

・他ユーザーのいいと思った投稿にいいねができる

ゴミ箱機能

・不要投稿はゴミ箱に入れることができる

プロフィールの画像設定

・アイコンの設定ができる

使用技術

・言語：Ruby2.5.7
・フレームワーク：Ruby on Rails5.2.4.3
・テスト：RSpec
・フロント：slim(BEM)、Sass、JavaScript(jQuery)、Bootstrap4
・インフラ：AWS(VPC | ELB | EC2 | SES | Route53 ）
・ソースコード管理：GitHub
・その他：Capistranoによる自動デプロイ

環境

開発環境

Vagrant 2.2.4
SQLite 3.7.17

本番環境

MySQL2 5.5.62
Nginx 1.16.1
Puma

使用したgem

gem 'faker'
gem 'pry-byebug'
gem 'rubocop-airbnb'
gem 'slim-rails'
gem 'devise'
gem 'summernote-rails', '~> 0.8.10.0'
gem 'omniauth'
gem 'omniauth-twitter'
gem 'google-analytics-rails'
gem 'meta-tags'
gem 'aws-ses'
gem "refile"
gem 'rails-i18n'
gem 'kaminari', '~> 1.2.1'

なるべく少なくとは思いつつ想定より多くなってしまいました、、

NotePro作成するにあたり定義したものたち

・ワイヤーフレーム
・ER図
・テーブル定義書