2023/03/19

画像・図形の回転と回転後の位置

• １．システム概要
• ２．画像の回転と位置についての説明
• ３．サンプルファイルの内容
• 　３ー１．ワークシート
• 　３ー２．標準モジュール
• 　　３ー２－１．画像を回転させるコード（そのまま）
• 　　３ー２ー２．画像を回転させるコード（位置補正）
• 　　　３ー２ー２ー１．コードの簡略化１
• 　　　３ー２ー２ー２．コードの簡略化２
• ４．Windows上の画像の回転
• アプリ実例
• サンプルファイル

Excelのシート上に、画像や図形を貼り付ける作業は多くあります。画像を貼り付ける基本的な手順は図０１のように、上部リボンから「挿入」タブ→「図」グループ→「画像」を選び、「画像の挿入元」のどれかを選択して現れたダイアログから、目的の画像ファイルを選択します。

図０１別窓

しかし元の画像の向きが違っていたり、目的に沿って回転したい場合には、向きを修正する必要があります。
Excel上で画像・図形を回転させるためには、図０２のように　回転させたい画像・図形を選択後、「図の形式」タブ→「配置」グループ→「回転」の中から項目を選択します。

図０２別窓

手動での回転手順は以上ですが、実際にやってみると「回転すると左上角の位置がズレる」ことが分かります。これは、画像中心を軸として「画像が回転」している　ように見えますが、正確には「画像の位置は不変」で、「回転プロパティ」が変わる事により「見掛けの画像が回転」しているのです。
今回は、画像・図形の回転させるマクロと併せて、回転時の見掛けの位置ズレを補正する手法を紹介します。

１．システム概要

今回の「サンプルファイル」は、シート上に貼り付けた画像を回転させるものです（図０３）。
なお、今回の回転角度は「90度ずつ」変化させています。

図０３別窓

シート上には黄色いセル色（A列と３行目のセル）でガイドを付けていて、その角（B4セルの左上角）に合わせて画像を配置しています。このガイドは、回転時の画像の位置ズレを分かり易くするものです。
また画像を回転させるボタンは２種類あり、左の「そのまま」ボタンは画像の「回転プロパティ」の値を変更させるだけのものです。右の「位置補正」ボタンは回転プロパティを変更すると同時に、見掛けの画像の左上角を「位置修正」するものです。

「そのまま」ボタンを何回かクリックした様子が図０４です。

図０４別窓

クリックする毎に、時計回りに90度ずつ回転していきます。画像の位置ですが、最初（図０４の一番左）はB4セル左上角に合っていた画像が、回転（90度と270度）させると「ズレが発生」する事が分かるかと思います。

一方、「位置補正」ボタンをクリックしたのが図０５です。こちらは画像の角がセルの角に合ったまま回転しています。

図０５別窓

２．画像の回転と位置についての説明

まずExcelのシートに貼り付けられた画像は、Shapeオブジェクトです。画像だけでなく、図形などもShapeオブジェクトとして扱われます。
そのShapeオブジェクトのプロパティの１つに「Rotation」があります。内容はShapeオブジェクトの「回転角度（deg：時計回り）」で、Single型（単精度浮動小数点型）です。設定時の範囲はSingle型の範囲「-3.4×10³⁸～3.4×10³⁸」ですが、取得時は「0 ≤ Rotation < 360 」の範囲の値となります。


図０６別窓

しかし、Shapeオブジェクトそのものを回転させているのではなく「元のShapeの位置とサイズは維持したまま、回転のプロパティ（Rotation）だけを変更」しているのです。その結果「回転している見掛けのShape」として人間の目に映っているのです。
そのため図０６のように、回転はしても「Shapeとしての位置（Left、Topプロパティ値）」はそのままですし、例え90度傾いても「Width、Heightプロパティ」は元のShapeの値を保持します。

元のShapeと見掛けのShapeが回転により異なることで、人間が「見掛けの左上角」をどこか（今回だとB4セルの左上角）に合わせようとすると、回転時の位置（Left値、Top値）を補正する必要が出てきます。その補正値を示したのが図０７です。


図０７別窓

見掛けのShapeは、その中心を軸として回転しますので、ズレ量は図０７のように「Width と Height の差の半分」になります。ですので「見掛けのShapeの角」を合わせたい場合は、回転量（Rotation値）が90度と270度の場合には「(Width - Height)/2」の値を補正します。
なお、横長のShapeの場合が図０７の左側、縦長の場合は右側になります。横長と縦長では「Width - Height」の値の正負が逆になりますが、見掛けの角と本来のShapeの角の位置も逆になっていますので、どちらが来ても補正式は１種類で問題無いことになります。

