「名前を付けて画像を保存」とかを一瞬でできるChrome拡張機能を作った！！

みるみ

色々あって自分のためにChrome拡張機能を作った！

easy-to-save-image-as-animation

…で、真面目に作ったらそれっぽくなったので「せっかくだから Chrome ウェブストアでも公開したろか！」という流れです。

Chrome ウェブストア - ダウンロードページ

上記ページからみなさんも 3 秒でインストールが可能です。即刻アンイストールしてもいいので一瞬だけでも使ってみてください…！

なにができるか

できることは

  • 名前を付けて画像を保存
  • 画像をコピー
  • 画像のリンクをコピー

の３つの操作を「任意のショートカットキー＋任意のクリック方法」にそれぞれ割り当てられるというものです。

例えば

  • Ctrl+Xを押しながら左クリックしたら「名前を付けて画像を保存」する
  • Alt+C+Vを押しながら右クリックしたら「画像のリンクをコピー」する

みたいな具合。こんだけです。

easy-to-save-image-as-screenshot-1

設定もこんだけ！キー設定の入力だけちょっとおしゃれに作った！

PC 作業で画像探しとかを頻繁にする方にはまあお役に立てるかも！と思います～
Mac でも動作確認してます（optionキー混ぜると変なキー名表記になるけどね）。

・「名前を付けて画像を保存」はブラウザ側の「ダウンロード前に各ファイルの保存場所を確認する」設定（chrome://settings/downloads）の挙動に従います：ONであれば「名前を付けて保存」ダイアログボックスが出てくるし、OFFであれば既定のダウンロードフォルダ（デフォルトはC:\Users\[ユーザー名]\Download）に保存されます

・Chromeじゃなくても、拡張機能が利用できるChromium系ブラウザでは同じ動作をするはずです

なんでつくったのか

僕が Chrome は使っていなくて Vivaldi というブラウザにぞっこんであることは読者のみなさんはご存知だと思いますが、最近の Vivaldi のアップデートで右クリックメニューの階層構造が変わってしまったんですよね。

vivaldi-context-menu-items

なんか色々増えたりしているのはまあいいとして、特にリンク付きの画像（a タグで囲まれた画像）を右クリックすると「名前を付けて画像を保存」がすごく深くて位置も下の方になってしまったのでだいぶ困ってました。

vivaldi-context-menu-items-2

こんな感じ。

情報整理としてカテゴライズを綺麗にしてくれたのだと思いますが、作業効率的にはちょっと微妙です。

みるみ
みるみ

ただ、Vivaldi は一度アップデートして従来のものから変えた要素をフィードバックの結果によってはすぐに戻してくれることも多いんだよね～。今回は面倒くさくてまだフォーラムには投稿してません。

とまあそんなわけで、せっかくなので作ってみたというお話でした！

おわりに

なんかご要望あったらめっちゃ受け付けますのでぜひ！！！

あと、ブログで紹介とかしてくれましたらリツイートしにいきますのでこちらもぜひ！！！！

みるみ
みるみ

ブロガー、ソフトウェアエンジニア。

この「みるめも」というブログの筆者です。

@__mirumi__
この記事へのコメント
comment author
匿名
2021/05/02 20:07

本題とは少しズレるかもしれませんがVivaldiは右クリックメニューの編集ができるのでそれで編集してみてはいかがでしょうか？

みるみ
みるみ
2021/05/02 20:54

うおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

　

…ここ数ヶ月で一番ショックでした。。
Vivaldiの設定には人一倍うるさいキャラとかやってたんですが、まさか単に気付いてなかっただけとは。。自分が相変わらずアホで泣けてきます。。ありがとうございます。。。。。。

comment author
匿名
2022/02/15 03:57

コーディングで画像名だけコピーしたいときに便利です！
一つだけ要望ですが、相対パスの画像をsaveしようとすると意図しない絶対パスに勝手に置き換わってしまい、リンクが切れた状態になります。保存のダイアログも出ないです。

みるみ
みるみ
2022/02/15 09:44

