画像をwebpに変換して表示速度を早くしてみた！
はじめに
本記事は、初心者エンジニアな私が趣味で開発しているECサイトの表示速度を早めるために奮闘している様子を備忘録も兼ねて記していきますー！
表示速度の測定ツールについて
Google Chrome 拡張機能である、lighthouse を用いて調べていきます。 表示速度の測定には、lighthouse の他にもPageSpeed Insights というサービスもあるようですが、localhost では利用できないようなので lighthouse を利用しております。
■ lighthouse 公式 chromewebstore.google.com
実際の改善結果
下記のように、表示速度に影響する 「Performance」のスコアが大きく改善されました！
対象となるページがECサイトの商品一覧ページで、多くの画像データが描写されていました。 その商品画像たちを全てwebp に変換するだけでここまで大きな結果を出すことができましたー！
さらに、実際の測定スコアだけではなく、実際にフロントを触ってみても速度改善が実感できたので大喜びです（笑）
比較的簡単に実施できるので、私のような初心者さんがポートフォリオを作成する際は是非試していただければと思いますー！
他にも、表示速度改善をするためにもN+1問題を解消するために奮闘している様子も記事にしているので、是非ご覧いただければと思います！
さいごに
ここまでお読み頂きありがとうございましたー！
この記事がどなたかの為になれば幸いです〜
Figma を使ってECサイトの商品画像をキレイにしてみた。
はじめに
本記事は、初心者エンジニアな私が、趣味で開発しているECサイトの商品画像をFigma を用いてカッコよくしてみた様子を備忘録も兼ねて記していきますー！
最初に結論
商品画像のサイズ、背景の有無、位置を揃えることで全体的に統一感が出て実施前よりも洗練された印象になりました！ （ちなみに、インテリアが好きなので歴史的名作家具と呼ばれる商品をメインに掲載しています。値段が高い。。）
利用したツールについて
Figma というデザインツールに、remove bg という背景透過をするためのプラグインを入れて作成しています。
■Figma 公式 www.figma.com
■remove bg 公式 www.remove.bg
やったこと
- 背景透過
- 商品画像のサイズ調整
- 商品位置の調整
こちらが私が作業しているFigmaのページなのですが、1つの商品画像は [600 × 450] の大きさで統一し、フレームに対して縦横のマージンをできるだけ合わせるように配置しています。 特に、形が左右非対称の場合、違和感が出ないように縦横のマージンを調整するのは意外に難しいです。。（笑）
余談
Figma には以前から触れたことがあったのですが、久しぶりに利用するということで以下のコンテンツで勉強させていただきました。 Youtube で気軽に観ることができるので、おすすめです〜！ （デザイン初心者レベルから、上級者？レベルまでの内容を紹介してくれています！）
さいごに
ここまでお読み頂きまして、ありがとうございましたー！ 簡単なFigma でできることの紹介のような形になってしまいましたが、私のような初心者エンジニアがポートフォリオを作る際に、若干のデザインを凝ることで見栄えが格段に良くなるので結構おすすめです。
この記事が誰かのためになれば嬉しいですー！
rack-mini-profiler を用いてSQL発行数を調べてみた。
はじめに
本記事は、初心者エンジニアな私が、趣味でECサイトを開発する中で、 rack-mini-profiler という gem を用いてSQLの発行数の計測をしていく様子を備忘録も兼ねて記していきますー！
計測しようと思った動機
- そもそも、どのタイミングで、どんなSQLがどのくらい数、発行されているのか？について知りたい
- N+1問題を解消するためのメソッドを仕込んでいるが、本当に解消できているのか分からない...
rack-mini-profiler gem で計測できること
SQLの発行数だけではなく、様々なことが計測できるようです！すごい！
↓公式のリファレンスはコチラ↓ github.com
rack-mini-profiler gem を実際に使ってみた。
こんな感じに、各ページの測定結果が出てきました！（ブラウザのキャッシュが残っていると正常な情報が入手できないようなので、注意が必要とのこと。）
計測しているページは、ECサイトのなかの商品一覧ページなのですが、全部で18回のSQLが発行されているようです。
ただ、これだけだと詳細が分からないので、1商品ごとに発行された各SQLの詳細について見てみます。
1商品ごとに active_storage_attachments から商品に関するデータを取ってきている（SQL発行数：1回/1商品）
1商品ごとに active_storage_blobs から商品画像データを取ってきている（SQL発行数：1回/1商品）
ECサイトのフロント側ソート機能で「商品価格：降順」を選択しているので、商品を順番通り取ってくるためのSQL（SQL発行数：1回）
商品ごとに、正常なSQLが発行されていそうです！
ただ、Viewのレンダリングに少々時間がかかっている様子。。。 商品画像データが重いことが原因な気がします。 次回は、この部分の解決をしていきたい。。。！
余談
今回は、rack-mini-profiler というgem を利用しましたが、純粋にN+1問題だけを確認したい場合は、「Bullet」というgem の方が分かりやすい？みたいです。
ただ、rack-mini-profiler ではより詳しい情報が見ることができるので、active_storage_attachmentsや、active_storage_blobs から各データを取ってきていることなどが分かり、個人的には凄く勉強になったなあ。と思います！
さいごに
ここまでお読み頂きありがとうございました！ 本記事が誰かの助けになれば幸いです〜！
【Github】Personal Access Token が期限切れした際の対処方法
生じた問題
いつものようにGitにてpushを行おうとしたところ、以下のようなエラーが発生。
remote: Invalid username or password.
fatal: Authentication failed for 'https ://github.com/{ユーザー名}/{リポジトリ名}/'
どうやら、githubの認証に引っかかってしまっている様子。。。
さらに、Githubから届いたメールの内容を確認してみると、
「もうすぐ Personal Access Token の有効期限が切れちゃうから、更新してね！」
ちゃんと、Githubさんからメールをしてくれていました。（メールを確認していなかった。。）
このエラーの原因としては、Access Token の有効期限が切れてしまったからです。
有効期限が切れるたびに、更新作業が必要となるので備忘録として記事に残します。
Personal Access Token の更新方法（エラー対処）
1. まず、ブラウザでGitHubにログインします。上記のGithubから届いたメールのリンクから入ると早いです。
2. [Personal access tokens] から、有効期限切れになったToken の 有効期限を選択し直します。有効期限を無制限にすることもできますが、脆弱性に繋がる恐れがある為、有効期限を設定する事が推奨されています。
3.画面下部の [Regenerate token] をクリックし、新しいToken を生成します。（※この際に表示される Token は画面遷移してしまうと表示されなくなってしまうので、必ずどこかにメモる！）
4. ターミナルに移動し、いつものように ”git push” をします。
この際に、パスワード等聞かれて問題なくpush ができればOKです。
【※エラーが出てしまった場合】
まず、現在のリモートURLを確認。
$ git remote -v
origin https://{ユーザー名}@github.com/{ユーザー名}/{リポジトリ名} (fetch)
origin https://{ユーザー名}@github.com/{ユーザー名}/{リポジトリ名} (push)
push したいリモートURLの変更が必要がある場合は、以下のように push先を登録する。（この際にパスワードや設定したTokenが聞かれる。）
$ git remote set-url origin https://{ユーザー名}@github.com/{ユーザー名}/{リポジトリ名}
リモートURLを登録した後に、再度 git push する。
この方法で、問題なくpushすることができました！良かった！
最後に
毎回、忘れた頃に有効期限が切れてしまい、最初のうちはその都度パニックに陥りがちですが、丁寧に見ていけば解決します。
って言っている僕自身、最初のうちは「またエラーだ！最悪、、、！ なんでだあぁ。」となってました（笑）
この記事が誰かの助けになれば幸いです。
ここまで、読んでいただきましてありがとうございました〜！
個人開発をする際に、デザインにおいて意識していること 〜おすすめツール紹介を添えて〜
はじめに
デザイン未経験のエンジニアが個人開発やポートフォリオ作成をする際に、立ちはだかるであろうデザインスキル。
かく言う僕も、初めてポートフォリオを作成した際はデザインが上手く行かず、
「せっかくコードはある程度書けるようになったのに、デザインがダサくて納得行かない、、、！」
というような、状態でした。
ですが、デザインにおける「配色を選び方」を簡単なツールを用いて開発するだけで、あら不思議。そこそこイケてるデザインになってしまった！ということがあったので、備忘録も兼ねてご紹介できればと思い記事にしました。
本記事では、「配色の選び方」について意識している点をおすすめデザインツール紹介と一緒にご紹介いたします！
配色の選定ってどうやって決めてくの？
僕が個人開発をする際は、以下のような流れで配色を考えています。
上記について具体的に説明していきます。
1. サービスのメインカラー選定に関して
個人的には、メインカラーの選定が最も難しいと思っています。
なぜなら、抽象的なサービスのイメージや方向性を「色」という具体的なものに落とし込む必要があるからです。
とは言いつつも、ポートフォリオ作成や個人開発レベルではそこまで考えるのは大変なので、以下の3つのどれかに沿ってメインカラーの選定をすると考えやすいかと思います。
2. 背景色などのベースカラーの選定に関して
白系、グレー系以外の色を背景色に設定する場合は、メインカラーの彩度・明度を落とした色を利用すると、雑味が少なくなり統一感が出やすいです。
具体的には、同一色相で段階的にトーンを変化させることができる、「カラージェネレーター」と呼ばれるものを利用するとイメージに合ったカラーを簡単に見つけることができます。
■僕が使っているカラージェネレーター
下記のように、カラーコードを入力するだけで、トーン違いで表示してくれます！
例えば、"#2D8C3C" をメインカラーとした際に、"#E1F7E4" などを背景色とすると統一感が生まれますね。
3. ボタンなどのコンポーネントのカラーの選定に関して
一般的に、CTAボタン（購入や会員登録に繋がるボタン）のクリック率を高めるためには、「緑、赤、オレンジなどが良い」というように言われています。
ですが、サイト全体のカラーと調和が取れていない場合、確かに目立つボタンになるかもしれませんが、いかにも「購入」に誘導させているように感じ取られてしまいます。
そこで、ベースカラーを選定した際に利用したカラージェネレーターを用いることでサイトに適したカラーを選定することが可能です！
4. テキストのカラーの選定に関して
テキストカラーの選定時に注意することは、以下の2点です。
- ”真っ黒”を使わない
- 背景色とのコントラスト比率をチェックする
真っ黒を使わない理由
真っ黒とは、カラーコードで説明すると、"#000000" に当たるような”強い黒色”です。
このようなカラーを利用してしまうと、黒色が強すぎて周りとの調和を乱してしまったり、目がチカチカとしてしまい視認性が低下することがあります。
カラーコードを利用する経験が無いと、なかなか意識したことのない部分ですが、真っ黒を採用しているサービスはほとんどありません。
背景色とのコントラスト比率をチェックする
背景色に対して、テキストカラーが薄いと読みにくいデザインになってしまいます。
肌感覚でテキストカラーを決めてしまうと、「自分には読みやすいが、他人からは読みにくいデザインになってしまった。。」ということも起きてしまいます。
そこで、コントラスト比率をチェックしてくれるツールを利用することで簡単に読みやすいテキストを作成することが可能です。
先程、ご紹介したカラージェネレーターと同様に以下の写真のように背景色とテキストのカラーを入力するだけで、コントラスト比のチェックをしてくれます。
さらに、太字、標準書体などの文字の太さによっての確認もしてくれるので大変便利です！
以上、「配色の決め方」についてでした！
ここまで読んでいただきまして、ありがとうございました〜！
皆さんの、ご参考になれば嬉しいです。