３．サンプルファイルの内容

３ー１．ワークシート（Sheet1）

ワークシート上には２つのボタン（フォームコントロール）を配置し、「そのまま」ボタンには標準モジュールの「Rotat_Org1」プロシージャをマクロ登録します。また「位置補正」ボタンには「Rotat_Rev1」プロシージャをマクロ登録します。
なお、「そのまま」ボタンに対応するRotat_Org1とRotat_Org2プロシージャの機能は同一ですので、どちらを登録してもOKです。また「位置補正」ボタンに対応するRotat_Rev1 ～ Rotat_Rev3プロシージャの内容は同一です。

図０８別窓

このワークシート上に画像を貼り付けるのですが、回転した時のズレが分かり易い様に、セル（A列および３行目）を黄色背景色にしています。

３ー２．標準モジュール（Module1）

宣言部（標準モジュールの先頭部）で、回転させる画像の名前を登録（定数宣言）しています。

0. '==========　⇩(1)　画像の名前登録　============
1. Const S As String = "jpg-1" 　 '←回転させるShapeの名前

図０９別窓

１行目「Const S As String = "jpg-1"」では、画像の名前を定数「S」としています。画像の名前の取得方法を、図１０で紹介します。

図１０別窓

名前を確認する１つ目の方法は、画像を選択した時に「名前ボックス（Excelの左上）」に表示される名前（コピペが出来ます）で分かります。
また画像を選択した状態で、「ホーム」タブ→「編集」グループ→「検索と選択」から「オブジェクトの選択と表示」を選択すると、図１０の右側のように「選択」枠が現れます。この枠には、シート上に存在するオブジェクトの一覧が表示されます。選択している画像は、その内の反転しているものになります。こちらもコピペが可能です。

３ー２－１．画像を回転させるコード（そのまま）

「そのまま」ボタンをクリックすると図１１が呼び出され、図０９で定数指定した画像が「現在の回転角に対して、時計回りに90度回転」します。

10. '==========　⇩(2)　そのまま回転　１============
11. Sub Rotat_Org1()
12. 　With Sheets("sheet1").Shapes(S)
13. 　　.Rotation = .Rotation + 90
14. 　End With
15. End Sub

図１１別窓

１２行目「With Sheets("sheet1").Shapes(S)」で、図０９に登録した図形について作業をしていきます。
１３行目「.Rotation = .Rotation + 90」では、右辺の「.Rotation」で「現在の画像の回転量（deg）」を取得し、その値に「90 (deg)」を加えた値を、左辺の「.Rotation」プロパティに設定することで、画像を回転させています。

なお「.Rotation」プロパティに対する設定値はSingle型の範囲ですが、取得する値（Rotation値）は「0 ≤ Rotation < 360 」の範囲です。設定値が360度をオーバーした時は「0度から見た値」になりますし、マイナス値を設定した場合には「0度から時計回りに見た値」となります。例えば「マイナス90度」を設定すると「270度」になります。

「Rotation」プロパティを使用せず「IncrementRotation」メソッドを使用するのが図１２です。機能的には図１１と同一です。

20. '==========　⇩(3)　そのまま回転　２============
21. Sub Rotat_Org2()
22. 　With Sheets("sheet1").Shapes(S)
23. 　　.IncrementRotation 90
24. 　End With
25. End Sub

図１２別窓

２３行目「.IncrementRotation 90」ではIncrementRotationメソッドを使用し、現在の画像角度から「指定した角度だけ図形を変更」しています。正の値を指定すると「指定角度だけ時計回りに回転」し、負の値を指定すると「反時計回りに回転」します。
図１１のRotationプロパティが「絶対的」な角度の指定であるのに対し、IncrementRotationメソッドは「相対的」な角度指定とも言えます。
今回は「90」を指定していますので、時計回りに90度回転していきます。

３ー２ー２．画像を回転させるコード（位置補正）

「位置補正」ボタンをクリックすると図１３が呼び出され、図０９で指定した画像が「現在の回転角に対して、時計回りに90度回転」＋「見掛けの画像の左上角の位置は、回転前と同じ位置」になります。