こんにちは。
使ってくださってありがとうございます！

たしかに相対パスはテスト漏れてたかもです…。申し訳ないです！！
issue に積んでおいたので時間あるとき対応します、します。。。

comment author
mimiuco
2022/05/20 08:50

mirumiさま
こんにちは！
こちらの拡張機能と文字数カウンターをいつも使っています。
かゆい所に手が届く機能で本当に役立っています。
“こういうのがあったら…”と思ってつくれてしまうのがすばらし過ぎます。
ありがとうございます！！

みるみ
みるみ
2022/05/20 09:43

文字数カウンターまで使ってくださっているんですね！！とても嬉しいです…！
「こういうものがあったら…」を考えるのが趣味です。笑
ありがとうございます～

comment author
mituba
2022/07/10 17:53

Chromebookで使えませんでした

みるみ
みるみ
2022/07/11 09:28

何がどうダメで使えませんでしたか？

comment author
mituba
2022/07/11 17:20

ショートカットキーを押して、左クリックしてもも何も反応がありませんでした（左クリックの設定にしていました）

みるみ
みるみ
2022/07/11 17:43

ご不便をおかけし申し訳ありません。
ブラウザおよびショートカットキーは、PC と各ブラウザ固有の環境とが入り交じるため動作確認がとても難しいです。一般的なユースケースはだいたい試していますが、他の拡張機能やフリーソフトなどによっては動作しない可能性は無限に考えられます。
個人開発のアプリケーションなのでどうかご容赦くださいませ。

comment author
匿名
2022/08/05 12:03

素晴らしいアドオンの開発ありがとうございます！
しかし使用してみたところ、画像が消えてしまい保存ショートカットとして使用できませんでした…
環境によるのでしょうか

リンク先を保存の項目もあると画像などは一度開く必要なく保存ができて便利だなと思ったので追加していただけたら嬉しく思います

みるみ
みるみ
2022/08/06 11:24

ご使用いただきありがとうございます！

ウェブページに画像を表示する仕組みはたくさんのパターンがあるのですが、その全てに対応できてはおりません。画像が消えてしまうのも既知のケースとして確認できています。

「リンク先を保存」は画像などメディアファイル以外の場所で発動してしまうと HTML の保存になってしまうのですよねー。
いずれにしてもご意見ありがとうございました！

comment author
秋野レン
2022/09/24 16:08

素晴らしい拡張機能の開発、ありがとうございます。
webページによって出来たり出来なかったりするみたいですね。

ウマ娘のサポートカードのグラフィック一覧を作りたくて試してみましたが、
下記ページではうまくいきませんでした。
https://gamewith.jp/uma-musume/article/show/255037
https://kamigame.jp/umamusume/page/146156759172553681.html

このページではうまく動作しました。
https://umamusume.wikiru.jp/index.php?サポートカード一覧%2Fレアリティ・タイプ別

ご参考までに

みるみ
みるみ
2022/09/24 22:50

ご使用いただきありがとうございます！

はい、こちらでは何がいけて何がダメなのか技術的な状況を把握してはいるんですが、現実的な実装方法で今の仕様のまま解決する方法が今のところ見つかっておらずこのまま…という感じになっております（この拡張機能の存在価値が自分的にもすぐ怪しくなってしまったのも大きいのですが…）。

いつか、いい感じになります、いつか、、、

comment author
りょう
2022/11/28 23:37

こんな拡張機能、ほしかったです！
ありがとうございます。使わせていただきます！

みるみ
みるみ
2022/11/29 09:44

こちらこそありがとうございます！
ぜひお役立てくださいませ！

comment author
nine
2022/12/15 18:33

すみません、こちらのSave Image Asを使わせていただくと元画像と比べてビットの深さが変わったりサイズが増えたり大きく減ったりして割と劣化してしまうんですが、元画像(Image Size Infoを使ったり通常保存した画像サイズ)を保存する事は出来ないんでしょうか？
(例えばこのページの"設定もこんだけ！キー設定の入力だけちょっとおしゃれに作った！"の元画像情報を見ると23.3KB(23,906)でSave Image Asを使うと54.9KB(56,280))
劣化させずに保存が可能なら一生使いたいような機能だったので質問してみました。

