20210215・16・17・18_アウトプット（オリジナルアプリ／ランディングページ）

2/15行ったこと　2時間50分

• ランディングページのHTML・CSS作成
  👉大枠のhtmlができた。backgroundのcssが反映されず💦

2/16行ったこと　3時間10分

• imgタグに代用に切替・トップ画像の作成／ランディングページでアプリ説明文の作成
  👉画面を２つに分けるのがいい感じ！（構想通りで嬉しい）

2/17行ったこと　3時間40分

• 説明画像の作成 👉色を揃えたり、縦長の画面を、横長の画像で説明するにはどうしたらいいだろうと考えながら作成！

2/18行ったこと　3時間45分

• カウントできるようになった！！！

• AWSのJavaScriptのエラーに悩む 👉レスポンシブ対応未が課題（大きい画面や小さい画面で見るとビューが崩れる）

新しい発見について（ランディングページ）

（１）構想に近い見本を探す
（２）動画などからhtml・cssの書き方を探して実装

の手順で行ってみようと思った！

（１）構想に近い見本を探す

シンプルかつお洒落な感じが良いなと思いこれにした☺️

rdlp.jp

（２）動画などからhtml・cssの書き方を探して実装

これの動画をみながら大枠で参考になるところをピックアップ☺️

youtu.be

４日間で出来たこと

• Macでみたときのランディングページ はできた！（↓こんな感じ）

• 画面を縮小したり、他の媒体で見るとビューが崩れてしまうので、今後レスポンシブ対応していこうと思った。

苦労していること

• background-imgが上手く反映できなくて苦労した😭今回は、説明できることの方が重要と判断して、img_tagで代用した。

• 相変わらずAWSによるデプロイの時に、JavaScriptによるsrcが反映されない😭後ここさえ上手くいけばAWSのデプロイOKなのに・・（悔しい）

teratail.com

考えたこと

（１）アセットコンパイルが出来ていないからか→再度実施しても上手くいかない
（２）パスが誤っている？→imagesパスに変更してみたが上手くいかない
（３）redirect_toを使って、コントローラーにおいてリロードさせる？→リロードするようにすると非同期通信でなくなってしまった
（４）そもそも、Content-Typeで認識が違うのは何故か？JavaScriptの今回のinsertAdjacentHTMLの構造が悪いのか？→画像だけerbに写してみたりするもそれだとチャット風の呟きができなくなってしまった

悔しいので、優先順位を決めつつ、これからも挑戦していこうと思っている。😭

改善できたこと（習慣カウントの方法）

【結論】

コントローラーにおいてredirect_toを使ったら、リロードせずともカウントされた数字が表示できた！😍

【改善の経緯】

• 機能ができたので、夫に使い方を説明しないで使ってみてもらった。

• そしたら「習慣カウント」の「SAVEボタン」を押した後、「リロードボタン」を押さないと回数が反映されない仕様だったため「え？？え？？あれ？」ってなってリロードしたらすごい数のカウント回数になるという現象が起こった😂（この部分、めっちゃわかりづらいんだなと感じた）

• すぐ出来ることとして、フラッシュ機能を付けようと思った。これをみながら実装。

qiita.com

• そしたら、フラッシュで入れた文字も反映されるけど、リロードせずとも数字がカウントできていることに気づく👀

• createで保存していたものを「new+保存されたらredirect_to」にすることによって、もう一度コントローラーを走らせることが出来る。redirect_toをこんな風に活用できるんだ😂と発見だった💡

  def create
    @habit = Habit.new(habit_params)
    if @habit.save
      redirect_to habits_path
    else
    end
  end

• 非同期通信で今後実装しないと・・と思っていたので解決して嬉しかった！

工夫できたこと（ランディングページの説明画像）

• 普段自分がユーザーの時にアプリの概要がわからないと（そこから得られることは何か？）新規登録をためらうため、ランディングページを作りたいと思った。

• どうやって画像で説明したら、視覚的にわかりやすいか考えながら一つ一つ画像を作った（想定よりも時間がかかってしまった）

• 上記はそのうちの一つ。アプリ上は、縦長のビューだが、ランディングページ上のスペースは横長💦

• どうやったら分かりやすいか色々試してみて”なみなみ”でつなげて横並びにしてみた。

• また「説明文」と「アプリ部分」の見分けがつくように濃い青を使用したが、トップページで使っている同じ色を使って統一感があるようにした。

（と思ったら・・）

• ブログでアウトプットしたら若干色違うことに気づいた😂明日改善しよう（笑）

感想

• backgroundやsrcなど、オリジナルアプリで詰まるところ（弱点）が一緒だと思った。

• ビューで、ローカル環境では反映されるものの本番環境で反映されるかどうかっていうのはエンジニアの方はどこの画面で確認しているんだろう？と思った。（結合テストで「画像がある」というテストを作るのかな？）マスターに反映されないとデプロイできないので、コミット履歴が汚くなったりするのが嫌だなあと感じている。

• エラーで上手くいかなくて仲間に相談した時、親身になってくれてすごく嬉しかった。（エラーがなかなか解決しなくて苦しくても頑張ろうと思えた）本当に存在がありがたい。

• AWSのデプロイで一箇所だけ上手くいかないの悔しいなー。

• オリジナルアプリをきちんと作ってポートフォリオとしてもきちんと説明できるようにしたい気持ちと、長期的にみたら早く就活をして就職先においてバリバリコード書いていた方が成長すると思うのである程度、見切りをつけて応募しようと思う気持ちで、悩んでいる。

• 明日はデブサミなので楽しみだなあ。（きっとゆめみさんに応募したい人が増えるだろうなと感じて、デブサミ前に応募したかったのに間に合わなかった。悔しい。😢）

• 仕事もバタバタしていて眠いながらも、1日ずつランディングページ を進められたということでよしとしよう！

• 明日は今日できなかった志望動機も書こう！