30. '==========　⇩(4)　回転＋位置補正　１　============
31. Sub Rotat_Rev1()
32. 　Dim Current_Left As Single 　 '←現在の見掛けの画像Left位置
33. 　Dim Current_Top As Single 　 '←現在の見掛けの画像Left位置
34. 　Dim rot As Single 　　　 '←現在の回転角度
36. 　With Sheets("sheet1").Shapes(S)
37. 　　rot = .Rotation
39. 　　If rot Mod 180 = 0 Then
40. 　　　Current_Left = .Left
41. 　　　Current_Top = .Top
42. 　　Else
43. 　　　Current_Left = .Left + (.Width - .Height) / 2
44. 　　　Current_Top = .Top - (.Width - .Height) / 2
45. 　　End If
47. 　　.Rotation = rot + 90
49. 　　If .Rotation Mod 180 = 0 Then
50. 　　　.Left = Current_Left
51. 　　　.Top = Current_Top
52. 　　Else
53. 　　　.Left = Current_Left - (.Width - .Height) / 2
54. 　　　.Top = Current_Top + (.Width - .Height) / 2
55. 　　End If
57. 　End With
58. End Sub

図１３別窓

３６行目「With Sheets("sheet1").Shapes(S)」で、図０９に登録した図形について作業をしていきます。
３７行目「rot = .Rotation」では現在の画像の回転角度を取得し、変数rotに代入します。

３９～４５行目では、回転前の画像の見掛け位置を取得しています。これは不要なのでは？ と思われるかもしれませんが、左上角を合わせた画像が「回転＝ゼロ度」の状態とは限らないからです。
まず３９行目「If rot Mod 180 = 0 Then」で現在の回転角度を調べ、0度と180度の場合は４０～４１行目を実行し、90度と270度の場合は４３～４４行目を実行します。

0度と180度の場合は「元画像と同じ状態」ですので、LeftとTopの位置は「現状の見掛け位置と一致」している事になります。
ですので４０行目「Current_Left = .Left」では、元画像のLeft値を変数Current_Leftに代入します。
４１行目「Current_Top = .Top」では、元画像のTop値を変数Current_Topに代入します。

90度と270度の場合は図０７の状態ですので、左上角の補正式での調整が必要です。
４３行目「Current_Left = .Left + (.Width - .Height) / 2」では、補正値だけLeft位置を動かした値を変数Current_Leftに代入します。例えば横長の画像の場合「.Width - .Height」はプラスの値なので、元画像のLeft位置よりも「右方向（＝Left値を増やす方向）」に動かす必要があるために「＋」で補正式「(.Width - .Height) / 2」をつなぎます。

４４行目「Current_Top = .Top - (.Width - .Height) / 2」では、補正値だけTop位置を動かした値を変数Current_Topに代入します。横長画像の場合「.Width - .Height」はプラスの値なので、元画像のTop位置よりも「上方向（＝Top値を減らす方向）」に動かす必要があるために「－」で補正式「(.Width - .Height) / 2」をつなぎます。

現在の画像の見かけの位置が計算できましたので、４７行目「.Rotation = rot + 90」で画像を現在の状態から90度回転させます。この時、図１２のように「.IncrementRotation 90」を使ってもOKです。

４９～５５行目では、回転後の画像の左上角を「回転前の左上角」に合わせていきます。まず、回転後の画像の向きを４９行目「If .Rotation Mod 180 = 0 Then」で調べます。
向きが「元画像の向き」であれば、見掛けの左上角は「Left、Top」で表せるので、５０行目「.Left = Current_Left」、５１行目「.Top = Current_Top」とLeft・Topプロパティに、直接「回転前の左上角」の位置を指定します。

向きが「元画像から90度・270度回転している」場合（５２行目「Else」）は、５３～５４行目を実行します。
５３行目「.Left = Current_Left - (.Width - .Height) / 2」では、見掛けの画像の左上角を「回転前の左上角」に合わせています。
ピンと来ない場合は、この式の補正式「(.Width - .Height) / 2」を左辺に持っていき、「.Left + (.Width - .Height) / 2 = Current_Left 」とすると少し分かり易くなるかと思います。つまり「見掛けの画像の左上角の位置（＝左辺）」を「回転前の左上角」に合わせる　という意味です。しかし、この様な式はExcelでは受け付けてくれませんので、補正式を右辺に持って行っているのです。
５４行目「.Top = Current_Top + (.Width - .Height) / 2」も同様に、見掛けの画像の左上角を「回転前の左上角」に合わせています。

３ー２ー２ー１．コードの簡略化１

左上角を合わせながら画像を回転させるコードは図１３で充分なのですが、同じような If～Else～End If が２箇所ありますし、そのIf文の内容も左辺と右辺を入れ替えただけの様なコードですので、もっと簡略化できそうです。
また今回は画像を「90度ずつ」回転させていますので180度の前は90度ですし、270度の前は180度と「図１３の前半のIf文と後半のIf文も90度ズレている（≒If文のTrueとFalseが逆）」と分かります。これを少し揃えてみたのが図１４です。