みるみ
みるみ
2022/12/15 22:51

ご利用いただきありがとうございます。
簡易的な画像保存が目的でしたので、多少の劣化等は許容してもらう前提で作っていました。サイズがそこまで増えているのはちょっと予想外でしたが…。

コメントの返信でも何度か書いておりますが、自分としてもこの拡張機能を使っていく意義をほぼ見失ってしまっている状態だったので、そこの品質向上のアップデートというのは現在は考えていません。申し訳ありません。
「一生使いたい」まで言ってくださったのはとても嬉しかったです！

comment author
匿名
2025/03/09 20:40

2025年3月ごろから使えなくなりました・・・・

保存しようとすると画像の読み込みに失敗したときのような挙動になるのですが原因わかるでしょうか？

みるみ
みるみ
2025/03/10 20:12

それはおそらく既知の問題でして、記載してあるとおり「保存できない仕様の画像もある」のパターンではないかと思います。

comment author
りんごとすだち
2025/04/13 18:21

クロームでワンクリックダンローダー？だったかが、サポート外になって使えなくなってたので困ってたのですが、これめちゃくちゃ良いですね！！！
便利なものを作って頂いてとても助かりました。本当にありがとうございました。
2時間ほどネットの海を彷徨ったものの手間のかかるうえに任意の画像を探しにくい一括ダウンローダー系しかなかったので本当にありがたいです。

今後こういった事で困ったら自分でもこうしたアプリを作ってみたいと思ったのですが、素人から勉強を始めた場合、こういった作業時に使う便利なアプリ（内部的な動き自体はある程度単純なもの）を作ることだけに集中した場合、どれくらいの習熟・作業時間で作れるものなのでしょうか？

みるみ
みるみ
2025/04/14 09:34

気に入っていただけてとても嬉しいです！つくってよかったです。

Chrome の拡張は入門者の方が勉強題材にするものとしてはかなり適切な部類ですね。とはいえ、完全に事前知識なしの状態で実際に役に立つものをつくるのは当然難しいと思ったほうがよいです。「ボタンをクリックしたら画面の色を変える」のような実用的ではないものならおそらく（意味は理解できなくとも）コードの切り貼りだけですぐに動きはするでしょう。
いまは AI もあるので調べ物や単に動くコードを出してほしいだけなら一瞬で可能な時代にはなりましたが、やはり人間が理解する工程は必須であると考えるとそこが最後までボトルネックにはなるでしょう（その場合も現在なら AI を使うことをおすすめしますが）。

comment author
りんごとすだち
2025/05/05 11:46

遅くなりましたがお返事ありがとうございます！
ツールは今も毎日仕事でありがたく使わせて頂いています。
なるほど、意味やコードのつながりの理解が一番大きなネックの一つになりそうなんですね。やはり入門者向けの題材であっても相当に難しいと考えておく方が良さそうですね。
もし何か作りたいとなった時はAIも活用しながら地道に取り組んでみたいと思います。

みるみ
みるみ
2025/05/05 13:52

もし取り組まれるなら全力で応援させていただきます！
僕はプログラミングが好きですし、誰かがそれを勉強するのを見ているのもとても好きです。AI ネイティブのこの時代においてはどういう勉強方法がメジャーになっていくのだろう…なども最近ずっと考えるのですよね。
なにかつくられたときはぜひ教えてくださいね。

新しいコメントを書く

  • 必須項目はコメント本文のみですが、お名前はぜひご記入いただけると嬉しいです。
    ※メールアドレスを書いた場合も公開されることはないのでご安心ください。
  • 特定のコメントに返信したい場合は各コメントにある「返信する」ボタンからどうぞ。
  • コメントはこちらで承認の作業を行うまでは表示されません。ご了承ください メール か X からお願いします。