PRにて、貼り付けた画像のサイズ縮小をコマンド１つでやっちゃおう

5471 ワード

shell レビュー pr tech テキストリンク

PRに、スクショなどの画像を貼り付けた際に、そのまま表示すると大きすぎて困ることありますよね。
そんな時、大抵の人はアップロードした画像のURLをimgタグに入れて、widthを指定して、サイズを調整すると思います。

↓以下のように

しかし、この作業を毎回行うのは面倒ですよね〜
↓なので、コマンド一つでターンッ!!と出来るようにしました

簡単ですので、やってみたい方は続きをぜひ読んでください！

対象マシン

MacOS

すみません、Windows環境を持ち合わせておらず。。。

手順１（Automatorでシェルスクリプト）

標準でインストールされているAutomatorというアプリを起動してください。
これでサービスを作成していきます。

「クイックアクション」を選択します。

次に、「ユーティリティ」 → 「シェルスクリプトを実行（ダブルクリック）」と選択してください。

画像と同じ設定にしてください。

ワークフローが受け取る現在の項目 -> テキスト
選択されたテキストを出力で置き換える -> チェックあり

シェルスクリプト

今回使用するものはこちらです。そのままコピペしてください。
適宜、画像サイズの指定は変更してください。width="XXX"

if [[ $1 == *src=\"* ]] ; then
  src_url=$(echo $1 | grep -o "https:\/\/user-images[^\"]*")
else
  src_url=$(echo $1 | grep -o "https:\/\/user-images[^\)]*")
fi

echo "<img src=\"${src_url}\" width=\"300px\">"

スクリプトの詳細

単純に、アップロードしたURLのみを切り取って、imgタグ内のsrcに埋め込んでいるだけですが一つ注意が必要でした。

それは、アップロード後のテキスト形式が必ず固定ではないことです。
以下の２形式がある模様です。

- 1 （通常はこちらの形式）
![Screenshot_XXXXXXXXXX](https://user-images.githubusercontent.com/XXXXXXXX/XXX-XXX-XXX.png)

- 2 （恐らく、画像にメタ情報があるとこちらの形式...??）
<img width="50" alt="スクリーンショット 2021-12-20 12 00 00" src="https://user-images.githubusercontent.com/XXXXXXXX/XXX-XXX-XXX.png">

問題点は、画像の拡張子の次にくる文字です。
1は)ですが、2は"がきています。

なので、両者のケースをカバーするために、分岐させています。

貼り付けるとこのようになると思います。