【ポートフォリオ】UROGを開発しました

#どんなアプリを作ったか - 概要

カテゴリー毎にURLを分けて保存できるメモアプリです。
https://www.urog.me/
![00bcn-u0lm8.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407892/43d60069-f80e-b258-b20c-e46309b130a4.gif)



お試しで利用したい方は、以下のemail,passwordを使ってみてください。
(もちろん新しくユーザー登録も可能です)

```
email:    aaaaa@email.com
password: aaaaaaaa
```

github:https://github.com/koao123/urog_app

##アプリ・筆者についての解説

使用言語・フレームワーク：Ruby・Rails・HTML・CSS・BOOTSTRAP
使用ツール: github, heroku, AWS(cloud9)

開発期間：2ヶ月
勉強期間：半年


##このアプリでできること
ユーザー登録
<img width="409" alt="スクリーンショット 2019-12-11 23.45.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407892/d5815fbf-61e9-2c8d-5f45-1198215ff45b.png">

ログイン(ログアウト)
<img width="409" alt="スクリーンショット 2019-12-11 23.45.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407892/ce406b2e-83e5-4d3a-a8dc-86cf856c5e52.png">

カテゴリー毎に分けて投稿が可能
![00bcn-u0lm8.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407892/43d60069-f80e-b258-b20c-e46309b130a4.gif)

高い一覧性で投稿を見ることが可能です。

##なぜこのアプリを作ったか

私は将来役に立つだろう記事(Web)や、気づきを与えられる記事に遭遇すると、将来のために保存するようにしています。しかし実際問題、必要な時にその記事を保管場所から取り出せることがほとんどありません。

この問題が改善され、緊急性が上がり必要になった情報(Webページ)を必要な時に入手できるようになれば、
将来の無駄な時間が削減され自分の成長効率が上がると考えました。

##具体的に何を解決しようとした結果、このアプリを作ったのか

**保存したWeb記事を閲覧する際のハードルとして、「一覧性の低さ」が挙げられる。これを解決するためにこのアプリを作りました。**

ーーー

現状では、記事をどのサイトのどの場所に置いたか分からず、辿り着くまでにかなりの手間がかかるようになっています。

<img width="559" alt="スクリーンショット 2019-12-14 1.06.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407892/49544bf8-d828-d740-8676-51ae22d8c2f2.png">
(記事保存先検索候補が多く、TOPページで全体把握できないため、更にそこから探す必要があります)

そして、理想の状態は
「探すべき場所が一箇所で、その場所にたどり着いた後、保存した記事をすぐに見つけれる」ことです。この状態だと、素早く記事を探せるので、実用性があると考えました。
<img width="559" alt="スクリーンショット 2019-12-14 1.17.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407892/d054834c-1203-b520-c4ec-0455f29ad120.png">

理想から考える現状のギャップとしては
「保存場所に行った後、保存した記事の"一覧性が低い"こと(メモアプリなので、二階層。全て初めのページで見れない)」と「"カテゴリー分け等がされていない"ので、保存ページに行った後、どの範囲を探せば良いか分からない」ということです。

そのため「一ページで全体が把握できるほど一覧性が高く」「カテゴリー分けができる」メモアプリを作ろうと考え、このアプリを作りました。


##どうやって作ったのか

以下の手順で行いました。

サービス企画
理想と現状のギャップを考え、最低限どのような機能を持ったアプリを作ればその課題は解決できそうか？を考えた
↓
必要な機能の洗い出し
DB設計(postテーブル・userテーブル等)
UI設計
↓
バックエンドをRailsで実装
↓
フロントエンドを実装(HTML、CSS)

##その過程で工夫した点

###サービス設計
ユーザーにとってどんな機能があれば使うか？何があれば課題を解決出来そうか？を自分の行動を分解し突き詰めて考えました。(対象ユーザーは自分なので)

###カテゴリー機能
ただURLが投稿できるだけではなく、カテゴリー毎に投稿できるようにした。これにより、URLがカテゴリー毎に探しやすくなる。

###LPに書く文章の工夫
このアプリの価値とターゲットユーザーを考え、ターゲットユーザーが「このサービスいいな」と思うような文章を考えた。


##苦しんだ点(その解決過程)と学び
###正体不明のエラーの対応
特に苦しんだ点は、エラーを読んでも分からず、エラーメッセージを検索してもあまり分からなかったエラーです。こういう時はエラーメッセージが示していることや、検索語のページで特定の方が言っていることが理解できていないことが多かったです(自分は相手が見えている構造を理解できていないため)。なので今後は、行き詰まった時は見える情報から構造を確認し、エラーの対処に当たろうと思います。

###サービス設計と実際の開発との解離
サービス設計ののち、DB設計とUI設計をきっちり行ったが、実際に開発すると、認識できていなかった技術的に難しいなどの問題が多数出てきて設計をやり直すことになりました。当たり前ですが、自分で実装できることの重要さを感じました。


##このアプリの課題
###新たなる問題
このアプリの目的は、「緊急性が低いURLを保存しておき、緊急性が高くなった時に取り出せるようにすること」です。この問題は、このアプリを作ったことによりある程度解決されたと思っているが、私は「保存時にWebアプリを開くのが面倒」と感じてしまっています。
そのため、この問題を解決する必要があると考えています(LINE APIを利用すれば可能・・・？)

###保守性の問題
今回はテストを書いておらず、全く後の改善時のことを考えていないので、取り組もうと思います。

###フロントの実装
フロントは見よう見まねで実装したため、正直なところちゃんとしたcssも書けておらず、レスポンシブ対応さえできていません。Ajax対応もさせる必要があるので、早く勉強して取り組もうと思っています。


##さいごに
実際に動くアプリを完成させれたのは自信になったが、自分の技術レベルの低さを目の当たりにすることになりました。これからも勉強して行きたいと思います・・・。

※これは、就職活動をする上で見ていただく採用担当の方向けに書いた記事です。