70. '==========　⇩(5)　回転＋位置補正　１-Fix　============
71. Sub Rotat_Rev1_Fix()
72. 　Dim Current_Left As Single 　 '←現在の見掛けの画像Left位置
73. 　Dim Current_Top As Single 　 '←現在の見掛けの画像Left位置
75. 　With Sheets("sheet1").Shapes(S)
76. 　　.Rotation = .Rotation + 90
78. 　　If .Rotation Mod 180 = 0 Then
79. 　　　Current_Left = .Left + (.Width - .Height) / 2
80. 　　　Current_Top = .Top - (.Width - .Height) / 2
81. 　　Else
82. 　　　Current_Left = .Left
83. 　　　Current_Top = .Top
84. 　　End If
86. 　　If .Rotation Mod 180 = 0 Then
87. 　　　.Left = Current_Left
88. 　　　.Top = Current_Top
89. 　　Else
90. 　　　.Left = Current_Left - (.Width - .Height) / 2
91. 　　　.Top = Current_Top + (.Width - .Height) / 2
92. 　　End If
94. 　End With
95. End Sub

図１４別窓

７０行目「.Rotation = .Rotation + 90」で、先に画像を回転させておき、見掛けの左上角を取得する部分（図１３の３９～４５行目）のTrue時の実行側とFalseの実行側を入れ替えています。
True時の実行側 ：図１３の４０～４１行目　→　図１４の７９～８０行目
False時の実行側：図１３の４３～４４行目　→　図１４の８２～８３行目

これでIf文内の実行文を直接まとめる事ができるようになりましたので、以下の４つを整理していきます。
　７９行目「Current_Left = .Left + (.Width - .Height) / 2」と８７行目「.Left = Current_Left」
　８０行目「Current_Top = .Top - (.Width - .Height) / 2」と８８行目「.Top = Current_Top」
　８２行目「Current_Left = .Left」と９０行目「.Left = Current_Left - (.Width - .Height) / 2」
　８３行目「Current_Top = .Top」と９１行目「.Top = Current_Top + (.Width - .Height) / 2」

例えば７９行目と８７行目をまとめると、「.Left = Current_Left = .Left + (.Width - .Height) / 2」となり、「.Left = .Left + (.Width - .Height) / 2」とすることが出来ます。他の行も同様にまとめたのが図１５です。

100. '==========　⇩(6)　回転＋位置補正　２　============
101. Sub Rotat_Rev2()
102. 　With Sheets("sheet1").Shapes(S)
104. 　　.Rotation = .Rotation + 90
106. 　　If .Rotation Mod 180 = 0 Then
107. 　　　.Left = .Left + (.Width - .Height) / 2
108. 　　　.Top = .Top - (.Width - .Height) / 2
109. 　　Else
110. 　　　.Left = .Left - (.Width - .Height) / 2
111. 　　　.Top = .Top + (.Width - .Height) / 2
112. 　　End If
114. 　End With
115. End Sub

図１５別窓

１０４行目「.Rotation = .Rotation + 90」で、画像を90度回転させます。
１０６行目「If .Rotation Mod 180 = 0 Then」で「回転させた後の角度」を調べ、0度または180度の時（＝元の画像と同じ向き）は、１０７行目「.Left = .Left + (.Width - .Height) / 2」と１０８行目「.Top = .Top - (.Width - .Height) / 2」で、左上角の位置を回転前の左上角に合わせます。

回転させた後の角度が90度または270度の時（元画像と縦横が違う）は、１１０行目「.Left = .Left - (.Width - .Height) / 2」と１１１行目「.Top = .Top + (.Width - .Height) / 2」で、左上角の位置を回転前の左上角に合わせます。

３ー２ー２ー２．コードの簡略化２

図１５でも結構簡略化できましたが、１０７～１０８行目と１１０～１１１行目を見比べてみると、補正式「(.Width - .Height) / 2」のプラスマイナスだけが異なっている事に気が付きます。
これを更にまとめたのが図１６です。

120. '==========　⇩(7)　回転＋位置補正　３　============
121. Sub Rotat_Rev3()
122. 　With Sheets("sheet1").Shapes(S)
123. 　　.Rotation = .Rotation + 90
125. 　　.Left = .Left + IIf(.Rotation Mod 180 = 0, 1, -1) * (.Width - .Height) / 2
126. 　　.Top = .Top + IIf(.Rotation Mod 180 = 0, -1, 1) * (.Width - .Height) / 2
127. 　End With
128. End Sub

