【Rotate and Zoom Image】サイト上の画像を回転・反転するアドオン
![「Rotate and Zoom Image」のアイコン](https://www.naporitansushi.com/wp-content/uploads/2023/05/rotate-and-zoom-image_04.png)
この記事では、ウェブサイト上の画像を、好きな方向に回転・反転・拡大縮小できるFirefoxアドオン「Rotate and Zoom Image(ローテート・アンド・ズーム・イメージ)」について書きます。
ウェブサイト上の画像を好きな方向に回転・反転・拡大縮小できるFirefoxアドオンです。本アドオンを導入すると、画像の右クリックメニューに「Rotate and Zoom Image」という項目が表示されます。マウスを乗せると、サブメニューで項目が表示されます。
右に90度回転、左に90度回転、180度回転が用意されています。アニメーションで、くるくる回る面白系アドオンではなく、1回押したら、その分回転してそこで止まるというアドオンです。
ブログ記事や、TwitterなどのSNSに投稿されている写真・画像で、たまーに向きがおかしくて、画像内の文字や絵が見にくい時があります。そういった時に、本アドオンを使うことで、見やすい向きに修正できます。
![「Rotate and Zoom Image」アドオンを使って、向きがおかしい画像を修正した比較画像](https://www.naporitansushi.com/wp-content/uploads/2023/05/rotate-and-zoom-image_22-1000x563.jpg)
ページをリロードすると元に戻るので、一時的に画像内の文字を、正しい向きで読みたいといった場合に役立つと思います。回転だけでなく、左右反転、任意の倍率に拡大縮小機能も用意されています。リセット項目も用意されています。
Firefoxアドオンだけで、Chrome拡張機能はリリースされていません。類似拡張機能があります。
リリース元:Andrej
記事執筆時のバージョン:2.0(2022年3月31日)
インストール方法
Firefoxアドオンストアからダウンロードできます。
本アドオンは、Firefoxアドオンのみの提供で、Chrome拡張機能はリリースされていません。
Chrome・Vivaldi・EdgeなどのChromiumベースのブラウザをご利用の方は、代わりに「Simple Image Rotator(シンプル・イメージ・ローテーター)」などで代用できるかと思います。ただし、本拡張機能は回転機能のみで、反転や拡大縮小機能は実装されていません。
をクリックします。
![「Rotate and Zoom Image」をインストールする手順画像1](https://www.naporitansushi.com/wp-content/uploads/2023/05/rotate-and-zoom-image_01.png)
「追加」をクリックします。
![「Rotate and Zoom Image」をインストールする手順画像2](https://www.naporitansushi.com/wp-content/uploads/2023/05/rotate-and-zoom-image_02.png)
「OK」をクリックします。アドオンのオーバーフローメニュー内に登録されます。
![「Rotate and Zoom Image」をインストールする手順画像3](https://www.naporitansushi.com/wp-content/uploads/2023/05/rotate-and-zoom-image_03.png)
使い方
回転したい画像があるサイトを開きます。試しに、僕が適当に作成した画像を貼っておきます。色々な向きの文章や写真を配置しています。
![ナポリタン寿司が作成した文字や画像の回転がおかしいサンプル画像](https://www.naporitansushi.com/wp-content/uploads/2023/05/simple-image-rotator_05-1000x563.png)
画像上でマウスを右クリックして、コンテキストメニューを表示します。本アドオン導入後は、新しく「Rotate and Zoom Image」項目が追加されています。マウスを乗せると、サブ階層でメニューが表示されます。
![「Rotate and Zoom Image」の右クリックメニュー画像](https://www.naporitansushi.com/wp-content/uploads/2023/05/rotate-and-zoom-image_07-1000x525.png)
以下の項目が用意されています。回転、拡大、反転です。
「Rotate and Zoom Image」で用意されている項目 | |
---|---|
Rotate this image | この画像を回転させる |
Zoom this image | この画像を拡大する |
Flip this image | この画像を反転させる |
Reset all | すべてリセットする |
Open Rotate and Zoom Image options | 本アドオンの設定ページを開く |
画像の回転(Rotate this image)
それぞれの項目にマウスを乗せると、さらに下の階層でメニューが展開されます。「Rotate this image
」の場合、以下の項目が表示されます。
「Rotate and Zoom Image」の「Rotate this image」項目 | |
---|---|
Rotate 90°left | 左に90°回転 |
Rotate 90°right | 右に90°回転 |
Rotate 180° | 180°回転 |
Reset | リセット |
試しに「Rotate 90°left
」をクリックすると、画像が左に90°回転します。その場所からぐるっと回転するので、上下にあるコンテンツ(文字とか)に被ります。
![「Rotate and Zoom Image」アドオンで画像を回転した画像1](https://www.naporitansushi.com/wp-content/uploads/2023/05/rotate-and-zoom-image_08-1000x712.png)
GIF画像を貼っておきます。ヌルッと動いて回転してくれます。
![「Rotate and Zoom Image」アドオンで画像を回転しているGIF画像](https://www.naporitansushi.com/wp-content/uploads/2023/05/rotate-and-zoom-image_09.gif)
向きがおかしくて見にくかった写真が、正しい向きになり、見やすくなりました。回転する方向を間違えた場合は、再度右クリック→「Rotate and Zoom Image」で好きな方向に回転します。
![「Rotate and Zoom Image」アドオンで画像を回転した画像2](https://www.naporitansushi.com/wp-content/uploads/2023/05/rotate-and-zoom-image_12-1000x466.png)
画像の拡大縮小(Zoom this image)
「Zoom this image」で、画像を拡大縮小できます。
![「Rotate and Zoom Image」アドオンで画像を拡大する手順画像1](https://www.naporitansushi.com/wp-content/uploads/2023/05/rotate-and-zoom-image_10-1000x599.png)
「Rotate and Zoom Image」の「Zoom this image」項目 | |
---|---|
Downscale to 25% | 25%に縮小 |
Downscale to 50% | 50%に縮小 |
Downscale to 75% | 75%に縮小 |
Zoom 125% | 125%に拡大 |
Zoom 150% | 150%に拡大 |
Zoom 200% | 200%に拡大 |
Zoom 300% | 300%に拡大 |
Zoom 400% | 400%に拡大 |
Zoom 500% | 500%に拡大 |
Reset | リセット |
「Zoom 500%」にした画像を貼っておきます。
![「Rotate and Zoom Image」アドオンで画像を拡大する手順画像2](https://www.naporitansushi.com/wp-content/uploads/2023/05/rotate-and-zoom-image_13-1000x566.png)
画像の左右・上下反転(Flip this image)
「Flip this image」で画像を左右・上下反転できます。
![「Rotate and Zoom Image」アドオンで画像を反転する手順画像1](https://www.naporitansushi.com/wp-content/uploads/2023/05/rotate-and-zoom-image_15.png)
「Rotate and Zoom Image」の「Flip this image」項目 | |
---|---|
Flip horizontally | 水平方向に反転 |
Flip vertically | 垂直方向に反転 |
「Flip vertically
」にした画像を貼っておきます。僕が作成したサンプル画像では、「僕はナポリタン寿司です
」の部分が反転していて、回転しただけだとうまく読めません。垂直反転することで、見やすくなりました。
![「Rotate and Zoom Image」アドオンで画像を反転する手順画像2](https://www.naporitansushi.com/wp-content/uploads/2023/05/rotate-and-zoom-image_17-1000x516.png)
回転・拡大・反転のリセット(Reset all)
「Reset all」で、全ての変形をリセットできます。
![「Rotate and Zoom Image」アドオンで変形をリセットする手順画像1](https://www.naporitansushi.com/wp-content/uploads/2023/05/rotate-and-zoom-image_14.png)
元の向き、拡大率に戻ります。
![「Rotate and Zoom Image」アドオンで変形をリセットする手順画像2](https://www.naporitansushi.com/wp-content/uploads/2023/05/rotate-and-zoom-image_16-1000x583.png)
設定(オプション)
画像を右クリック→「Open Rotate and Zoom Image options」をクリックします。
![「Rotate and Zoom Image」アドオンの設定にアクセスする手順画像](https://www.naporitansushi.com/wp-content/uploads/2023/05/rotate-and-zoom-image_19.png)
あるいは、アドオンのオーバーフローメニューを開いて、本アドオン右にある設定ボタンをクリック→「拡張機能を管理」をクリックします。「オプション」タブをクリックすると、設定画面を開けます。
![「Rotate and Zoom Image」アドオンの設定画像](https://www.naporitansushi.com/wp-content/uploads/2023/05/rotate-and-zoom-image_11-1000x537.png)
2023年5月に確認したところ、以下の3項目が用意されていました。
「Rotate and Zoom Image」のオプション | |
---|---|
Enable transformation animations | 変形アニメーションを有効にする |
Transformation animation duration | アニメーションの変形時間 |
Highlight transformed images | 変形した画像を強調表示する |
変形アニメーションを有効にする
アニメーション変形時間を調整したい場合は、「Enable transformation animations」にチェックして、任意の時間を入力します。デフォルトでは、0.5秒かけて変形するようになっています。完全にアニメーションが不要な場合は、「0」にします。
![「Rotate and Zoom Image」アドオンの「Enable transformation animations」画像](https://www.naporitansushi.com/wp-content/uploads/2023/05/rotate-and-zoom-image_21.png)
変形した画像を強調表示する
「Highlight transformed images
」にチェックすると、変形(回転・拡大・反転)した画像に、枠線が追加されます。若干目立つようになります。
![「Rotate and Zoom Image」アドオンの「Highlight transformed images」をオンオフした比較画像](https://www.naporitansushi.com/wp-content/uploads/2023/05/rotate-and-zoom-image_20.png)
感想
以上、ウェブサイト上の画像を、好きな方向に回転・拡大縮小・水平/垂直反転できるFirefoxアドオン「Rotate and Zoom Image(ローテート・アンド・ズーム・イメージ)」についてでした。
本アドオン1つで、回転・反転の両方ができます。