twitterの情報発信を助けるWebサービス「EMOEMO」を公開してみて感じた事。〜アプリ開発３週目〜 

#はじめに

初めまして！てらです:relaxed:
簡単に自己紹介をするとプログラミング初学者です。(３ヶ月目)
現在個人開発中のWEBサービス（EMOEMO）のプロトタイプを先週公開し、今日リニューアルしました。
苦労した点や、実際にどの様に考え何を改善したのかアウトプットしてみようと思います。

↓プロトタイプを試しにデプロイし公開した記事です。
[前回の記事](https://qiita.com/teranatu/items/68c4be2715923491554e)

↓Webサービス「EMOEMO」のURLです。
[EMOEMOはこちら](http://emotionalemo.herokuapp.com/)

#結論（問題点=>解決策）

1. モバイルファーストの欠如 => SPユーザーの離脱率向上
2. 利用する際UIへの不安感 => 投稿時のUIを整備する
3. 利用用途の不明瞭性 => アプリケーションの説明を簡略化

上記３点を改善しました。この3つについて今回は書いていきます。

##1.モバイルファーストの欠如 => スマートフォン(SP)ユーザーの離脱率向上

PCのみでの利用を想定していて、スマートフォン（SP）での利用を考えていませんでした。
実際に公開して誰一人登録してくれなかったので、Twitterを利用しているユーザーはスマホでの利用が多い現実を知り、レスポンシブ対応してみる事にしました。

！編集前！
<img width="1440" alt="スクリーンショット 2020-02-11 17.37.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565068/5db9263a-acc5-9ca4-4739-607fe27d99f3.png">

！編集後！
<img width="1440" alt="スクリーンショット 2020-02-21 12.45.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565068/d8c90a25-059d-0018-0e12-106508ee6192.png">

##2.利用する際UIへの不安感 => 投稿時のUIを整備する

UIがぐちゃぐちゃだったので整えました。CSSがバグって一回大変なことにもなりました。汗。
だいぶマシになった気がします。

！編集前！
<img width="1440" alt="スクリーンショット 2020-02-11 17.16.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565068/2b014717-af9b-592d-b6a3-bbac7c68dcf7.png">
<img width="1440" alt="スクリーンショット 2020-02-11 17.55.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565068/9a9a5b10-6be9-23fa-ca26-215cfe0bf045.png">
！編集後！
<img width="1440" alt="スクリーンショット 2020-02-20 17.10.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565068/cd417bf2-7b70-6e09-845c-0b21c07a99d7.png">
<img width="1440" alt="スクリーンショット 2020-02-23 0.24.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565068/bdce2f31-e06a-5cdf-de3f-63f8cd59c287.png">
<img width="1440" alt="スクリーンショット 2020-02-21 12.45.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565068/b265c143-5922-fb8c-ebab-8bd6e504464d.png">

##3.利用用途の不明瞭性 => アプリケーションの説明を簡略化

LP部分の説明が見辛かったので、モダンなサイト真似て見やすい構成にしました。（SPレスポンシブもしています。）

！編集前！
<img width="1440" alt="スクリーンショット 2020-02-11 17.37.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565068/f6a8847b-70f3-4075-8571-e07135003935.png">

！編集後！
<img width="1440" alt="スクリーンショット 2020-02-21 12.45.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565068/d8c90a25-059d-0018-0e12-106508ee6192.png">

<img width="1440" alt="スクリーンショット 2020-02-21 12.45.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565068/c588a049-ef1c-2581-f601-d198f1fab2a1.png">


#技術的に苦労した点
1位
twitterの認証を利用した画像送信関連の実装。
まず、1枚送信できるようにして、それを4枚にする。
その後編集できるようにするのが大変でした。これが一番時間かかりました。

2位
twitter認証でログインする。
コールバックURLの指定がかなり難しく訳わかんないURLの指定をしていてなかなかうまくいきませんでした。
なんとかログインできる様になった瞬間滅茶苦茶嬉しかったのを覚えています。

#使用した技術
フレームワーク： laravel
データベース：　mysql
API：　　　　　twitterAPI
デプロイ：　　　heroku


#WEBアプリを個人開発してみて感じた事

色々試しては見たのですが使ってもらうって滅茶苦茶難しいということを身を持って実感しました。WEBアプリケーションを作るのがまず難しいのに実際にそれを使ってもらうのはまじで激ムズです。

↓勉強した事等を呟いています。
[twitterアカウント](https://twitter.com/aaaa56039257)

↓EMOEMOのリンク
[EMOEMO](http://emotionalemo.herokuapp.com/)


もし最後まで読んでくれている方がいたら嬉しい限りです。
もし気に入ったらいいねをしていただけると嬉しいです！
ありがとうございました。