Design修正-2 #71

naokikubo2 · 2021-03-10T00:49:41Z

概要

前PRに引き続き、デザインの修正と、機能面の修正を行いました。

該当issue

機能
- ゲストログイン機能 (closes ゲストログイン機能 #68 )
- api keyを隠す (closes api keyを隠す #62)
デザイン
- tag関連料理ページのデザイン (closes tag関連料理ページのデザイン #70 )
- デザイン微調整 (closes デザイン微調整 #69 )
- modify flash design (closes modify flash design #67 )
- modfiy user page (closes modfiy user page #66 )
- modify footer design (closes modify footer design #65 )
- modiy 日付入力フォーム(closes modiy 日付入力フォーム #63 )
- 縦長の画像を正方形で表示させる (closes 縦長の画像を正方形で表示させる #60 )
- ログイン前top page design(closes ログイン前top page design #41 )

参考資料

ER図

うまく行っていない事象

概要

日時のカレンダー入力フォームが正常に動作しない時があります。
- はじめてカレンダー入力フォームのあるページに遷移した時　⇨　動作しない
- リロードして表示した時　⇨　動作する
  ( 動作するとは、カレンダーアイコンをクリックしたときに、カレンダーが表示されることを表しています。)

カレンダー表示に使用している技術

modiy 日付入力フォーム #63 にも記載していますが、資料A　を参考にし、datetimepickerというライブラリを使用しています。

解決方法

資料B　こちらに記載されているようにライブラリ自体に問題があり、変数configのnullチェックを追加するという解決方法があります。

聞きたいこと

コンテナ内のjsファイルを修正することになると思うのですが、
./qs bash web でコンテナに入り、vimでファイル修正をするというやり方で合っていますでしょうか。ライブラリを修正するということをしたことがないので、実施前に確認したいです。

naokikubo2 · 2021-03-10T08:17:32Z

app/views/food_records/_search.html.erb

+      <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
+        <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1"  name="q[food_date_gteq]" id="q_food_date_gteq"/>
+        <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
+          <div class="input-group-text"><i class="fa fa-calendar"></i></div>
+        </div>
+      </div>
+      <div>~</div>
+      <div class="input-group date" id="datetimepicker2" data-target-input="nearest">
+        <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker2"  name="q[food_date_lteq]" id="q_food_date_lteq"/>
+        <div class="input-group-append" data-target="#datetimepicker2" data-toggle="datetimepicker">
+          <div class="input-group-text"><i class="fa fa-calendar"></i></div>
+        </div>
+      </div>


https://qiita.com/Anaakikutsushit/items/471a58a6faba6534ef53
を参考に作成。

naokikubo2 · 2021-03-10T08:20:16Z

app/javascript/packs/display_googlemap_api.js

-var script = document.createElement('script');
-script.src = 'https://maps.googleapis.com/maps/api/js?key=' + process.env.GOOGLE_CLOUD_API + '&callback=initMap';
-script.defer = true;
+import { Loader } from '@googlemaps/js-api-loader';


https://developers.google.com/maps/documentation/javascript/overview#js_api_loader_package
上記を参考に、inline loadingからdynamic loadingに変更。

naokikubo2 · 2021-03-10T08:21:31Z

app/uploaders/image_uploader.rb

@@ -22,7 +22,7 @@ def store_dir
  # end

  # Process files as they are uploaded:
-  process resize_to_fit: [200, 300]
+  process resize_to_fill: [300, 300, "Center"]


https://qiita.com/wann/items/c6d4c3f17b97bb33936f
上記を参考に、一辺300pxの正方形を切り抜くことにした。

belion-freee · 2021-03-10T11:15:33Z

日時のカレンダー入力フォームが正常に動作しない時があります。
はじめてカレンダー入力フォームのあるページに遷移した時　⇨　動作しない
リロードして表示した時　⇨　動作する
( 動作するとは、カレンダーアイコンをクリックしたときに、カレンダーが表示されることを表しています。)

事象的にturbolinksが原因の可能性があるので、一度外して再度検証してもらえますか？
外しても大して影響はないです。むしろ外さないで意図しない挙動になるデメリットの方が大きい。
railsサーバーの再起動も忘れずに。
https://qiita.com/bambis13s/items/606ff32b07e4eb61cdb0

上記でも事象が再現される場合は、下記のコメントの対応を試してみてください。
tempusdominus/bootstrap-4#193 (comment)

あと、参照してるライブラリのStarが少ないのと、14カ月間更新ないのがちと不安ではありますね。Issue見るとこのgemを採用したのはモバイル端末でのみカレンダー入力がうまくいかなかったからとのことですが、他に問題を解決すべきライブラリはなさそうだったと言うことですかね。
https://github.com/platonic7/datetimepicker

belion-freee

jsが動かない件以外は大きな問題なさそうです。

belion-freee · 2021-03-10T11:31:45Z

app/models/user.rb

+    find_or_create_by!(email: 'email1@com') do |user|
+      user.password = SecureRandom.urlsafe_base64
+      # user.confirmed_at = Time.now  # Confirmable を使用している場合は必要
+      user.location_id = 1_850_147
+      user.address = '東京'
+      user.latitude = 35.7090259
+      user.longitude = 139.7319925
+    end


外部から入力されたパラメーターで作るのでないなら、seedを使ってguestユーザーを作っておいた方がいいかと思います。

確かにそうですね。
ありがとうございます。対応します。

naokikubo2 · 2021-03-11T02:45:25Z

カレンダー入力の件ですが、turbolinksを除去することで、正常に動作させることができました。今回、カレンダー入力のライブラリにこちらを使った理由としては、「時間も入力可能」「bootstrapと親和性がある」「webpacker管理」という観点で調べたところ、こちらが見つかり、試したところ問題なさそうだったので採用しました。
また、turbolinks除去に伴い画像プレビューがturbolinksを想定して発火させていたので、そちらを修正しました。

belion-freee · 2021-03-12T01:16:58Z

カレンダー入力の件ですが、turbolinksを除去することで、正常に動作させることができました。

よかったです。「この機能を外すことがRailsアプリ開発の第一歩」と揶揄されるくらい微妙な機能なんですよね。

今回、カレンダー入力のライブラリにこちらを使った理由としては、「時間も入力可能」「bootstrapと親和性がある」「webpacker管理」という観点で調べたところ、こちらが見つかり、試したところ問題なさそうだったので採用しました。

了解です。今回はポートフォリオなので問題ないですが、現場だと保守していく必要があるので、ライブラリの選定などの条件に、「定期的にメンテナンスされてるか？」、「広く使われていて信用性に足りるか？」と言う点は入るので、意識だけしておいてください。

belion-freee

LGTM

naokikubo2 · 2021-03-12T13:47:18Z

了解です。今回はポートフォリオなので問題ないですが、現場だと保守していく必要があるので、ライブラリの選定などの条件に、「定期的にメンテナンスされてるか？」、「広く使われていて信用性に足りるか？」と言う点は入るので、意識だけしておいてください。

これらの観点が不足していました。
保守性・信用性を、技術の選定時の観点として取り入れたいと思います。ありがとうございます。

naokikubo2 added 23 commits March 9, 2021 00:30

add ログイン前top page design #41

bbd3bec

modify footer design #65

c4bd37e

modfiy user page #66

4a59536

modify flash design #67

27326bf

add ゲストログイン機能 #68

2263f54

縦長の画像を正方形で表示させる #60

4cb53f4

modify top page #69

43ae9f0

rubocop実行

0df4ba4

色・大きさの修正 #69

6f11b21

modify search of food_record 定数の使用 #69

0c67e1c

modify top page design safariで画像が正方形に表示されるよう対応 #60

f9cc754

rubocop実行

6575411

add google map apiのパッケージ (api keyを隠すため) #62

a7ee196

food_record indexの料理一覧を降順で表示する #69

de4f43c

food_record index フォローユーザの料理では編集ボタンを表示させない #69

44344a7

add Datetime Picker （カレンダー入力フォームの修正) #63

8cf405a

modify food_record index 3列で画像表示するデザイン #69

49d302f

food_share new カレンダー入力フォーム対応 #63

2af1424

コメントのsubmitボタンがフッターに隠れる問題を解決 #69

87f2a04

tag関連料理ページのデザイン #70

10bc974

modify top page 文字 #69

8d35694

modify food_share new カレンダー入力フォーム#63

545abe2

modify rspec test #69

05dbe37

naokikubo2 requested a review from belion-freee March 10, 2021 01:03

naokikubo2 commented Mar 10, 2021

View reviewed changes

belion-freee reviewed Mar 10, 2021

View reviewed changes

remove turbolink (カレンダー入力バグ解決のため) #63

83c03bd

naokikubo2 added 3 commits March 11, 2021 11:35

指摘事項修正（seedにゲストユーザ情報追加）

e6e5092

modify 画像プレビュー機能 (turbolinksを除去したことによる不具合の対応) #63

ca29690

軽微なデザイン修正 #69

367ae37

belion-freee approved these changes Mar 12, 2021

View reviewed changes

naokikubo2 merged commit 6e460e2 into master Mar 12, 2021

naokikubo2 added the phase4 In this phase we develop UI/UX label Mar 13, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Design修正-2 #71

Design修正-2 #71

naokikubo2 commented Mar 10, 2021 •

edited

Loading

naokikubo2 Mar 10, 2021

naokikubo2 Mar 10, 2021

naokikubo2 Mar 10, 2021

belion-freee commented Mar 10, 2021 •

edited

Loading

belion-freee left a comment

belion-freee Mar 10, 2021

naokikubo2 Mar 11, 2021

naokikubo2 commented Mar 11, 2021

belion-freee commented Mar 12, 2021

belion-freee left a comment

naokikubo2 commented Mar 12, 2021

Design修正-2 #71

Design修正-2 #71

Conversation

naokikubo2 commented Mar 10, 2021 • edited Loading

概要

該当issue

参考資料

うまく行っていない事象

概要

カレンダー表示に使用している技術

解決方法

聞きたいこと

naokikubo2 Mar 10, 2021

Choose a reason for hiding this comment

naokikubo2 Mar 10, 2021

Choose a reason for hiding this comment

naokikubo2 Mar 10, 2021

Choose a reason for hiding this comment

belion-freee commented Mar 10, 2021 • edited Loading

belion-freee left a comment

Choose a reason for hiding this comment

belion-freee Mar 10, 2021

Choose a reason for hiding this comment

naokikubo2 Mar 11, 2021

Choose a reason for hiding this comment

naokikubo2 commented Mar 11, 2021

belion-freee commented Mar 12, 2021

belion-freee left a comment

Choose a reason for hiding this comment

naokikubo2 commented Mar 12, 2021

naokikubo2 commented Mar 10, 2021 •

edited

Loading

belion-freee commented Mar 10, 2021 •

edited

Loading