GitHubにアップロードする画像のサイズを一括で変更するスクリプトをChatGPTに作ってもらった。
GitHubのMarkdownの仕様
Qiitaに昔、記事を書いていたのですが、何気にZennで書くのは初めてでした。河原です。
GitHubに画像をアップロードすると、デフォルトで下記のようなフォーマットでMarkdown上で表示されると思います。
<img width="800" src="https://github.com/<ランダムに生成された画像のPath>" />
横長の画像だったら良いのですが、縦長の画像の場合、横が一杯に表示されてしまって、見ずらい場合があります。
特に、縦に長い猫の画像を扱わなければいけない方や、縦型のスクリーンショットを扱う機会が多いアプリエンジニアの方々は、同じ問題に直面したことがあるかと思います。
以前から、毎回、手動で置換していたのですが、面倒だなと思って、少し前に調べてみたところ、下記の記事を見つけました。
しかしここで紹介されているChrome拡張が非公開になってしまっていたので、
自分で同じことをやってみようかと思いました。
とりあえず、すぐ使いたかったので、TampermonkeyのUserScriptを書いてみることにしました。
Tampermonkeyは、簡単にJavaScriptでWebページに機能を追加したり、拡張したりできるツールです。
できたもの
これで、縦長の画像も程よいサイズに調整されました。
導入方法
- 下記のTamperMonkeyのサイトから(Chrome向け↓)
FireFoxの人はFireFox向けのTampermonkeyを導入してください。
- Tampermonkeyを入れたら、下記のリンクをクリックすると、UseScriptのインストール画面が出てくると思うので、そこからダウンロードしてください。(もしうまくいかなかったら、ブラウザを再起動してみてください。)
- 後は、GitHubのエディタの中で、右クリックしてTampermonkeyのメニューの中から [Resize Images] のメニューを押してみてください。
たまに右クリックのメニューの中に表示されないことがあるので、その際はページをリロードしてみてください。
Chrome拡張メニューのTamper monkeyのボタンからも開けます。
Tampermonkeyのダッシュボードからコード自体も変更できるので、置換する際のサイズの調整も可能です。
// Change this value to resize images
const IMAGE_WIDTH = "300"; // 100, 200, 10%, 50%, 80%,
ちなみに
これを作った時は、ほぼコードを書いておらず、試しにChatGPT4に丸投げして作ってみました。
どんな指示で作ってもらったかをスクショで貼っておきます。
実際に挙動を確認するとか含めて30分ほどでとりあえず動くものはできました。
こういったやっつけのツールとかを作るのにはChatGPTがちょうど良いですね。
便利な世の中になりました。
もし改善アイデアなどあったら、リポジトリのissueかPRにお願いします。
良いアイデアがあれば、実装しようと思います。(chatGPTが)
Discussion