図１６別窓

１２３行目「.Rotation = .Rotation + 90」では、画像を90度回転させています。

次に図１５の１０７行目と１１０行目を１つの式にするには、異なるプラスマイナスを「Rotationプロパティ値」から得るしかありません。Rotation値を180で割って割り切れた時には「＋」、割り切れなかった時には「－」とする式をIIF関数で作ったのが１２５行目「.Left = .Left + IIf(.Rotation Mod 180 = 0, 1, -1) * (.Width - .Height) / 2」です。

IIf文の条件式「.Rotation Mod 180」がTrueの時（割り切れる時＝回転後の画像の向きは元画像の向きと同一）に「+1」、Falseの時（割り切れない＝回転後の向きは元画像と異なる）に「-1」とし、それを補正値（(.Width - .Height) / 2）に掛けることでプラスマイナスを作り出しています。
Top側の計算式はプラスマイナスが逆なので、１２６行目「.Top = .Top + IIf(.Rotation Mod 180 = 0, -1, 1) * (.Width - .Height) / 2」と、True時とFalse時の各戻り値が「-1」と「+1」となるように、Left側とは逆にしています。

４．Windows上の画像の回転

ここまでExcelに画像を貼り付けた後（Shapeオブジェクトになった後）の処理について説明してきましたが、貼り付ける前の画像ファイル段階でも「画像を回転」させることは可能です。

画像ファイルとしては、「jpg（jpeg）」「bmp」「gif」「tif（tiff）」「png」が良く目にする形式（個人的な見解）だと思います。この中で「エクスプローラ」や「フォト」アプリを使って画像が回転できるのは「jpg」「bmp」「tif」「png」の４つで、「gif」だけは出来ない（＝回転のメニューが出てこない）ようです。gifは複数画像が一体になっている構造の為なのかは分かりません。とりあえず各画像を90度回転（右に回転）させ、エクスプローラ上で表示させたものが図１７です。（gifは、編集で回転させました）

図１７別窓

gifを除いて、どの形式も特に「ファイル保存」の作業はしていませんが、回転させた直後には「更新日時が変わる」ので、たぶん各ファイルが持っているEXIF情報のOrientation属性に相当する「回転プロパティ」を書き換えているのだと思います。
エクスプローラにも表示項目の中に「向き」というものがあるので、図１７の５種の「向き」を確かめてみたのが図１８です。

図１８別窓

向きの値が確認できたのは「jpg形式」のみで、他は表示されません。中でもtifは、標準（＝0度）と表示されています。
しかもExcelでは90度に相当する傾きが、jpgはエクスプローラ上で「270度」と表示されているところを見ると、ExcelとWindowsでは回転方向が逆扱いのようです。

このWindows上で回転させた画像ファイルをExcel上に貼り付けた時には、Shapeオブジェクトとして回転している（＝Rotation値がゼロでは無い）と分かるのも「jpg」のみです。他は全てゼロで、元画像のままExcelに貼り付けられた形となります。

ですので、Excelに貼り付けた直後のShapeオブジェクトとして、Rotationプロパティを意識しておく必要があるのは「jpg形式のみ」とも言えると思います。同時に、その他の画像形式は「上下関係は分からない」とも言えます。

また、様々なアプリを使用して「画像を修正」する場合には少し注意が必要です。例えば「画像のサイズを縮小」する場合、アプリによっては「回転属性が消えてしまう」場合がありそうです（図１９）。

図１９別窓

図１９は、元画像（image1.jpg：スマホを縦にして撮影＝Excelで言う90度回転）を、あるアプリを使ってリサイズしたものですが、回転属性が消えてしまいました。
本サイトの「写真集」では、カメラで撮った写真をリサイズしてた画像を表示に使用していますが、使っているリサイズのアプリにより回転属性が消えてしまう為、正しい向きでは無い画像に対しては「上向きに編集する」という手間が生じています。
別に文句を言っているつもりは無いのですが、アプリを使って画像を編集する場合には注意が必要です。

アプリ実例

「回転させた画像をシートに貼り付ける」

サンプルファイル

画像・図形の回転と回転後の位置（its-032.xlsm）

セキュリティ向上を目的として「インターネット経由でダウンロードしたOfficeファイル（Excel等）のマクロは、既定でブロック」されるようにOfficeアプリケーションの既定動作が変更になりました。（2022年4月より切替開始） 解除の方法については「ダウンロードファイルのブロック解除方法」を参照下さい。