Zenn
🥰

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

2021/12/20に公開
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は"がきています。

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

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

ここでも、画像と同じ設定にしてください。

  • 入力の引き渡し方法 -> 引数として

お疲れ様です。これで、サービスは完成です。
command + Sでサービスの保存をします。

自分は適当に、ImageSizeOptimizerと名付けました。

手順２（作成したサービスをショートカットキーに紐付け）

以下の場所に移動してください。
「システム環境設定」 → 「キーボード」 → 「ショートカット」 → 「サービス」

テキスト項目の中に、先ほど作成したサービスの名前があると思います。（ここでは、ImageSizeOptimizer）

後は、自分の好みでショートカットを追加してください。

自分は、適当に空いているキーにしました。command + \

使い方

記事の冒頭にあるgifのように、貼り付けた画像のMarkdownテキストを選択して、登録したコマンドを叩くと変換されます。

最後に

こんな感じで、選択したテキストを加工したものに変換するコマンドを作れるので、また何か良さそうなものを見つけ次第作ってみます。楽して仕事しましょう。
面白い案があればぜひ教えてください。

〜ターンッ!!と力強く叩くエンジニアを目指して〜

Discussion