herohoroブログ

画像を保存して再利用!?コマンドを使わずPRを受け取る方法_Vercel Limit対策



🔄   2022-08-02

いろいろありました。

アルパカ先生の記事でVercel Limit対策について解説があり、、、

🤔
Google Cloud Runに移行すればOKってことなのかな〜???

と気軽に首を突っ込んだら・・・

そして、アルパカ先生が助けてくれましたm(_ _)m

PRを受けるのは実は初めてなこと。

「作っていただいたコードをどうやったらローカルに入れられるのか?」

といった部分をメインに解説します。

そうです。

「プル」です。

Pullのみです。

タイトルの通り、コマンド、使いません。

VSCodeの拡張機能を使って済ませてしまいます!!!(●´ω`●)ドヤ

概要
  • 本日受けたPR
  • 拡張機能でMergeする
  • 迷子になったら拡張機能
  • MergeしたらPull
  • 本日PRしていただいた内容
    • CSSでこれから調整
  • おまけ:
    • SNSシェア画像PR
    • 今回のOgImageについての試行錯誤ログ

本日受けたPR

画像が読み込まれない場合はページを更新してみてください。

タイトルの通り、アルパカ先生が画像を何度も読み込まないように調整してくださったPR。

自分のリポジトリにPRしてもらえるようにCollaboratorsの設定を事前に済ませておきます。

拡張機能でMergeする

「GitHub Pull Requests and Issues」

という拡張機能をインストール

画像が読み込まれない場合はページを更新してみてください。

するとAll Openフォルダを開くとPRが表示されます。

画像が読み込まれない場合はページを更新してみてください。

ファイルを開くと差分を確認できる。

画像が読み込まれない場合はページを更新してみてください。

コメントも見れます。

画像が読み込まれない場合はページを更新してみてください。

DescriptionからはGitHubのPRページまで確認できます。

画像が読み込まれない場合はページを更新してみてください。

リポジトリのこのページ。

画像が読み込まれない場合はページを更新してみてください。

下へスクロールすると青いボタン「Merge Pull Request」をクリック

画像が読み込まれない場合はページを更新してみてください。

「Create Marge Commit」とあるのでクリックすると

画像が読み込まれない場合はページを更新してみてください。

Mergeが実行されます。

画像が読み込まれない場合はページを更新してみてください。

リポジトリで確認すると無事OpenからMergedに。

画像が読み込まれない場合はページを更新してみてください。

commit履歴を確認すると

画像が読み込まれない場合はページを更新してみてください。

取り込めている。(一安心)

迷子になったら拡張機能

画像が読み込まれない場合はページを更新してみてください。

「Git Graph」を使うとbranchを覗けるので迷子にならずに済みます。(●´ω`●)

branchを確認するにはGit Graphアイコンをクリック

画像が読み込まれない場合はページを更新してみてください。

気になるcommitをクリックすると

画像が読み込まれない場合はページを更新してみてください。

作成者・日付などを表示することができます。

画像が読み込まれない場合はページを更新してみてください。

ファイル名をクリックすると・・・

画像が読み込まれない場合はページを更新してみてください。

差分を見比べられて便利\(^o^)/

画像が読み込まれない場合はページを更新してみてください。

MergeしたらPull

Mergeして終わりかと思えばそうではない様子。

該当箇所を確認しても修正されておらず・・・・

原因はbranchのズレ。

画像が読み込まれない場合はページを更新してみてください。

😨
masterがoriginに出遅れてる。。。

Git Graphアイコン隣の「・・・」マークを開くと【プル】の項目があります。

画像が読み込まれない場合はページを更新してみてください。

【プル】をクリックすると・・・・

画像が読み込まれない場合はページを更新してみてください。

取り込めた\(^o^)/

該当箇所を確認するとしっかり修正されていました\(^o^)/\(^o^)/

本日PRしていただいた内容

componentフォルダ内のblog-parts.tsxで記述されていたサムネ部分をimgへ変更

画像が読み込まれない場合はページを更新してみてください。

このcomponentを使っている箇所に対して画像の保存が追加されました。

記事一覧ページ(1ページ目)
画像が読み込まれない場合はページを更新してみてください。
画像が読み込まれない場合はページを更新してみてください。

記事一覧ページ(2ページ目以降)
画像が読み込まれない場合はページを更新してみてください。
画像が読み込まれない場合はページを更新してみてください。

同じタグの記事一覧ページ
画像が読み込まれない場合はページを更新してみてください。
画像が読み込まれない場合はページを更新してみてください。

記事本文ページ
画像が読み込まれない場合はページを更新してみてください。
画像が読み込まれない場合はページを更新してみてください。

CSSでこれから調整

アルパカ先生からの助言通り画像が親のサイズをはみ出る状態。

画像が読み込まれない場合はページを更新してみてください。

これをうまく調整するために数日試行錯誤していこうと思います⭐

おまけ:

SNSシェア画像PR

今回のOgImageについての試行錯誤ログ

Twitterでは更新のお知らせを随時行っています

興味ある方はLet'sフォロー★

▼ この記事に興味があったら同じタグから関連記事をのぞいてみてね

新着記事を通知したい??


RSSリーダーにatomのリンクを登録すると通知が行くよ🐌

https://herohoro.com/atom

やってみてね(*´ω`*)(*´ω`*)

Twitter Timeline


フォロー大歓迎\(^o^)/